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

/* Dance landing: bigger brand overline ("flea's ts presents").
   Mobile-first — the base size is the mobile size, scaled up at wider widths. */
body.page-dance .landing-overline {
    font-size: 1.05rem;       /* ~17px on mobile (was floored at 9px) */
    letter-spacing: 0.2em;
}
@media (min-width: 768px) {
    body.page-dance .landing-overline { font-size: 1.5rem; }
}


/* ===========================
   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;
    /* Nav is transparent over the cream hero here — ink focus, not gold. */
    --focus-ring: #18120f;
}

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;
}

/* Account/login + log-out icons match the cart on the cream landing nav — ink,
   not the grey/gold they use over the dark storefront nav (gold-on-cream is
   invisible). */
body.page-landing .fleasts-nav-account,
body.page-landing .fleasts-nav-account:hover,
body.page-landing .fleasts-nav-logout,
body.page-landing .fleasts-nav-logout:hover {
    color: var(--landing-text) !important;
    border-color: rgba(24, 18, 15, 0.25) !important;
}

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

/* Storefront-switcher trigger reads ink on the cream landing nav too (the popover
   itself stays a dark menu layer, which is fine over the cream hero). */
body.page-landing .sf-switch__btn {
    color: var(--landing-text) !important;
    border-color: rgba(24, 18, 15, 0.25) !important;
}
body.page-landing .sf-switch__btn: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
   (matches the tab-bar's 767.98px breakpoint) */
@media (max-width: 767.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);
    /* tight vertical rhythm — the section earns its hero proximity */
    padding: clamp(1.4rem, 4vw, 2.25rem) 1rem;
}

/* ── Vibe wall photo backdrop ──
   Drop a photo at static/images/landing/wall-bg.jpg (street) or
   wall-bg-dance.jpg (dance) and it appears behind a cream wash;
   missing file = plain cream, nothing breaks. */
.landing-drops {
    position: relative;
    background: var(--landing-bg) url("/static/images/landing/wall-bg.9b71619a4178.jpg") center / cover no-repeat;
}

body.page-dance .landing-drops {
    background-image: url("/static/images/landing/wall-bg-dance.jpg");
}

.landing-drops::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(243, 240, 231, 0.82);
}

/* children paint above the wash */
.landing-drops > * {
    position: relative;
}

.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.c67c8400fb9e.jpg");
}

.landing-dance-note {
    margin: 0;
    font-size: clamp(0.72rem, 2.4vw, 0.85rem);
    letter-spacing: 0.12em;
    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; }

/* dance vibe wall — rose accents instead of gold (the quote marks + hover
   already follow --landing-gold, which page-dance remaps to rose) */
body.page-dance .landing-section__title--wall::after { background: rgba(224, 160, 180, 0.45); }
body.page-dance .landing-expr::before { background: rgba(224, 160, 180, 0.5); }

/* Dance vibe notes flip to rose on hover (street flips to ink) — keeps the
   quirky hand-placed wall, just in the dance palette. */
@media (hover: hover) {
    body.page-dance .landing-expr:hover {
        background: #e0a0b4;
        border-color: #e0a0b4;
        color: #18120f;
    }
    body.page-dance .landing-expr:hover .landing-expr__quote { text-decoration-color: #18120f; }
    body.page-dance .landing-expr:hover .landing-expr__quote::before,
    body.page-dance .landing-expr:hover .landing-expr__quote::after { color: #18120f; }
}

.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);
    }
}


/* ===========================
   EXPRESSION TILES — the sayings as the storefront
=========================== */

.landing-exprs__grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.6rem, 2.5vw, 1rem);
}

@media (min-width: 600px) {
    .landing-exprs__grid { grid-template-columns: repeat(3, 1fr); }
}

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

/* "vibe wall" header — gold marker swipe under the words */
.landing-section__title--wall {
    position: relative;
    display: inline-block;
    z-index: 0;
}

.landing-section__title--wall::after {
    content: "";
    position: absolute;
    left: -6px;
    right: -10px;
    bottom: 0.05em;
    height: 0.42em;
    background: rgba(232, 200, 74, 0.45);
    z-index: -1;
    -webkit-transform: skew(-12deg) rotate(-1deg);
    transform: skew(-12deg) rotate(-1deg);
}

/* Tiles tilt like hand-placed labels and flip to ink on hover */
.landing-expr {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    border: 1px solid rgba(24, 18, 15, 0.16);
    border-radius: 10px;
    background: #faf8f3;
    text-decoration: none;
    color: var(--landing-text);
    position: relative;
    -webkit-transform: rotate(-0.8deg);
    transform: rotate(-0.8deg);
    -webkit-transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* masking tape pinning each note to the wall */
.landing-expr::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 46px;
    height: 14px;
    background: rgba(232, 200, 74, 0.5);
    -webkit-transform: translateX(-50%) rotate(-2.5deg);
    transform: translateX(-50%) rotate(-2.5deg);
}

/* hand-placed: tilts and nudges vary down the wall */
.landing-expr:nth-child(even) {
    -webkit-transform: rotate(0.8deg);
    transform: rotate(0.8deg);
}

