/*
Theme Name: K-Pop Comedy Night
Theme URI: https://kpopcomedynight.com
Description: Custom child theme for K-Pop Comedy Night. Built on Astra.
Author: Kira Weir
Author URI: https://kpopcomedynight.com
Template: astra
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kpop-comedy-night
*/

/* ==========================================================================
   1. Design tokens
   Edit these to retune the whole site at once.
   ========================================================================== */
:root {
    /* Brand palette — eyedropped from @kpopcomedynight IG, refine when real assets land */
    --kpop-black:        #0a0414;
    --kpop-purple-deep:  #1a0b2e;
    --kpop-purple:       #2d0f4f;
    --kpop-purple-mid:   #4a1a7a;
    --kpop-magenta:      #7a1f6b;
    --kpop-pink:         #ff2d87;     /* primary CTA */
    --kpop-pink-hot:     #ff4d9d;     /* hover state */
    --kpop-pink-soft:    #f48fb1;
    --kpop-yellow:       #ffd60a;     /* secondary accent, sparingly */
    --kpop-lavender:     #8e7cc3;     /* secondary accent — labels, indexes */
    --kpop-white:        #ffffff;
    --kpop-cream:        #fef7f0;
    --kpop-gray:         #b8a8c4;
    --kpop-gray-dark:    #5a4868;

    /* Semantic */
    --kpop-bg:           var(--kpop-black);
    --kpop-bg-alt:       var(--kpop-purple-deep);
    --kpop-text:         var(--kpop-white);
    --kpop-text-muted:   var(--kpop-gray);
    --kpop-accent:       var(--kpop-pink);

    /* Typography */
    --kpop-font-display: "Unbounded", sans-serif;
    --kpop-font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Unbounded runs much wider than Anton did — sizes are tuned down */
    --kpop-fs-hero:    clamp(2.5rem, 7vw, 5.5rem);
    --kpop-fs-h1:      clamp(1.9rem, 4vw, 3rem);
    --kpop-fs-h2:      clamp(1.5rem, 2.8vw, 2.2rem);
    --kpop-fs-h3:      clamp(1.15rem, 1.6vw, 1.4rem);
    --kpop-fs-body:    1.0625rem;
    --kpop-fs-small:   0.875rem;
    --kpop-lh-tight:   1.05;
    --kpop-lh-snug:    1.25;
    --kpop-lh-body:    1.6;

    /* Spacing */
    --kpop-space-xs:   0.5rem;
    --kpop-space-sm:   1rem;
    --kpop-space-md:   2rem;
    --kpop-space-lg:   4rem;
    --kpop-space-xl:   6rem;
    --kpop-space-2xl:  9rem;

    /* Layout */
    --kpop-container:  1240px;
    --kpop-container-narrow: 880px;
    --kpop-radius-sm:  4px;
    --kpop-radius:     8px;
    --kpop-radius-lg:  16px;

    /* Motion */
    --kpop-ease:       cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ==========================================================================
   2. Base / reset
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--kpop-bg);
    color: var(--kpop-text);
    font-family: var(--kpop-font-body);
    font-size: var(--kpop-fs-body);
    line-height: var(--kpop-lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Force Astra to full-width so our sections bleed edge-to-edge */
body.kpop-front, body.single-kpop_show, body.post-type-archive-kpop_show,
body {
    background-color: var(--kpop-bg);
}

html,
body,
#page,
.site,
.hfeed,
.site-content,
#content,
.ast-container,
.site-content > .ast-container {
    background: var(--kpop-bg) !important;
    background-color: var(--kpop-bg) !important;
}

#page,
.site-content,
#content,
.ast-container,
.site-content > .ast-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Astra's .ast-container is display:flex, so a <main> without an explicit
   width shrink-wraps to its content (~1240px) and pins left on wide screens.
   Cover every template's <main>, not just the front page's #primary. */
.site-content .ast-container > #primary,
.site-content .ast-container > main,
#primary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Kill Astra's default page-title banner on the homepage */
body.home .ast-archive-description,
body.home .entry-header,
body.page-template-front-page .entry-header {
    display: none !important;
}

/* Remove Astra's article wrapper padding/border on our custom templates */
.kpop-front,
.kpop-archive,
.kpop-single-show {
    background: var(--kpop-bg);
}

.kpop-front article,
.kpop-single-show article {
    background: transparent;
    border: none;
    padding: 0;
}

a {
    color: var(--kpop-pink);
    text-decoration: none;
    transition: color 0.2s var(--kpop-ease);
}
a:hover, a:focus {
    color: var(--kpop-pink-hot);
}

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

::selection {
    background: var(--kpop-pink);
    color: var(--kpop-white);
}

/* ==========================================================================
   3. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .ast-archive-title {
    font-family: var(--kpop-font-display);
    color: var(--kpop-white);
    line-height: var(--kpop-lh-tight);
    letter-spacing: 0;
    font-weight: 700;
    margin: 0 0 var(--kpop-space-sm);
}

/* Only the page's top-level title shouts; everything below reads as written */
h1,
.entry-title, .site-title, .ast-archive-title {
    text-transform: uppercase;
}

h1 { font-size: var(--kpop-fs-h1); }
h2 { font-size: var(--kpop-fs-h2); }
h3 { font-size: var(--kpop-fs-h3); line-height: var(--kpop-lh-snug); }

p { margin: 0 0 var(--kpop-space-sm); }
p:last-child { margin-bottom: 0; }

.kpop-eyebrow {
    display: inline-block;
    font-family: var(--kpop-font-body);
    font-size: var(--kpop-fs-small);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kpop-lavender);
    margin-bottom: var(--kpop-space-sm);
}

.kpop-display {
    font-family: var(--kpop-font-display);
    font-size: var(--kpop-fs-hero);
    line-height: var(--kpop-lh-tight);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.kpop-lead {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--kpop-text-muted);
    max-width: 60ch;
}

/* Comedic strikethrough — for "~~convert~~ educate"-style copy bits */
.kpop-strike {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--kpop-pink);
    color: var(--kpop-gray);
    opacity: 0.85;
}

/* ==========================================================================
   Highlight motif — mimics a text selection / marker swipe.
   Reusable on any inline text. box-decoration-break keeps the highlight
   tight to each line when text wraps.
   ========================================================================== */
.kpop-highlight {
    background-color: var(--kpop-pink);
    color: var(--kpop-white);
    padding: 0.1em 0.35em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    /* Slight skew + offset gives it a hand-drawn marker feel, not a sterile rectangle */
    border-radius: 2px;
}

/* Variant: thinner "highlighter pen" stripe — only covers the middle band of text */
.kpop-highlight--marker {
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 18%,
        var(--kpop-pink) 18%,
        var(--kpop-pink) 88%,
        transparent 88%
    );
    color: var(--kpop-white);
    padding: 0 0.2em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    border-radius: 0;
}

/* Variant: outlined / ghost — pink border, transparent fill */
.kpop-highlight--ghost {
    background: transparent;
    color: var(--kpop-pink);
    border: 1.5px solid var(--kpop-pink);
    padding: 0.1em 0.35em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    border-radius: 2px;
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */
.kpop-container {
    width: 100%;
    max-width: var(--kpop-container);
    margin-inline: auto;
    padding-inline: var(--kpop-space-md);
}

.kpop-container--narrow {
    max-width: var(--kpop-container-narrow);
}

.kpop-section {
    padding-block: var(--kpop-space-xl);
}

.kpop-section--tight  { padding-block: var(--kpop-space-lg); }
.kpop-section--loose  { padding-block: var(--kpop-space-2xl); }

.kpop-section--purple { background: var(--kpop-purple-deep); }
.kpop-section--gradient {
    background: linear-gradient(135deg, var(--kpop-purple-deep) 0%, var(--kpop-magenta) 100%);
}

.kpop-grid {
    display: grid;
    gap: var(--kpop-space-md);
}
.kpop-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kpop-grid--3 { grid-template-columns: repeat(3, 1fr); }
.kpop-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .kpop-grid--3, .kpop-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .kpop-grid--2, .kpop-grid--3, .kpop-grid--4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.kpop-btn,
.wp-block-button__link,
.ast-button,
button.ast-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.95em 2em;
    font-family: var(--kpop-font-body);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--kpop-pink);
    color: var(--kpop-white);
    border: 2px solid var(--kpop-pink);
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s var(--kpop-ease),
                background 0.2s var(--kpop-ease),
                box-shadow 0.2s var(--kpop-ease);
    text-decoration: none;
}

.kpop-btn:hover,
.kpop-btn:focus,
.wp-block-button__link:hover {
    background: var(--kpop-pink-hot);
    border-color: var(--kpop-pink-hot);
    color: var(--kpop-white);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(255, 45, 135, 0.5);
}

.kpop-btn--ghost {
    background: transparent;
    color: var(--kpop-white);
    border-color: var(--kpop-white);
}
.kpop-btn--ghost:hover {
    background: var(--kpop-white);
    color: var(--kpop-black);
    border-color: var(--kpop-white);
    box-shadow: none;
}

.kpop-btn--lg {
    padding: 1.15em 2.5em;
    font-size: 1.0625rem;
}

/* ==========================================================================
   6. Hero
   ========================================================================== */
.kpop-hero {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    /* Two-tone palette that blends across the hero: warm magenta on the
       left rising up behind the headline, hot pink anchoring the right
       behind the poster. A small accent glow near the top of the poster
       and an edge vignette do the rest. */
    background:
        /* Tight pink glow right behind the poster's top — gives it lift */
        radial-gradient(ellipse 35% 35% at 75% 25%, rgba(255, 45, 135, 0.18) 0%, transparent 70%),
        /* Bigger soft pink wash on the right, lower */
        radial-gradient(ellipse 60% 70% at 85% 65%, rgba(255, 45, 135, 0.13) 0%, transparent 75%),
        /* Magenta cloud rising from lower-left up behind the headline */
        radial-gradient(ellipse 70% 75% at 18% 45%, rgba(143, 30, 130, 0.34) 0%, transparent 80%),
        /* Deeper purple grounding the bottom-left corner */
        radial-gradient(ellipse 45% 50% at 5% 95%, rgba(74, 26, 122, 0.34) 0%, transparent 70%),
        /* Edge vignette — slightly lighter */
        radial-gradient(ellipse 115% 95% at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.40) 100%),
        var(--kpop-black);
    overflow: visible;
    padding-top: var(--kpop-space-xl);
    padding-bottom: var(--kpop-space-xl);
}

/* Subtle dot texture, only in the center area */
.kpop-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.025) 1px, transparent 0);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent 75%);
}

.kpop-hero__inner {
    position: relative;
    z-index: 2;
}

.kpop-hero__title {
    font-size: var(--kpop-fs-hero);
    line-height: 0.95;
    margin-bottom: var(--kpop-space-md);
    /* Hot-pink gradient on display type */
    background: linear-gradient(135deg, var(--kpop-white) 0%, var(--kpop-pink) 60%, var(--kpop-pink-hot) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kpop-hero__subtitle {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 700;
    color: var(--kpop-gray);
    max-width: 50ch;
    margin-bottom: var(--kpop-space-lg);
}

.kpop-hero__ctas {
    display: flex;
    gap: var(--kpop-space-sm);
    flex-wrap: wrap;
}

/* ----- Two-column hero layout: text left, swap-in poster right -----
   Top-aligned so each column moves independently (padding on one column
   no longer shifts the other). */
.kpop-hero__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kpop-space-lg);
    align-items: start;
}

/* Push only the LEFT (text) column down — translateY moves it visually
   without changing layout, so the poster stays exactly where it is. */
.kpop-hero__text {
    padding-top: var(--kpop-space-2xl);
    transform: translateY(-1.5rem);
}

