/* ===========================
   LANDING PAGE — MOBILE FIRST
   File: css/pages/landing.css
   Safari-hardened throughout.
=========================== */

:root {
    --landing-bg:       #f3f0e7;
    --landing-text:     #18120f;
    --landing-gold:     #e8c84a;
    --landing-gold-dk:  #c9a92e;
    /* high-contrast muted — must stay readable over the hero photo */
    --landing-muted:    rgba(24, 18, 15, 0.8);
    --nav-total-height: 94px;
}


/* ===========================
   HERO
=========================== */

.landing-hero {
    position: relative;
    width: 100%;

    /* Compact hero — the latest drops peek above the fold (the products
       themselves are the scroll cue). Safari-safe height cascade. */
    min-height: 480px;
    min-height: 72vh;
    min-height: 72svh;

    /* overflow: hidden clips graffiti — must be set */
    overflow: hidden;

    /* isolation: isolate — Safari 15.4+ only, safe to omit as fallback
       is handled by explicit z-index on children */

    /* Photo backdrop (studio/retail vibe) behind the cream wash below.
       Missing file = plain cream, nothing breaks. */
    background: var(--landing-bg) url("/static/images/landing/hero-bg.2a9ef0711b3e.jpg") center / cover no-repeat;
    color: var(--landing-text);
    font-family: var(--font-heading, 'Special Elite', monospace);

    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    /* Safe area — env() must come last so it overrides the base value */
    padding-top: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);

    /* Prevent iOS text size adjust on rotate */
    -webkit-text-size-adjust: 100%;
}


/* Cream spotlight — strong wash in the center so the type sits on a
   clean zone; the photo shows through toward the edges for depth
   instead of an even, washed-out haze. (z-0; grain/content above.)
   Without a photo it's cream-on-cream: invisible, harmless. */
.landing-hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: rgba(243, 240, 231, 0.82);   /* fallback: old flat wash */
    background: radial-gradient(
        ellipse 80% 70% at 50% 44%,
        rgba(243, 240, 231, 0.96) 0%,
        rgba(243, 240, 231, 0.88) 45%,
        rgba(243, 240, 231, 0.55) 100%
    );
}


/* ===========================
   GRAIN OVERLAY
=========================== */

.landing-grain {
    position: absolute;
    /* inset: 0 not supported in Safari < 15 — use explicit sides */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}


/* ===========================
   GRAFFITI BACKDROP
=========================== */

