/* balldrop.com homepage v2 (Josh 2026-11-13: "go with your recommendations, build it with ?home=v2").
   Loaded only on the homepage while bdHomeV2() is true (includes/home-v2.php: HOME_V2 switch, ?home=v2 preview).
   Built from the approved mockup v6 (Drive BallDrop-Live/research/homepage-refresh-2026-11-12/: rows-concept-a.css +
   refresh.css), plus the production additions at the end. Markup: includes/home-v2-hero.php + includes/home-v2-rows.php.
   PHOTOS (Josh 2026-11-13, "the photos can be barely seen ... just a blending of photos that show nothing"):
   - hero: each party's own photo (images/home-v2/hero/, includes/home-v2.php bdhBackdrop()) shown CLEARLY in a box on the
     right, behind the flyer and the party card; the left (H1 + search) is plain ink; only the photo's left edge fades.
     No overall dark wash, no zoom, no photo fading into the rows. The party info sits on a dark glass card.
   - rows: no photos (the tiles cover them, so they showed nothing); flat ink / navy / ember bands with hard edges.
   ONE BACKDROP (Josh 11-13, later: "the transition from the hero to the live view is terrible ... use one main image for
   everything that is a parallax and transitions out of a gradient into a solid by the time you get to the 55 event tiles"):
   the hero + the three rows sit in .bdv (templates/template.homepage.php) over ONE photo held still while they scroll (sticky),
   drifting slightly; a shade darkens it down the page to solid ink, then the --fade-h ink -> paper ease into "We found ...".
   The per-party hero photos and the per-row photos are gone (HOME_V2_ONE_BG in includes/home-v2.php brings the hero ones back). */

:root {
    /* the one backdrop: Marriott Marquis terrace at midnight, confetti + fireworks over Times Square (own photo _CTS2848) */
    --bd-photo: url("../images/home-v2/backdrop/ts-midnight-noyear-1600.webp");
}
@media all and (min-width: 1601px) { :root { --bd-photo: url("../images/home-v2/backdrop/ts-midnight-noyear-2560.webp"); } }
@media all and (max-width: 980px) and (orientation: portrait) { :root { --bd-photo: url("../images/home-v2/backdrop/ts-midnight-noyear-phone.webp"); } }

/* ===================== ROWS: concept A "Spotlight" bands (mockup rows-concept-a.css) ===================== */
/* Concept A (Impeccable): "Spotlight bands". Desktop only (981px+); phones/tablets keep PR #64.
   Each homepage row is its own full-width band (since 11-13 flat colour, no photo: Live View = ink, Cruises = navy,
   Bars = ember),
   white condensed title, one plain line under it, the same "View More" link as a pill on the right.
   The tiles stay exactly as they are and float on the scene. One accent (the site orange). */
@media all and (min-width: 981px) {
    /* rows sit on the one backdrop (.bdv): room between them so the photo shows through as the tiles scroll over it */
    #footer-top .listing-wrapper[data-row] { padding: clamp(110px, 9vw, 160px) 0 0; }
    #footer-top .listing-wrapper[data-row] .row-copy h2, #footer-top .listing-wrapper[data-row] .row-desc { text-shadow: 0 2px 14px rgb(0 0 0 / .75); }

    #footer-top .bd-row-head {
        align-items: flex-end;
        gap: 24px;
        margin: 0 12px 30px;
        padding: 0;
        border: 0;
    }
    /* the copy block takes all the room left of the pill, so the title stays on one line where it fits;
       where it can't (narrow desktops), balance splits it into even lines, never one word alone */
    #footer-top .row-copy {
        flex: 1 1 auto;
        min-width: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 18px;
        align-items: center;
    }
    #footer-top .row-ic {
        grid-row: 1 / 3;
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: #fb4700;
    }
    #footer-top .row-ic svg { width: 28px; height: 28px; fill: #fff; }
    #footer-top .bd-row-head h2.head-title {
        color: #fff !important;
        font-size: 44px !important;
        line-height: 1 !important;
        letter-spacing: -.005em;
        text-wrap: balance;
    }
    #footer-top .row-desc {
        margin: 8px 0 0;
        font: 400 16px/1.4 'Open Sans', arial;
        color: rgb(255 255 255 / .8);
        text-wrap: pretty;
    }
    #footer-top .bd-row-head a.view {
        flex: none;
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        width: auto !important;
        height: 46px;
        margin: 0 0 4px auto !important;
        padding: 0 22px;
        border: 1.5px solid rgb(255 255 255 / .6);
        border-radius: 999px;
        color: #fff !important;
        font-size: 13px !important;
        letter-spacing: .04em;
        white-space: nowrap;
        transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out;
    }
    #footer-top .bd-row-head a.view span { float: none !important; margin: 0 !important; color: #fb4700; line-height: 1; }
    #footer-top .bd-row-head a.view:hover { background: #fff; border-color: #fff; color: #17141f !important; text-decoration: none !important; }

    /* tiles: one rounded white card at rest and on hover (the white layer behind the card was square, so the
       dark band showed square corners until hover drew the ring). Deep shadow + a hairline rim so the cards sit
       above the scene; hover lifts the card and adds the orange ring, the card stays white (no grey). */
    #footer-top .listing-wrapper[data-row] .tile-list {
        background: transparent !important;
        border-radius: 10px;
        overflow: visible !important;
    }
    #footer-top .listing-wrapper[data-row] .tile-list a {
        overflow: hidden;
        border-radius: 10px !important;
        background: #fff !important;
        box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 26px 50px -22px rgb(0 0 0 / .9), 0 8px 18px -10px rgb(0 0 0 / .6) !important;
        transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease-out !important;
    }
    #footer-top .listing-wrapper[data-row] .tile-list img { border-radius: 0 !important; }
    #footer-top .listing-wrapper[data-row] .tile-list a:hover {
        transform: translateY(-5px);
        background: #fff !important;
        box-shadow: 0 0 0 2px #fb4700, 0 34px 60px -24px rgb(0 0 0 / .95), 0 10px 22px -10px rgb(0 0 0 / .6) !important;
    }
    @media (prefers-reduced-motion: reduce) {
        #footer-top .listing-wrapper[data-row] .tile-list a, #footer-top .listing-wrapper[data-row] .tile-list a:hover { transform: none; transition: none !important; }
    }
    #footer-top .listing-wrapper[data-row] .tile-list { margin-bottom: 0 !important; }
}