@media (max-width: 1000px) {
    .kpop-hero__layout {
        grid-template-columns: 1fr;
        gap: var(--kpop-space-xl);
    }
    .kpop-hero__text {
        padding-top: 0;
        transform: none;
    }
    /* Bigger headline on mobile — tuned for Unbounded's wide letterforms */
    .kpop-hero__title {
        font-size: clamp(2.75rem, 12vw, 4.5rem);
    }
}

/* ----- The "laid over" poster -----
   Bigger; spills a substantial portion below the hero's bottom edge.
   Nudged a bit to the right of center so it pulls toward the right edge. */
.kpop-hero__poster-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    perspective: 1000px;
    z-index: 2;
    /* Push down so ~35% of the poster spills past the hero's bottom */
    margin-bottom: -35%;
    transform: translate(3rem, 0%);
}

/* Glowing aura behind the poster — gives it presence on the page */
.kpop-hero__poster-wrap::before {
    content: "";
    position: absolute;
    inset: -14% -18%;
    background:
        radial-gradient(ellipse at center, rgba(255, 45, 135, 0.55) 0%, rgba(122, 31, 107, 0.3) 38%, transparent 70%);
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}

.kpop-poster {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
    /* Full button-reset so no browser/Astra styling tints the poster on hover */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    overflow: visible;
    cursor: zoom-in;
    border: 0 !important;
    outline: none;
    padding: 0 !important;
    margin: 0;
    box-shadow: none !important;
    color: inherit;
    font: inherit;
    line-height: 0;
    max-width: 900px;
    transform: rotate(-3deg);
    transition: transform 0.3s var(--kpop-ease);
    /* 3D depth via drop-shadow filters (follow the image's actual silhouette) */
    filter:
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4))
        drop-shadow(0 18px 36px rgba(0, 0, 0, 0.55))
        drop-shadow(0 36px 64px rgba(0, 0, 0, 0.5))
        drop-shadow(0 12px 40px rgba(255, 45, 135, 0.35));
}

.kpop-poster:hover,
.kpop-poster:focus,
.kpop-poster:active {
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Keyboard-only focus ring for accessibility */
.kpop-poster:focus-visible {
    outline: 3px solid var(--kpop-pink) !important;
    outline-offset: 8px;
}

.kpop-poster:hover {
    transform: rotate(-1deg) scale(1.02);
}

.kpop-poster__img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1200px) {
    .kpop-poster { max-width: 560px; }
}

@media (max-width: 1000px) {
    .kpop-hero__poster-wrap {
        margin-bottom: var(--kpop-space-md);
        /* Reset the desktop right-shift */
        transform: none;
        justify-content: center;
    }
    /* Less aggressive tilt on mobile so the poster doesn't crowd the screen */
    .kpop-poster {
        transform: rotate(-2deg);
    }
}

.kpop-poster:hover {
    transform: rotate(-2deg) translateY(-6px) scale(1.02);
}

/* Real poster image — fills width, keeps its natural aspect ratio (no cropping) */
.kpop-poster__img {
    width: 100%;
    height: auto;
    border-radius: var(--kpop-radius);
    display: block;
}

/* Placeholder when no real poster — uses a fixed 4:5 aspect ratio */
.kpop-poster__placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--kpop-radius);
    display: flex;
    background:
        radial-gradient(ellipse at top right, rgba(255, 45, 135, 0.35), transparent 50%),
        linear-gradient(135deg, var(--kpop-purple-mid) 0%, var(--kpop-purple) 60%, var(--kpop-purple-deep) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--kpop-space-md);
    color: var(--kpop-white);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.kpop-poster__eyebrow {
    font-size: var(--kpop-fs-small);
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--kpop-pink);
    margin-bottom: var(--kpop-space-sm);
}

.kpop-poster__title {
    font-family: var(--kpop-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--kpop-white);
    margin-bottom: var(--kpop-space-sm);
}

.kpop-poster__date {
    font-family: var(--kpop-font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: var(--kpop-pink);
    letter-spacing: 0.05em;
}

.kpop-poster__heart {
    position: absolute;
    bottom: var(--kpop-space-md);
    right: var(--kpop-space-md);
    color: var(--kpop-pink);
    opacity: 0.4;
}
.kpop-poster__heart svg { width: 28px; height: 28px; display: block; }

/* ==========================================================================
   "Next Show Just Announced" callout — uses the same display font as H1,
   bumped to weight 700 for more presence.
   ========================================================================== */
.kpop-poster-callout {
    position: absolute;
    top: -5%;
    left: -5%;
    z-index: 4;

    display: inline-block;
    padding: 0.6em 1em;

    background: var(--kpop-black);
    color: var(--kpop-white);
    border: 1.5px solid var(--kpop-pink);
    border-radius: 2px;

    font-family: var(--kpop-font-display);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;

    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 45, 135, 0.25);
}

.kpop-poster-callout strong {
    color: var(--kpop-pink);
    font-weight: 700;
}

/* ==========================================================================
   "Get Tickets Now" — circular stamp, mostly hanging OFF the right edge so
   it doesn't cover any poster content.
   ========================================================================== */
.kpop-poster-stamp {
    position: absolute;
    /* Hangs well below and right of the poster, spilling past the hero's
       bottom edge into the next section. */
    bottom: -14%;
    right: -14%;
    top: auto;
    left: auto;
    z-index: 4;

    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--kpop-pink);
    color: var(--kpop-white) !important;
    text-decoration: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15em;

    /* Body font — matches the "Do you know K-Pop..." subhead */
    font-family: var(--kpop-font-body);
    line-height: 1;
    text-transform: uppercase;
    text-align: center;

    transform: rotate(-10deg);
    transition: transform 0.3s var(--kpop-ease), box-shadow 0.3s var(--kpop-ease);

    /* Layered shadows: ring outline + deep cast + pink glow */
    box-shadow:
        0 0 0 6px var(--kpop-black),
        0 0 0 8px var(--kpop-pink),
        0 16px 32px rgba(0, 0, 0, 0.55),
        0 8px 24px rgba(255, 45, 135, 0.5);
}

.kpop-poster-stamp:hover {
    transform: rotate(0deg) scale(1.06);
    color: var(--kpop-white) !important;
    box-shadow:
        0 0 0 6px var(--kpop-black),
        0 0 0 8px var(--kpop-pink-hot),
        0 20px 40px rgba(0, 0, 0, 0.6),
        0 10px 30px rgba(255, 45, 135, 0.65);
}

.kpop-poster-stamp__top {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1.15;
    opacity: 0.95;
}

.kpop-poster-stamp__mid {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.15;
}

.kpop-poster-stamp__bot {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1.15;
    margin-top: 0.2em;
}

@media (max-width: 1200px) {
    .kpop-poster-stamp { width: 170px; height: 170px; }
    .kpop-poster-stamp__mid { font-size: 2.1rem; }
    .kpop-poster-stamp__top { font-size: 0.95rem; }
    .kpop-poster-stamp__bot { font-size: 1.05rem; }
}

@media (max-width: 1000px) {
    /* Keep stamp visible on screen — pulled inward from the right edge */
    .kpop-poster-stamp {
        width: 150px;
        height: 150px;
        right: 0;
        bottom: -8%;
    }
    .kpop-poster-stamp__mid { font-size: 1.4rem; }
    .kpop-poster-stamp__top { font-size: 0.85rem; }
    .kpop-poster-stamp__bot { font-size: 0.85rem; }

    /* Callout fully on-screen on mobile */
    .kpop-poster-callout {
        font-size: 1.15rem;
        top: -3%;
        left: 0;
    }
}

@media (max-width: 600px) {
    .kpop-poster-stamp {
        width: 130px; height: 130px;
        right: -2%;
        bottom: -6%;
    }
    .kpop-poster-stamp__mid { font-size: 1.2rem; }
    .kpop-poster-stamp__top { font-size: 0.75rem; }
    .kpop-poster-stamp__bot { font-size: 0.75rem; }
    .kpop-poster-callout {
        font-size: 1rem;
        top: -3%;
        left: 0;
    }
}

.kpop-poster__banner:hover {
    background: var(--kpop-pink-hot);
    color: var(--kpop-white) !important;
    transform: rotate(4deg) scale(1.04);
}

.kpop-poster__banner-arrow {
    transition: transform 0.3s var(--kpop-ease);
}

.kpop-poster__banner:hover .kpop-poster__banner-arrow {
    transform: translateX(4px);
}

@media (max-width: 1000px) {
    .kpop-poster { max-width: 440px; margin-inline: auto; }
}

/* Reduced grain — barely there, just kills color banding on the gradients */
.kpop-hero::after {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}

/* ==========================================================================
   7. Next Show / event card
   ========================================================================== */
.kpop-next-show {
    display: inline-flex;
    align-items: center;
    gap: var(--kpop-space-md);
    padding: var(--kpop-space-sm) var(--kpop-space-md);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--kpop-radius);
    backdrop-filter: blur(8px);
    margin-bottom: var(--kpop-space-md);
}

.kpop-next-show__pulse {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--kpop-pink);
    box-shadow: 0 0 0 0 var(--kpop-pink);
    animation: kpop-pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes kpop-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 45, 135, 0.7); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 45, 135, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 45, 135, 0); }
}

.kpop-next-show__label {
    font-size: var(--kpop-fs-small);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--kpop-pink);
}

.kpop-next-show__details {
    color: var(--kpop-white);
    font-weight: 500;
}

/* ==========================================================================
   8. Show cards (grid items)
   ========================================================================== */
.kpop-show-card {
    position: relative;
    background: var(--kpop-purple-deep);
    border-radius: var(--kpop-radius);
    overflow: hidden;
    transition: transform 0.3s var(--kpop-ease), box-shadow 0.3s var(--kpop-ease);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.kpop-show-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -12px rgba(255, 45, 135, 0.3);
    border-color: var(--kpop-pink);
}

.kpop-show-card__media {
    aspect-ratio: 16 / 9;
    background: var(--kpop-purple-deep);
    position: relative;
    overflow: hidden;
}

.kpop-show-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s var(--kpop-ease);
}

.kpop-show-card:hover .kpop-show-card__media img {
    transform: scale(1.04);
}

.kpop-show-card__badge {
    position: absolute;
    top: var(--kpop-space-sm);
    left: var(--kpop-space-sm);
    background: var(--kpop-pink);
    color: var(--kpop-white);
    padding: 0.25em 0.75em;
    font-size: var(--kpop-fs-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--kpop-radius-sm);
    z-index: 2;
}

.kpop-show-card__body {
    padding: var(--kpop-space-md);
}

.kpop-show-card__date {
    font-size: var(--kpop-fs-small);
    color: var(--kpop-pink);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: var(--kpop-space-xs);
}

.kpop-show-card__title {
    font-size: var(--kpop-fs-h3);
    margin-bottom: var(--kpop-space-xs);
}
.kpop-show-card__title a {
    color: var(--kpop-white);
}
.kpop-show-card__title a:hover {
    color: var(--kpop-pink);
}

.kpop-show-card__meta {
    color: var(--kpop-text-muted);
    font-size: var(--kpop-fs-small);
}

/* Group tags on show cards */
.kpop-show-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: var(--kpop-space-sm);
}

.kpop-show-tag {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kpop-lavender);
    background: rgba(142, 124, 195, 0.14);
    border: 1px solid rgba(142, 124, 195, 0.3);
    border-radius: 999px;
    padding: 0.28em 0.7em;
}

/* ==========================================================================
   Archive filter tabs (Upcoming / Past / All)
   ========================================================================== */
.kpop-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kpop-space-sm);
    margin-bottom: var(--kpop-space-lg);
}

.kpop-filter__btn {
    font-family: var(--kpop-font-body);
    font-size: var(--kpop-fs-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kpop-text-muted);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 0.6em 1.3em;
    cursor: pointer;
    transition: color 0.2s var(--kpop-ease), background 0.2s var(--kpop-ease), border-color 0.2s var(--kpop-ease);
}

.kpop-filter__btn:hover {
    color: var(--kpop-white);
    border-color: rgba(255, 255, 255, 0.4);
}