.landing-graffiti {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

.graffiti-row {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    font-family: var(--font-heading, 'Special Elite', monospace);
    font-size: clamp(28px, 2.8vw, 66px);
    letter-spacing: 0.05em;
    text-transform: lowercase;
    color: var(--landing-text);
    line-height: 1;
    font-weight: normal;
    padding-left: 1vw;
}

.graffiti-row:nth-child(odd)  { -webkit-transform: rotate(-1deg);  transform: rotate(-3deg);  opacity: 0.1; }
.graffiti-row:nth-child(even) { -webkit-transform: rotate(0.8deg); transform: rotate(1.8deg); opacity: 0.045; }
.graffiti-row:nth-child(3n)   { opacity: 0.075; }


/* ===========================
   HERO CONTENT
=========================== */

.landing-content {
    position: relative;
    z-index: 3;

    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    text-align: center;

    /* gap not supported on flex in Safari < 14.1 — use margin on children */
    gap: clamp(12px, 3vw, 24px);
    padding: 0 clamp(16px, 5vw, 48px);

    /* Use forwards not both — 'both' can hide elements in Safari if
       animation is delayed and page is already scrolled */
    -webkit-animation: heroFadeIn 0.8s ease forwards;
    animation: heroFadeIn 0.8s ease forwards;
}

/* Fallback spacing for Safari < 14.1 that ignores flex gap */
.landing-content > * + * {
    margin-top: clamp(12px, 3vw, 24px);
}


/* ===========================
   OVERLINE
=========================== */

.landing-overline {
    font-family: var(--font-heading, 'Special Elite', monospace);
    font-size: clamp(9px, 2vw, 12px);
    letter-spacing: 0.35em;
    text-transform: lowercase;
    color: var(--landing-muted);
    -webkit-animation: heroFadeIn 0.8s ease 0.1s forwards;
    animation: heroFadeIn 0.8s ease 0.1s forwards;
    /* Ensure visible before animation fires */
    opacity: 0;
}


/* ===========================
   WORDMARK
=========================== */

.landing-wordmark {
    -webkit-animation: heroFadeIn 0.8s ease 0.2s forwards;
    animation: heroFadeIn 0.8s ease 0.2s forwards;
    opacity: 0;
}

.fleasts-landing-wordmark {
    display: block;
    font-family: var(--font-heading, 'Special Elite', monospace);
    font-size: clamp(52px, 18vw, 160px);
    line-height: 0.88;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    color: var(--landing-text);
    white-space: nowrap;
}

.fleasts-landing-wordmark em {
    font-style: normal;
    color: var(--landing-gold);
}


/* ===========================
   TAGLINE
=========================== */

.landing-tagline {
    font-family: var(--font-heading, 'Special Elite', monospace);
    font-size: clamp(20px, 2.5vw, 34px);
    letter-spacing: 0.25em;
    text-transform: lowercase;
    color: var(--landing-muted);
    margin: 0;
    -webkit-animation: heroFadeIn 0.8s ease 0.3s forwards;
    animation: heroFadeIn 0.8s ease 0.3s forwards;
    opacity: 0;
}


/* ===========================
   CTA BUTTON
=========================== */

.landing-shop-btn {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    min-height: 48px;
    min-width: 140px;
    padding: 0 clamp(24px, 6vw, 40px);

    font-family: var(--font-heading, 'Special Elite', monospace);
    font-size: clamp(11px, 2.5vw, 14px);
    letter-spacing: 0.22em;
    text-transform: lowercase;
    text-decoration: none;

    color: var(--landing-text);
    background: var(--landing-gold);
    border: 1.5px solid var(--landing-gold);
    border-radius: 4px;
    -webkit-border-radius: 4px;

    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
    -webkit-transition: background 0.22s ease, border-color 0.22s ease,
                color 0.22s ease, -webkit-transform 0.12s ease, box-shadow 0.12s ease;
    transition: background 0.22s ease, border-color 0.22s ease,
                color 0.22s ease, transform 0.12s ease, box-shadow 0.12s ease;

    -webkit-animation: heroFadeIn 0.8s ease 0.45s forwards;
    animation: heroFadeIn 0.8s ease 0.45s forwards;
    opacity: 0;

    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;

    /* Prevent iOS from styling buttons */
    -webkit-appearance: none;
    appearance: none;
}

.landing-shop-btn:hover {
    background: var(--landing-text);
    border-color: var(--landing-text);
    color: var(--landing-bg);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22);
}