/* Phones/tablets (below 981px): concept A's row icon + line, compact, on PR #64's plain header
   (without this the icon svg had no size and filled the screen) */
@media all and (max-width: 980px) {
    #footer-top .row-copy {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 10px;
        align-items: center;
    }
    #footer-top .row-ic {
        grid-row: 1 / 3;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #fb4700;
    }
    #footer-top .row-ic svg { width: 18px; height: 18px; fill: #fff; }
    #footer-top .row-desc {
        margin: 3px 0 0;
        font: 400 13px/1.35 'Open Sans', arial;
        color: #5d5869;
        text-wrap: pretty;
    }
}
/* phones + tablets: the rows sit on the one backdrop too (white heading, white tiles on the dark photo) */
@media all and (max-width: 980px) {
    #footer-top .listing-wrapper[data-row] { padding-top: 64px !important; }
    #footer-top .listing-wrapper[data-row] .head-title { color: #fff !important; text-shadow: 0 2px 12px rgb(0 0 0 / .7); }
    #footer-top .listing-wrapper[data-row] .row-desc { color: rgb(255 255 255 / .86) !important; text-shadow: 0 1px 8px rgb(0 0 0 / .8); }
    #footer-top .listing-wrapper[data-row] .bd-row-head .view { display: none !important; }   /* the end card of the swipe row is the same link */
    #footer-top .listing-wrapper[data-row] ul.bd-swipe { margin-top: 18px !important; }
    #footer-top { padding-top: 0 !important; margin-top: 0 !important; }
    #footer-top .listing-wrapper[data-row]:first-child { margin-top: 0 !important; }
}