.kpop-filter__btn[aria-pressed="true"] {
    color: var(--kpop-cream);
    background: var(--kpop-pink);
    border-color: var(--kpop-pink);
}

/* Filter visibility — section hidden when it doesn't match the active filter */
.kpop-archive[data-filter="upcoming"] .kpop-shows-block--past,
.kpop-archive[data-filter="past"] .kpop-shows-block--upcoming {
    display: none;
}

/* ==========================================================================
   Image gallery — bento-style grid placeholder. Swap each .kpop-gallery__item
   with a real <img> when assets are ready. Some tiles span 2 cols / 2 rows
   so the grid feels designed rather than uniform.
   ========================================================================== */
.kpop-gallery {
    background: var(--kpop-purple-deep);
    position: relative;
    overflow: hidden;
}

.kpop-gallery::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 60% at 15% 30%, rgba(255, 45, 135, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.kpop-gallery > .kpop-container {
    position: relative;
    z-index: 1;
}

.kpop-gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: var(--kpop-space-sm);
}

@media (max-width: 1000px) {
    .kpop-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
    }
}

@media (max-width: 600px) {
    .kpop-gallery__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }
}

.kpop-gallery__item {
    position: relative;
    background:
        linear-gradient(135deg, rgba(255, 45, 135, 0.12) 0%, rgba(74, 26, 122, 0.4) 100%),
        var(--kpop-purple);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: var(--kpop-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s var(--kpop-ease);
}

.kpop-gallery__item:hover { transform: translateY(-2px); }

/* Span variants for visual rhythm */
.kpop-gallery__item--tall { grid-row: span 2; }
.kpop-gallery__item--wide { grid-column: span 2; }

@media (max-width: 1000px) {
    .kpop-gallery__item--tall { grid-row: auto; }
    .kpop-gallery__item--wide { grid-column: span 2; }
}

@media (max-width: 600px) {
    .kpop-gallery__item--wide { grid-column: auto; }
}

/* Placeholder label — replace with <img> later and these vanish */
.kpop-gallery__placeholder-label {
    font-family: var(--kpop-font-display);
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.kpop-gallery__item::after {
    content: attr(data-placeholder);
    position: absolute;
    bottom: var(--kpop-space-sm);
    left: var(--kpop-space-sm);
    right: var(--kpop-space-sm);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
}

/* ==========================================================================
   Patreon support section — compact horizontal strip
   Text on the left, CTA pinned to the right. Distinct from the centered
   sections above and below it.
   ========================================================================== */
.kpop-patreon {
    background: var(--kpop-black);
    position: relative;
    overflow: hidden;
    border-block: 1px solid rgba(255, 255, 255, 0.06);
}

.kpop-patreon::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Pink concentrated on the right side, behind the image area */
        radial-gradient(ellipse 50% 80% at 85% 50%, rgba(255, 45, 135, 0.28) 0%, transparent 70%),
        /* Magenta cloud anchoring the left, behind the headline */
        radial-gradient(ellipse 55% 70% at 12% 22%, rgba(143, 30, 130, 0.24) 0%, transparent 70%),
        /* Deep purple grounding the bottom */
        radial-gradient(ellipse 70% 50% at 35% 110%, rgba(74, 26, 122, 0.45) 0%, transparent 65%),
        /* Subtle warm glow up top */
        radial-gradient(ellipse 60% 40% at 60% -10%, rgba(255, 45, 135, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Subtle heart-pattern texture overlay */
.kpop-patreon::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("assets/img/heart-pattern.png");
    background-repeat: repeat;
    background-size: 320px;
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

.kpop-patreon > .kpop-container {
    position: relative;
    z-index: 1;
}

.kpop-patreon__row {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--kpop-space-xl);
    align-items: center;
}

@media (max-width: 900px) {
    .kpop-patreon__row {
        grid-template-columns: 1fr;
        gap: var(--kpop-space-lg);
    }
}

.kpop-patreon__text {
    min-width: 0;
}

.kpop-patreon__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin: 0 0 var(--kpop-space-sm);
}

.kpop-patreon__body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--kpop-text-muted);
    margin: 0 0 var(--kpop-space-md);
    max-width: 60ch;
}

.kpop-patreon__cta {
    margin-top: var(--kpop-space-xs);
}

/* Image placeholder on the right — landscape ratio */
.kpop-patreon__image {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: var(--kpop-radius);
    background:
        linear-gradient(135deg, rgba(255, 45, 135, 0.10) 0%, rgba(74, 26, 122, 0.35) 100%),
        var(--kpop-purple-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kpop-patreon__image-label {
    font-family: var(--kpop-font-display);
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.kpop-patreon__image::after {
    content: attr(data-placeholder);
    position: absolute;
    bottom: var(--kpop-space-sm);
    left: var(--kpop-space-sm);
    right: var(--kpop-space-sm);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
}

/* ==========================================================================
   9. Stat strip (legacy — kept in case stats are reused on another page)
   ========================================================================== */
.kpop-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--kpop-space-md);
    padding-block: var(--kpop-space-lg);
    border-block: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 700px) {
    .kpop-stats { grid-template-columns: repeat(2, 1fr); }
}

.kpop-stat__number {
    font-family: var(--kpop-font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    color: var(--kpop-pink);
    margin-bottom: var(--kpop-space-xs);
}

.kpop-stat__label {
    font-size: var(--kpop-fs-small);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--kpop-text-muted);
}

/* ==========================================================================
   10. Header / nav
   ========================================================================== */
/* Make every Astra header wrapper transparent so the hero/page bg shows
   continuously behind the logo + nav. */
#masthead,
.site-header,
.site-header-section,
.site-header-primary-section,
.ast-primary-header,
.ast-primary-header-bar,
.main-header-bar,
.main-header-bar-wrap,
.main-header-bar-navigation,
.ast-header-break-point .main-header-bar,
.ast-builder-grid-row,
.ast-builder-grid-row-container,
.ast-builder-grid-row-container-inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Pull the hero up under the header so its gradient bg extends behind
   the nav — gives a true "seamless" feel rather than a hard seam. */
.kpop-hero {
    margin-top: -120px;
    padding-top: calc(var(--kpop-space-xl) + 120px) !important;
}

/* Mobile: nav becomes a solid bar (not transparent), so the hero no longer
   needs to overlap behind it. */
@media (max-width: 1000px) {
    #masthead,
    .site-header,
    .site-header-section,
    .site-header-primary-section,
    .ast-primary-header,
    .ast-primary-header-bar,
    .main-header-bar,
    .main-header-bar-wrap,
    .ast-mobile-header-wrap {
        background: var(--kpop-bg) !important;
        background-color: var(--kpop-bg) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* Hamburger / mobile menu toggle — pink */
    .menu-toggle,
    .ast-mobile-menu-buttons-minimal .menu-toggle,
    .ast-header-break-point .menu-toggle,
    .main-header-bar .ast-button-wrap .menu-toggle {
        color: var(--kpop-pink) !important;
        background: transparent !important;
        border: none !important;
    }
    .menu-toggle .ast-mobile-svg,
    .menu-toggle svg,
    .menu-toggle .icon-menu-bars,
    .menu-toggle .icon-bars-active,
    .menu-toggle .icon-bars,
    .menu-toggle path,
    .menu-toggle line,
    .menu-toggle rect {
        fill: var(--kpop-pink) !important;
        stroke: var(--kpop-pink) !important;
        color: var(--kpop-pink) !important;
    }

    .kpop-hero {
        margin-top: 0;
        padding-top: var(--kpop-space-lg) !important;
        padding-bottom: var(--kpop-space-lg) !important;
        background:
            /* Magenta cloud near the TOP behind the headline */
            radial-gradient(ellipse 90% 50% at 25% 18%, rgba(143, 30, 130, 0.38) 0%, transparent 75%),
            /* Pink glow in the LOWER half behind the poster */
            radial-gradient(ellipse 95% 45% at 75% 75%, rgba(255, 45, 135, 0.22) 0%, transparent 75%),
            /* Subtle deeper purple at the very bottom-left for warmth */
            radial-gradient(ellipse 70% 30% at 10% 100%, rgba(74, 26, 122, 0.30) 0%, transparent 70%),
            /* Edge vignette — slightly softer on mobile */
            radial-gradient(ellipse 130% 110% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.35) 100%),
            var(--kpop-black);
    }
}

/* Add horizontal breathing room inside the header (the dark bg still spans full width) */
.main-header-bar .ast-container,
.ast-primary-header-bar .ast-container,
.site-header .ast-container {
    max-width: var(--kpop-container) !important;
    margin-inline: auto !important;
    padding-inline: var(--kpop-space-md) !important;
}

@media (min-width: 1280px) {
    .main-header-bar .ast-container,
    .ast-primary-header-bar .ast-container,
    .site-header .ast-container {
        padding-inline: var(--kpop-space-lg) !important;
    }
}

.main-header-menu a,
.ast-header-break-point .main-header-menu a {
    color: var(--kpop-white) !important;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: var(--kpop-fs-small);
}

.main-header-menu a:hover {
    color: var(--kpop-pink) !important;
}

.site-title a {
    font-family: var(--kpop-font-display);
    color: var(--kpop-white) !important;
    letter-spacing: 0.02em;
}

/* Brand logo (SVG injected by astra_logo filter) */
.kpop-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.kpop-logo svg {
    width: auto;
    height: 44px;
    display: block;
    transition: transform 0.2s var(--kpop-ease);
}

@media (max-width: 768px) {
    .kpop-logo svg { height: 36px; }
}

.kpop-logo:hover svg {
    transform: scale(1.03);
}

/* Ensure Astra's site identity area is clean and not wrapping the logo oddly */
.site-branding,
.ast-site-identity {
    display: flex;
    align-items: center;
    padding: var(--kpop-space-xs) 0;
}

/* Hide Astra's tagline if it sneaks in */
.site-description,
p.site-description {
    display: none !important;
}

/* Nav line / heart divider removed — nav now sits transparent against the hero */

/* ==========================================================================
   Page headers (Press & Booking, Contact, About...)
   ========================================================================== */
.kpop-page-header {
    padding-top: calc(var(--kpop-space-xl) + 60px);
    padding-bottom: var(--kpop-space-xl);
    background:
        radial-gradient(ellipse 60% 60% at 50% 0%, rgba(255, 45, 135, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(122, 31, 107, 0.35) 0%, transparent 70%),
        var(--kpop-black);
    position: relative;
}

.kpop-page-header h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    margin-bottom: var(--kpop-space-sm);
}

@media (max-width: 1000px) {
    .kpop-page-header {
        padding-top: calc(var(--kpop-space-lg) + 30px);
    }
}

/* ==========================================================================
   Generic three-column block (used on Press & Booking + reusable elsewhere)
   ========================================================================== */
.kpop-cols {
    display: grid;
    gap: var(--kpop-space-lg);
}
.kpop-cols--2 { grid-template-columns: repeat(2, 1fr); }
.kpop-cols--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
    .kpop-cols--3 { grid-template-columns: 1fr; }
    .kpop-cols--2 { grid-template-columns: 1fr; }
}

.kpop-col h3 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: var(--kpop-space-sm);
}

.kpop-col p {
    color: var(--kpop-text-muted);
    font-size: 1rem;
    line-height: 1.65;
}

/* ==========================================================================
   Press materials downloads
   ========================================================================== */
.kpop-press-materials {
    display: flex;
    gap: var(--kpop-space-sm);
    flex-wrap: wrap;
}

.kpop-press-materials__note {
    margin-top: var(--kpop-space-md);
    font-size: var(--kpop-fs-small);
    color: var(--kpop-gray-dark);
    font-style: italic;
}

/* ==========================================================================
   Contact grid + cards
   ========================================================================== */
.kpop-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kpop-space-md);
}

@media (max-width: 700px) {
    .kpop-contact-grid { grid-template-columns: 1fr; }
}