.landing-shop-btn:active {
    -webkit-transform: scale(0.96) translateY(1px);
    transform: scale(0.96) translateY(1px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    -webkit-transition-duration: 0ms;
    transition-duration: 0ms;
}


/* ===========================
   SCROLL HINT
=========================== */

.landing-scroll-hint {
    position: absolute;
    bottom: clamp(20px, 4vh, 36px);
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 3;
    opacity: 1;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease;
    -webkit-animation: heroFadeIn 1s ease 1.2s forwards;
    animation: heroFadeIn 1s ease 1.2s forwards;
}

.landing-scroll-line {
    display: block;
    width: 1px;
    height: clamp(32px, 5vh, 48px);
    background: var(--landing-text);
    opacity: 0.3;
    margin: 0 auto;
    -webkit-animation: scrollPulse 2s ease-in-out infinite;
    animation: scrollPulse 2s ease-in-out infinite;
}

@-webkit-keyframes scrollPulse {
    0%   { -webkit-transform: scaleY(1);   opacity: 0.3; }
    50%  { -webkit-transform: scaleY(0.5); opacity: 0.08; }
    100% { -webkit-transform: scaleY(1);   opacity: 0.3; }
}
@keyframes scrollPulse {
    0%   { transform: scaleY(1);   opacity: 0.3; }
    50%  { transform: scaleY(0.5); opacity: 0.08; }
    100% { transform: scaleY(1);   opacity: 0.3; }
}


/* ===========================
   MARQUEE STRIP
=========================== */

.marquee-strip {
    width: 100%;
    background: var(--landing-text);
    overflow: hidden;
    padding: clamp(10px, 2vw, 16px) 0;
}

.marquee-track {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: clamp(16px, 4vw, 32px);
    width: -webkit-max-content;
    width: max-content;

    font-family: var(--font-heading, 'Special Elite', monospace);
    font-size: clamp(11px, 2.5vw, 15px);
    letter-spacing: 0.18em;
    text-transform: lowercase;
    color: var(--landing-gold);

    -webkit-animation: marqueeScroll 28s linear infinite;
    animation: marqueeScroll 28s linear infinite;
}

/* Fallback gap for Safari < 14.1 */
.marquee-track > * + * {
    margin-left: clamp(16px, 4vw, 32px);
}

.marquee-dot {
    opacity: 0.45;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

@-webkit-keyframes marqueeScroll {
    from { -webkit-transform: translateX(0); }
    to   { -webkit-transform: translateX(-50%); }
}
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.marquee-strip:hover .marquee-track,
.marquee-strip:focus-within .marquee-track {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}


/* ===========================
   ANIMATIONS
=========================== */

@-webkit-keyframes heroFadeIn {
    from { opacity: 0; -webkit-transform: translateY(16px); transform: translateY(16px); }
    to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@-webkit-keyframes wordmarkJitter {
    0%   { -webkit-transform: translate(0, 0) rotate(0deg); }
    33%  { -webkit-transform: translate(-1px, 1px) rotate(-0.4deg); }
    66%  { -webkit-transform: translate(1px, -1px) rotate(0.3deg); }
    100% { -webkit-transform: translate(0, 0) rotate(0deg); }
}
@keyframes wordmarkJitter {
    0%   { transform: translate(0, 0) rotate(0deg); }
    33%  { transform: translate(-1px, 1px) rotate(-0.4deg); }
    66%  { transform: translate(1px, -1px) rotate(0.3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}


/* ===========================
   REDUCED MOTION
=========================== */

@media (prefers-reduced-motion: reduce) {
    .marquee-track             { -webkit-animation-duration: 80s; animation-duration: 80s; }
    .landing-scroll-line       { -webkit-animation: none; animation: none; }
    .fleasts-landing-wordmark  { -webkit-animation: none; animation: none; }
}


/* ===========================
   DESKTOP ENHANCEMENTS
=========================== */

@media (min-width: 768px) {
    .fleasts-landing-wordmark {
        -webkit-animation: wordmarkJitter 3s steps(2) infinite;
        animation: wordmarkJitter 3s steps(2) infinite;
        /* Override the opacity:0 set for fade-in */
        opacity: 1;
    }
}


/* ===========================
   LANDING PAGE NAV OVERRIDE
   Scoped to body.page-landing only.
=========================== */

body.page-landing .fleasts-nav {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent !important;
    border-bottom: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

body.page-landing .fleasts-nav-wordmark {
    color: var(--landing-text) !important;
}

body.page-landing .fleasts-nav-tagline {
    color: var(--landing-muted) !important;
}

body.page-landing .fleasts-nav-right a {
    color: var(--landing-text) !important;
}

body.page-landing .fleasts-nav-right a:hover {
    color: var(--landing-text) !important;
    opacity: 0.6;
}

body.page-landing .fleasts-nav-cart {
    color: var(--landing-text) !important;
    border-color: rgba(24, 18, 15, 0.25) !important;
}

body.page-landing .fleasts-nav-cart:hover {
    color: var(--landing-text) !important;
    border-color: var(--landing-text) !important;
}

body.page-landing .cart-badge {
    background: var(--landing-gold) !important;
    color: var(--landing-text) !important;
    border-color: var(--landing-bg) !important;
}

body.page-landing .mobile-toggle {
    border-color: rgba(24, 18, 15, 0.25) !important;
}

body.page-landing .mobile-toggle span {
    background: var(--landing-text) !important;
}

body.page-landing .landing-hero {
    min-height: 72vh !important;
    min-height: 72svh !important;
    padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
}

body.page-landing .fleasts-nav--scrolled {
    background: rgba(243, 240, 231, 0.95) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(24, 18, 15, 0.08) !important;
}

/* Lift the scroll hint above the bottom tab bar on mobile */
@media (max-width: 699.98px) {
    .landing-scroll-hint {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
}


/* ===========================
   BELOW THE HERO — LATEST DROPS + SHOP BY TYPE
   (the homepage shows the shirts now, not just the wordmark)
=========================== */

.landing-drops,
.landing-cats {
    background: var(--landing-bg);
    color: var(--landing-text);
    font-family: var(--font-heading, 'Special Elite', monospace);
    padding: clamp(2.5rem, 7vw, 4.5rem) 1rem;
}

.landing-cats { padding-top: 0; }

.landing-section__head {
    max-width: 1100px;
    margin: 0 auto clamp(1.25rem, 4vw, 2rem);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    gap: 1rem;
}

.landing-section__title {
    font-family: inherit;
    font-size: clamp(1.25rem, 5vw, 1.8rem);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    margin: 0;
    color: var(--landing-text);
}

.landing-section__more {
    font-size: clamp(0.72rem, 2.5vw, 0.82rem);
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: var(--landing-muted);
    text-decoration: none;
    white-space: nowrap;
    -webkit-transition: color 0.18s ease;
    transition: color 0.18s ease;
    min-height: 44px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.landing-section__more:hover { color: var(--landing-text); }

/* Product grid — 2-up mobile, 4-up desktop */
.landing-drops__grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.75rem, 3vw, 1.5rem);
}

@media (min-width: 769px) {
    .landing-drops__grid { grid-template-columns: repeat(4, 1fr); }
}

.landing-drop {
    display: block;
    text-decoration: none;
    color: var(--landing-text);
    -webkit-tap-highlight-color: transparent;
}

.landing-drop__img {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(24, 18, 15, 0.05);
    border: 1px solid rgba(24, 18, 15, 0.08);
}

.landing-drop__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-transition: -webkit-transform 0.35s ease;
    transition: transform 0.35s ease;
}

@media (hover: hover) {
    .landing-drop:hover .landing-drop__img img {
        -webkit-transform: scale(1.04);
        transform: scale(1.04);
    }
    .landing-drop:hover .landing-drop__name { color: var(--landing-gold-dk); }
}

.landing-drop__row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.6rem;
    font-size: clamp(0.78rem, 2.6vw, 0.9rem);
    line-height: 1.3;
}

.landing-drop__name {
    text-transform: lowercase;
    -webkit-transition: color 0.18s ease;
    transition: color 0.18s ease;
    min-width: 0;
}

.landing-drop__price {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.landing-drop__cat {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--landing-muted);
    text-transform: lowercase;
}

/* Shop-by-type chips — compact pills under the drops grid */
.landing-chips {
    max-width: 1100px;
    margin: clamp(1.25rem, 4vw, 2rem) auto 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 0.75rem);
}

.landing-chip {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0 1.1rem;
    border: 1px solid rgba(24, 18, 15, 0.22);
    border-radius: 999px;
    text-decoration: none;
    color: var(--landing-text);
    font-size: clamp(0.78rem, 2.6vw, 0.88rem);
    text-transform: lowercase;
    letter-spacing: 0.08em;
    -webkit-transition: border-color 0.18s ease, background 0.18s ease;
    transition: border-color 0.18s ease, background 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.landing-chip span {
    color: var(--landing-muted);
    -webkit-transition: color 0.18s ease, -webkit-transform 0.18s ease;
    transition: color 0.18s ease, transform 0.18s ease;
}

@media (hover: hover) {
    .landing-chip:hover {
        border-color: var(--landing-gold-dk);
        background: rgba(232, 200, 74, 0.08);
    }
    .landing-chip:hover span {
        color: var(--landing-gold-dk);
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
}


/* ===========================
   TYPEWRITER HERO
   "say [expression] wear it." — the expressions ARE the product
=========================== */

.landing-say,
.landing-wear {
    font-family: var(--font-heading, 'Special Elite', monospace);
    font-size: clamp(15px, 2.2vw, 22px);
    letter-spacing: 0.18em;
    text-transform: lowercase;
    color: var(--landing-muted);
    margin: 0;
}

.landing-type {
    font-family: var(--font-heading, 'Special Elite', monospace);
    font-size: clamp(28px, 7.5vw, 64px);
    line-height: 1.15;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    color: var(--landing-text);
    margin: 0;
    min-height: 1.3em;       /* no layout jump while typing */
    font-weight: normal;
}

.landing-type__link {
    color: inherit;
    text-decoration: none;
    -webkit-transition: color 0.18s ease;
    transition: color 0.18s ease;
}

.landing-type__link:hover {
    color: var(--landing-gold-dk);
}

.landing-caret {
    display: inline-block;
    width: 0.08em;
    height: 0.95em;
    margin-left: 0.06em;
    vertical-align: -0.12em;
    background: var(--landing-gold);
    -webkit-animation: caretBlink 0.9s steps(1) infinite;
    animation: caretBlink 0.9s steps(1) infinite;
}

@-webkit-keyframes caretBlink { 50% { opacity: 0; } }
@keyframes caretBlink { 50% { opacity: 0; } }

.landing-ctas {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 0.7rem;
}

/* "new" badge on the freshest drop */
.landing-drop__img {
    position: relative;
}

.landing-drop__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    background: var(--landing-gold);
    color: var(--landing-text);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    padding: 2px 9px;
    border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
    .landing-caret { -webkit-animation: none; animation: none; }
}

/* ===========================
   DANCE LINE
   Same house, different room: the dance landing swaps the gold accent
   for a dusty rose and points the hero at its own photo slot.
=========================== */

body.page-dance {
    --landing-gold:    #e0a0b4;
    --landing-gold-dk: #b9667f;
}

body.page-dance .landing-hero {
    /* dance photo slot — drop a studio/stage shot here; missing file = cream */
    background-image: url("/static/images/landing/hero-bg-dance.0f3cf5b19598.jpg");
}

.landing-dance-note {
    margin: 0;
    font-size: clamp(0.72rem, 2.4vw, 0.85rem);
    letter-spacing: 0.12em;
    color: var(--landing-muted);
}

.landing-drop__price--stockist {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--landing-muted);
}

/* Crossover band — street landing points to dance and vice versa */
.landing-xline {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 0.4rem 1.25rem;
    padding: clamp(1.5rem, 5vw, 2.5rem) 1.25rem;
    background: var(--landing-text);
    text-align: center;
}

.landing-xline__text {
    margin: 0;
    font-family: var(--font-heading, 'Special Elite', monospace);
    font-size: clamp(0.95rem, 3vw, 1.2rem);
    color: var(--landing-bg);
}

.landing-xline__link {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    color: var(--landing-gold);
    text-decoration: none;
    font-size: clamp(0.8rem, 2.6vw, 0.95rem);
    letter-spacing: 0.12em;
}

.landing-xline--dance .landing-xline__link { color: #e0a0b4; }

.landing-xline__link span {
    -webkit-transition: -webkit-transform 0.18s ease;
    transition: transform 0.18s ease;
}

@media (hover: hover) {
    .landing-xline__link:hover { text-decoration: underline; }
    .landing-xline__link:hover span {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
}