/* ===================== HERO, PICKER, BLENDS, HEADINGS (mockup refresh.css) ===================== */
:root {
    --ink: #0e0c14;
    --ink-2: #17141f;
    --orange: #fb4700;
    --orange-text: #c93a00;     /* white text on it = 4.9:1 */
    --magenta: #e0185e;
    --mute: #6b6672;
    --paper: #f6f5f8;
}
body { background: var(--paper) !important; }
::selection { background: var(--orange); color: #fff; }
/* v5: the header's 1px white/8% bottom rule was a line between the header and the hero (live header CSS in the real build) */
#header-container { border-bottom: 0 !important; }

/* ---------- HERO ---------- */
/* v3 (Josh): slides = the footer's "Booking fast this week" order; no thumbnails/progress; fits every screen.
   Sizes per range: >=1181 desktop, 981-1180 compact desktop, 481-980 tablet (own layout), <=480 phone. --fw = flyer width. */
.bdh { position: relative; isolation: isolate; overflow: hidden; background: transparent; color: #fff; }
/* the one backdrop shows through the hero. Desktop: no shading box over the hero (11-13 Josh: its bottom edge read as a dark
   band over the carousel); only a soft round shade behind the H1 + search that fades to nothing before any edge. */
.bdh-copy { position: relative; }
.bdh-copy::before { content: ""; position: absolute; inset: -70px -90px; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgb(14 12 20 / .7), rgb(14 12 20 / .45) 55%, rgb(14 12 20 / 0)); }
.bdh h1 { text-shadow: 0 2px 18px rgb(0 0 0 / .55); }
@media (max-width: 980px) {
    .bdh-copy::before { display: none; }
    /* phones/tablets: darker at the top under the H1, fading to nothing at the hero's bottom (no edge into the rows) */
    .bdh::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
        background: linear-gradient(180deg, rgb(14 12 20 / .8) 0, rgb(14 12 20 / .6) 30%, rgb(14 12 20 / .45) 62%, rgb(14 12 20 / 0) 100%); }
}
.bdh-h2 { text-shadow: 0 1px 10px rgb(0 0 0 / .9); }
.bdh-in {   /* 1000px + 12px inset = the same left and right edges as the party rows and the grid below (Josh 11-13) */
    box-sizing: border-box; max-width: 1000px; margin: 0 auto; padding: 56px 12px 76px;
    display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr); gap: 40px; align-items: center;
}
.bdh-copy { min-width: 0; }
.bdh h1 {
    margin: 0 !important; padding: 0 !important;
    font: 800 clamp(48px, 4vw, 58px)/.92 'Roboto Condensed', 'Arial Narrow', sans-serif !important;
    letter-spacing: -.012em; text-transform: uppercase; text-align: left; color: #fff !important; text-wrap: balance;
}
.bdh h1 em {
    display: block; margin-top: 16px;
    font: 700 clamp(12px, 1.25vw, 16px)/1.4 'Open Sans', arial, sans-serif !important; font-style: normal !important;
    letter-spacing: .15em; color: #ff8a4d !important;
}
.bdh h1 br { display: none; }
.bdh-find { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px 10px; }
.bdh-search {
    flex: 1 0 100%; display: flex; align-items: center; gap: 12px; box-sizing: border-box; min-width: 0;
    height: 58px; padding: 0 9px 0 20px; border: 0; border-radius: 999px;
    background: #fff; color: #5d5869; font: 400 16px 'Open Sans', arial, sans-serif; text-align: left; cursor: pointer;
    box-shadow: 0 18px 40px -18px rgb(0 0 0 / .8); transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s;
}
.bdh-search:hover { transform: translateY(-2px); box-shadow: 0 24px 46px -18px rgb(0 0 0 / .85); }
.bdh-search svg { width: 22px; height: 22px; fill: var(--orange); flex: none; }
.bdh-search span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bdh-search kbd { flex: none; display: grid; place-items: center; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 13px 'Open Sans', arial, sans-serif; }
.bdh-btn {
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-sizing: border-box; height: 46px; padding: 0 18px 0 14px;
    border: 1.5px solid rgb(255 255 255 / .5); border-radius: 999px; background: rgb(14 12 20 / .35);
    color: #fff !important; font: 600 14px 'Open Sans', arial, sans-serif; text-decoration: none !important; cursor: pointer; white-space: nowrap;
    transition: background-color .18s, border-color .18s, color .18s;
}
.bdh-btn svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.bdh-btn:hover { background: #fff; border-color: #fff; color: var(--ink) !important; }
.bdh-btn--hot { background: var(--orange-text); border-color: var(--orange-text); }
.bdh-btn--hot:hover { background: #a83000; border-color: #a83000; color: #fff !important; }
.bdh :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------- ROW BANDS: hard edges (11-13: the v4 photo cross-fades between bands are gone, Josh) ---------- */
@media all and (min-width: 981px) {
    /* dark only down to the middle of the dark -> light fade: no antialiased seam at #footer-top's fractional bottom edge */
    #footer-top { background: transparent !important; overflow: visible !important; overflow-x: clip !important; position: relative; z-index: 1; }
    #footer-top .listing-wrapper[data-row] { overflow: visible !important; }
    #footer-top .bd-row-head { border: 0 !important; }
}
/* the two light <-> dark blends (into "We found" and into the footer) share ONE curve (11-14): 17 stops, eased with smootherstep
   and mixed in OKLab, so there is no visible grey band; --fade-h tall (the .bdv shade reaches solid ink exactly that far up) */
:root { --fade-h: 280px; }
@media (max-width: 980px) { :root { --fade-h: 200px; } }
#footer-top::after {
    content: ""; display: block; clear: both; height: var(--fade-h); position: relative; z-index: -1;
    background: linear-gradient(to bottom, #0e0c14 0%, #0e0c14 6.2%, #110f17 12.5%, #17151d 18.8%, #211f27 25%, #302e36 31.2%, #44424a 37.5%, #5c5a62 43.8%, #77757c 50%, #939197 56.2%, #aeacb2 62.5%, #c6c5ca 68.8%, #dad9dd 75%, #e9e8eb 81.2%, #f2f1f4 87.5%, #f5f4f7 93.8%, #f6f5f8 100%);
}
/* light -> dark into the footer: the same blend the other way (no rule or border above it) */
#ft2-host { border: 0 !important; box-shadow: none !important;
    /* light under the light end of the paper -> dark fade, dark below its middle: no seam at the fractional top edge */
    background: linear-gradient(var(--paper) 60px, var(--ink) 60px) !important; }
/* the article cards used to sit flush on the footer blend, which read as a line: give the section room to end */
.listing-wrapper:has(> ul.articles) { padding-bottom: 64px !important; }
#ft2-host::before {   /* 11-14 (Josh: "the transition is bad ... should be seamless"): was 120px through flat greys = a grey band */
    content: ""; display: block; height: var(--fade-h);
    background: linear-gradient(to bottom, #f6f5f8 0%, #f5f4f7 6.2%, #f2f1f4 12.5%, #e9e8eb 18.8%, #dad9dd 25%, #c6c5ca 31.2%, #aeacb2 37.5%, #939197 43.8%, #77757c 50%, #5c5a62 56.2%, #44424a 62.5%, #302e36 68.8%, #211f27 75%, #17151d 81.2%, #110f17 87.5%, #0e0c14 93.8%, #0e0c14 100%);
}

/* ---------- SECTION HEADINGS below the rows (same words, new voice) ---------- */
:is(#footer-top, .bdv) + .listing-wrapper { padding-top: 0; }
:is(#footer-top, .bdv) + .listing-wrapper .listing-head {
    margin: 0 12px 28px !important; padding: 12px 0 0 !important; border: 0 !important;
    text-align: left !important; background: none !important;
}
:is(#footer-top, .bdv) + .listing-wrapper .listing-head::before, :is(#footer-top, .bdv) + .listing-wrapper .listing-head::after { display: none !important; }
:is(#footer-top, .bdv) + .listing-wrapper .listing-head strong {
    display: block; font: 800 clamp(28px, 3.4vw, 44px)/1 'Roboto Condensed', 'Arial Narrow', sans-serif !important;
    letter-spacing: -.005em; color: var(--ink) !important; text-wrap: balance; background: none !important; padding: 0 !important;
}
:is(#footer-top, .bdv) + .listing-wrapper .listing-head em {
    font-style: normal !important; color: #fff !important; background: var(--orange-text); padding: 0 .22em; border-radius: .14em; margin: 0 .06em;
}
.listing-wrapper h3.section-head {
    margin: 72px 12px 26px !important; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important;
    font: 800 clamp(26px, 3vw, 38px)/1 'Roboto Condensed', 'Arial Narrow', sans-serif !important; color: var(--ink) !important;
}

/* phones: the fixed header sits at top -2px (64px tall) but the page is padded 66px, which left a 2px strip of the light page
   between the header and the dark hero = the white line under the header. Close it. */
@media (max-width: 568px) { .bdh { margin-top: -2px; } }
/* touch screens of any width (a 1024px iPad gets the desktop layout): 44px+ targets in the header nav and footer */
@media (pointer: coarse) {
    #ft2 .ft2-spec a, #ft2 .ft2-plan a, #ft2 .ft2-legal a { display: inline-flex !important; align-items: center; min-height: 44px; }
    #ft2 .ft2-pills a, #ft2 .ft2-cta, #header-container nav a, .pn-searchbtn, .pn-dcta { min-height: 44px; box-sizing: border-box; }
}
/* ---------- PHONES + TABLETS (<981px): transitions, headings, tap targets ---------- */
@media (max-width: 980px) {
    /* footer v2 (live) links were 20-22px tall on touch screens: 44px targets (a footer-v2.css change in the real build) */
    #ft2 .ft2-spec a, #ft2 .ft2-plan a, #ft2 .ft2-legal a { display: inline-flex !important; align-items: center; min-height: 44px; }
    #ft2 .ft2-pills a, #ft2 .ft2-cta { min-height: 44px; box-sizing: border-box; }
    /* hero -> light rows: the ink fades to paper instead of a cut */
    /* the hero's own ink must stop under the middle of its ink -> paper fade (no seam at the fractional bottom edge) */
    /* (11-13 showcase: the hero no longer fades to paper; the first row's photo banner starts right under it, hard edge) */
    /* the swipe rows clipped the T1 cards' drop shadow at the strip's bottom edge = a hard grey line: give it room */
    #footer-top ul.bd-swipe, #footer-top ul.columns { padding-bottom: 30px !important; margin-bottom: -18px !important; }
    #footer-top .bd-row-head { border: 0 !important; }   /* no hairlines on the page at all (Josh) */
    #footer-top { background: transparent !important; }   /* on the one backdrop (.bdv) */
    :is(#footer-top, .bdv) + .listing-wrapper .listing-head { padding-top: 40px !important; margin-bottom: 20px !important; }
    .listing-wrapper h3.section-head { margin-top: 52px !important; }
}

/* ===================== PRODUCTION ADDITIONS (2026-11-13) ===================== */
/* the slideshow's H2 ("New Year's Eve 2027") stays an H2 (Josh: no heading removed): a small label over the callout */
.bdh-h2 {
    margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important;
    font: 800 15px/1.2 'Roboto Condensed', 'Arial Narrow', sans-serif !important; letter-spacing: .14em !important;
    text-transform: uppercase; color: #ff8a4d !important;
}
.bdh-h2 + .bdh-h2 { display: none; }
@media (max-width: 480px) { .bdh-h2 { margin-bottom: 10px !important; font-size: 12.5px !important; } }
/* the old site CSS styles every li and p; keep the hero lists and the picker clean */
.bdh ul, .bdh li { background: none !important; }
.bdh-find .bdh-search { -webkit-appearance: none; appearance: none; }

/* ===================== ONE BACKDROP (Josh 11-13) ===================== */
/* .bdv wraps the hero + the rows. Its photo layer is a viewport-tall sticky box, so the photo stays put while the hero and the
   rows scroll over it (js/home-v2.js drifts it a few px, --bdv-py). The shade over it runs the full height of .bdv: light at the
   top, darker row by row, solid ink --fade-h before the end, where #footer-top::after eases ink -> paper into "We found ...". */
.bdv { position: relative; isolation: isolate; background: var(--ink); }
.bdv-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bdv-bg i { position: sticky; top: 0; display: block; height: 100vh; overflow: hidden; }
.bdv-bg i::before {
    content: ""; position: absolute; left: 0; right: 0; top: -60px; bottom: -60px;
    background: var(--bd-photo) 58% 45% / cover no-repeat var(--ink);
    transform: translate3d(0, var(--bdv-py, 0px), 0); will-change: transform;
}
.bdv-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgb(14 12 20 / .22) 0, rgb(14 12 20 / .3) 640px, rgb(14 12 20 / .55) 45%,
                rgb(14 12 20 / .78) 72%, var(--ink) calc(100% - var(--fade-h)), var(--ink) 100%);
}
@media (max-width: 980px) {
    .bdv-bg::after { background: linear-gradient(180deg, rgb(14 12 20 / .2) 0, rgb(14 12 20 / .3) 40%, rgb(14 12 20 / .6) 66%,
                     rgb(14 12 20 / .82) 85%, var(--ink) calc(100% - var(--fade-h)), var(--ink) 100%); }
}
@media (prefers-reduced-motion: reduce) { .bdv-bg i::before { transform: none; } }

/* ===================== ONE WIDTH = THE NAV BAR (Josh 11-14) ===================== */
/* The header's .wrapper is 1200px with 24px padding = content 224..1376 at 1600 (16px gutters on small laptops). The hero, the
   party rows, "We found" and the articles now use that same line: 1176px boxes with the 12px heading inset (tiles 276px wide,
   were 232). Phones/tablets (<981px) unchanged. */
@media (min-width: 981px) {
    .listing-wrapper { width: min(1176px, calc(100% - 8px)) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; float: none !important; }
    #footer-top .listing-wrapper { width: min(1176px, calc(100% - 8px)) !important; }
}
/* the old site sizes the "We found" tiles and the article cards at a fixed 315px (3 across 1000px): at the nav width the grid is
   4 across at the rows' tile size (276px, same columns as the rows above) and the articles stay 3 across, filling the width */
@media (min-width: 981px) {
    .listing-wrapper ul:not(.articles):not(.columns) li.list-item { width: calc(25% - 18px) !important; margin-left: 9px !important; margin-right: 9px !important; }
    .listing-wrapper ul.articles > li.list-item { width: calc(33.333% - 18px) !important; margin-left: 9px !important; margin-right: 9px !important; }
}

/* the black tint (Josh 11-14: "make the background blend in more and be a background, instead of competing with the tiles and
   carousel"): fixed to the photo, darkest at the edges, lighter on the ball so the eye goes there; the page shade (.bdv-bg::after)
   then deepens it row by row */
.bdv-bg i::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .55); }
@media (min-width: 981px) {
    .bdv-bg i::after { background: radial-gradient(ellipse 26% 40% at 51% 46%, rgb(0 0 0 / .12) 0, rgb(0 0 0 / .4) 55%, rgb(0 0 0 / .66) 100%); }
}
.bdv-bg::after {
    background: linear-gradient(180deg, rgb(14 12 20 / 0) 0, rgb(14 12 20 / 0) 640px, rgb(14 12 20 / .3) 42%,
                rgb(14 12 20 / .62) 70%, var(--ink) calc(100% - var(--fade-h)), var(--ink) 100%);
}
@media (max-width: 980px) {
    .bdv-bg::after { background: linear-gradient(180deg, rgb(14 12 20 / 0) 0, rgb(14 12 20 / .1) 40%, rgb(14 12 20 / .45) 66%,
                     rgb(14 12 20 / .75) 85%, var(--ink) calc(100% - var(--fade-h)), var(--ink) 100%); }
}