.kpop-contact-card {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: var(--kpop-space-lg) var(--kpop-space-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--kpop-radius);
    transition: transform 0.2s var(--kpop-ease),
                border-color 0.2s var(--kpop-ease),
                background 0.2s var(--kpop-ease);
    color: var(--kpop-white) !important;
    text-decoration: none;
}

.kpop-contact-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 45, 135, 0.08);
    border-color: var(--kpop-pink);
}

.kpop-contact-card__label {
    font-size: var(--kpop-fs-small);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kpop-pink);
}

.kpop-contact-card__value {
    font-family: var(--kpop-font-display);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    color: var(--kpop-white);
    word-break: break-all;
}

.kpop-contact-note {
    margin-top: var(--kpop-space-lg);
    font-size: var(--kpop-fs-small);
    color: var(--kpop-gray-dark);
    font-style: italic;
    text-align: center;
}

/* ==========================================================================
   Flow layout — internal pages v2 (About first, then Contact / Press)
   One continuous dark canvas: ambient glows instead of banded sections,
   hairline rules between topics, sticky editorial labels on the left.
   ========================================================================== */
.kpop-flow {
    position: relative;
    /* Clip sideways only — glows may bleed vertically across section seams
       (e.g. up into the homepage hero) for a continuous color field. */
    overflow-x: clip;
    background: var(--kpop-black);
}

/* Melt whatever sits above the flow (homepage hero gradients) into the
   canvas: a fade reaching UP from the flow's top edge. Lives here, not on
   .kpop-hero::after — that slot is taken by the hero's grain texture. */
.kpop-flow::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -420px;
    height: 420px;
    background: linear-gradient(to bottom, rgba(10, 4, 20, 0) 0%, var(--kpop-black) 96%);
    pointer-events: none;
}

/* Ambient glows that drift down the page — no filter:blur (perf), just
   soft radial gradients with long falloff. */
.kpop-flow__glow {
    position: absolute;
    width: min(1100px, 80vw);
    aspect-ratio: 1;
    pointer-events: none;
    z-index: 0;
}

.kpop-flow__glow--1 {
    top: -12%;
    right: -18%;
    background: radial-gradient(circle, rgba(255, 45, 135, 0.16) 0%, transparent 62%);
}

.kpop-flow__glow--2 {
    top: 32%;
    left: -24%;
    background: radial-gradient(circle, rgba(74, 26, 122, 0.5) 0%, transparent 65%);
}

.kpop-flow__glow--3 {
    bottom: -4%;
    right: -14%;
    background: radial-gradient(circle, rgba(143, 30, 130, 0.35) 0%, transparent 62%);
}

.kpop-flow > *:not(.kpop-flow__glow) {
    position: relative;
    z-index: 1;
}

/* --- Hero: oversized left-aligned editorial type, no band --- */
.kpop-flow-hero {
    padding-top: calc(var(--kpop-space-xl) + 80px);
    padding-bottom: var(--kpop-space-xl);
}

.kpop-flow-hero h1 {
    font-size: clamp(2.75rem, 6vw, 5.25rem);
    line-height: var(--kpop-lh-tight);
    margin-bottom: var(--kpop-space-sm);
}

.kpop-flow-hero .kpop-lead {
    max-width: 56ch;
}

/* --- Sections: hairline rule + sticky label column --- */
.kpop-flow-section {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--kpop-space-lg);
    padding-block: var(--kpop-space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kpop-flow-section__label {
    position: sticky;
    top: 110px;
    align-self: start;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: var(--kpop-fs-small);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--kpop-text-muted);
}

.kpop-flow-section__index {
    font-family: var(--kpop-font-display);
    font-size: 1.15rem;
    color: var(--kpop-lavender);
    letter-spacing: 0.05em;
}

.kpop-flow-section__body h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: var(--kpop-space-md);
}

.kpop-flow-section__body > p,
.kpop-flow-item p {
    color: var(--kpop-text-muted);
    max-width: 62ch;
}

/* Stacked items inside a section, hairline-separated */
.kpop-flow-item {
    padding-block: var(--kpop-space-md);
}

.kpop-flow-item:first-of-type {
    padding-top: 0;
}

.kpop-flow-item + .kpop-flow-item {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.kpop-flow-item h3 {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    margin-bottom: var(--kpop-space-xs);
}

@media (max-width: 900px) {
    .kpop-flow-section {
        grid-template-columns: 1fr;
        gap: var(--kpop-space-md);
    }
    .kpop-flow-section__label {
        position: static;
    }
}

/* Bare stat row — numbers and air, no border box */
.kpop-stats--bare {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kpop-space-md) var(--kpop-space-lg);
    border: 0;
    padding-block: var(--kpop-space-sm) 0;
}

.kpop-stats--bare .kpop-stat {
    min-width: 130px;
}

/* Closing CTA — big type over a glow, no gradient band */
.kpop-flow-cta {
    padding-block: var(--kpop-space-xl) var(--kpop-space-2xl);
    text-align: center;
    position: relative;
}

.kpop-flow-cta::before {
    content: "";
    position: absolute;
    inset: -20% -10%;
    background: radial-gradient(ellipse 50% 60% at 50% 60%, rgba(255, 45, 135, 0.14) 0%, transparent 65%);
    pointer-events: none;
}

.kpop-flow-cta > * {
    position: relative;
}

.kpop-flow-cta h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.85rem);
}

/* --- Passages — unlabeled editorial flow ---
   No section frames at all: oversized headers and whitespace carry the
   structure; images sit between passages at varied widths and alignments. */
.kpop-flow-passage {
    padding-block: var(--kpop-space-lg);
}

.kpop-flow-passage h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.85rem);
    margin-bottom: var(--kpop-space-sm);
}

.kpop-flow-passage p {
    color: var(--kpop-text-muted);
    max-width: 58ch;
}

.kpop-flow-passage p + p {
    margin-top: var(--kpop-space-sm);
}

.kpop-flow-passage__cta {
    margin-top: var(--kpop-space-md);
}

/* A passage pushed to the right edge — asymmetry instead of rows */
.kpop-flow-passage--right {
    margin-left: auto;
    max-width: min(46ch, 70%);
}

/* Offset image moments between passages */
.kpop-flow-offset {
    padding-block: var(--kpop-space-sm);
}

.kpop-flow-offset--right {
    width: min(58%, 720px);
    margin-left: auto;
}

.kpop-flow-offset--left {
    width: min(48%, 560px);
    margin-right: auto;
}

@media (max-width: 900px) {
    .kpop-flow-passage--right {
        margin-left: 0;
        max-width: none;
    }
    .kpop-flow-offset--right,
    .kpop-flow-offset--left {
        width: 100%;
    }
}

/* --- Paired feature blocks ---
   Two text items side by side, each opened by an icon chip that marks it
   as a contained thing; a staggered gallery row sits beneath them. */
.kpop-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kpop-space-md) var(--kpop-space-md);
    align-items: stretch;
    padding-block: var(--kpop-space-lg) var(--kpop-space-md);
}

/* FAQ accordion inside the heart-gradient card: question rows toggle open
   (native details/summary), icon chip left, rotating plus right. */
.kpop-faq {
    margin-block: var(--kpop-space-lg) var(--kpop-space-md);
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
}

.kpop-faq__item {
    position: relative;
    z-index: 2;
}

.kpop-faq__item + .kpop-faq__item {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kpop-faq__q {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    padding-block: var(--kpop-space-md);
    cursor: pointer;
    list-style: none;
}

.kpop-faq__q::-webkit-details-marker {
    display: none;
}

.kpop-faq__q .kpop-duo__icon {
    flex: none;
    margin: 0;
}

.kpop-faq__q-text {
    font-family: var(--kpop-font-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    flex: 1;
}

.kpop-faq__toggle {
    flex: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--kpop-pink);
    transition: transform 0.25s var(--kpop-ease);
}

.kpop-faq__item[open] .kpop-faq__toggle {
    transform: rotate(45deg);
}

.kpop-faq__a {
    padding: 0 0 var(--kpop-space-md);
    padding-left: calc(48px + clamp(1rem, 2.5vw, 1.75rem));
    color: var(--kpop-text-muted);
    max-width: 70ch;
}

@media (max-width: 600px) {
    .kpop-faq__a {
        padding-left: 0;
    }
}

/* Host spread: ID badge left, photocard companion floating right */
.kpop-host-spread {
    position: relative;
}

/* Two independent columns sharing a row: host (heading + flip card) left,
   FAQs (heading + accordion) right, hairline divider between. Each column
   owns its heading so they read as separate sections, not paired elements. */
.kpop-host-row {
    display: flex;
    align-items: stretch;
    gap: clamp(2rem, 4vw, 3.5rem);
}

.kpop-host-row__host {
    flex: none;
}

.kpop-host-row__host h2,
.kpop-host-row__faqs h2 {
    margin-top: 0;
}

.kpop-host-row__faqs {
    flex: 1;
    min-width: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: clamp(2rem, 4vw, 3.5rem);
}

.kpop-host-row__faqs .kpop-faq {
    margin-block: var(--kpop-space-md) 0;
}

@media (max-width: 1000px) {
    .kpop-host-row {
        flex-direction: column;
    }
    .kpop-host-row__faqs {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: var(--kpop-space-lg);
    }
}

/* Flip card: selfie on the front, host ID on the back. Click/Enter toggles
   .is-flipped on the wrapper; faces share one grid cell so the card takes the
   taller face's height. */
.kpop-flipcard {
    position: relative;
    width: min(350px, 88vw);
    perspective: 1600px;
    cursor: pointer;
    transform: rotate(-1.5deg);
    transition: transform 0.3s var(--kpop-ease);
}

.kpop-flipcard:hover {
    transform: rotate(0deg);
}

.kpop-flipcard__inner {
    display: grid;
    /* true photocard proportions at every width, mobile included */
    aspect-ratio: 55 / 85;
    transform-style: preserve-3d;
    transition: transform 0.65s var(--kpop-ease);
}

.kpop-flipcard.is-flipped .kpop-flipcard__inner {
    transform: rotateY(180deg);
}

.kpop-flipcard__face {
    grid-area: 1 / 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: var(--kpop-cream);
    color: var(--kpop-black);
    border-radius: var(--kpop-radius-lg);
    padding: var(--kpop-space-sm) var(--kpop-space-md) var(--kpop-space-md);
    box-shadow:
        0 24px 64px rgba(255, 45, 135, 0.18),
        0 8px 24px rgba(0, 0, 0, 0.5);
    /* overflow stays visible so the corner heart sticker can hang off the
       edge like it did on the original badge; the photo clips itself */
    position: relative;
}

.kpop-flipcard__face--front {
    display: flex;
    flex-direction: column;
    /* thin photocard frame — the photo nearly fills the card */
    padding: 10px;
}

.kpop-flipcard__face--back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    /* room for the Flip pill below the footer */
    padding-bottom: calc(var(--kpop-space-md) + 2.6rem);
}

/* Footer hugs the card bottom; the column above breathes */
.kpop-flipcard__face--back .kpop-idcard__footer {
    margin-top: auto;
}

/* Front photo fills the card below the punch hole */
.kpop-flipcard__photo {
    margin: 0;
    flex: 1;
    min-height: 0;
    position: relative;
    isolation: isolate;
    border-radius: var(--kpop-radius);
    overflow: hidden;
}

.kpop-flipcard__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
}

.kpop-flipcard__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--kpop-purple-mid) 30%, var(--kpop-magenta) 100%);
    opacity: 0.35;
    mix-blend-mode: color;
    pointer-events: none;
}

/* "Flip" hint pill, both faces — pink and loud so the affordance is clear */
.kpop-flipcard__hint {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    /* The pulse animation gives this its own transform, which detaches it
       from the parent's backface hiding — restate it here or the front label
       shows through mirrored when the card is flipped. */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-family: var(--kpop-font-display);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--kpop-pink);
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(255, 45, 135, 0.45);
    animation: kpop-hint-pulse 2.2s var(--kpop-ease) infinite;
}

