/* ==========================================================================
   Phone layout pass (<=860px), added after the frozen stylesheet.
   Client feedback, 3 September 2026: the show cards zoom and expand, the
   "where we perform" tabs do not fit, and the two marquees scroll past on
   their own. On a phone these become static, correctly sized blocks and
   swipeable carousels. The phone rules apply at 860px and below; the compact
   header block near the end applies up to 1023px, where the burger shows.
   No markup changes.
   Several targets carry inline styles from the approved build, so the
   overrides below need !important; each one is marked with the reason.
   ========================================================================== */
@media (max-width: 860px) {

  /* ---- 1. Show cards: static, phone-sized, no hover growth ------------- */
  .uf-show {
    flex: 0 0 auto !important;          /* base rule is flex:0 0 960px */
    height: auto !important;            /* was a 960px square on a 375px screen */
    min-height: 0 !important;
    transition: none !important;        /* kills the flex-basis expand */
    border-radius: 28px !important;
  }
  /* Two different cards share these classes. The chooser card carries a copy block; the all-shows page also
     uses artwork-only cards with no copy at all, which would collapse to nothing once the fixed height goes.
     Give those their shape back from the artwork's own proportions. */
  .uf-show--disco:not(:has(.uf-show-body)),
  .uf-show--decades:not(:has(.uf-show-body)) {
    /* one value covers every layer: gradients have no intrinsic size, so contain leaves them filling the box */
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  .uf-show--disco:not(:has(.uf-show-body))   { aspect-ratio: 1440 / 1018; }
  .uf-show--decades:not(:has(.uf-show-body)) { aspect-ratio: 1600 / 1454; }
  /* the show name and its script partner sit on one line by default and clip at this width */
  .uf-show-body .uf-col { flex-wrap: wrap !important; row-gap: 2px; }
  .uf-show-name { font-size: 30px !important; }
  .uf-show-script--disco, .uf-show-script--decades { font-size: 23px !important; }
  /* The chooser artwork is a logo, not a photograph, so cropping it to fill cuts the wordmark in half.
     Only the last layer is the artwork; the four gradients above it fill the box whatever the size. */
  .uf-show--disco:has(.uf-show-body),
  .uf-show--decades:has(.uf-show-body) {
    background-size: auto, auto, auto, auto, contain !important;
    background-position: center, center, center, center, center top !important;
    background-repeat: no-repeat !important;
  }
  .uf-shows:hover .uf-show,
  .uf-shows:hover .uf-show:hover,
  .uf-inferno .uf-shows:hover .uf-show,
  .uf-inferno .uf-shows:hover .uf-show:hover,
  .uf-fs-band .uf-shows:hover .uf-show,
  .uf-fs-band .uf-shows:hover .uf-show:hover {
    flex-basis: auto !important;        /* a tap leaves :hover stuck on touch */
  }
  .uf-shows { gap: 18px; }
  .uf-show-body,
  .uf-inferno .uf-show-body,
  .uf-fs-band .uf-show-body {
    position: static !important;        /* base rule pins it at left:80px top:210px */
    width: 100% !important;
    max-width: 100% !important;
    padding: 26px 22px 28px !important;
    gap: 18px !important;
  }
  /* Where artwork sits behind the copy, clear it exactly: its rendered height is the card width times the ratio. */
  .uf-show--disco:has(.uf-show-body)   .uf-show-body { padding-top: calc(70.7% + 14px) !important; }  /* 1440x1018 */
  .uf-show--decades:has(.uf-show-body) .uf-show-body { padding-top: calc(90.9% + 14px) !important; }  /* 1600x1454 */
  .uf-show .uf-cta { width: 100%; justify-content: center; }
  /* Where the artwork carries the show's name, the text wordmark under it reads as a duplicate. Hide it from
     sight but keep it for screen readers, which have no access to a background image. Cards without artwork
     (the all-shows page) keep their visible name. */
  .uf-show--disco:has(.uf-show-body) .uf-show-name,
  .uf-show--disco:has(.uf-show-body) .uf-show-script--disco,
  .uf-show--decades:has(.uf-show-body) .uf-show-name,
  .uf-show--decades:has(.uf-show-body) .uf-show-script--decades {
    position: absolute !important;
    width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  /* ---- 2. Where we perform: wrapped tabs, panel that grows ------------- */
  .uf-perform-card { height: auto !important; min-height: 0 !important; border-radius: 24px !important; }
  .uf-perform-side { display: none !important; }   /* empty spacer column on phones */
  .uf-perform-tabs {
    position: static !important;        /* base rule is absolute, 402px wide */
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 16px 8px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  /* the frozen sheet styles these as `.uf-perform-tabs [data-tab]`, so use the same shape to win on order */
  .uf-perform-tabs [data-tab] {
    height: auto !important;            /* inline style sets height:104px */
    flex: 1 1 calc(50% - 4px) !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 999px !important;
    background: rgba(20, 18, 16, .55);
    box-shadow: inset 0 0 0 1px rgba(255, 180, 80, .22);
    justify-content: center !important;
  }
  .uf-perform-tabs [data-tab][aria-selected="true"] {
    background: linear-gradient(90deg, rgba(255, 138, 31, .28), rgba(255, 45, 26, .22));
    box-shadow: inset 0 0 0 1px rgba(255, 180, 80, .55);
  }
  .uf-perform-tabs [data-tab] > span:first-child { font-size: 12px !important; opacity: .8; }
  .uf-perform-tabs [data-tablabel] { font-size: 19px !important; line-height: 1.05 !important; }
  .uf-perform-panel {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 0 0 24px 24px !important;
  }
  /* The frozen stylesheet already stacks these panels with `.uf-perform-panel [data-tpanel] > div`,
     which outranks a `> div > div` selector, so match its shape and let source order decide. */
  .uf-perform-panel [data-tpanel] {
    min-height: 0 !important;           /* the copy sets the height, so no photo strip is left over */
    background-size: cover !important;
    background-position: center 22% !important;
  }
  .uf-perform-panel [data-tpanel] > div {
    padding: 214px 20px 26px !important;
    /* a clear band of photograph, a short fade, then a solid ground so the copy is properly legible */
    background: linear-gradient(180deg, rgba(8, 6, 10, 0) 0, rgba(8, 6, 10, 0) 176px, rgba(8, 6, 10, .93) 208px, rgba(8, 6, 10, .97) 100%) !important;
  }
  .uf-perform-panel .uf-arrowlink { margin-top: 4px; }

  /* ---- 3 and 4. Marquees become swipeable carousels -------------------- */
  /* The photo strip: viewport scrolls, track stops animating, cards fit the phone. */
  .uf-strip-vp {
    height: auto !important;
    min-height: 0 !important;
    overflow-x: auto !important;        /* base rule is overflow:hidden */
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .uf-strip-vp::-webkit-scrollbar { display: none; }
  .uf-strip-track {
    position: relative !important;      /* base rule is absolute, top:-45px */
    top: 0 !important;
    animation: none !important;
    padding: 0 20px !important;
    gap: 14px !important;
  }
  .uf-strip-track > * {
    width: calc(100vw - 64px) !important;   /* inline styles are 397px and 440px */
    height: 400px !important;
    border-radius: 26px !important;
    scroll-snap-align: center;
  }
  .uf-strip-track > * > span { left: 22px !important; bottom: 22px !important; }

  /* The Instagram ticker: same treatment, arrows added by uf-mobile.js. */
  .uf-ig-mq { overflow-x: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .uf-ig-mq::-webkit-scrollbar { display: none; }
  .uf-ig-track { animation: none !important; gap: 14px !important; padding: 0 20px; }
  .uf-ig-card { width: calc(100vw - 72px) !important; scroll-snap-align: center; }
  .uf-ig-ph { width: 100% !important; height: 300px !important; min-height: 0 !important; }

  /* The decades page carries a third marquee, a row of venue cards in a viewport 480px wider than the
     screen with negative margins. Same treatment: swipe it. */
  .uf-dd-navvp {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: auto !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .uf-dd-navvp::-webkit-scrollbar { display: none; }
  .uf-dd-navtrack { animation: none !important; gap: 12px; padding: 0 20px; }
  .uf-dd-navcard { scroll-snap-align: center; }

  /* Reported 28 Oct 2026 from a real phone: none of these carousels would swipe, though the dots and arrows
     worked and swiping worked in DevTools. Driven with real touch input in Chrome they scroll, so the fault is
     the iPhone's engine. Two full-screen ambient videos sit fixed above every page at z-index 95 with
     pointer-events:none, and WebKit has a run of bugs where touch scrolling does not honour pointer-events:none
     on a layer above a scroll box, a video above all: the finger lands on the video, so only the page moves,
     while taps are routed correctly. On the Inferno pages the carousels sit inside an isolated stacking context,
     so they cannot be lifted above the videos either. On a phone the videos go; they were also about 2 MB per
     page and two full-screen blends running constantly. uf-video.js does not start a video that is not shown. */
  .fx-embers, .fx-lights { display: none !important; }
  /* the edge fade suits a ticker drifting past, not a row of snapped cards, and a mask on a scroll box is a
     second thing WebKit has mishandled for touch; the decades row above lost its mask for the same reason */
  .uf-ig-mq { -webkit-mask-image: none !important; mask-image: none !important; }

  /* ---- 5. Headings that are told never to wrap, and so run off the screen ---- */
  .uf-script-accent { white-space: normal !important; max-width: 100%; }
  .uf-titlerow { flex-wrap: wrap !important; max-width: 100%; }
  .uf-d2-head, .uf-d2-lead { max-width: 100% !important; }

  /* The production page's main heading carries an inline font-size of 116px and a no-wrap rule, so it ran
     1,461px wide and its second line was clipped off the screen. An !important declaration outranks the
     inline value; the size matches what every other page's closing heading already uses on a phone. */
  .uf-final-script {
    font-size: clamp(44px, 7vw, 86px) !important;
    white-space: normal !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* ---- 6. Labels that shrink below a readable size, and tap targets under 44px ---- */
  .uf-stat-label { font-size: 12.5px !important; }
  .uf-ig-view { font-size: 12.5px !important; }
  [data-uf="mutelabel"] { font-size: 12.5px !important; }
  .uf-foot-link { min-height: 40px; display: flex; align-items: center; }
  .uf-foot-legallink { min-height: 40px; display: inline-flex; align-items: center; }
  .uf-lineup-name { min-height: 40px; display: inline-flex; align-items: center; }
  .uf-link.uf-arrowlink { min-height: 44px; display: inline-flex; align-items: center; }
  .uf-choice-link, .uf-date-title, .uf-sc-follow { min-height: 40px; display: inline-flex; align-items: center; }

  /* Carousel furniture built by uf-mobile.js (no markup in the page source). */
  /* The dot is 7px, well under the 24px minimum touch target, and at a 7px gap the targets of neighbouring
     dots would overlap. The gap gives each one room and the ::before extends the tappable area to 24x24
     without changing how big the dot looks. */
  .uf-mdots { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 14px 0 0; padding: 0; list-style: none; }
  .uf-mdot { position: relative; width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: rgba(240, 214, 168, .32); transition: width .25s, background .25s; }
  .uf-mdot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
  .uf-mdot[aria-current="true"] { width: 22px; border-radius: 4px; background: linear-gradient(90deg, #ffc946, #ff5a1e); }
  .uf-mnav { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
  .uf-mnav button {
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20, 18, 16, .6); box-shadow: inset 0 0 0 1px rgba(255, 180, 80, .35);
    color: #ffb627;
  }
  .uf-mnav button:disabled { opacity: .35; }
  .uf-mnav svg { display: block; }

  /* ---- 7. One gutter, one alignment (client feedback, 28 Oct 2026) ---------
     "This is left aligned, this is middle, this is middle; on mobile this should be left aligned", and the
     page "doesn't look properly structured". Measured across all 27 pages at 400px: the hero copy sat at 20px
     but every section below it at 40px, because the page wrapper adds 20px and each section another 20px;
     and pages switched between centred and left-aligned blocks from one section to the next. */

  /* Sections sit on the wrapper's 20px gutter, level with the hero. The closing call to action keeps its
     padding: it is drawn as a box, and its copy needs room inside it. */
  .uf-est-exact > section:not(.uf-sec-final),
  .uf-main > section:not(.uf-sec-final) { padding-left: 0 !important; padding-right: 0 !important; }

  /* Flow text reads from the left edge. Cards keep their own composition; this is the running copy and the
     heading groups between them. align-self moves a heading row without changing how its container lays
     out anything else (images, buttons). */
  .uf-final-p, .uf-final-h2, .uf-th-p, .uf-title, .uf-d2-lead, .uf-ab-lead, .uf-ab-reason-p, .uf-ab-h2,
  .uf-est-p, .uf-est-h2, .uf-bk-intro, .uf-wd-ht-q, .uf-tr-note, .uf-tr-chs, .uf-dd-p, .uf-dd-h2,
  .uf-d2-songs-p, .uf-th-tech-foot-p, .uf-legal-doc, .uf-legal-doc p, .uf-legal-doc h2, .uf-legal-updated,
  .uf-d2-head, .uf-wd-head, .uf-stack20, .uf-ab-evolved-head, .uf-ab-reason, .uf-fs-intro-head, .uf-fs-intro,
  .uf-pf-intro-sec, .uf-th-tech-foot, .uf-est-body, .uf-bk-head, .uf-ce-ideal-title, .uf-ce-ideal-head,
  .uf-tr-glance, .uf-tr-ch, .uf-pr-modular-copy, .uf-dd-story-title, .uf-dd-story-top, .uf-dd-setsec-head,
  .uf-dd-ident-head, .uf-dd-pills-wrap, .uf-d2-songs-head, .uf-choice-titlebox, .uf-ab-why, .uf-ab-clients-head,
  .uf-th-intro-head, .uf-fs-band-head, .uf-shows-head, .uf-ab-band-title { text-align: left !important; }
  .uf-d2-head, .uf-ab-evolved-head, .uf-choice-titlebox, .uf-ce-ideal-title, .uf-ce-ideal-head, .uf-dd-setsec-head,
  .uf-dd-ident-head, .uf-d2-songs-head, .uf-ab-clients-head, .uf-dd-story-title, .uf-fs-intro-head,
  .uf-th-intro-head, .uf-fs-band-head, .uf-shows-head, .uf-ab-band-title, .uf-bk-head,
  .uf-social-head { align-items: flex-start !important; }
  /* a heading group inside a centring section shrank to its own width and sat in the middle (the band pages'
     "More from the Band" started at 116px), so the group spans the column and its contents start at the edge */
  .uf-d2-head, .uf-ab-evolved-head, .uf-choice-titlebox, .uf-ce-ideal-title, .uf-ce-ideal-head, .uf-dd-setsec-head,
  .uf-dd-ident-head, .uf-d2-songs-head, .uf-ab-clients-head, .uf-dd-story-title, .uf-fs-intro-head,
  .uf-th-intro-head, .uf-fs-band-head, .uf-shows-head, .uf-ab-band-title, .uf-bk-head { align-self: stretch !important; width: 100%; }
  .uf-titlerow { justify-content: flex-start !important; }
  .uf-eyebrow, .uf-titlerow, .uf-ab-h2 { align-self: flex-start !important; margin-left: 0 !important; }
  /* the band pages' pull quote was centred under a left-aligned eyebrow */
  .uf-eyebrow, .uf-social-head, .uf-pf-quote { text-align: left !important; }
  /* these heading groups added their own 20px on top of the section's, so they sat at 40px while the cards
     beneath them sat at 20px */
  .uf-ab-evolved-head, .uf-shows-head { padding-left: 0 !important; padding-right: 0 !important; }
  /* Script accents are pulled left to tuck under the heading on a desktop line, by as much as 300px. On a
     phone the row wraps and the script starts its own line, so that pull put it off the screen: the band
     pages' names began 20px outside it and the weddings page's "Ever" 125px. Every script keeps the small
     optical nudge most of them already use. */
  .uf-titlerow > .uf-script-accent { margin-left: -5px !important; }
  /* the pills under a left-aligned paragraph follow it */
  .uf-d2-pills { justify-content: flex-start !important; }
  /* the closing heading set two lines of capitals at 0.9, so "Night" sat jammed against the line above */
  .uf-final-h2 { line-height: 1 !important; }

  /* Buttons: the show and wide variants were 18px type with 21px padding, so a label like "Explore Disco
     Inferno" broke over two lines in a 92px-tall block. Matched to the hero buttons, which were already 15px
     on a phone, so every label sits on one line. */
  .uf-cta--show, .uf-cta--wide, .uf-bk-submit {
    padding: 16px 20px !important;
    font-size: 15px !important;
    letter-spacing: .08em !important;
    min-height: 54px;
  }

  /* FAQ questions were set at 40px, so one question ran to five lines. */
  .uf-faq-q { font-size: 24px !important; line-height: 1.12 !important; }

  /* The top glow (.fx-magenta) is drawn for a 1920px-wide band 1120px deep. At phone width its ellipse turned
     into a 240x627px orange streak down the right-hand side of the first section. Keeping the band as deep
     as the screen is wide gives back the rounded corner glow the desktop has. */
  .fx-magenta, .fx-topglows .uf-pl-glow-neon { height: 100vw !important; }

  /* The all-shows page alternates artwork and copy, so stacked on a phone one show read copy-then-picture
     and the next picture-then-copy, leaving the Disco Inferno artwork sitting over the Decades heading. The
     artwork now leads both, at one shape: the two pieces are 1440x1018 and 1600x1454, so each kept its own
     proportions and the second picture came out 30% taller than the first. */
  .uf-shows > .uf-show--disco:not(:has(.uf-show-body)),
  .uf-shows > .uf-show--decades:not(:has(.uf-show-body)) { order: -1; aspect-ratio: 5 / 4 !important; }
  /* the copy beside the artwork is not a box on a phone, so it sits on the gutter like the rest of the page;
     its faint card background otherwise showed as slivers above the heading and under the button */
  .uf-shows > .uf-show:not(.uf-show--disco):not(.uf-show--decades) {
    background: none !important; box-shadow: none !important; border: 0 !important;
    /* with no background left to contain, its rounded clip only cut the button's glow off along a curve */
    overflow: visible !important; border-radius: 0 !important;
  }
  .uf-shows > .uf-show:not(.uf-show--disco):not(.uf-show--decades) > .uf-show-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* The compact header, everywhere the burger shows (<=1023px). Client feedback 28 Oct 2026: shrink the logo
   by 10% and extend the bar down slightly so the logo is not sitting flush against it. The canvas logo was
   126x78, hung at -7px in a 64px bar, so it overran the bar at top and bottom. Now 10% smaller (113x70 canvas,
   94x58 box) in a 76px bar, centred, which leaves clear bar under the artwork. Inner-page heroes clear the
   bar at 116px and the home hero runs behind it, so nothing below moves. */
@media (max-width: 1023px) {
  .uf-nav { height: 76px; padding-top: 16px; padding-bottom: 16px; }
  .uf-nav-logo-badge { width: 94px; height: 58px; }
  .uf-navlogo-glow, .uf-navlogo-crisp { width: 113px; height: 70px; left: -10px; top: -6px; }
}

/* Someone who asks for less motion gets no marquee at any width. */
@media (prefers-reduced-motion: reduce) {
  .uf-strip-track, .uf-ig-track { animation: none !important; }
}