/* ===================== HERO v3 (Josh 11-14, direction A picked): CENTRED TITLE + THE WHEEL WITH TEXT ON EVERY SLIDE ===================== */
/* Changes asked: text on the slides; before/after slides tinted; tighter spacing; no search / Party types in the hero (Party
   types -> the nav); a place for the video; the H1 + its line centred; "Where will you be at midnight?" under it.
   Direction A (impeccable) won over B (taste-skill): each slide is ONE card (picture + its details), video = a pill under the midnight line. */
.bdh-in { box-sizing: border-box; display: block; width: min(1176px, calc(100% - 8px)); max-width: none; margin: 0 auto; padding: 30px 12px 26px; }
.bdh-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bdh-copy::before { display: none; }
.bdh h1 { text-align: center !important; font-size: clamp(44px, 4.1vw, 64px) !important; text-shadow: 0 2px 26px rgb(0 0 0 / .8); text-wrap: balance; }
.bdh h1 em { margin-top: 12px; text-shadow: 0 1px 12px rgb(0 0 0 / .9); }
.bdh-midnight { margin: 16px 0 0 !important; padding: 0 !important; font: 700 clamp(22px, 2vw, 30px)/1.1 'Roboto Condensed', 'Arial Narrow', sans-serif; color: #fff; text-shadow: 0 2px 16px rgb(0 0 0 / .85); }
.bdh-video {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; height: 44px; padding: 0 18px 0 5px; box-sizing: border-box; border-radius: 999px;
    border: 1.5px solid rgb(255 255 255 / .35); background: rgb(14 12 20 / .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff !important; font: 600 14px 'Open Sans', arial, sans-serif; text-decoration: none !important; transition: background-color .18s, border-color .18s, color .18s;
}
.bdh-video-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--orange-text); }
.bdh-video-ic svg { width: 15px; height: 15px; fill: #fff; margin-left: 2px; }
.bdh-video:hover { background: #fff; border-color: #fff; color: var(--ink) !important; }
.bdh-show { margin-top: 26px; text-align: center; }
.bdh-show .bdh-h2 { margin: 0 0 14px !important; text-align: center !important; }
/* the backdrop: One Times Square stays mid-screen, now behind the centred title */
@media (min-width: 981px) {
    .bdv-bg i::before {
        --wi: max(135vw, calc(270vh - 300px)); left: 0; right: 0;
        background: url("../images/home-v2/backdrop/ts-midnight-noyear-2560.webp") no-repeat var(--ink);
        background-size: var(--wi) auto;
        background-position: calc(50vw - .575 * var(--wi)) calc(275px - .313 * var(--wi));
    }
    .bdv-bg i::after { background: radial-gradient(ellipse 30% 30% at 50% 190px, rgb(0 0 0 / .3) 0, rgb(0 0 0 / .45) 60%, rgb(0 0 0 / .66) 100%); }
}
/* tighter spacing between the sections (Josh: "a bit too large of spacing") */
@media (min-width: 981px) { #footer-top .listing-wrapper[data-row] { padding-top: 56px !important; } }
:root { --fade-h: 200px; }
@media (max-width: 980px) { :root { --fade-h: 150px; } #footer-top .listing-wrapper[data-row] { padding-top: 40px !important; } }
.listing-wrapper h3.section-head { margin-top: 44px !important; }
:is(#footer-top, .bdv) + .listing-wrapper .listing-head { margin-bottom: 20px !important; padding-top: 4px !important; }
.listing-wrapper:has(> ul.articles) { padding-bottom: 40px !important; }

/* ---------- THE WHEEL ---------- */
/* --sw = the focused slide's width (picture 2:1). .bdw-item = picture + its text; placed on the ring by --d / --ad (js). */
.bdh-show { --sw: clamp(480px, 40vw, 600px); --step: .74; --turn: 36deg; --back: 230px; }
.bdw { position: relative; height: calc(var(--sw) / 2 + 92px); margin: 0 -12px; touch-action: pan-y; user-select: none; -webkit-user-select: none; text-align: left; }
.bdw-item {
    position: absolute; top: 0; left: 50%; width: var(--sw); margin-left: calc(var(--sw) / -2); box-sizing: border-box;
    z-index: calc(10 - var(--ad));
    transform: perspective(1500px) translateX(calc(var(--d) * var(--sw) * var(--step))) translateZ(calc(var(--ad) * var(--back) * -1)) rotateY(calc(var(--d) * var(--turn)));
    transition: transform .75s cubic-bezier(.22, .8, .2, 1), opacity .6s;
}
.bdw-item.is-snap { transition: none; }
.bdw-item.is-far { opacity: 0; pointer-events: none; }
.bdw-item:not(.is-on) { cursor: pointer; }
/* the tint over everything that is not the focused slide: the cards stay readable as shapes, not as content */
.bdw-item::after {
    content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; z-index: 3;
    background: rgb(8 7 12 / calc(min(var(--ad), 1) * .62 + max(var(--ad) - 1, 0) * .18)); transition: background-color .6s;
}
.bdw-slide { position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden; background: #000; -webkit-tap-highlight-color: transparent; }
.bdw-slide img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; -webkit-user-drag: none; }
.bdw-slide.is-tall img { position: relative; }
.bdw-blur { position: absolute; inset: -30px; background: center / cover no-repeat; filter: blur(22px) brightness(.55); }
.bdw-slide:focus-visible, .bdw-cap a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.bdw-cap { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; transition: opacity .45s; }
/* the side slides show only their picture: an open caption (B) or a phone-width card (A) would collide with the focused one */
@media (max-width: 980px) { .bdw-item:not(.is-on) .bdw-cap { opacity: 0; } }
.bdw-cap-txt { min-width: 0; }
.bdw-name { margin: 0 !important; padding: 0 !important; min-width: 0; }
.bdw-rank { display: block; margin-bottom: 5px; font: 800 12px/1 'Roboto Condensed', 'Arial Narrow', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #ff8a4d; }
.bdw-name a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 800 23px/1.05 'Roboto Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; color: #fff !important; text-decoration: none !important; }
.bdw-name a:hover { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px; }
.bdw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0 !important; padding: 0 !important; font: 600 13px/1.3 'Open Sans', arial, sans-serif; color: rgb(255 255 255 / .8); }
.bdw-meta svg { width: 16px; height: 16px; flex: none; fill: #ff8a4d; margin-right: -2px; }
.bdw-meta span { white-space: nowrap; }
.bdw-dot { width: 3px; height: 3px; border-radius: 50%; background: rgb(255 255 255 / .5); }
.bdw-buy { flex: none; display: flex; align-items: center; gap: 14px; }
.bdw-price { margin: 0 !important; padding: 0 !important; display: grid; line-height: 1; text-align: right; }
.bdw-price span { font: 400 11.5px 'Open Sans', arial, sans-serif; color: rgb(255 255 255 / .66); margin-bottom: 3px; }
.bdw-price b { font: 800 26px/1 'Roboto Condensed', 'Arial Narrow', sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.bdw-cta { display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 18px 0 15px; box-sizing: border-box; border-radius: 999px; background: var(--orange-text); color: #fff !important; font: 700 14px 'Open Sans', arial, sans-serif; text-decoration: none !important; white-space: nowrap; transition: background-color .18s, transform .18s; }
.bdw-cta svg { width: 18px; height: 18px; fill: #fff; flex: none; }
.bdw-cta:hover { background: #a83000; }
.bdw-cta:active { transform: scale(.97); }
.bdw-item.is-feat .bdw-rank { display: inline-block; padding: 4px 9px; border-radius: 999px; background: var(--orange-text); color: #fff; }
/* A: one card = picture + a solid details strip attached under it */
.bdh .bdw-item { border-radius: 18px; overflow: hidden; background: #110f17; box-shadow: 0 40px 70px -30px rgb(0 0 0 / .95), inset 0 0 0 1px rgb(255 255 255 / .1); }
.bdh .bdw-cap { padding: 14px 14px 14px 20px; border-top: 1px solid rgb(255 255 255 / .08); }
/* the slide in focus lights up (Josh 11-14: "the whole tile should be in the orange border ... illuminate, like a glow"):
   a 2px orange ring drawn ON TOP of picture + caption (an inset shadow sat under the picture, so only the caption showed it),
   plus an orange glow that fades in just after the wheel lands. */
.bdh .bdw-item::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
    box-shadow: inset 0 0 0 2px #ff7a30, inset 0 0 18px rgb(255 122 48 / .35); opacity: 0; transition: opacity .5s .2s;
}
.bdh .bdw-item.is-on::before { opacity: 1; }
.bdh .bdw-item { transition: transform .75s cubic-bezier(.22, .8, .2, 1), opacity .6s, box-shadow .6s .2s; }
.bdh .bdw-item.is-on {
    box-shadow: 0 0 0 1px rgb(255 122 48 / .9), 0 0 26px 2px rgb(251 71 0 / .55), 0 0 72px 8px rgb(251 71 0 / .26), 0 40px 70px -30px rgb(0 0 0 / .95);
}
@media (prefers-reduced-motion: reduce) { .bdh .bdw-item::before { transition: none; } }
/* B: the picture is the card, the text sits open underneath it (no box) */
/* arrows: either side of the focused slide, at the middle of its picture (over the tinted neighbours) */
.bdw-arrow {
    position: absolute; z-index: 20; top: calc(var(--sw) / 4 - 24px); display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
    border: 1.5px solid rgb(255 255 255 / .35); border-radius: 50%; background: rgb(14 12 20 / .6); color: #fff; cursor: pointer;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .18s, border-color .18s, transform .18s;
}
.bdw-arrow--prev { left: calc(50% - var(--sw) / 2 - 66px); }
.bdw-arrow--next { left: calc(50% + var(--sw) / 2 + 18px); }
.bdw-arrow svg { width: 20px; height: 20px; fill: currentColor; }
.bdw-arrow:hover { background: #fff; border-color: #fff; color: var(--ink); }
.bdw-arrow:active { transform: scale(.94); }
.bdw-arrow:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
/* story dots: the focused one stretches and fills over the 6 s turn (it IS the timer) */
.bdw-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.bdw-seg { position: relative; width: 26px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .35s cubic-bezier(.22, .8, .2, 1); }
.bdw-seg::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 2px); height: 4px; border-radius: 4px; background: rgb(255 255 255 / .28); transition: background-color .18s; }
.bdw-seg:hover::before { background: rgb(255 255 255 / .5); }
.bdw-seg.is-on { width: 56px; }
.bdw-seg i { position: absolute; left: 0; top: calc(50% - 2px); height: 4px; width: 0; border-radius: 4px; background: var(--orange); pointer-events: none; }
.bdw-seg.is-on i { width: 100%; }
.bdw-seg.is-run i { width: 0; animation: bdw-fill var(--dur, 6s) linear forwards; }
.bdh-show.is-paused .bdw-seg i { animation-play-state: paused; }
.bdw-seg:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
@keyframes bdw-fill { from { width: 0; } to { width: 100%; } }
/* tablets + phones */
@media (max-width: 980px) {
    .bdh-in { width: auto; padding: 26px 24px 22px; }
    .bdh-show { --sw: min(76vw, 520px); --step: .84; --turn: 30deg; --back: 160px; }
    .bdw { margin: 0 -24px; height: calc(var(--sw) / 2 + 92px); }
    .bdw-arrow { display: none; }
}
@media (max-width: 640px) {
    .bdh-in { padding: 20px 16px 18px; }
    .bdh h1 { font-size: 40px !important; }
    .bdh-midnight { font-size: 21px; margin-top: 12px !important; }
    .bdh-video { margin-top: 12px; height: 40px; font-size: 13px; }
    .bdh-video-ic { width: 30px; height: 30px; }
    .bdh-show { --sw: 84vw; --step: .9; --back: 120px; margin-top: 20px; }
    .bdw { margin: 0 -16px; height: calc(var(--sw) / 2 + 130px); }
    .bdw-cap { flex-direction: column; align-items: stretch; gap: 10px; }
    .bdh .bdw-cap { padding: 12px 12px 12px 14px; }
    .bdw-name a { font-size: 20px !important; }
    .bdw-meta { font-size: 12px; }
    .bdw-buy { justify-content: space-between; }
    .bdw-price { text-align: left; }
    .bdw-price b { font-size: 22px; }
    .bdw-cta { height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .bdw-item, .bdw-seg { transition: none; } }

/* ===================== HERO TEXT THAT SHINES (Josh 11-14: "the main text is a little hard to read with the background") =====================
   The fireworks burst right behind the title. 1) a soft pool of shade sits behind the whole text block (title, subline, midnight
   line, video pill, "New Year's Eve 2027"): a feathered ellipse, darkest at the centre, no visible edge, so the photo still reads
   around it; 2) the type gets a tight dark edge + a wide halo instead of one blurry shadow; the H1 adds a faint warm light so it
   glows like a marquee; 3) the two orange lines go brighter (#ffa266 on the shade = well over 4.5:1). */
.bdh-in { position: relative; isolation: isolate; }
.bdh-in::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: 50%; top: 4px; width: min(1180px, 112%); height: 370px; transform: translateX(-50%);
    background: radial-gradient(closest-side, rgb(8 6 14 / .7) 0, rgb(8 6 14 / .58) 45%, rgb(8 6 14 / .3) 75%, rgb(8 6 14 / 0) 100%);
}
.bdh h1 {
    text-shadow: 0 1px 2px rgb(0 0 0 / .6), 0 3px 14px rgb(0 0 0 / .65), 0 0 46px rgb(0 0 0 / .55), 0 0 26px rgb(255 196 150 / .22) !important;
}
.bdh h1 em { color: #ffa266 !important; text-shadow: 0 1px 2px rgb(0 0 0 / .9), 0 0 14px rgb(0 0 0 / .85) !important; }
.bdh-midnight { text-shadow: 0 1px 2px rgb(0 0 0 / .7), 0 2px 14px rgb(0 0 0 / .8), 0 0 36px rgb(0 0 0 / .5); }
.bdh-show .bdh-h2 { color: #ffa266 !important; text-shadow: 0 1px 2px rgb(0 0 0 / .9), 0 0 14px rgb(0 0 0 / .9) !important; }
@media (max-width: 980px) { .bdh-in::before { height: 330px; width: 130%; } }
@media (max-width: 640px) { .bdh-in::before { height: 360px; width: 150%; top: 0; } }

/* ===================== BRIGHT LIGHTS (Josh 11-14: "this is Times Square, Broadway, lets make it bright lights style") =====================
   The title is a lit marquee sign: a white-hot core, a gold halo and an orange bloom, with a tight dark edge underneath so the
   letters stay sharp over the shade pool. The two orange lines are orange neon. On load the sign flickers on once (the one
   authored moment; off for reduced motion). No bulb strips: Josh found LED strips cheesy (09-13). */
.bdh h1 {
    color: #fffaf2 !important;
    text-shadow:
        0 0 1px #fff,
        0 0 7px rgb(255 240 210 / .85),
        0 0 18px rgb(255 198 120 / .7),
        0 0 38px rgb(255 140 50 / .55),
        0 0 80px rgb(251 71 0 / .38),
        0 2px 3px rgb(0 0 0 / .55) !important;
    animation: bdhLightsOn 1.6s steps(1, end) .25s both;
}
.bdh h1 em, .bdh-show .bdh-h2 {
    color: #ffb67a !important;
    text-shadow: 0 0 1px rgb(255 214 170 / .9), 0 0 8px rgb(255 130 50 / .85), 0 0 22px rgb(251 71 0 / .6), 0 1px 2px rgb(0 0 0 / .95) !important;
}
.bdh-midnight {
    color: #fff;
    text-shadow: 0 0 1px #fff, 0 0 10px rgb(255 226 190 / .55), 0 0 30px rgb(255 140 50 / .35), 0 1px 2px rgb(0 0 0 / .8), 0 2px 14px rgb(0 0 0 / .7);
}
@keyframes bdhLightsOn {
    0%   { filter: brightness(.35) saturate(.6); }
    14%  { filter: brightness(1.1); }
    20%  { filter: brightness(.5) saturate(.7); }
    30%  { filter: brightness(1.05); }
    36%  { filter: brightness(.7); }
    46%, 100% { filter: none; }
}
@media (prefers-reduced-motion: reduce) { .bdh h1 { animation: none; } }

/* ===================== TIGHTER BLENDS (Josh 11-14: "where there is the black / white transition, the spacing is too far apart") =====================
   Was rows -> "We found" 200px / articles -> footer heading 287px on desktop (152 / 244 on phones). Same smooth OKLab curve, just
   shorter, and less padding on either side of the footer blend. */
:root { --fade-h: 120px; }
@media (max-width: 980px) { :root { --fade-h: 90px; } }
.listing-wrapper:has(> ul.articles) { padding-bottom: 12px !important; }
#ft2-host #ft2 .ft2-grid { padding-top: 22px; }   /* beats footer-v2.css (loaded later) */