@keyframes kpop-hint-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .kpop-flipcard__hint {
        animation: none;
    }
}

/* Back face: info spans the full width with the photo gone.
   (Doubled class beats the later .kpop-idcard__body grid rule.) */
.kpop-idcard__body.kpop-idcard__body--no-photo {
    display: block;
}

.kpop-idcard__body--no-photo .kpop-idcard__info {
    max-width: none;
}

/* Beats .kpop-flow-passage p, which was silently overriding the bio color */
.kpop-flipcard__face p.kpop-idcard__bio {
    color: rgba(20, 8, 36, 0.92);
    max-width: none;
}

/* ID-card photo when filled with a real image */
.kpop-idcard__photo--filled {
    border-style: solid;
    isolation: isolate;
}

/* On-brand wash over the badge photo (color blend keeps detail/luminance) */
.kpop-idcard__photo--filled::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--kpop-purple-mid) 30%, var(--kpop-magenta) 100%);
    opacity: 0.35;
    mix-blend-mode: color;
    pointer-events: none;
}

.kpop-idcard__photo--filled img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kpop-duo__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(1.75rem, 3vw, 2.75rem);
}

.kpop-duo__card .kpop-duo__cta {
    margin-top: auto;
    padding-top: var(--kpop-space-md);
}

.kpop-duo__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    margin-inline: auto;
    margin-bottom: var(--kpop-space-sm);
}

.kpop-duo__icon svg {
    width: 22px;
    height: 22px;
}

.kpop-duo__icon--lavender {
    background: rgba(142, 124, 195, 0.16);
    border: 1px solid rgba(142, 124, 195, 0.35);
}

.kpop-duo__icon--pink {
    background: rgba(255, 45, 135, 0.12);
    border: 1px solid rgba(255, 45, 135, 0.3);
}

.kpop-duo h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.85rem);
    margin-bottom: var(--kpop-space-sm);
}

.kpop-duo p {
    color: var(--kpop-text-muted);
    max-width: 48ch;
    margin-inline: auto;
}

.kpop-duo__cta {
    margin-top: var(--kpop-space-md);
}

@media (max-width: 900px) {
    .kpop-duo {
        grid-template-columns: 1fr;
    }
}

/* --- Gallery row under the duo --- */
.kpop-flow-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--kpop-space-md);
    padding-block: var(--kpop-space-md) var(--kpop-space-lg);
}

.kpop-flow-gallery .kpop-flow-media {
    aspect-ratio: 4 / 5;
}

.kpop-flow-gallery > :nth-child(2) {
    margin-top: var(--kpop-space-lg);
}

@media (max-width: 900px) {
    .kpop-flow-gallery {
        grid-template-columns: 1fr;
    }
    .kpop-flow-gallery > :nth-child(2) {
        margin-top: 0;
    }
    .kpop-flow-gallery .kpop-flow-media {
        aspect-ratio: 16 / 10;
    }
}

/* Taller crop for the collage's right-hand image (double class outranks the
   base .kpop-flow-media rule, which appears later in this file) */
.kpop-flow-media.kpop-flow-media--tall {
    aspect-ratio: 4 / 5;
}

/* --- Inline heading icons + doodles (hearts, sparkles — the cute layer) --- */
.kpop-icon {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-left: 0.3em;
    vertical-align: baseline;
}

.kpop-icon--lg {
    width: 1.4rem;
    height: 1.4rem;
}

/* --- Host ID card — idol-photocard style --- */
.kpop-host-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: var(--kpop-space-xl);
    align-items: center;
    margin-top: var(--kpop-space-md);
}

.kpop-host-layout__bio p {
    color: var(--kpop-text-muted);
    max-width: 58ch;
}

@media (max-width: 900px) {
    .kpop-host-layout {
        grid-template-columns: 1fr;
        gap: var(--kpop-space-lg);
        justify-items: start;
    }
    .kpop-idcard {
        width: min(360px, 100%);
    }
}

.kpop-idcard {
    position: relative;
    width: 100%;
    max-width: 780px;
    background: var(--kpop-cream);
    color: var(--kpop-black);
    border-radius: var(--kpop-radius-lg);
    padding: var(--kpop-space-sm) var(--kpop-space-md) var(--kpop-space-md);
    transform: rotate(-1.5deg);
    box-shadow:
        0 24px 64px rgba(255, 45, 135, 0.18),
        0 8px 24px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s var(--kpop-ease);
}

/* Landscape interior: photo left, identity right */
.kpop-idcard__body {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: var(--kpop-space-md);
    align-items: stretch;
    margin-top: var(--kpop-space-sm);
}

.kpop-idcard__body .kpop-idcard__photo {
    aspect-ratio: auto;
    height: 100%;
    min-height: 250px;
}

.kpop-idcard__info .kpop-idcard__rows {
    margin-top: 0;
}

.kpop-idcard__bio {
    margin: var(--kpop-space-sm) 0 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: rgba(20, 8, 36, 0.92);
}

@media (max-width: 700px) {
    .kpop-idcard__body {
        grid-template-columns: 1fr;
    }
    .kpop-idcard__body .kpop-idcard__photo {
        aspect-ratio: 3 / 4;
        height: auto;
    }
}

.kpop-idcard:hover {
    transform: rotate(0deg);
}

/* Lanyard slot */
.kpop-idcard__hole {
    width: 46px;
    height: 9px;
    border-radius: 999px;
    background: var(--kpop-black);
    opacity: 0.8;
    margin: 0 auto var(--kpop-space-sm);
}

.kpop-idcard__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--kpop-space-sm);
    border-bottom: 2px solid var(--kpop-black);
    padding-bottom: 0.5rem;
    margin-bottom: var(--kpop-space-sm);
}

.kpop-idcard__brand {
    font-family: var(--kpop-font-display);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.kpop-idcard__type {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kpop-magenta);
    white-space: nowrap;
}

.kpop-idcard__photo {
    position: relative;
    aspect-ratio: 3 / 4;
    border: 1px dashed rgba(0, 0, 0, 0.3);
    border-radius: var(--kpop-radius);
    background: linear-gradient(135deg, rgba(255, 45, 135, 0.12) 0%, rgba(142, 124, 195, 0.3) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kpop-idcard__photo-label {
    font-family: var(--kpop-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
}

.kpop-idcard__photo::after {
    content: attr(data-placeholder);
    position: absolute;
    bottom: 0.6rem;
    left: 0.75rem;
    right: 0.75rem;
    font-size: 0.65rem;
    color: rgba(0, 0, 0, 0.45);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
}

.kpop-idcard__rows {
    margin: var(--kpop-space-sm) 0 0;
}

.kpop-idcard__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--kpop-space-sm);
    padding-block: 0.45rem;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.25);
}

.kpop-idcard__row dt {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kpop-gray-dark);
    flex-shrink: 0;
}

.kpop-idcard__row dd {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: right;
}

.kpop-idcard__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kpop-space-sm);
    margin-top: var(--kpop-space-sm);
}

.kpop-idcard__barcode {
    height: 28px;
    flex: 1;
    max-width: 58%;
    background: repeating-linear-gradient(
        90deg,
        var(--kpop-black) 0 2px,
        transparent 2px 5px,
        var(--kpop-black) 5px 6px,
        transparent 6px 10px,
        var(--kpop-black) 10px 13px,
        transparent 13px 16px
    );
}

/* Heart sticker slapped over the card's top corner */
.kpop-idcard__sticker {
    position: absolute;
    top: -12px;
    right: -10px;
    width: 38px;
    height: 38px;
    transform: rotate(14deg);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}

/* ==========================================================================
   Ticket stubs — shows as admission tickets (same family as the host ID).
   Upcoming = full ticket with barcode end; past = torn-off, faded stub.
   ========================================================================== */
.kpop-stubs {
    display: flex;
    flex-direction: column;
    gap: var(--kpop-space-md);
    align-items: flex-start;
}

.kpop-stubs__label {
    display: block;
    margin-top: var(--kpop-space-lg);
    margin-bottom: var(--kpop-space-sm);
    font-size: var(--kpop-fs-small);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--kpop-text-muted);
}

.kpop-stub {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 720px;
    background: var(--kpop-cream);
    color: var(--kpop-black);
    border-radius: 14px;
    text-decoration: none;
    position: relative;
    transform: rotate(-1deg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    transition: transform 0.25s var(--kpop-ease);
}

.kpop-stub:nth-child(even) {
    transform: rotate(1deg);
}

.kpop-stub:hover {
    transform: rotate(0deg) translateY(-3px);
}

/* Vertical brand strip along the ticket's left edge */
.kpop-stub__side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.4rem;
    border-right: 2px dashed rgba(10, 4, 20, 0.18);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(10, 4, 20, 0.45);
    white-space: nowrap;
}

.kpop-stub__main {
    flex: 1;
    min-width: 0;
    padding: var(--kpop-space-sm) var(--kpop-space-md);
}

/* VIP tag beside "Admit one" */
.kpop-stub__vip {
    display: inline-block;
    margin-left: 0.55rem;
    padding: 0.14em 0.5em 0.1em;
    border-radius: 4px;
    background: var(--kpop-pink);
    color: var(--kpop-cream);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    vertical-align: 0.12em;
}

/* Repeated VIP microprint motif along the ticket bottom */
.kpop-stub__strip {
    display: block;
    margin-top: 0.85rem;
    padding-top: 0.55rem;
    border-top: 1px dotted rgba(10, 4, 20, 0.22);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(10, 4, 20, 0.28);
    white-space: nowrap;
    overflow: hidden;
}

/* Serial number in the stub end */
.kpop-stub__num {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--kpop-gray-dark);
}

/* Video-preview thumbnail on past-show stubs */
.kpop-stub__thumb {
    position: relative;
    flex-shrink: 0;
    width: 118px;
    height: 104px;
    margin: 10px 0 10px 10px;
    border-radius: 9px;
    overflow: hidden;
    /* Fixed height + centered so every thumbnail is the same size regardless of
       how tall the ticket grows with its text. */
    align-self: center;
    background: var(--kpop-purple-deep);
}

.kpop-stub__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kpop-stub__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 4, 20, 0.25);
}

.kpop-stub__play span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(254, 247, 240, 0.92);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s var(--kpop-ease);
}

.kpop-stub__play svg {
    width: 13px;
    height: 13px;
    margin-left: 2px;
}

.kpop-stub--torn:hover .kpop-stub__play span {
    transform: scale(1.12);
}

.kpop-stub__admit {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kpop-magenta);
}

.kpop-stub__title {
    display: block;
    font-family: var(--kpop-font-display);
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.4rem);
    line-height: 1.2;
    margin-top: 0.35rem;
    color: var(--kpop-black);
}

.kpop-stub__meta {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kpop-gray-dark);
    margin-top: 0.4rem;
}

.kpop-stub__end {
    position: relative;
    border-left: 2px dashed rgba(10, 4, 20, 0.35);
    width: 130px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: var(--kpop-space-sm);
}

/* Punch holes notched into the ticket edge at the perforation line */
.kpop-stub__end::before,
.kpop-stub__end::after {
    content: "";
    position: absolute;
    left: -10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--kpop-bg);
}

.kpop-stub__end::before {
    top: -8px;
}

.kpop-stub__end::after {
    bottom: -8px;
}

.kpop-stub__barcode {
    width: 72px;
    height: 38px;
    background: repeating-linear-gradient(
        90deg,
        var(--kpop-black) 0 2px,
        transparent 2px 5px,
        var(--kpop-black) 5px 6px,
        transparent 6px 10px,
        var(--kpop-black) 10px 13px,
        transparent 13px 16px
    );
}

.kpop-stub__cta {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kpop-pink);
}

