/*
 * FetishBound page styles — loaded ONLY on /fetishbound/ via
 * {{#contentFor "page_styles"}} in page-fetishbound.hbs, so the rest of
 * the site doesn't ship this ~1900-line bespoke system in main.css.
 * All selectors are scoped to .fetishbound / .fb-* / html.on-fetishbound.
 */

/* =========================================================
   FETISHBOUND — festival/warehouse/concert energy
   Scoped to .fetishbound; component prefix .fb-*
   Source: D:\Pictures\fetishbound (Dec 22 2024 shoot)
   ========================================================= */

/* ─── Page-wide chrome overrides — keep site nav visible, hide footer / aux ─── */
html.on-fetishbound body { background: #0e0a0c; color: rgba(255,255,255,0.86); }
html.on-fetishbound .site-footer,
html.on-fetishbound .floating-audio-player,
html.on-fetishbound .scroll-to-top { display: none !important; }
/* Keep the site nav sticky over the FetishBound chaos, with a dark backdrop
   from the start so it reads against drifting tiles instead of fading in
   only after scroll. Z-index sits above the grain (3) and below the audio
   dock (50). */
html.on-fetishbound .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 20;
    background: rgba(14, 10, 12, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(var(--color-accent-rgb),0.18);
}
html.on-fetishbound .site-header.scrolled {
    background: rgba(8, 6, 10, 0.96);
}
/* Push page content below the now-fixed header */
html.on-fetishbound .site-main { padding-top: 64px; }

.fetishbound {
    --fb-bg: #0e0a0c;
    --fb-bg-deep: #08060a;
    --fb-amber: #e8a012;
    --fb-magenta: #c01654;
    --fb-cobalt: #1b46d0;
    --fb-text: rgba(255,255,255,0.88);
    --fb-text-soft: rgba(255,255,255,0.62);
    background: var(--fb-bg);
    color: var(--fb-text);
    overflow-x: hidden;
    font-family: var(--font-sans);
}

/* Subtle film grain on top of everything except the lightbox */
.fetishbound .fb-grain {
    position: fixed; inset: 0; pointer-events: none; z-index: 3;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.55'/></svg>");
    mix-blend-mode: overlay;
    opacity: 0.10;
}

.fetishbound .fb-section { position: relative; width: 100%; }
.fetishbound .fb-eyebrow {
    font-family: var(--font-sans); font-weight: 600;
    font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
    color: var(--fb-amber);
}

/* ─── I. Arrival ─── */
.fetishbound .fb-arrival {
    position: relative; min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; padding: 80px 32px;
}
.fetishbound .fb-arrival__bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.fetishbound .fb-arrival__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(192,22,84,0.35) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(27,70,208,0.35) 0%, transparent 60%),
        linear-gradient(180deg, rgba(8,6,10,0.55) 0%, rgba(8,6,10,0.85) 100%);
}
.fetishbound .fb-arrival__inner {
    position: relative; z-index: 2; text-align: center;
    max-width: 1100px;
    animation: fb-arrival-in 1.4s cubic-bezier(0.2,0.7,0.2,1) 0.2s both;
}
.fetishbound .fb-arrival__eyebrow {
    font-family: var(--font-sans); font-weight: 600;
    font-size: clamp(11px, 1.4vw, 14px); letter-spacing: 0.6em;
    text-transform: uppercase; color: var(--fb-amber); margin: 0 0 28px;
}
.fetishbound .fb-arrival__title {
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(72px, 14vw, 220px);
    line-height: 0.92; letter-spacing: -0.03em;
    margin: 0 0 36px;
    color: #fff;
    text-shadow: 0 0 60px rgba(192,22,84,0.45), 0 4px 30px rgba(0,0,0,0.6);
}
.fetishbound .fb-arrival__title em {
    font-style: italic; color: var(--fb-amber);
}
.fetishbound .fb-arrival__body p {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(20px, 2.4vw, 30px); line-height: 1.35;
    margin: 0 0 6px; color: rgba(255,255,255,0.9);
}
.fetishbound .fb-arrival__stamp {
    margin: 36px 0 0; font-size: 11px; letter-spacing: 0.35em;
    text-transform: uppercase; color: rgba(255,255,255,0.6);
}
@keyframes fb-arrival-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── II. Energy Wall ─── */
.fetishbound .fb-wall {
    padding: 96px 16px; background: var(--fb-bg);
}
.fetishbound .fb-wall__grid {
    max-width: 1400px; margin: 0 auto;
    display: grid; gap: 10px;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(120px, auto);
    grid-auto-flow: dense;
}
.fetishbound .fb-tile {
    margin: 0; padding: 0; border: 0; background: #000;
    overflow: hidden; position: relative; cursor: default;
    box-shadow: 0 4px 30px rgba(0,0,0,0.4);
    transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}
.fetishbound .fb-tile--video { cursor: pointer; }
.fetishbound .fb-tile:hover { transform: scale(1.02) rotate(-0.4deg); z-index: 2; box-shadow: 0 14px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(var(--color-accent-rgb),0.4); filter: brightness(1.08); }
.fetishbound .fb-tile img,
.fetishbound .fb-tile video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.fetishbound .fb-tile--video::after {
    content: '▶'; position: absolute; bottom: 10px; right: 12px;
    font-size: 14px; color: rgba(255,255,255,0.85);
    background: rgba(0,0,0,0.55); padding: 4px 8px; border-radius: 999px;
    pointer-events: none;
}

/* Asymmetric tile cells — deliberately crowded */
.fetishbound .fb-tile--a { grid-column: span 4; grid-row: span 3; }
.fetishbound .fb-tile--b { grid-column: span 3; grid-row: span 2; }
.fetishbound .fb-tile--c { grid-column: span 5; grid-row: span 3; }
.fetishbound .fb-tile--d { grid-column: span 3; grid-row: span 4; }
.fetishbound .fb-tile--e { grid-column: span 4; grid-row: span 2; }
.fetishbound .fb-tile--f { grid-column: span 5; grid-row: span 2; }
.fetishbound .fb-tile--g { grid-column: span 4; grid-row: span 3; }
.fetishbound .fb-tile--h { grid-column: span 5; grid-row: span 2; }
.fetishbound .fb-tile--i { grid-column: span 3; grid-row: span 3; }
.fetishbound .fb-tile--j { grid-column: span 4; grid-row: span 2; }
.fetishbound .fb-tile--k { grid-column: span 5; grid-row: span 3; }
.fetishbound .fb-tile--l { grid-column: span 3; grid-row: span 2; }
.fetishbound .fb-tile--m { grid-column: span 4; grid-row: span 3; }
.fetishbound .fb-tile--n { grid-column: span 5; grid-row: span 2; }
.fetishbound .fb-tile--o { grid-column: span 3; grid-row: span 3; }
.fetishbound .fb-tile--p { grid-column: span 4; grid-row: span 2; }
.fetishbound .fb-tile--q { grid-column: span 5; grid-row: span 3; }