.landing-expr:nth-child(even)::before {
    -webkit-transform: translateX(-50%) rotate(2deg);
    transform: translateX(-50%) rotate(2deg);
}

.landing-expr:nth-child(3n) {
    -webkit-transform: rotate(-1.5deg) translateY(2px);
    transform: rotate(-1.5deg) translateY(2px);
}

.landing-expr:nth-child(4n) {
    -webkit-transform: rotate(1.2deg) translateY(-2px);
    transform: rotate(1.2deg) translateY(-2px);
}

.landing-expr__quote {
    padding: 0.55rem 0.5rem 0.7rem;
    text-align: center;
    font-size: clamp(0.95rem, 3.4vw, 1.3rem);
    line-height: 1.2;
    text-transform: lowercase;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

/* gold quote marks do the talking */
.landing-expr__quote::before { content: "“"; color: var(--landing-gold); margin-right: 2px; }
.landing-expr__quote::after  { content: "”"; color: var(--landing-gold); margin-left: 2px; }

.landing-expr__count {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    color: var(--landing-muted);
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

/* Garment photo fills the top of the card; the colourways stack and crossfade. */
.landing-expr__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 9px 9px 0 0;
    background: #efe9dd;
}

.landing-expr__thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;      /* was cover — show the WHOLE garment, never crop */
    background: #efe9dd;       /* letterbox matches the card surface */
    opacity: 0;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.landing-expr__thumb.is-active,
.landing-expr__thumb:only-child { opacity: 1; }

@media (hover: hover) {
    .landing-expr:hover {
        border-color: rgba(24, 18, 15, 0.4);
        -webkit-transform: rotate(0deg) translateY(-3px);
        transform: rotate(0deg) translateY(-3px);
        -webkit-box-shadow: 0 10px 22px rgba(24, 18, 15, 0.16);
        box-shadow: 0 10px 22px rgba(24, 18, 15, 0.16);
    }
    .landing-expr:hover .landing-expr__quote {
        text-decoration: underline;
        text-decoration-style: wavy;
        text-decoration-color: var(--landing-gold);
        text-underline-offset: 5px;
        text-decoration-thickness: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-expr,
    .landing-expr:nth-child(even),
    .landing-expr:nth-child(3n),
    .landing-expr:nth-child(4n) { -webkit-transform: none; transform: none; }
}

/* ============================================================
   WORLDS BAND — "more from flea's ts": cards for the OTHER storefronts,
   rendered below a landing so dance/wholesale are discoverable above the footer.
============================================================ */
.worlds-band {
    background: #ece6d8;
    border-top: 1px solid rgba(24, 18, 15, 0.08);
    padding: clamp(2rem, 6vw, 3.4rem) 1.2rem;
}
.worlds-band__inner { max-width: 1000px; margin: 0 auto; }
.worlds-band__kicker {
    display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem;
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: .72rem; letter-spacing: .2em; text-transform: lowercase;
    color: var(--landing-muted, #6f635a);
}
.worlds-band__kicker::before { content: ""; width: 26px; height: 2px; background: var(--landing-gold, #c8a84b); }
.worlds-band__cards { display: grid; gap: .9rem; }
@media (min-width: 620px) {
    .worlds-band__cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
.worlds-card {
    display: flex; flex-direction: column;
    background: #fffdf8; border: 1px solid rgba(24, 18, 15, 0.1);
    border-left: 4px solid var(--wc-accent, #c8a84b);
    border-radius: 12px; padding: 1.15rem 1.25rem; text-decoration: none;
    -webkit-transition: -webkit-transform .18s ease, box-shadow .18s ease;
    transition: transform .18s ease, box-shadow .18s ease;
}
.worlds-card:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(24, 18, 15, 0.11); }
.worlds-card:focus-visible { outline: 2px solid var(--wc-accent, #c8a84b); outline-offset: 3px; }
/* Optional landscape graphic at the top of the card — bleeds to the edges, clipped
   to the card radius. No graphic => renders exactly like the text-only card. */
.worlds-card--media { overflow: hidden; }
.worlds-card__media {
    display: block; margin: -1.15rem -1.25rem .9rem; aspect-ratio: 3 / 2; background: #efe9dd;
}
.worlds-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.worlds-card__kicker {
    font-family: 'Special Elite', 'Courier New', monospace;
    font-size: .66rem; letter-spacing: .14em; text-transform: lowercase; color: var(--landing-muted, #6f635a);
}
.worlds-card__title { font-size: 1.16rem; font-weight: 700; color: var(--landing-text, #18120f); margin: .3rem 0 .3rem; }
.worlds-card__desc { font-size: .9rem; line-height: 1.45; color: var(--landing-muted, #6f635a); }
.worlds-card__cta {
    margin-top: .85rem; font-family: 'Special Elite', 'Courier New', monospace;
    font-size: .78rem; letter-spacing: .04em; color: #8a6a1f;
}
@media (prefers-reduced-motion: reduce) {
    .worlds-card, .worlds-card:hover { -webkit-transform: none; transform: none; }
}