/* Past shows: the ticket's been used — barcode end torn away, color faded */
.kpop-stub--torn {
    max-width: 620px;
    background: #e8ddd4;
    opacity: 0.6;
    filter: saturate(0.4);
    box-shadow: none;
    /* Fine, shallow perforation along the torn edge — reads as a real tear,
       not cartoon teeth */
    clip-path: polygon(
        0 0,
        99% 0, 100% 3%, 99% 6%, 100% 9%, 99% 12%, 100% 15%, 99% 18%,
        100% 21%, 99% 24%, 100% 27%, 99% 30%, 100% 33%, 99% 36%, 100% 39%,
        99% 42%, 100% 45%, 99% 48%, 100% 51%, 99% 54%, 100% 57%, 99% 60%,
        100% 63%, 99% 66%, 100% 69%, 99% 72%, 100% 75%, 99% 78%, 100% 81%,
        99% 84%, 100% 87%, 99% 90%, 100% 93%, 99% 96%, 100% 100%,
        0 100%
    );
}

.kpop-stub--torn:hover {
    opacity: 0.85;
    transform: rotate(0deg);
}

.kpop-stub--torn .kpop-stub__admit {
    color: var(--kpop-gray-dark);
}

/* Phone widths: keep the wide ticket silhouette (side tear-off intact) and
   reclaim space by dropping the thumbnail — the upcoming poster already
   headlines the hero, and the text is what matters on a small screen. */
@media (max-width: 600px) {
    .kpop-stub__thumb {
        display: none;
    }
    .kpop-stub__end {
        width: 96px;
    }
    .kpop-stub__barcode {
        width: 54px;
    }
}

/* ==========================================================================
   Polaroid wall — small duotoned photos in tilted frames
   ========================================================================== */
.kpop-polaroid-wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--kpop-space-md) var(--kpop-space-lg);
    padding-block: var(--kpop-space-md) var(--kpop-space-lg);
}

/* Frameless "melt" photos — the image fades over a soft purple field and
   feathers to transparent at the edges, dissolving into the dark canvas.
   (Replaces the old white polaroid frames — same markup, new treatment.) */
.kpop-polaroid {
    margin: 0;
    width: 480px;
    max-width: 90%;
    position: relative;
}

.kpop-polaroid__tape,
.kpop-polaroid__caption {
    display: none;
}

/* MELT photos (2026-06-12, HYBRID — final): Natalie hand-authored the melt
   SHAPES as transparent PNGs; those files are the MASK IMAGES (a raster mask
   uses its alpha channel, so her exact hand-made fades are the shapes). The
   <img> shows the ORIGINAL photo with the purple-gradient treatment — glow
   ::before + luminosity blend — which flat baked PNGs lose. To change a melt
   SHAPE: she re-exports the matching mask PNG. To change color/glow: edit
   here. (Rei's Patreon-card photo keeps its own separate treatment.) */
.kpop-polaroid__img {
    display: block;
    position: relative;
    background: transparent;
}

/* Soft purple glow behind + bleeding past the photo — the gradient ambiance */
.kpop-polaroid__img::before {
    content: "";
    position: absolute;
    inset: -10%;
    background: radial-gradient(ellipse 58% 58% at 50% 46%, rgba(91, 63, 163, 0.55) 0%, transparent 72%);
    pointer-events: none;
}

.kpop-polaroid__img img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.8;
    mix-blend-mode: luminosity;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Shows section as one large card (Rei-pattern): the stubs live inside, the
   ticket photo is the card's BACKDROP — same wash recipe as the Patreon card.
   Kira stands at ~28% of the source frame; the translateX shifts the image
   right so she lands on the card's right side, clear of the stubs, and the
   bright projector slide on the source's right is pushed off the card. */
.kpop-shows-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--kpop-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(ellipse 60% 80% at 85% 40%, rgba(110, 78, 190, 0.6) 0%, transparent 75%),
        var(--kpop-purple-deep);
    padding: clamp(2.5rem, 5vw, 4.5rem);
}

.kpop-shows-card__photo {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 1;
    pointer-events: none;
    /* The fade lives HERE (card-relative), NOT on the img — the img is
       translated, and a mask on it would ride along and erase Kira.
       IMPORTANT: the transparent stop must sit at/just past the img's left
       edge (= the translateX percentage) or the img's raw edge shows mid-fade. */
    -webkit-mask-image: linear-gradient(to right, transparent 54%, #000 82%);
    mask-image: linear-gradient(to right, transparent 54%, #000 82%);
}

.kpop-shows-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateX(52%);
    opacity: 0.62;
    filter: brightness(1.05);
}

/* Purple wash so the photo reads tinted, not just dim (matches Rei's) */
.kpop-shows-card__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--kpop-purple-mid);
    opacity: 0.14;
    mix-blend-mode: color;
    pointer-events: none;
}

.kpop-shows-card__inner {
    position: relative;
    z-index: 2;
}

@media (max-width: 800px) {
    .kpop-shows-card {
        padding: clamp(1.5rem, 4vw, 2.5rem);
        /* reserve a stage at the card's foot for Kira */
        padding-bottom: 340px;
    }
    /* Narrow screens: instead of a murky backdrop behind the stubs, Kira gets
       her own zone at the bottom of the card, melting in below the content. */
    .kpop-shows-card__photo {
        inset: auto 0 0 0;
        height: 400px;
        -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 38%);
        mask-image: linear-gradient(to bottom, transparent 2%, #000 38%);
    }
    .kpop-shows-card__photo img {
        opacity: 0.85;
        transform: none;
        object-position: 28% 25%;
    }
}

/* About-page hero as a photo-backdrop card (same family as the shows card).
   The comedian stands at ~33% of the source frame; the card is wide (cover
   crops vertically, X inert) so the translateX shifts him to ~75%. The fade's
   transparent stop sits just past the image's shifted left edge (42%). */
.kpop-about-hero-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--kpop-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(ellipse 60% 80% at 85% 40%, rgba(110, 78, 190, 0.6) 0%, transparent 75%),
        var(--kpop-purple-deep);
    padding: clamp(2.5rem, 5vw, 4.5rem);
}

.kpop-about-hero-card__photo {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 1;
    pointer-events: none;
    /* Fade lives on the un-translated wrapper: card-relative coordinates. */
    -webkit-mask-image: linear-gradient(to right, transparent 44%, #000 76%);
    mask-image: linear-gradient(to right, transparent 44%, #000 76%);
}

.kpop-about-hero-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
    transform: translateX(42%);
    opacity: 0.62;
    filter: brightness(1.05);
}

/* Wash with pink folded in toward the subject side */
.kpop-about-hero-card__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--kpop-purple-mid) 40%, var(--kpop-magenta) 100%);
    opacity: 0.18;
    mix-blend-mode: color;
    pointer-events: none;
}

.kpop-about-hero-card__inner {
    position: relative;
    z-index: 2;
    max-width: 60%;
}

@media (max-width: 800px) {
    .kpop-about-hero-card__inner {
        max-width: none;
    }
    .kpop-about-hero-card__photo img {
        opacity: 0.3;
    }
}

/* About hero: show the comedian head-to-toe — native ratio panel (no vertical
   crop), shifted right so he sits at ~75% like the press hero. The fade lives
   on the figure (card-relative), so the img shift can't drag it. */
.kpop-page--about .kpop-about-hero-card__photo img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    object-fit: cover;
    object-position: center;
    transform: translateX(22%);
}

/* Press & Booking hero: new 2 has the comedian right-of-frame — no shift;
   fade completes earlier so he stays bright while the slide fades under the
   title. */
.kpop-page--press-booking .kpop-about-hero-card__photo {
    -webkit-mask-image: linear-gradient(to right, transparent 35%, #000 65%);
    mask-image: linear-gradient(to right, transparent 35%, #000 65%);
}

.kpop-page--press-booking .kpop-about-hero-card__photo img {
    transform: none;
    object-position: 50% 30%;
}

/* 3-up abbreviated option cards (Press & Booking) */
.kpop-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--kpop-space-md);
    align-items: stretch;
}

.kpop-option-mini {
    display: flex;
    flex-direction: column;
    padding: clamp(1.75rem, 3vw, 2.5rem);
}

/* Content sits above the heartcard's gradient/heart pseudo layers */
.kpop-option-mini > * {
    position: relative;
    z-index: 2;
}

/* Vary the gradient blobs per card so the trio doesn't repeat: pink hugs a
   different corner on each, with the deep-purple anchor moving opposite. */
.kpop-options .kpop-option-mini:nth-child(1)::before {
    background:
        radial-gradient(ellipse 75% 55% at 15% 8%, rgba(255, 45, 135, 0.26) 0%, transparent 70%),
        radial-gradient(ellipse 55% 70% at 88% 45%, rgba(143, 30, 130, 0.22) 0%, transparent 70%),
        radial-gradient(ellipse 80% 45% at 70% 115%, rgba(74, 26, 122, 0.5) 0%, transparent 65%);
}

.kpop-options .kpop-option-mini:nth-child(2)::before {
    background:
        radial-gradient(ellipse 60% 85% at 92% 88%, rgba(255, 45, 135, 0.3) 0%, transparent 70%),
        radial-gradient(ellipse 70% 45% at 30% -12%, rgba(143, 30, 130, 0.26) 0%, transparent 70%),
        radial-gradient(ellipse 50% 75% at -8% 65%, rgba(74, 26, 122, 0.48) 0%, transparent 65%);
}

.kpop-options .kpop-option-mini:nth-child(3)::before {
    background:
        radial-gradient(ellipse 90% 40% at 50% 102%, rgba(255, 45, 135, 0.24) 0%, transparent 70%),
        radial-gradient(ellipse 45% 65% at 105% 12%, rgba(143, 30, 130, 0.28) 0%, transparent 70%),
        radial-gradient(ellipse 65% 60% at 8% 30%, rgba(74, 26, 122, 0.5) 0%, transparent 65%);
}

.kpop-option-mini h2 {
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    margin-bottom: var(--kpop-space-sm);
}

.kpop-option-mini p {
    color: var(--kpop-gray);
    margin: 0;
}

.kpop-option-mini__slot {
    margin-top: auto;
    padding-top: var(--kpop-space-md);
    font-family: var(--kpop-font-display);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kpop-pink);
}

@media (max-width: 900px) {
    .kpop-options {
        grid-template-columns: 1fr;
    }
}

/* Press hero on small screens: only an eyebrow + title live in it, so drop
   the dead space below the heading and tighten the card into a banner. */
@media (max-width: 800px) {
    .kpop-page--press-booking .kpop-about-hero-card {
        padding: 1.8rem 1.5rem 1.5rem;
    }
    .kpop-page--press-booking .kpop-about-hero-card h1 {
        margin-bottom: 0;
    }
    .kpop-page--press-booking .kpop-about-hero-card .kpop-eyebrow {
        margin-bottom: 0.4rem;
    }
}

/* Astra's scroll-to-top button: not wanted */
#ast-scroll-top {
    display: none !important;
}

/* Mobile nav: Astra's dropdown defaults to a near-white sheet while our links
   are white. Scope by Astra's own break-point class (NOT a px media query —
   Astra decides the hamburger breakpoint, and a hardcoded width misses it). */
.ast-header-break-point .main-header-bar-navigation,
.ast-header-break-point .main-header-bar-navigation .main-header-menu,
.ast-header-break-point .main-header-bar-navigation .menu-item,
.ast-header-break-point .main-header-bar-navigation .sub-menu {
    background-color: var(--kpop-purple-deep) !important;
}

.ast-header-break-point .main-header-bar-navigation .menu-link {
    color: var(--kpop-white) !important;
    background-color: transparent !important;
}