/* ─── III. By the Numbers ─── */
.fetishbound .fb-numbers {
    background: linear-gradient(135deg, var(--fb-bg-deep) 0%, #1a0c14 100%);
    padding: 110px 32px;
    text-align: center;
}
.fetishbound .fb-numbers__inner { max-width: 1100px; margin: 0 auto; }
.fetishbound .fb-numbers__eyebrow {
    font-family: var(--font-sans); font-weight: 600;
    font-size: 12px; letter-spacing: 0.5em; text-transform: uppercase;
    color: var(--fb-amber); margin: 0 0 56px;
}
.fetishbound .fb-numbers__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 48px 32px;
}
.fetishbound .fb-numbers__grid li {
    display: flex; flex-direction: column; align-items: center;
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fetishbound .fb-numbers__grid li.is-revealed { opacity: 1; transform: translateY(0); }
.fetishbound .fb-numbers__big {
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(56px, 8vw, 110px); line-height: 1;
    color: #fff;
    text-shadow: 0 0 30px rgba(var(--color-accent-rgb),0.4);
}
.fetishbound .fb-numbers__label {
    margin-top: 12px; font-size: 11px; letter-spacing: 0.35em;
    text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.fetishbound .fb-numbers__cite {
    margin: 64px auto 0; max-width: 720px;
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6;
    color: rgba(255,255,255,0.78);
}

.fetishbound .fb-card {
    background: #1a0e16; border: 1px solid rgba(var(--color-accent-rgb),0.18);
    padding: 18px 18px 26px; border-radius: 4px;
    position: relative;
    transition: transform 0.4s ease, border-color 0.4s ease;
    opacity: 0; transform: translateY(20px);
}
.fetishbound .fb-card.is-revealed { opacity: 1; transform: translateY(0); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.fetishbound .fb-card:hover { transform: translateY(-6px); border-color: var(--fb-amber); }
.fetishbound .fb-card__stack {
    position: relative; aspect-ratio: 4 / 5;
    margin-bottom: 18px; overflow: hidden;
}
.fetishbound .fb-card__stack img {
    position: absolute; width: 100%; height: 100%; object-fit: cover;
    display: block;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.fetishbound .fb-card__stack img:nth-child(1) { transform: rotate(-4deg) translate(-6px, -4px); z-index: 4; }
.fetishbound .fb-card__stack img:nth-child(2) { transform: rotate(2deg)  translate(4px, -2px);  z-index: 3; opacity: 0.85; }
.fetishbound .fb-card__stack img:nth-child(3) { transform: rotate(-2deg) translate(-3px, 5px);  z-index: 2; opacity: 0.7; }
.fetishbound .fb-card__stack img:nth-child(4) { transform: rotate(3deg)  translate(5px, 4px);   z-index: 1; opacity: 0.55; }
.fetishbound .fb-card:hover .fb-card__stack img:nth-child(1) { transform: rotate(0) translate(0,0) scale(1.02); }
.fetishbound .fb-card__title {
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(22px, 2.4vw, 30px);
    margin: 0 0 6px; color: #fff;
}
.fetishbound .fb-card__desc {
    margin: 0; font-family: var(--font-serif); font-style: italic;
    font-size: 14px; color: rgba(255,255,255,0.7);
}

/* ─── VII. The Runway — horizontal scroll ─── */
.fetishbound .fb-runway {
    background: var(--fb-bg); padding: 96px 0;
    overflow: hidden;
}
.fetishbound .fb-runway__head {
    max-width: 1280px; margin: 0 auto 48px; padding: 0 32px;
    display: flex; align-items: flex-end; gap: 32px;
    flex-wrap: wrap;
}
.fetishbound .fb-runway__title {
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(32px, 4.4vw, 56px); line-height: 1;
    margin: 14px 0 0; color: #fff; flex: 1 1 auto;
}
.fetishbound .fb-runway__title em { color: var(--fb-amber); font-style: italic; }
.fetishbound .fb-runway__hint {
    font-size: 11px; letter-spacing: 0.35em; text-transform: uppercase;
    color: var(--fb-text-soft); margin: 0;
}
.fetishbound .fb-runway__viewport {
    width: 100%; overflow: hidden; position: relative;
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    padding: 8px 0 24px;
}
.fetishbound .fb-runway__track {
    display: flex; gap: 18px;
    width: max-content; will-change: transform;
    padding: 0 18px;
    animation: fb-runway-scroll 110s linear infinite;
}
.fetishbound .fb-runway__viewport:hover .fb-runway__track,
.fetishbound .fb-runway__viewport:focus-within .fb-runway__track {
    animation-play-state: paused;
}
@keyframes fb-runway-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.fetishbound .fb-runway__frame {
    flex: 0 0 auto; margin: 0;
    width: clamp(280px, 38vw, 520px); aspect-ratio: 3 / 4;
    background: #000; overflow: hidden;
    box-shadow: 0 14px 50px rgba(0,0,0,0.55);
}
.fetishbound .fb-runway__frame img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ─── VIII. Closing ─── */
.fetishbound .fb-close {
    position: relative; min-height: 95vh; min-height: 95dvh;
    display: flex; align-items: center; justify-content: center;
    padding: 80px 32px; overflow: hidden;
}
.fetishbound .fb-close__bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.fetishbound .fb-close__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(ellipse at center, rgba(14,10,12,0.55) 0%, rgba(8,6,10,0.95) 80%),
        linear-gradient(180deg, rgba(8,6,10,0.4) 0%, rgba(8,6,10,0.95) 100%);
}
.fetishbound .fb-close__inner {
    position: relative; z-index: 2; text-align: center; max-width: 900px;
}
.fetishbound .fb-close__title {
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(56px, 9vw, 140px); line-height: 0.95;
    margin: 0 0 28px; color: #fff;
    text-shadow: 0 0 50px rgba(192,22,84,0.4);
}
.fetishbound .fb-close__title em { color: var(--fb-amber); font-style: italic; }
.fetishbound .fb-close__body {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(17px, 2vw, 22px); line-height: 1.55;
    color: rgba(255,255,255,0.86); margin: 0 0 18px;
}
.fetishbound .fb-close__ctas {
    margin: 44px 0 36px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.fetishbound .fb-btn {
    display: inline-block; padding: 16px 32px;
    font-family: var(--font-sans); font-weight: 600;
    font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase;
    color: #fff; text-decoration: none;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 2px; background: transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}
.fetishbound .fb-btn:hover,
.fetishbound .fb-btn:focus-visible {
    background: rgba(255,255,255,0.06);
    border-color: var(--fb-amber); color: var(--fb-amber);
    box-shadow: 0 0 20px rgba(var(--color-accent-rgb),0.35), 0 0 50px rgba(192,22,84,0.25);
    transform: translateY(-2px);
}
.fetishbound .fb-btn--solid {
    background: var(--fb-amber); color: #000;
    border-color: var(--fb-amber);
}
.fetishbound .fb-btn--solid:hover,
.fetishbound .fb-btn--solid:focus-visible {
    background: #fff; color: #000;
    box-shadow: 0 0 30px rgba(var(--color-accent-rgb),0.6), 0 0 60px rgba(192,22,84,0.35);
}
.fetishbound .fb-close__signoff {
    margin: 28px 0 0; font-size: 10px; letter-spacing: 0.35em;
    text-transform: uppercase; color: rgba(255,255,255,0.5);
}

/* ─── Lightbox ─── */
.fb-lightbox {
    border: 0; padding: 0;
    background: rgba(8,6,10,0.96); color: #fff;
    max-width: 90vw; max-height: 90vh;
    width: 1100px; position: fixed; inset: 0; margin: auto; z-index: 100;
}
.fb-lightbox::backdrop { background: rgba(0,0,0,0.92); }
.fb-lightbox video { width: 100%; max-height: 80vh; display: block; background: #000; }
.fb-lightbox__close {
    position: absolute; top: 8px; right: 8px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff; font-size: 12px; padding: 6px 14px;
    cursor: pointer; letter-spacing: 0.15em; text-transform: uppercase; z-index: 2;
}
.fb-lightbox__close:hover,
.fb-lightbox__close:focus-visible { background: rgba(255,255,255,0.18); }

/* ─── Floating audio dock ─── */
.fetishbound .fb-audio-dock {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 50;
    display: none;
    align-items: center; gap: 12px;
    padding: 8px 18px 8px 8px;
    background: rgba(14,10,12,0.92);
    border: 1px solid rgba(var(--color-accent-rgb),0.55);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 30px rgba(var(--color-accent-rgb),0.18);
    font-family: var(--font-sans);
    color: rgba(255,255,255,0.85);
}
.fetishbound .fb-audio-dock.is-revealed { display: inline-flex; }
.fetishbound .fb-audio-dock__toggle {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--fb-amber); color: #000;
    border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; flex: 0 0 auto;
    position: relative;
    transition: filter 0.2s ease;
    transform-origin: center center;
}
.fetishbound .fb-audio-dock__toggle:hover,
.fetishbound .fb-audio-dock__toggle:focus-visible {
    filter: brightness(1.1);
}

/* Attention pulse — runs while audio is paused to invite a tap.
   Scales + rotates + bounces in a single 1.2s loop, plus an outer
   amber ring that breathes via the ::after pseudo. Once playing, the
   parent dock has .is-playing and the wiggle settles into a quieter
   bass-pulse-only rhythm. */
.fetishbound .fb-audio-attention {
    animation: fb-kf-audio-attention 1200ms ease-in-out infinite;
}
.fetishbound .fb-audio-attention::after {
    content: '';
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--fb-amber);
    opacity: 0;
    pointer-events: none;
    animation: fb-kf-audio-ring 1200ms ease-out infinite;
}
@keyframes fb-kf-audio-attention {
    0%   { transform: scale(1) rotate(0deg) translateY(0); }
    20%  { transform: scale(1.10) rotate(-5deg) translateY(-3px); }
    40%  { transform: scale(1) rotate(0deg) translateY(0); }
    60%  { transform: scale(1.06) rotate(5deg) translateY(-2px); }
    80%  { transform: scale(1) rotate(0deg) translateY(0); }
    100% { transform: scale(1) rotate(0deg) translateY(0); }
}
@keyframes fb-kf-audio-ring {
    0%   { transform: scale(0.85); opacity: 0; }
    25%  { transform: scale(1.0);  opacity: 0.75; }
    100% { transform: scale(1.6);  opacity: 0; }
}
/* Quieter while playing — drop the wiggle, keep a subtle bass pulse */
.fetishbound .fb-audio-dock.is-playing .fb-audio-attention {
    animation: fb-kf-bass-pulse var(--fb-two-beat) ease-in-out infinite;
}
.fetishbound .fb-audio-dock.is-playing .fb-audio-attention::after {
    animation: none; opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    .fetishbound .fb-audio-attention,
    .fetishbound .fb-audio-attention::after {
        animation: none !important;
    }
}
.fetishbound .fb-audio-dock__icon--pause { display: none; }
.fetishbound .fb-audio-dock.is-playing .fb-audio-dock__icon--play { display: none; }
.fetishbound .fb-audio-dock.is-playing .fb-audio-dock__icon--pause { display: block; }
.fetishbound .fb-audio-dock__label {
    display: flex; flex-direction: column; gap: 1px; line-height: 1.1;
}
.fetishbound .fb-audio-dock__label-eyebrow {
    font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--fb-amber);
}
.fetishbound .fb-audio-dock__label-title {
    font-size: 12px; letter-spacing: 0.05em;
    color: rgba(255,255,255,0.9);
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .fetishbound .fb-numbers__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .fetishbound .fb-arrival__title { font-size: clamp(56px, 18vw, 96px); }
    .fetishbound .fb-wall__grid { grid-template-columns: repeat(6, 1fr); gap: 6px; }
    .fetishbound .fb-tile { grid-column: span 6 !important; grid-row: span 2 !important; }
    .fetishbound .fb-tile:nth-child(odd) { grid-column: span 3 !important; }
    .fetishbound .fb-tile:nth-child(even) { grid-column: span 3 !important; }
    .fetishbound .fb-numbers__grid { grid-template-columns: 1fr; gap: 32px; }
    .fetishbound .fb-audio-dock__label { display: none; }
    .fetishbound .fb-runway__frame { width: 78vw; }
}

@media (prefers-reduced-motion: reduce) {
    .fetishbound .fb-arrival__inner { animation: none; }
    .fetishbound .fb-arrival__bg { display: none; }
    .fetishbound .fb-numbers__grid li,
    .fetishbound .fb-card,
    .fetishbound .fb-runway__frame {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
    .fetishbound .fb-tile:hover { transform: none; }
}


/* =========================================================
   FETISHBOUND — additional components (marquee, passage, narrative,
   callout, vertical marquee, manifesto)
   ========================================================= */

/* ─── Passage (italic quote between sections) ─── */
.fetishbound .fb-passage {
    padding: 84px 32px;
    background: var(--fb-bg);
    text-align: center;
}
.fetishbound .fb-passage--left .fb-passage__inner { text-align: left; padding-left: 6vw; }
.fetishbound .fb-passage--right .fb-passage__inner { text-align: right; padding-right: 6vw; }
.fetishbound .fb-passage__inner { max-width: 1100px; margin: 0 auto; }
.fetishbound .fb-passage__text {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(28px, 4vw, 56px); line-height: 1.2;
    color: #fff; margin: 0;
}
.fetishbound .fb-passage__text em { color: var(--fb-amber); }
.fetishbound .fb-passage__source {
    display: block; margin-top: 18px;
    font-size: 11px; letter-spacing: 0.35em; text-transform: uppercase;
    color: var(--fb-text-soft);
}

/* ─── Horizontal dual-marquee (the floor) ─── */
.fetishbound .fb-marquee {
    padding: 80px 0; background: var(--fb-bg-deep);
    display: flex; flex-direction: column; gap: 16px;
}
.fetishbound .fb-marquee__row {
    width: 100%; overflow: hidden; position: relative;
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.fetishbound .fb-marquee__track {
    display: flex; gap: 14px; width: max-content; will-change: transform;
}
.fetishbound .fb-marquee__row--left .fb-marquee__track {
    animation: fb-mq-scroll-left 95s linear infinite;
}
.fetishbound .fb-marquee__row--right .fb-marquee__track {
    animation: fb-mq-scroll-right 85s linear infinite;
}
.fetishbound .fb-marquee__row:hover .fb-marquee__track,
.fetishbound .fb-marquee__row:focus-within .fb-marquee__track {
    animation-play-state: paused;
}
@keyframes fb-mq-scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes fb-mq-scroll-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
.fetishbound .fb-marquee__tile {
    margin: 0; padding: 0; border: 0; background: #000;
    overflow: hidden; position: relative;
    flex: 0 0 auto; width: 360px; height: 270px;
    cursor: default;
    box-shadow: 0 6px 30px rgba(0,0,0,0.5);
}
.fetishbound .fb-marquee__tile--video { cursor: pointer; }
.fetishbound .fb-marquee__tile img,
.fetishbound .fb-marquee__tile video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.fetishbound .fb-marquee__tile:hover { filter: brightness(1.1); }
.fetishbound .fb-marquee__tile--video::after {
    content: '▶'; position: absolute; top: 12px; right: 14px;
    font-size: 12px; color: rgba(255,255,255,0.85);
    background: rgba(0,0,0,0.55); padding: 4px 8px; border-radius: 999px;
    pointer-events: none;
}

/* ─── Callout (oversized typography between sections) ─── */
.fetishbound .fb-callout {
    padding: 110px 32px; text-align: center;
    background: var(--fb-bg-deep);
    position: relative;
    overflow: hidden;
}
.fetishbound .fb-callout--gradient {
    background:
        radial-gradient(ellipse at 30% 50%, rgba(192,22,84,0.30) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 50%, rgba(27,70,208,0.25) 0%, transparent 60%),
        var(--fb-bg-deep);
}
.fetishbound .fb-callout__text {
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(56px, 9vw, 140px); line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0;
    color: #fff;
    text-shadow:
        0 0 32px rgba(var(--color-accent-rgb),0.18),
        0 0 80px rgba(192,22,84,0.22),
        0 4px 30px rgba(0,0,0,0.55);
}
.fetishbound .fb-callout__text em {
    font-style: italic;
    color: var(--fb-amber);
}

/* ─── Vertical 3-column marquee (the energy stays) ─── */
.fetishbound .fb-vmarquee {
    background: var(--fb-bg-deep);
    padding: 0;
}
.fetishbound .fb-vmarquee__cols {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 600px) 1fr;
    gap: 0;
    height: 100vh; height: 100dvh;
    overflow: hidden;
}
.fetishbound .fb-vmarquee__col {
    overflow: hidden; position: relative;
    mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.fetishbound .fb-vmarquee__track {
    display: flex; flex-direction: column; gap: 14px;
    padding: 14px; height: max-content; will-change: transform;
}
.fetishbound .fb-vmarquee__col--down .fb-vmarquee__track {
    animation: fb-vmq-down 60s linear infinite;
}
.fetishbound .fb-vmarquee__col--up .fb-vmarquee__track {
    animation: fb-vmq-up 60s linear infinite;
}
@keyframes fb-vmq-down {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}
@keyframes fb-vmq-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
.fetishbound .fb-vmarquee__track img {
    width: 100%; height: auto; display: block;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.fetishbound .fb-vmarquee__center {
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; text-align: center;
    padding: 60px 24px; gap: 24px;
    background:
        radial-gradient(ellipse at center, rgba(192,22,84,0.12) 0%, transparent 60%),
        var(--fb-bg);
}
.fetishbound .fb-vmarquee__eyebrow { margin: 0; }
.fetishbound .fb-vmarquee__title {
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(32px, 4vw, 52px); line-height: 1.05;
    margin: 4px 0 12px; color: #fff;
}
.fetishbound .fb-vmarquee__title em { color: var(--fb-amber); font-style: italic; }
.fetishbound .fb-vmarquee__still {
    margin: 0; max-width: 380px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.fetishbound .fb-vmarquee__still img {
    width: 100%; height: auto; display: block;
}

/* ─── Manifesto (FetishBound Principle) ─── */
.fetishbound .fb-manifesto {
    padding: 120px 32px;
    background:
        radial-gradient(ellipse at center, rgba(var(--color-accent-rgb),0.10) 0%, transparent 70%),
        var(--fb-bg-deep);
    text-align: center;
}
.fetishbound .fb-manifesto__inner { max-width: 880px; margin: 0 auto; }
.fetishbound .fb-manifesto__title {
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(40px, 5.4vw, 72px); line-height: 1;
    margin: 18px 0 56px; color: #fff;
}
.fetishbound .fb-manifesto__list {
    list-style: none; margin: 0 0 56px; padding: 0;
    display: flex; flex-direction: column; gap: 24px;
    text-align: left; max-width: 580px;
    margin-left: auto; margin-right: auto;
}
.fetishbound .fb-manifesto__list li {
    display: flex; align-items: baseline; gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(var(--color-accent-rgb),0.18);
}
.fetishbound .fb-manifesto__num {
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(28px, 3.6vw, 44px); line-height: 1;
    color: var(--fb-amber);
    flex: 0 0 auto;
}
.fetishbound .fb-manifesto__line {
    font-family: var(--font-serif);
    font-size: clamp(20px, 2.4vw, 30px); line-height: 1.2;
    color: #fff;
}
.fetishbound .fb-manifesto__landing {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(22px, 2.6vw, 32px);
    color: var(--fb-amber);
    margin: 0;
}

/* ─── Responsive overrides for new components ─── */
@media (max-width: 1024px) {
    .fetishbound .fb-vmarquee__cols { grid-template-columns: 1fr minmax(220px, 1fr) 1fr; }
}
@media (max-width: 720px) {
    .fetishbound .fb-marquee__tile { width: 240px; height: 180px; }
    .fetishbound .fb-vmarquee__cols {
        grid-template-columns: 1fr 1.4fr 1fr;
    }
    .fetishbound .fb-vmarquee__center { padding: 32px 12px; gap: 14px; }
    .fetishbound .fb-vmarquee__still { max-width: 100%; }
    .fetishbound .fb-callout { padding: 80px 24px; }
    .fetishbound .fb-manifesto { padding: 80px 24px; }
    .fetishbound .fb-passage { padding: 60px 24px; }
    .fetishbound .fb-passage--left .fb-passage__inner,
    .fetishbound .fb-passage--right .fb-passage__inner { padding: 0; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .fetishbound .fb-marquee__track,
    .fetishbound .fb-vmarquee__track,
    .fetishbound .fb-runway__track { animation: none !important; }
}


/* =========================================================
   FETISHBOUND — MIXED EDITORIAL components
   Words and images mingle. Text layered over images, sticky
   panels, drifting typography, slow image drift.
   ========================================================= */

/* ─── WORDS IN THE ROOM — collage bg + overlaid text ─── */
.fetishbound .fb-words-room {
    position: relative;
    min-height: 110vh; min-height: 110dvh;
    padding: 100px 32px;
    overflow: hidden;
    background: var(--fb-bg-deep);
    display: flex; align-items: center; justify-content: center;
}
.fetishbound .fb-words-room__collage {
    position: absolute; inset: 0; pointer-events: none;
}
.fetishbound .fb-wr-img {
    position: absolute; display: block;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    transition: transform 1.2s ease, filter 1.2s ease;
    will-change: transform;
    filter: saturate(0.95) contrast(1.02);
    animation: fb-wr-drift 24s ease-in-out infinite alternate;
}
.fetishbound .fb-wr-img--1 { top: 4%;  left: 2%;  width: 18vw; min-width: 180px; max-width: 280px; transform: rotate(-3deg); animation-delay: 0s; }
.fetishbound .fb-wr-img--2 { top: 12%; right: 4%; width: 16vw; min-width: 160px; max-width: 240px; transform: rotate(2deg);  animation-delay: 2s; }
.fetishbound .fb-wr-img--3 { bottom: 6%; left: 6%; width: 14vw; min-width: 140px; max-width: 220px; transform: rotate(4deg);  animation-delay: 4s; }
.fetishbound .fb-wr-img--4 { top: 38%; left: -2%; width: 14vw; min-width: 140px; max-width: 200px; transform: rotate(-6deg); animation-delay: 1s; }
.fetishbound .fb-wr-img--5 { bottom: 18%; right: 2%; width: 18vw; min-width: 180px; max-width: 260px; transform: rotate(3deg); animation-delay: 6s; }
.fetishbound .fb-wr-img--6 { top: 60%; right: 24%; width: 13vw; min-width: 130px; max-width: 200px; transform: rotate(-2deg); animation-delay: 8s; }
.fetishbound .fb-wr-img--7 { top: 26%; left: 28%; width: 11vw; min-width: 120px; max-width: 180px; transform: rotate(5deg); animation-delay: 3s; }
@keyframes fb-wr-drift {
    from { transform: translate3d(0,0,0) rotate(var(--rot,0deg)); }
    to   { transform: translate3d(0, -10px, 0) rotate(var(--rot,0deg)); }
}
.fetishbound .fb-words-room__scrim {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at center, rgba(8,6,10,0.30) 0%, rgba(8,6,10,0.85) 75%),
        radial-gradient(ellipse at 30% 30%, rgba(192,22,84,0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 70%, rgba(27,70,208,0.18) 0%, transparent 60%);
}
.fetishbound .fb-words-room__layer {
    position: relative; z-index: 2;
    max-width: 720px;
    text-align: center;
    color: #fff;
}
.fetishbound .fb-wr-eyebrow { margin: 0 0 22px; }
.fetishbound .fb-wr-title {
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(40px, 6vw, 96px); line-height: 1;
    margin: 0 0 36px;
    text-shadow: 0 0 30px rgba(var(--color-accent-rgb),0.25), 0 4px 30px rgba(0,0,0,0.6);
}
.fetishbound .fb-wr-title em { color: var(--fb-amber); font-style: italic; }
.fetishbound .fb-wr-lede {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(22px, 2.6vw, 32px); line-height: 1.4;
    margin: 0 0 28px;
    text-shadow: 0 2px 18px rgba(0,0,0,0.75);
}
.fetishbound .fb-wr-lede em { color: var(--fb-amber); }
.fetishbound .fb-wr-body {
    font-family: var(--font-serif);
    font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6;
    margin: 0 auto 16px; max-width: 560px;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 2px 14px rgba(0,0,0,0.85);
}
.fetishbound .fb-wr-body em { color: var(--fb-amber); font-style: italic; }
.fetishbound .fb-wr-landing {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(20px, 2.4vw, 28px); line-height: 1.3;
    margin: 28px 0 0;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.85);
}
.fetishbound .fb-wr-landing em { color: var(--fb-amber); }
@media (max-width: 720px) {
    .fetishbound .fb-words-room { min-height: 120vh; padding: 80px 20px; }
    .fetishbound .fb-wr-img { width: 32vw !important; max-width: none !important; }
    .fetishbound .fb-wr-img--7 { display: none; }
}

/* ─── STICKY STORY — text panel pins, image rail scrolljacks past ───
   Section is taller than viewport. The inner wrap is sticky and 100vh.
   Inside it: 2-col grid (text panel + clipped viewport). The rail of
   images inside the viewport translates upward via JS as the user
   scrolls through the section, so the text panel defines the visual
   height while the imagery moves past. */
.fetishbound .fb-sticky-story {
    position: relative;
    /* Section is just long enough for the rail to traverse — 100vh of
       pinning + ~50vh of scroll travel feels controlled, not endless. */
    height: 160vh; height: 160dvh;
    background: var(--fb-bg);
    padding: 0;
}
.fetishbound .fb-sticky-story__wrap {
    position: sticky;
    top: 0;
    height: 100vh; height: 100dvh;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.1fr);
    gap: 0;
    overflow: hidden;
}
.fetishbound .fb-sticky-story__panel {
    display: flex; align-items: center;
    padding: 60px 40px;
    height: 100%;
}
.fetishbound .fb-sticky-story__inner { max-width: 480px; }
.fetishbound .fb-sticky-story__title {
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(36px, 5vw, 64px); line-height: 1.05;
    margin: 18px 0 32px; color: #fff;
}
.fetishbound .fb-sticky-story__title em { color: var(--fb-amber); font-style: italic; }
.fetishbound .fb-sticky-story__list {
    list-style: none; margin: 0 0 36px; padding: 0;
}
.fetishbound .fb-sticky-story__list li {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(18px, 2vw, 24px); line-height: 1.5;
    color: rgba(255,255,255,0.86);
    padding: 8px 0;
    border-bottom: 1px solid rgba(var(--color-accent-rgb),0.14);
}
.fetishbound .fb-sticky-story__landing {
    font-family: var(--font-serif);
    font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65;
    color: rgba(255,255,255,0.72);
    margin: 0;
}
.fetishbound .fb-sticky-story__landing em { color: var(--fb-amber); font-style: italic; }

/* Clipped viewport: only ~100vh of the rail is ever visible at once */
.fetishbound .fb-sticky-story__viewport {
    position: relative;
    height: 100%;
    overflow: hidden;
    mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* The rail itself — full image stack, translateY driven by JS scroll progress */
.fetishbound .fb-sticky-story__rail {
    padding: 40px 32px 40px 16px;
    display: flex; flex-direction: column; gap: 18px;
    will-change: transform;
}
.fetishbound .fb-sticky-story__frame {
    margin: 0; overflow: hidden;
    box-shadow: 0 16px 60px rgba(0,0,0,0.55);
    aspect-ratio: 4 / 5;
}
.fetishbound .fb-sticky-story__frame img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

@media (max-width: 880px) {
    /* Below 880px: stack panel above a fixed-height viewport so the rail
       animation still scrolls in a clipped frame on phones. Keep the
       top/bottom mask for the same fade-in/out look as desktop. */
    .fetishbound .fb-sticky-story { height: auto; }
    .fetishbound .fb-sticky-story__wrap {
        position: relative; top: auto; height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto 60vh;
        overflow: visible;
    }
    .fetishbound .fb-sticky-story__panel {
        height: auto; min-height: auto; padding: 60px 24px 32px;
    }
    .fetishbound .fb-sticky-story__viewport {
        height: 60vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fetishbound .fb-sticky-story__rail { transform: none !important; }
}

/* ─── WORD LAYER — oversized typography drifting under photos ─── */
.fetishbound .fb-word-layer {
    background: var(--fb-bg-deep);
    padding: 100px 0 110px;
    overflow: hidden;
}
.fetishbound .fb-word-layer__head {
    max-width: 1100px; margin: 0 auto 56px;
    padding: 0 32px;
    text-align: center;
}
.fetishbound .fb-word-layer__title {
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(34px, 5vw, 64px); line-height: 1.05;
    margin: 14px 0 0; color: #fff;
}
.fetishbound .fb-word-layer__title em { color: var(--fb-amber); font-style: italic; }
.fetishbound .fb-word-layer__band {
    position: relative;
    height: clamp(220px, 26vw, 360px);
    margin-bottom: 14px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.fetishbound .fb-word-layer__words {
    position: absolute;
    top: 50%; left: 0;
    transform: translateY(-50%);
    display: flex; align-items: center; gap: 0.35em;
    width: max-content; will-change: transform;
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(60px, 11vw, 200px); line-height: 0.95;
    text-transform: uppercase; letter-spacing: -0.02em;
    color: rgba(var(--color-accent-rgb),0.16);
    pointer-events: none;
    z-index: 0;
}
.fetishbound .fb-word-layer__words span { padding: 0 0.15em; }
.fetishbound .fb-word-layer__words--left { animation: fb-words-left 80s linear infinite; }
.fetishbound .fb-word-layer__words--right { animation: fb-words-right 70s linear infinite; }
@keyframes fb-words-left {
    from { transform: translate(0, -50%); }
    to   { transform: translate(-50%, -50%); }
}
@keyframes fb-words-right {
    from { transform: translate(-50%, -50%); }
    to   { transform: translate(0, -50%); }
}
.fetishbound .fb-word-layer__photos {
    position: absolute; inset: 0;
    display: flex; gap: 18px;
    align-items: center; justify-content: center;
    z-index: 1; pointer-events: none;
}
.fetishbound .fb-word-layer__photos img {
    height: 80%; width: auto; max-width: 22vw;
    object-fit: cover;
    box-shadow: 0 10px 40px rgba(0,0,0,0.55);
    transform: rotate(-2deg);
    transition: transform 0.6s ease;
}
.fetishbound .fb-word-layer__photos img:nth-child(even) { transform: rotate(2deg); }
.fetishbound .fb-word-layer__photos img:nth-child(2) { transform: rotate(-1deg) translateY(-12px); }
.fetishbound .fb-word-layer__photos img:nth-child(3) { transform: rotate(3deg)  translateY(8px); }
.fetishbound .fb-word-layer__caption {
    max-width: 720px; margin: 56px auto 0;
    padding: 0 32px; text-align: center;
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(17px, 2vw, 22px); line-height: 1.55;
    color: rgba(255,255,255,0.82);
}
@media (max-width: 720px) {
    .fetishbound .fb-word-layer__photos img { max-width: 38vw; }
    .fetishbound .fb-word-layer__photos img:nth-child(n+3) { display: none; }
}

/* ─── LIFE SUPPORT, BUT STILL DANCING — slow drift + emotional copy ─── */
.fetishbound .fb-life-dance {
    position: relative; overflow: hidden;
    min-height: 110vh; min-height: 110dvh;
    display: flex; align-items: center; justify-content: center;
    padding: 100px 32px;
}
.fetishbound .fb-life-dance__bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
    filter: saturate(0.8) brightness(0.4);
    transform: scale(1.05);
    animation: fb-life-pan 30s ease-in-out infinite alternate;
}
@keyframes fb-life-pan {
    from { transform: scale(1.05) translate(0, 0); }
    to   { transform: scale(1.08) translate(-1.5%, -1%); }
}
.fetishbound .fb-life-dance__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 40%, rgba(192,22,84,0.22) 0%, transparent 55%),
        linear-gradient(180deg, rgba(14,10,12,0.75) 0%, rgba(8,6,10,0.95) 100%);
}
.fetishbound .fb-life-dance__drift {
    position: absolute; z-index: 1;
    box-shadow: 0 16px 50px rgba(0,0,0,0.65);
    object-fit: cover;
}
.fetishbound .fb-life-dance__drift--a {
    width: clamp(160px, 20vw, 280px); aspect-ratio: 3 / 4;
    top: 10%; right: 6%;
    transform: rotate(2deg);
    animation: fb-life-drift-a 18s ease-in-out infinite alternate;
}
.fetishbound .fb-life-dance__drift--b {
    width: clamp(150px, 18vw, 260px); aspect-ratio: 4 / 5;
    bottom: 8%; left: 4%;
    transform: rotate(-3deg);
    animation: fb-life-drift-b 22s ease-in-out infinite alternate;
}
.fetishbound .fb-life-dance__drift--video {
    width: clamp(150px, 18vw, 260px); aspect-ratio: 9 / 16;
    top: 40%; right: 2%;
    transform: rotate(-1deg);
    animation: fb-life-drift-c 26s ease-in-out infinite alternate;
}
@keyframes fb-life-drift-a {
    from { transform: rotate(2deg) translate(0,0); }
    to   { transform: rotate(2deg) translate(-12px, 14px); }
}
@keyframes fb-life-drift-b {
    from { transform: rotate(-3deg) translate(0,0); }
    to   { transform: rotate(-3deg) translate(10px, -16px); }
}
@keyframes fb-life-drift-c {
    from { transform: rotate(-1deg) translate(0,0); }
    to   { transform: rotate(-1deg) translate(-8px, 18px); }
}
.fetishbound .fb-life-dance__inner {
    position: relative; z-index: 2;
    max-width: 720px; text-align: center;
}
.fetishbound .fb-life-dance__eyebrow { margin: 0 0 32px; }
.fetishbound .fb-life-dance__title {
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(36px, 5vw, 72px); line-height: 1.1;
    margin: 0 0 40px; color: #fff;
}
.fetishbound .fb-life-dance__title em { color: var(--fb-amber); font-style: italic; }
.fetishbound .fb-life-dance__quote { margin: 0; padding: 0; border: 0; }
.fetishbound .fb-life-dance__quote p {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(18px, 2.2vw, 26px); line-height: 1.55;
    margin: 0 0 22px; color: rgba(255,255,255,0.92);
    text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}
.fetishbound .fb-life-dance__quote p em { color: var(--fb-amber); }
.fetishbound .fb-life-dance__landing {
    margin-top: 36px !important;
    color: var(--fb-amber) !important;
    font-size: clamp(17px, 2vw, 22px) !important;
}
@media (max-width: 880px) {
    .fetishbound .fb-life-dance__drift--video { display: none; }
}
@media (max-width: 720px) {
    .fetishbound .fb-life-dance__drift { width: 32vw !important; }
}

/* ─── TEXT MARQUEE — slow drifting closing line ─── */
.fetishbound .fb-text-marquee {
    background: var(--fb-bg-deep);
    padding: 56px 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.fetishbound .fb-text-marquee__track {
    display: flex; align-items: center; gap: 1.2em;
    width: max-content; will-change: transform;
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(36px, 6vw, 88px); line-height: 1;
    color: #fff;
    animation: fb-text-mq-scroll 50s linear infinite;
}
.fetishbound .fb-text-marquee__track em {
    color: var(--fb-amber); font-style: italic;
}
.fetishbound .fb-text-marquee__sep { color: var(--fb-amber); font-weight: 400; }
@keyframes fb-text-mq-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Reduced-motion suspends all new animations */
@media (prefers-reduced-motion: reduce) {
    .fetishbound .fb-wr-img,
    .fetishbound .fb-life-dance__bg,
    .fetishbound .fb-life-dance__drift,
    .fetishbound .fb-word-layer__words,
    .fetishbound .fb-text-marquee__track {
        animation: none !important;
    }
    .fetishbound .fb-sticky-story__frame {
        opacity: 1 !important; transform: none !important;
    }
}


/* =========================================================
   FETISHBOUND WALL — text+image mingled inside the grid
   ========================================================= */
.fetishbound .fb-wall {
    position: relative; overflow: hidden;
    padding: 80px 16px 32px;
}

/* Oversized typography drifting BEHIND the grid */
.fetishbound .fb-wall__motion-text {
    position: absolute; inset: 0; pointer-events: none;
    z-index: 0; overflow: hidden;
    display: flex; align-items: center;
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.fetishbound .fb-wall__motion-track {
    display: flex; align-items: center; gap: 0.4em;
    width: max-content; will-change: transform;
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(72px, 12vw, 200px); line-height: 0.9;
    letter-spacing: -0.025em;
    color: rgba(var(--color-accent-rgb),0.07);
    text-transform: none;
    animation: fb-wall-motion 90s linear infinite;
}
.fetishbound .fb-wall__motion-sep { color: rgba(192,22,84,0.18); padding: 0 0.1em; }
@keyframes fb-wall-motion {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Bring the grid above the motion text */
.fetishbound .fb-wall__grid { position: relative; z-index: 1; }

/* Story cards interleaved into the grid */
.fetishbound .fb-wall__story-card {
    margin: 0; padding: 28px 26px;
    background: rgba(14,10,12,0.82);
    border: 1px solid rgba(var(--color-accent-rgb),0.28);
    box-shadow: 0 10px 40px rgba(0,0,0,0.55), 0 0 30px rgba(var(--color-accent-rgb),0.10);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    display: flex; flex-direction: column; justify-content: center;
}
.fetishbound .fb-wall__story-card--main {
    grid-column: span 4; grid-row: span 3;
}
.fetishbound .fb-wall__story-card--quote {
    grid-column: span 4; grid-row: span 2;
    text-align: center; padding: 36px 28px;
    background:
        linear-gradient(135deg, rgba(192,22,84,0.18) 0%, rgba(27,70,208,0.18) 100%),
        rgba(8,6,10,0.86);
    border-color: rgba(255,255,255,0.18);
}
.fetishbound .fb-wall__story-card--list {
    grid-column: span 4; grid-row: span 3;
}
.fetishbound .fb-wall__story-title {
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(28px, 3.5vw, 48px); line-height: 1;
    margin: 12px 0 18px; color: #fff;
}
.fetishbound .fb-wall__story-title em { color: var(--fb-amber); font-style: italic; }
.fetishbound .fb-wall__story-body {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(14px, 1.5vw, 17px); line-height: 1.55;
    color: rgba(255,255,255,0.86); margin: 0;
}
.fetishbound .fb-wall__story-body em { color: var(--fb-amber); font-style: italic; }
.fetishbound .fb-wall__story-quote {
    font-family: var(--font-serif); font-style: italic; font-weight: 900;
    font-size: clamp(26px, 3.2vw, 44px); line-height: 1.15;
    margin: 0; color: #fff;
}
.fetishbound .fb-wall__story-quote em { color: var(--fb-amber); }
.fetishbound .fb-wall__story-list {
    list-style: none; margin: 12px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.fetishbound .fb-wall__story-list li {
    font-family: var(--font-serif);
    font-size: clamp(15px, 1.6vw, 19px); line-height: 1.3;
    color: rgba(255,255,255,0.86);
    padding-left: 18px; position: relative;
}
.fetishbound .fb-wall__story-list li::before {
    content: ''; position: absolute; left: 0; top: 0.6em;
    width: 8px; height: 8px; background: var(--fb-amber);
    border-radius: 50%;
}
.fetishbound .fb-wall__story-list li em { color: var(--fb-amber); font-style: italic; }

/* Floating line — punchy aside */
.fetishbound .fb-wall__floating-line {
    grid-column: span 4; grid-row: span 2;
    display: flex; align-items: center;
    margin: 0; padding: 24px 28px;
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(22px, 2.8vw, 36px); line-height: 1.15;
    color: rgba(255,255,255,0.95);
    background: transparent;
    text-shadow: 0 0 30px rgba(192,22,84,0.4), 0 2px 14px rgba(0,0,0,0.7);
}
.fetishbound .fb-wall__floating-line em { color: var(--fb-amber); }

/* Wall-internal text marquee strip below the grid */
.fetishbound .fb-wall__marquee {
    position: relative; z-index: 1;
    margin: 32px 0 0; padding: 14px 0;
    overflow: hidden;
    border-top: 1px solid rgba(var(--color-accent-rgb),0.18);
    border-bottom: 1px solid rgba(var(--color-accent-rgb),0.18);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.fetishbound .fb-wall__marquee-track {
    display: flex; align-items: center; gap: 0.9em;
    width: max-content; will-change: transform;
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(18px, 2vw, 26px); line-height: 1;
    color: rgba(255,255,255,0.88);
    animation: fb-wall-mq 65s linear infinite;
}
.fetishbound .fb-wall__marquee-track em { color: var(--fb-amber); font-style: italic; }
.fetishbound .fb-wall__marquee-sep { color: var(--fb-amber); }
@keyframes fb-wall-mq {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Tablet — story cards reflow to half-width */
@media (max-width: 1024px) {
    .fetishbound .fb-wall__story-card--main,
    .fetishbound .fb-wall__story-card--list,
    .fetishbound .fb-wall__floating-line {
        grid-column: span 6;
    }
    .fetishbound .fb-wall__story-card--quote {
        grid-column: span 6;
    }
}
@media (max-width: 720px) {
    .fetishbound .fb-wall__story-card,
    .fetishbound .fb-wall__floating-line {
        grid-column: span 6 !important; grid-row: auto !important;
    }
    .fetishbound .fb-wall__motion-track { font-size: clamp(48px, 16vw, 96px); }
}

/* Reduced-motion safe */
@media (prefers-reduced-motion: reduce) {
    .fetishbound .fb-wall__motion-track,
    .fetishbound .fb-wall__marquee-track { animation: none !important; }
}


/* =========================================================
   FETISHBOUND WALL — dual motion bands, flash pulses,
   inline marquee, staggered scroll reveals
   ========================================================= */

/* Override single motion-text band with dual positioned bands */
.fetishbound .fb-wall__motion-text {
    position: absolute; pointer-events: none; z-index: 0;
    height: clamp(120px, 18vw, 220px);
    overflow: hidden;
}
.fetishbound .fb-wall__motion-text--top {
    top: -10px; left: 0; right: 0;
}
.fetishbound .fb-wall__motion-text--bottom {
    bottom: 90px; left: 0; right: 0;
}
.fetishbound .fb-wall__motion-track {
    display: flex; align-items: center; gap: 0.4em;
    width: max-content; will-change: transform;
    font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(70px, 14vw, 200px); line-height: 1;
    letter-spacing: -0.025em; text-transform: uppercase;
    color: rgba(var(--color-accent-rgb),0.075);
}
.fetishbound .fb-wall__motion-track--left {
    animation: fb-wall-motion-left 90s linear infinite;
}
.fetishbound .fb-wall__motion-track--right {
    animation: fb-wall-motion-right 110s linear infinite;
    color: rgba(192,22,84,0.10);
    text-transform: none;
    font-size: clamp(56px, 11vw, 160px);
    font-style: italic;
}
@keyframes fb-wall-motion-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes fb-wall-motion-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Inline marquee passing through the middle of the wall */
.fetishbound .fb-wall__inline-marquee {
    position: absolute; left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0; pointer-events: none;
    height: clamp(48px, 6vw, 80px);
    overflow: hidden;
    background: linear-gradient(90deg, rgba(8,6,10,0) 0%, rgba(var(--color-accent-rgb),0.10) 10%, rgba(192,22,84,0.10) 50%, rgba(var(--color-accent-rgb),0.10) 90%, rgba(8,6,10,0) 100%);
    border-top: 1px solid rgba(var(--color-accent-rgb),0.18);
    border-bottom: 1px solid rgba(var(--color-accent-rgb),0.18);
}
.fetishbound .fb-wall__inline-track {
    display: flex; align-items: center; gap: 0.6em;
    width: max-content; will-change: transform;
    font-family: var(--font-serif); font-weight: 900;
    font-style: italic;
    font-size: clamp(22px, 2.6vw, 36px); line-height: 1;
    color: rgba(255,255,255,0.92);
    padding: 0 32px;
    animation: fb-wall-inline 55s linear infinite;
    height: 100%;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.fetishbound .fb-wall__inline-track .fb-wall__motion-sep { color: var(--fb-amber); font-weight: 400; }
@keyframes fb-wall-inline {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Wall padding accounts for the bottom marquee strip below */
.fetishbound .fb-wall { padding-bottom: 16px; }

/* Tile reveal stagger — initial state */
.fetishbound .fb-tile {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
    transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--fb-reveal-delay, 0ms);
}
.fetishbound .fb-tile.is-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Story-card stronger pop than tiles */
.fetishbound .fb-wall__story-card,
.fetishbound .fb-wall__floating-line {
    opacity: 0;
    transform: translateY(36px) scale(0.96);
    transition: opacity 0.9s ease-out, transform 0.9s cubic-bezier(0.16, 0.84, 0.32, 1.18);
    transition-delay: var(--fb-reveal-delay, 0ms);
}
.fetishbound .fb-wall__story-card.is-revealed,
.fetishbound .fb-wall__floating-line.is-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Flash-bulb pulse pseudo-element on a few tiles */
.fetishbound .fb-tile--flash::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: rgba(255,255,255,0.95);
    opacity: 0; pointer-events: none;
    animation: fb-tile-flash 6.5s ease-out infinite;
    animation-delay: 1.6s;
    mix-blend-mode: screen;
}
.fetishbound .fb-tile--flash-delay::before {
    animation-delay: 4.1s;
}
@keyframes fb-tile-flash {
    0%, 88%, 100% { opacity: 0; }
    90% { opacity: 0.55; }
    92% { opacity: 0; }
    94% { opacity: 0.32; }
    96% { opacity: 0; }
}

/* Stronger hover behavior — tilt + brighter contrast */
.fetishbound .fb-tile {
    transition:
        transform 0.45s cubic-bezier(0.2,0.7,0.2,1),
        box-shadow 0.4s ease,
        filter 0.4s ease,
        opacity 0.7s ease-out;
}
.fetishbound .fb-tile:hover {
    transform: translateY(-6px) scale(1.025) rotate(-0.6deg);
    filter: brightness(1.12) contrast(1.06);
    box-shadow: 0 18px 50px rgba(0,0,0,0.65), 0 0 0 1px rgba(var(--color-accent-rgb),0.55), 0 0 30px rgba(192,22,84,0.30);
}
.fetishbound .fb-tile:nth-child(even):hover {
    transform: translateY(-6px) scale(1.025) rotate(0.6deg);
}

/* Mobile — stacked editorial collage flow */
@media (max-width: 720px) {
    .fetishbound .fb-wall { padding: 60px 12px 16px; }
    .fetishbound .fb-wall__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    .fetishbound .fb-wall__grid > * {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    .fetishbound .fb-tile { aspect-ratio: 4 / 5; height: auto; }
    .fetishbound .fb-tile--flash::before { animation: none; }
    .fetishbound .fb-wall__inline-marquee { font-size: clamp(16px, 5vw, 22px); }
    .fetishbound .fb-wall__motion-text--top { top: -4px; }
    .fetishbound .fb-wall__motion-text--bottom { bottom: 32px; }
}

/* Reduced-motion safe */
@media (prefers-reduced-motion: reduce) {
    .fetishbound .fb-wall__motion-track,
    .fetishbound .fb-wall__inline-track,
    .fetishbound .fb-tile--flash::before {
        animation: none !important;
    }
    .fetishbound .fb-tile,
    .fetishbound .fb-wall__story-card,
    .fetishbound .fb-wall__floating-line {
        opacity: 1 !important;
        transform: none !important;
    }
    .fetishbound .fb-tile:hover { transform: none; }
}


/* =========================================================
   FETISHBOUND — BEAT-DRIVEN MOTION SYSTEM
   100 BPM ≈ 600ms per beat. Layered, not constant.
   Library of reusable utility classes + JS-triggered entrances.
   ========================================================= */

.fetishbound {
    --fb-beat: 600ms;
    --fb-two-beat: 1200ms;
    --fb-four-beat: 2400ms;
    --fb-eight-beat: 4800ms;
}

/* ─── Always-on loop classes (applied directly to elements) ─── */

.fetishbound .fb-bass-pulse {
    animation: fb-kf-bass-pulse var(--fb-two-beat) ease-in-out infinite;
    transform-origin: center center;
}
@keyframes fb-kf-bass-pulse {
    0%, 100% { transform: scale(1); }
    20%      { transform: scale(1.035); }
    50%      { transform: scale(1); }
}

.fetishbound .fb-beat-bounce {
    animation: fb-kf-beat-bounce var(--fb-beat) ease-in-out infinite;
}
@keyframes fb-kf-beat-bounce {
    0%, 100% { transform: translateY(0); }
    40%      { transform: translateY(-5px); }
    60%      { transform: translateY(0); }
}

.fetishbound .fb-heartbeat {
    animation: fb-kf-heartbeat var(--fb-eight-beat) ease-in-out infinite;
    transform-origin: center center;
}
@keyframes fb-kf-heartbeat {
    0%, 86%, 100% { transform: scale(1); }
    88%           { transform: scale(1.04); }
    91%           { transform: scale(1); }
    94%           { transform: scale(1.025); }
    97%           { transform: scale(1); }
}

.fetishbound .fb-wobble {
    animation: fb-kf-wobble 3600ms ease-in-out infinite;
    transform-origin: center center;
}
@keyframes fb-kf-wobble {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25%      { transform: rotate(0.6deg) translateX(2px); }
    75%      { transform: rotate(-0.5deg) translateX(-2px); }
}

.fetishbound .fb-fade-loop {
    animation: fb-kf-fade-loop var(--fb-four-beat) ease-in-out infinite;
}
@keyframes fb-kf-fade-loop {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.7; }
}

.fetishbound .fb-flash-pulse { position: relative; }
.fetishbound .fb-flash-pulse::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,255,255,0.95);
    opacity: 0; pointer-events: none;
    animation: fb-kf-flash-pulse 5400ms ease-out infinite;
    mix-blend-mode: screen;
    animation-delay: var(--fb-flash-delay, 0ms);
}
@keyframes fb-kf-flash-pulse {
    0%, 86%, 100% { opacity: 0; }
    88%           { opacity: 0.55; }
    90%           { opacity: 0; }
    92%           { opacity: 0.30; }
    94%           { opacity: 0; }
}

.fetishbound .fb-shake-x {
    animation: fb-kf-shake-x var(--fb-beat) ease-in-out infinite;
}
@keyframes fb-kf-shake-x {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(2px); }
    50%      { transform: translateX(0); }
    75%      { transform: translateX(-2px); }
}

.fetishbound .fb-shake-y {
    animation: fb-kf-shake-y var(--fb-beat) ease-in-out infinite;
}
@keyframes fb-kf-shake-y {
    0%, 100% { transform: translateY(0); }
    25%      { transform: translateY(2px); }
    50%      { transform: translateY(0); }
    75%      { transform: translateY(-2px); }
}

/* ─── Hover-triggered shake (use as modifier, not always-on) ─── */
.fetishbound .fb-shake-on-hover:hover,
.fetishbound .fb-shake-on-hover:focus-visible {
    animation: fb-kf-shake-x 300ms ease-in-out 2;
}

/* ─── Entrance animations (triggered by JS via data-fb-motion + is-motion-active) ─── */

.fetishbound [data-fb-motion] {
    opacity: 0;
    will-change: transform, opacity;
}
.fetishbound [data-fb-motion].is-motion-active {
    opacity: 1;
}

.fetishbound [data-fb-motion="zoom-pop"].is-motion-active {
    animation: fb-kf-zoom-pop var(--fb-two-beat) cubic-bezier(0.18, 0.84, 0.34, 1.18) both;
}
@keyframes fb-kf-zoom-pop {
    from { opacity: 0; transform: scale(0.7); }
    55%  { transform: scale(1.06); opacity: 1; }
    75%  { transform: scale(0.99); }
    to   { opacity: 1; transform: scale(1); }
}

.fetishbound [data-fb-motion="rotate-in"].is-motion-active {
    animation: fb-kf-rotate-in var(--fb-two-beat) cubic-bezier(0.22, 0.8, 0.32, 1.12) both;
}
@keyframes fb-kf-rotate-in {
    from { opacity: 0; transform: rotate(-8deg) translateY(24px); }
    to   { opacity: 1; transform: rotate(0) translateY(0); }
}

.fetishbound [data-fb-motion="light-speed"].is-motion-active {
    animation: fb-kf-light-speed var(--fb-two-beat) cubic-bezier(0.16, 0.82, 0.24, 1.08) both;
}
@keyframes fb-kf-light-speed {
    from { opacity: 0; transform: translateX(-90px) skewX(-14deg); }
    50%  { opacity: 1; }
    to   { opacity: 1; transform: translateX(0) skewX(0); }
}

.fetishbound [data-fb-motion="slide-in-left"].is-motion-active {
    animation: fb-kf-slide-in-left var(--fb-two-beat) cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes fb-kf-slide-in-left {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.fetishbound [data-fb-motion="slide-in-right"].is-motion-active {
    animation: fb-kf-slide-in-right var(--fb-two-beat) cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes fb-kf-slide-in-right {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.fetishbound [data-fb-motion="bounce-in"].is-motion-active {
    animation: fb-kf-bounce-in var(--fb-two-beat) cubic-bezier(0.16, 0.84, 0.32, 1.22) both;
}
@keyframes fb-kf-bounce-in {
    from { opacity: 0; transform: translateY(36px) scale(0.94); }
    55%  { opacity: 1; transform: translateY(-8px) scale(1.03); }
    75%  { transform: translateY(2px) scale(0.995); }
    to   { transform: translateY(0) scale(1); }
}

.fetishbound [data-fb-motion="heartbeat-in"].is-motion-active {
    animation: fb-kf-heartbeat-in var(--fb-four-beat) ease-in-out both;
}
@keyframes fb-kf-heartbeat-in {
    from { opacity: 0; transform: scale(0.92); }
    20%  { opacity: 1; transform: scale(1.04); }
    35%  { transform: scale(1); }
    55%  { transform: scale(1.025); }
    70%  { transform: scale(1); }
    to   { transform: scale(1); }
}

.fetishbound [data-fb-motion="slide-out-chaos"].is-motion-active {
    animation: fb-kf-slide-out-chaos 3600ms cubic-bezier(0.4, 0, 0.6, 1) both;
}
@keyframes fb-kf-slide-out-chaos {
    0%   { opacity: 0; transform: translateX(-20px) rotate(-2deg); }
    20%  { opacity: 1; transform: translateX(0) rotate(0); }
    60%  { opacity: 1; transform: translateX(0) rotate(0); }
    100% { opacity: 0; transform: translateX(20px) rotate(2deg); }
}

/* ─── Reduced-motion safe — kill all the bass ─── */
@media (prefers-reduced-motion: reduce) {
    .fetishbound .fb-bass-pulse,
    .fetishbound .fb-beat-bounce,
    .fetishbound .fb-heartbeat,
    .fetishbound .fb-wobble,
    .fetishbound .fb-fade-loop,
    .fetishbound .fb-shake-x,
    .fetishbound .fb-shake-y,
    .fetishbound .fb-flash-pulse::after {
        animation: none !important;
    }
    .fetishbound [data-fb-motion] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .fetishbound .fb-shake-on-hover:hover,
    .fetishbound .fb-shake-on-hover:focus-visible {
        animation: none !important;
    }
}


/* =========================================================
   FETISHBOUND WALL — CHAOS MOTION STAGE OVERRIDES
   .fb-wall__grid becomes an absolute-positioned stage with
   overflow:hidden parent. Each tile uses per-element CSS vars
   (--x, --y, --w, --h, --dur, --delay, --r, --r2) and one of the
   four drift classes. Story cards stay readable in the middle.
   ========================================================= */

.fetishbound .fb-wall {
    position: relative;
    min-height: min(92vh, 860px);
    height: min(92vh, 860px);
    overflow: hidden;
    padding: 0;
}
.fetishbound .fb-wall__grid {
    position: absolute;
    inset: -8vh -8vw;
    width: auto;
    height: auto;
    display: block;
    z-index: 1;
}
.fetishbound .fb-wall__grid > * { z-index: 2; }

/* Every tile is absolute and reads its slot from inline vars */
.fetishbound .fb-wall__grid .fb-tile,
.fetishbound .fb-wall__grid .fb-wall__story-card,
.fetishbound .fb-wall__grid .fb-wall__floating-line {
    position: absolute;
    left: var(--x, 0);
    top: var(--y, 0);
    width: var(--w, 20%);
    margin: 0;
    will-change: transform, opacity;
    animation-delay: var(--delay, 0s);
}
.fetishbound .fb-wall__grid .fb-tile {
    height: var(--h, 22vh);
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: auto;
    transform-origin: center center;
}

/* Story cards & floating line layer over the tiles */
.fetishbound .fb-wall__grid .fb-wall__story-card {
    z-index: 5;
    height: auto;
    max-height: 56%;
    overflow: hidden;
}
.fetishbound .fb-wall__grid .fb-wall__story-card--main {
    grid-column: auto !important; grid-row: auto !important;
    padding: 22px 22px;
}
.fetishbound .fb-wall__grid .fb-wall__story-card--quote {
    grid-column: auto !important; grid-row: auto !important;
    padding: 22px 20px;
}
.fetishbound .fb-wall__grid .fb-wall__story-card--list {
    grid-column: auto !important; grid-row: auto !important;
    padding: 20px 20px;
}
.fetishbound .fb-wall__grid .fb-wall__floating-line {
    z-index: 6;
    height: auto;
    padding: 0;
    font-size: clamp(20px, 2.4vw, 32px);
    text-align: center;
}

/* 4-direction drift keyframes — translation + slight rotation tween */
@keyframes fb-kf-drift-left {
    0%   { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
    100% { transform: translate3d(-32vw, 0, 0) rotate(var(--r2, 1deg)); }
}
@keyframes fb-kf-drift-right {
    0%   { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
    100% { transform: translate3d(32vw, 0, 0) rotate(var(--r2, -1deg)); }
}
@keyframes fb-kf-drift-up {
    0%   { transform: translate3d(0, 12vh, 0) rotate(var(--r, 0deg)); }
    100% { transform: translate3d(0, -32vh, 0) rotate(var(--r2, 1deg)); }
}
@keyframes fb-kf-drift-down {
    0%   { transform: translate3d(0, -12vh, 0) rotate(var(--r, 0deg)); }
    100% { transform: translate3d(0, 32vh, 0) rotate(var(--r2, -1deg)); }
}
@keyframes fb-kf-fade-chaos {
    0%, 100% { opacity: 0.20; }
    20%, 70% { opacity: 1; }
    85%      { opacity: 0.45; }
}
@keyframes fb-kf-bass-bump {
    0%, 100% { transform: scale(1); }
    35%      { transform: scale(1.035); }
    48%      { transform: scale(0.995); }
}

.fetishbound .fb-drift-left  { animation: fb-kf-drift-left  var(--dur, 14s) linear infinite alternate; }
.fetishbound .fb-drift-right { animation: fb-kf-drift-right var(--dur, 16s) linear infinite alternate; }
.fetishbound .fb-drift-up    { animation: fb-kf-drift-up    var(--dur, 18s) linear infinite alternate; }
.fetishbound .fb-drift-down  { animation: fb-kf-drift-down  var(--dur, 20s) linear infinite alternate; }
.fetishbound .fb-fade-chaos  { animation: fb-kf-fade-chaos  var(--dur, 8s)  ease-in-out infinite; }
.fetishbound .fb-bass-bump   { animation: fb-kf-bass-bump   1200ms ease-in-out infinite; }

/* Override the previous .fb-tile reveal opacity:0 — chaos tiles render immediately */
.fetishbound .fb-wall__grid .fb-tile { opacity: 1; transform: none; transition: none; }

/* Mobile — keep it condensed but lighter motion */
@media (max-width: 720px) {
    .fetishbound .fb-wall { height: 75vh; min-height: 75vh; }
    .fetishbound .fb-wall__grid .fb-tile { display: none; }
    /* Show only ~10 tiles on mobile so it doesn't feel cluttered */
    .fetishbound .fb-wall__grid .fb-tile:nth-child(-n+10) { display: block; }
    .fetishbound .fb-wall__grid .fb-wall__story-card,
    .fetishbound .fb-wall__grid .fb-wall__floating-line { font-size: 90%; }
}

@media (prefers-reduced-motion: reduce) {
    .fetishbound .fb-drift-left,
    .fetishbound .fb-drift-right,
    .fetishbound .fb-drift-up,
    .fetishbound .fb-drift-down,
    .fetishbound .fb-fade-chaos,
    .fetishbound .fb-bass-bump {
        animation: none !important;
    }
    .fetishbound .fb-wall__grid .fb-tile.fb-fade-chaos { opacity: 0.8; }
}


/* =========================================================
   STICKY STORY — auto-scrolling rail (replaces JS scrolljack)
   Rail animation runs at every viewport. Above 881px the wrap
   is a 2-column grid pinning the panel beside a clipped 100vh
   viewport. Below 881px the wrap stacks panel-above-viewport
   (see the mobile fallback at the earlier breakpoint) and the
   viewport gets a fixed 60vh height so the rail still scrolls
   inside it.
   ========================================================= */
.fetishbound .fb-sticky-story {
    height: auto;
    background: var(--fb-bg);
    padding: 0;
}
.fetishbound .fb-sticky-story__wrap {
    position: relative;
    top: auto;
}
.fetishbound .fb-sticky-story__rail {
    animation: fb-kf-sticky-rail-up 48s linear infinite;
    padding: 0 24px;
}
@media (min-width: 881px) {
    .fetishbound .fb-sticky-story__wrap {
        height: 100vh; height: 100dvh;
        overflow: hidden;
    }
    .fetishbound .fb-sticky-story__rail {
        padding: 0 32px 0 16px;
    }
}
@keyframes fb-kf-sticky-rail-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
.fetishbound .fb-sticky-story__viewport:hover .fb-sticky-story__rail,
.fetishbound .fb-sticky-story__viewport:focus-within .fb-sticky-story__rail {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .fetishbound .fb-sticky-story__rail { animation: none !important; transform: none !important; }
}


/* =========================================================
   FETISHBOUND — MOBILE PASS
   Targeted overrides for issues only visible on narrow viewports.
   Lives at the bottom so it wins source-order ties against earlier
   non-media-query rules with the same specificity.
   ========================================================= */
@media (max-width: 720px) {
    /* Giant serif headlines: 56px clamp-min is wider than a 375px viewport
       can hold without overflowing on words like "Photography." Bring it
       down so the typography still feels oversized without clipping. */
    .fetishbound .fb-callout__text,
    .fetishbound .fb-close__title {
        font-size: clamp(40px, 13vw, 88px);
        letter-spacing: -0.025em;
    }

    /* Close section: leave a clean band at the bottom so the floating
       audio dock (bottom-right, ~78px tall including safe-area) doesn't
       sit on top of the signoff line or the CTA buttons. */
    .fetishbound .fb-close { padding-bottom: 132px; }
    .fetishbound .fb-close__signoff { margin-top: 36px; }

    /* Chaos energy-wall story cards: the grid extends inset:-8vh -8vw past
       the viewport, so `--w:24%` from the inline style resolves to ~24% of
       (100vw + 16vw) = a narrow column pinned to the right edge that gets
       half-clipped on a phone. Center each card via transform with width
       in `vw` units so the math is independent of grid sizing — guaranteed
       to fit inside the viewport with a 4vw margin on each side. */
    .fetishbound .fb-wall__grid .fb-wall__story-card--main,
    .fetishbound .fb-wall__grid .fb-wall__story-card--list,
    .fetishbound .fb-wall__grid .fb-wall__story-card--quote,
    .fetishbound .fb-wall__grid .fb-wall__floating-line {
        left: 50% !important;
        right: auto !important;
        width: 92vw !important;
        max-width: 92vw !important;
        transform: translateX(-50%) !important;
        max-height: none !important;
    }
    .fetishbound .fb-wall__grid .fb-wall__story-card--quote { top: 6% !important; }
    .fetishbound .fb-wall__grid .fb-wall__story-card--main  { top: 30% !important; }
    .fetishbound .fb-wall__grid .fb-wall__story-card--list  { top: 58% !important; }
    .fetishbound .fb-wall__grid .fb-wall__floating-line     { top: 86% !important; }

    /* Words-room collage: the mobile rule sets width:32vw but the per-image
       min-widths (130-180px) override it on a 375px viewport so images
       cluster behind the centered text. Drop the minimums on mobile. */
    .fetishbound .fb-wr-img { min-width: 0 !important; }

    /* Life-dance drifting stills: at 32vw they sit on top of the centered
       quote on a narrow viewport. The background pan + scrim is enough
       motion on mobile — hide the drift stills entirely. */
    .fetishbound .fb-life-dance__drift--a,
    .fetishbound .fb-life-dance__drift--b { display: none; }

    /* Vmarquee center column: 32px min title is too big for the narrow
       center cell. Bring it down so "The names change." doesn't wrap to
       five lines. */
    .fetishbound .fb-vmarquee__title { font-size: clamp(22px, 6vw, 32px); }
    .fetishbound .fb-vmarquee__center { padding: 28px 10px; gap: 12px; }

    /* Marquee tiles (the floor): 240x180 from the existing rule is fine
       width-wise but a touch tall; trim height so two rows feel less
       overwhelming on a phone. */
    .fetishbound .fb-marquee__tile { width: 220px; height: 160px; }

    /* Arrival hero stamp on a 320px viewport — letter-spacing forces a
       very long single line; allow it to wrap onto two lines cleanly. */
    .fetishbound .fb-arrival__stamp { letter-spacing: 0.22em; line-height: 1.5; }

    /* Sticky-story rail frames: the 4:5 aspect + object-fit:cover combo
       crops the source photos hard on a narrow phone, slicing heads /
       rope work / context off the top or bottom. Let each image render
       at its natural aspect so the whole shot shows. The viewport's
       clipped 60vh + auto-scroll animation handles the visual rhythm. */
    .fetishbound .fb-sticky-story__frame { aspect-ratio: auto; }
    .fetishbound .fb-sticky-story__frame img { height: auto; }
}