.ast-header-break-point .main-header-bar-navigation .current-menu-item > .menu-link {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.ast-header-break-point .main-header-bar-navigation .menu-item {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.ast-header-break-point .main-header-bar-navigation .current-menu-item > .menu-link,
.ast-header-break-point .main-header-bar-navigation .menu-link:hover {
    color: var(--kpop-pink) !important;
}

/* Shows archive: each block (Upcoming / Past) sits in a heart-gradient card */
.kpop-shows-block.kpop-heartcard {
    padding: clamp(1.75rem, 3.5vw, 3rem);
}

/* Breathing room between the last card and the footer */
.kpop-archive .kpop-shows-block--past {
    margin-bottom: clamp(3.5rem, 8vw, 7rem);
}

.kpop-shows-block.kpop-heartcard > * {
    position: relative;
    z-index: 2;
}

/* Breathing room between the partner card and the footer */
.kpop-partner-card {
    margin-bottom: clamp(3.5rem, 8vw, 7rem);
}

/* Partner card (Press & Booking): Patreon-block recipe with the duo photo.
   The pair stands center-frame in the source, so the image shifts right and
   the fade completes earlier so they stay bright. */
/* Photo renders at native scale (downscaled to card height, never upscaled)
   as a right-anchored panel, so it doesn't look blown out. */
.kpop-partner-card .kpop-patreon-card__photo img {
    position: absolute;
    top: -18%;
    right: 0;
    height: 136%;
    width: auto;
    object-fit: cover;
    transform: none;
    /* one long dissolve like the other cards; bleeds off the card's right
       edge; still rendered well below native size so it stays sharp */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 48%);
    mask-image: linear-gradient(to right, transparent 0%, #000 48%);
}

/* Option cards (Press & Booking): same family as the homepage shows card —
   photo backdrop one side, deck copy the other. --flip mirrors the layout. */
.kpop-option-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--kpop-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(ellipse 60% 80% at 85% 40%, rgba(110, 78, 190, 0.5) 0%, transparent 75%),
        var(--kpop-purple-deep);
    padding: clamp(2.5rem, 5vw, 4.5rem);
}

.kpop-option-card + .kpop-option-card {
    margin-top: var(--kpop-space-md);
}

.kpop-option-card__photo {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 42%, #000 78%);
    mask-image: linear-gradient(to right, transparent 42%, #000 78%);
}

.kpop-option-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% 30%;
    opacity: 0.5;
    filter: brightness(1.05);
}

.kpop-option-card__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--kpop-purple-mid);
    opacity: 0.14;
    mix-blend-mode: color;
    pointer-events: none;
}

.kpop-option-card__inner {
    position: relative;
    z-index: 2;
    max-width: 58%;
}

.kpop-option-card__inner h2 {
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    margin-bottom: var(--kpop-space-sm);
}

.kpop-option-card__inner p {
    color: var(--kpop-gray);
}

.kpop-option-card__inner ul {
    list-style: none;
    margin: var(--kpop-space-sm) 0 0;
    padding: 0;
    color: var(--kpop-gray);
}

.kpop-option-card__inner ul li {
    position: relative;
    padding-left: 1.4em;
    margin-bottom: 0.45em;
}

.kpop-option-card__inner ul li::before {
    content: "¶5";
    position: absolute;
    left: 0;
    color: var(--kpop-pink);
    font-size: 0.85em;
}

.kpop-option-card__inner ul ul {
    margin-top: 0.45em;
}

.kpop-option-card__inner ul ul li::before {
    content: "º6";
    color: var(--kpop-lavender);
}

/* Mirrored card: photo left, copy right */
.kpop-option-card--flip {
    background:
        radial-gradient(ellipse 60% 80% at 15% 40%, rgba(110, 78, 190, 0.5) 0%, transparent 75%),
        var(--kpop-purple-deep);
}

.kpop-option-card--flip .kpop-option-card__photo {
    -webkit-mask-image: linear-gradient(to left, transparent 42%, #000 78%);
    mask-image: linear-gradient(to left, transparent 42%, #000 78%);
}

.kpop-option-card--flip .kpop-option-card__photo img {
    object-position: 30% 30%;
}

.kpop-option-card--flip .kpop-option-card__inner {
    margin-left: auto;
}

@media (max-width: 800px) {
    .kpop-option-card {
        padding: clamp(1.5rem, 4vw, 2.5rem);
    }
    .kpop-option-card__inner {
        max-width: none;
    }
    .kpop-option-card__photo img {
        opacity: 0.22;
    }
}

/* --- Scattered photos — pinned around the page edges, not in a wall --- */
.kpop-scatter {
    position: absolute;
    width: 480px;
    max-width: 42vw;
    z-index: 2;
}

/* Big tall portrait that sits behind the section content like a backdrop */
.kpop-polaroid--portrait {
    width: 750px;
    max-width: 56vw;
    z-index: 0;
}

/* Ticket photo: pinned between its inline top offset and the section bottom
   (inline `bottom`), so it always ENDS before the CTA card below — the image
   scales to that height at its natural ratio, width follows. */
.kpop-shows-relative .kpop-polaroid--portrait {
    width: auto;
    max-width: none;
}

.kpop-shows-relative .kpop-polaroid__img {
    height: 100%;
    /* width follows from the 3:5 aspect-ratio set above */
}

.kpop-shows-relative .kpop-polaroid__img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Bigger photo that sits behind the CTA words */
.kpop-scatter--behind {
    width: 620px;
    z-index: 0;
}

/* Content layer that floats above a behind-photo (CTA + shows section) */
.kpop-content-layer {
    position: relative;
    z-index: 1;
}

.kpop-scatter--sticker {
    width: auto;
}

/* A lone polaroid drifting between sections, pushed off-center */
.kpop-scatter-row {
    display: flex;
    justify-content: flex-end;
    padding-inline: 6%;
    margin-top: -3.5rem;
    margin-bottom: -1.5rem;
    position: relative;
    z-index: 2;
}

.kpop-shows-relative {
    position: relative;
}

/* CTA with polaroids parked in its bottom corners — extra room below the
   button so they never collide with the centered text */
.kpop-flow-cta--scatter {
    padding-bottom: calc(var(--kpop-space-2xl) + 260px);
}

@media (max-width: 999px) {
    .kpop-flow-cta--scatter {
        padding-bottom: var(--kpop-space-xl);
    }
}

/* Homepage continuation glow — picks up the hero's magenta on the left
   so the color field carries across the seam */
.kpop-flow__glow--continue {
    top: -520px;
    left: -18%;
    background: radial-gradient(circle, rgba(143, 30, 130, 0.22) 0%, transparent 62%);
}

@media (max-width: 999px) {
    /* Back into the flow on small screens — relative so they sit inline,
       cancelling the inline absolute pin coordinates. */
    .kpop-scatter {
        position: relative;
        inset: auto !important;
        margin: var(--kpop-space-lg) auto;
        display: block;
    }
    .kpop-scatter-row {
        margin: 0;
        padding: 0;
        justify-content: center;
    }
    .kpop-scatter {
        max-width: none;
    }
    .kpop-polaroid {
        width: min(480px, 88vw);
    }
}

/* Sticker pill living among the polaroids */
.kpop-wall-sticker {
    align-self: center;
    font-family: var(--kpop-font-display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--kpop-cream);
    color: var(--kpop-black);
    border-radius: 999px;
    padding: 12px 18px;
    transform: rotate(-6deg);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   Patreon card — the old full-bleed band, contained as a rounded card
   ========================================================================== */
/* Reusable "heart card" — gradient glow + heart-pattern overlay on a rounded
   card. Used by the Patreon block, the About blurbs, and the Contact card. */
.kpop-heartcard {
    position: relative;
    overflow: hidden;
    border-radius: var(--kpop-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--kpop-black);
}

.kpop-heartcard::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 80% at 85% 50%, rgba(255, 45, 135, 0.28) 0%, transparent 70%),
        radial-gradient(ellipse 55% 70% at 12% 22%, rgba(143, 30, 130, 0.24) 0%, transparent 70%),
        radial-gradient(ellipse 70% 50% at 35% 110%, rgba(74, 26, 122, 0.45) 0%, transparent 65%),
        radial-gradient(ellipse 60% 40% at 60% -10%, rgba(255, 45, 135, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.kpop-heartcard::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("assets/img/heart-pattern.png");
    background-repeat: repeat;
    background-size: 320px;
    opacity: 0.35;
    pointer-events: none;
}

.kpop-heartcard > * {
    position: relative;
    z-index: 1;
}

.kpop-patreon-card {
    padding: 0;
    min-height: 460px;
}

/* Patreon card keeps its gradient glow but drops the heart pattern — the photo
   carries that card now, and the hearts live on the booking CTA. */
.kpop-patreon-card::after {
    display: none;
}

/* Intro section: a melt photo on the LEFT, text offset to the RIGHT — balances
   the two right-side photos (Patreon + Shows). */
.kpop-intro-relative {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: center;
}

/* Intro: photo-only card beside the text — same card shape language as the
   Patreon card (radius + hairline border), but the text stays OUTSIDE it. */
.kpop-intro-layout {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
    width: 100%;
}

.kpop-intro-card {
    margin: 0;
    flex: 0 1 520px;
    aspect-ratio: 1 / 1;
    position: relative;
    isolation: isolate;
    border-radius: var(--kpop-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 80% at 70% 30%, rgba(91, 63, 163, 0.5) 0%, transparent 75%),
        var(--kpop-purple-deep);
}

/* Same wash recipe as the Rei/Patreon card photo: luminosity over a purple
   field + a color-blend purple overlay, so the two cards read as one family. */
.kpop-intro-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% center;
    display: block;
    opacity: 0.55;
    mix-blend-mode: luminosity;
    filter: brightness(1.05);
}

.kpop-intro-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--kpop-purple-mid);
    opacity: 0.32;
    mix-blend-mode: color;
    pointer-events: none;
}

/* Intro text: no card — centered type floating under the hero. */
.kpop-intro-relative .kpop-intro-text {
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
}

.kpop-intro-relative .kpop-intro-text .kpop-lead {
    margin-inline: auto;
}

/* Instagram card — heart gradient wrapper + grid of post tiles */
.kpop-igcard {
    padding: clamp(2rem, 4.5vw, 3.5rem);
}

.kpop-igcard__head {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--kpop-space-md);
    flex-wrap: wrap;
    margin-bottom: var(--kpop-space-lg);
}

.kpop-igcard__feed {
    position: relative;
    z-index: 2;
}

.kpop-igcard__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(0.5rem, 1.2vw, 1rem);
}

.kpop-igcard__tile {
    aspect-ratio: 1 / 1;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    transition: transform 0.2s var(--kpop-ease);
}

.kpop-igcard__tile:hover {
    transform: translateY(-3px);
}

.kpop-igcard__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kpop-igcard__tile--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kpop-pink-soft);
    opacity: 0.5;
    font-size: 1.25rem;
}

@media (max-width: 800px) {
    .kpop-igcard__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 999px) {
    .kpop-intro-relative {
        min-height: 0;
        display: block;
    }
    .kpop-intro-layout {
        flex-direction: column;
    }
    .kpop-intro-card {
        flex-basis: auto;
        width: 100%;
        max-width: 480px;
        margin-inline: auto;
    }
    .kpop-intro-relative .kpop-intro-text {
        max-width: none;
        text-align: center;
        margin-left: 0;
    }
    .kpop-intro-relative .kpop-intro-text .kpop-lead {
        margin-inline: auto;
    }
}

/* Booking CTA rendered as a heart-pattern card */
.kpop-cta-card {
    padding: clamp(3rem, 6vw, 5rem);
}

.kpop-cta-card h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.85rem);
    margin-bottom: var(--kpop-space-sm);
}

/* CTA section tall enough to hold the big portrait photo behind it, text
   vertically centred in the taller space */
.kpop-flow-cta--photo {
    min-height: 900px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 999px) {
    .kpop-flow-cta--photo {
        min-height: 0;
        display: block;
    }
}

/* Patreon card stays full-width; a melt photo dissolves in from the RIGHT,
   bleeding to the card's rounded edges. Text sits on the left, above it. */
.kpop-patreon-card__photo {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 1;
    pointer-events: none;
}

.kpop-patreon-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 28%;
    /* Card is too wide to crop horizontally, so object-position X is inert —
       nudge the subject toward the right edge by shifting the image itself. */
    transform: translateX(7%);
    opacity: 0.48;
    mix-blend-mode: luminosity;
    filter: brightness(1.05);
    -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 56%);
    mask-image: linear-gradient(to right, transparent 4%, #000 56%);
}

/* A purple wash over the photo so it reads tinted, not just dim */
.kpop-patreon-card__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--kpop-purple-mid);
    opacity: 0.32;
    mix-blend-mode: color;
    -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 56%);
    mask-image: linear-gradient(to right, transparent 4%, #000 56%);
    pointer-events: none;
}

.kpop-patreon-card .kpop-patreon__text {
    position: relative;
    z-index: 2;
    max-width: 56%;
    padding: clamp(2.5rem, 5vw, 4.5rem);
}

@media (max-width: 800px) {
    .kpop-patreon-card .kpop-patreon__text {
        max-width: none;
    }
    .kpop-patreon-card__photo img {
        opacity: 0.3;
    }
}

/* Contact card — cute heart-card holding the email + socials */
.kpop-contactcard {
    padding: clamp(2.75rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
    text-align: center;
}

.kpop-contactcard h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    margin-bottom: var(--kpop-space-md);
}

.kpop-contactcard__email {
    display: inline-block;
    font-family: var(--kpop-font-display);
    font-weight: 700;
    /* one line at every width: the font scales down before the address can
       ever wrap or clip */
    font-size: clamp(0.72rem, 3.5vw, 2.1rem);
    color: var(--kpop-white);
    white-space: nowrap;
    transition: color 0.2s var(--kpop-ease);
}

.kpop-contactcard__email:hover,
.kpop-contactcard__email:focus-visible {
    color: var(--kpop-pink);
}

.kpop-contactcard__socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--kpop-space-sm);
    margin-top: var(--kpop-space-lg);
}

.kpop-contactcard__socials a {
    font-size: var(--kpop-fs-small);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kpop-white);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 0.7em 1.4em;
    transition: color 0.2s var(--kpop-ease), background 0.2s var(--kpop-ease), border-color 0.2s var(--kpop-ease);
}

.kpop-contactcard__socials a:hover,
.kpop-contactcard__socials a:focus-visible {
    color: var(--kpop-cream);
    background: var(--kpop-pink);
    border-color: var(--kpop-pink);
}

/* Second paragraph of the hero (below the lead) */
.kpop-flow-hero__body {
    margin-top: var(--kpop-space-sm);
    max-width: 62ch;
    color: var(--kpop-text-muted);
}

/* --- Image slots in the flow layout ---
   Same placeholder treatment as the Patreon/host slots; swap in real
   photos by replacing the div with an <img> (keep the class). */
.kpop-flow-media {
    position: relative;
    aspect-ratio: 16 / 10;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: var(--kpop-radius);
    background:
        linear-gradient(135deg, rgba(255, 45, 135, 0.10) 0%, rgba(74, 26, 122, 0.35) 100%),
        var(--kpop-purple-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Full-width cinematic strip (hero marquee) */
.kpop-flow-media--wide {
    aspect-ratio: 21 / 8;
    border-radius: var(--kpop-radius-lg);
}

.kpop-flow-media__label {
    font-family: var(--kpop-font-display);
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.kpop-flow-media::after {
    content: attr(data-placeholder);
    position: absolute;
    bottom: var(--kpop-space-sm);
    left: var(--kpop-space-sm);
    right: var(--kpop-space-sm);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
}

/* Flow item with a photo beside the text */
.kpop-flow-item--media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--kpop-space-md) var(--kpop-space-lg);
    align-items: start;
}

@media (max-width: 900px) {
    .kpop-flow-item--media {
        grid-template-columns: 1fr;
    }
}

/* --- Contact index list (flow version of the old contact cards) --- */
.kpop-contact-list {
    display: flex;
    flex-direction: column;
}

.kpop-contact-list__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kpop-space-md);
    padding-block: var(--kpop-space-md);
    text-decoration: none;
}

.kpop-contact-list__item + .kpop-contact-list__item {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.kpop-contact-list__label {
    font-size: var(--kpop-fs-small);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--kpop-text-muted);
    flex-shrink: 0;
}

.kpop-contact-list__value {
    font-family: var(--kpop-font-display);
    font-size: clamp(1.05rem, 2.2vw, 1.85rem);
    line-height: 1.1;
    color: var(--kpop-white);
    text-align: right;
    overflow-wrap: anywhere;
    transition: color 0.2s var(--kpop-ease);
}

.kpop-contact-list__value .kpop-contact-list__arrow {
    display: inline-block;
    margin-left: 0.35em;
    transition: transform 0.2s var(--kpop-ease);
}

.kpop-contact-list__item:hover .kpop-contact-list__value,
.kpop-contact-list__item:focus-visible .kpop-contact-list__value {
    color: var(--kpop-pink);
}

.kpop-contact-list__item:hover .kpop-contact-list__arrow,
.kpop-contact-list__item:focus-visible .kpop-contact-list__arrow {
    transform: translateX(0.25em);
}

@media (max-width: 700px) {
    .kpop-contact-list__item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--kpop-space-xs);
    }
    .kpop-contact-list__value {
        text-align: left;
    }
}

/* --- Scroll reveal (class applied by flow.js; no-JS users see content) --- */
.kpop-reveal--init {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s var(--kpop-ease);
}

.kpop-reveal--in {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   About page — format steps + host block
   ========================================================================== */
.kpop-step__num {
    font-family: var(--kpop-font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    color: var(--kpop-pink);
    margin-bottom: var(--kpop-space-sm);
}

/* Host: portrait image left, bio right (stacks on mobile) */
.kpop-about-host {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--kpop-space-xl);
    align-items: center;
    max-width: 1000px;
    margin-inline: auto;
}

@media (max-width: 900px) {
    .kpop-about-host {
        grid-template-columns: 1fr;
        gap: var(--kpop-space-lg);
        max-width: 480px;
    }
}

.kpop-about-host__text h2 {
    margin-bottom: var(--kpop-space-sm);
}

.kpop-about-host__text p {
    color: var(--kpop-text-muted);
    max-width: 55ch;
}

.kpop-about-host__note {
    margin-top: var(--kpop-space-md);
    font-size: var(--kpop-fs-small);
    color: var(--kpop-gray-dark);
    font-style: italic;
}

/* Portrait placeholder — same treatment as the Patreon image slot */
.kpop-about-host__image {
    position: relative;
    aspect-ratio: 3 / 4;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: var(--kpop-radius);
    background:
        linear-gradient(135deg, rgba(255, 45, 135, 0.10) 0%, rgba(74, 26, 122, 0.35) 100%),
        var(--kpop-purple-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kpop-about-host__image-label {
    font-family: var(--kpop-font-display);
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.kpop-about-host__image::after {
    content: attr(data-placeholder);
    position: absolute;
    bottom: var(--kpop-space-sm);
    left: var(--kpop-space-sm);
    right: var(--kpop-space-sm);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
}

/* Inside the flow layout the host block sits in the section body, so the
   portrait shrinks and the pair top-aligns instead of centering full-width. */
.kpop-flow .kpop-about-host {
    grid-template-columns: 260px minmax(0, 1fr);
    max-width: none;
    margin-inline: 0;
    gap: var(--kpop-space-lg);
    align-items: start;
}

@media (max-width: 900px) {
    .kpop-flow .kpop-about-host {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
}

/* Side-by-side CTA buttons in the closing section */
.kpop-about-cta {
    display: flex;
    gap: var(--kpop-space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Lightbox — fullscreen overlay when the poster is clicked
   ========================================================================== */
.kpop-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(10, 4, 20, 0.92);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--kpop-space-md);
    opacity: 0;
    transition: opacity 0.2s var(--kpop-ease);
    cursor: zoom-out;
}

.kpop-lightbox.is-open { opacity: 1; }

.kpop-lightbox__img {
    max-width: min(92vw, 1100px);
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.7),
        0 0 80px rgba(255, 45, 135, 0.35);
    background: #ffffff;
    transform: scale(0.96);
    transition: transform 0.25s var(--kpop-ease);
}

.kpop-lightbox.is-open .kpop-lightbox__img { transform: scale(1); }

.kpop-lightbox__close {
    position: absolute !important;
    top: var(--kpop-space-md) !important;
    right: var(--kpop-space-md) !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    background: var(--kpop-pink) !important;
    background-color: var(--kpop-pink) !important;
    color: var(--kpop-white) !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1.75rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
    transition: background 0.2s var(--kpop-ease), transform 0.2s var(--kpop-ease);
}

.kpop-lightbox__close:hover {
    background: var(--kpop-pink-hot) !important;
    transform: scale(1.08);
}

/* ==========================================================================
   11. Footer (custom)
   ========================================================================== */
.kpop-footer {
    background: var(--kpop-black);
    padding-block: var(--kpop-space-xl) var(--kpop-space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--kpop-text-muted);
}

.kpop-footer__top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--kpop-space-xl);
    margin-bottom: var(--kpop-space-lg);
    padding-bottom: var(--kpop-space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 800px) {
    .kpop-footer__top {
        grid-template-columns: 1fr;
        gap: var(--kpop-space-lg);
    }
}

.kpop-footer__logo {
    font-family: var(--kpop-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.9;
    color: var(--kpop-white);
    text-transform: uppercase;
    margin-bottom: var(--kpop-space-sm);
}

/* Inline SVG brand logo in the footer (text block above is the fallback) */
.kpop-footer__logo-link {
    display: inline-block;
    line-height: 0;
}

.kpop-footer__logo-link svg {
    width: auto;
    height: 72px;
    display: block;
}

.kpop-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kpop-space-lg);
}

@media (max-width: 600px) {
    .kpop-footer__cols { grid-template-columns: repeat(2, 1fr); }
}

.kpop-footer__heading {
    font-family: var(--kpop-font-body) !important;
    font-size: var(--kpop-fs-small);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--kpop-lavender);
    margin-bottom: var(--kpop-space-sm);
}

.kpop-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kpop-footer__col li {
    margin-bottom: 0.5em;
}

.kpop-footer__col a {
    color: var(--kpop-white);
    font-weight: 500;
    transition: color 0.2s var(--kpop-ease);
}

.kpop-footer__col a:hover {
    color: var(--kpop-pink);
}

.kpop-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kpop-space-sm);
    font-size: var(--kpop-fs-small);
    color: var(--kpop-gray-dark);
}

.kpop-footer__bottom p {
    margin: 0;
}

/* Hide Astra's default small footer entirely — we're using our own */
.ast-small-footer,
.ast-small-footer-wrap,
.site-info,
footer.site-footer:not(.kpop-footer) {
    display: none !important;
}

/* Legacy site-footer styles (kept for any Astra footer widgets the user enables) */
.site-footer,
.footer-adv,
.ast-small-footer,
.ast-small-footer-wrap,
.footer-sml-layout-1,
.footer-sml-layout-2,
.site-info,
.ast-footer-overlay {
    background: var(--kpop-black) !important;
    background-color: var(--kpop-black) !important;
    color: var(--kpop-text-muted) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer,
.site-footer * {
    color: var(--kpop-text-muted) !important;
}

.site-footer a {
    color: var(--kpop-pink) !important;
}
.site-footer a:hover {
    color: var(--kpop-pink-hot) !important;
}

/* ==========================================================================
   12. Utilities
   ========================================================================== */
.kpop-text-center { text-align: center; }
.kpop-text-pink   { color: var(--kpop-pink); }
.kpop-mt-md       { margin-top: var(--kpop-space-md); }
.kpop-mt-lg       { margin-top: var(--kpop-space-lg); }
.kpop-mb-md       { margin-bottom: var(--kpop-space-md); }
.kpop-mb-lg       { margin-bottom: var(--kpop-space-lg); }