/* ============================================================
   Strike 10 mobile pass.
   Loaded after the page styles, so it wins on equal specificity.
   Desktop is only touched where the same fix helps both.
   Phone breakpoint 760px, drawer breakpoint 880px so an iPad in
   portrait gets the drawer rather than a cramped link row.
   ============================================================ */

/* ---------------- shared, all sizes ---------------- */
.nav-toggle{display:none}
.nav-drawer{display:none}
.s10-bar{display:none}

/* The hidden attribute must actually hide. The UA rule for [hidden] is
   display:none, but every .btn sets its own display, which beats it on
   equal specificity. That silently broke the promise that pricing and
   package buttons only exist once their content does: both were being
   marked hidden and rendered anyway. */
[hidden]{display:none!important}

/* anchors land below the fixed bar rather than under it */
section[id],div[id],header[id]{scroll-margin-top:78px}

/* the hero copy block must keep the page gutter (it was losing it) */
.hero .hero-inner.wrap{padding-left:20px;padding-right:20px}

/* ---- hero height: a full viewport is too much on every device ---- */
.hero{min-height:min(84svh,780px)}
.hero .hero-inner.wrap{padding-top:100px}

/* focal point control, so cover crops never cut the wrong thing */
.hero-media video,.hero-media .poster{object-position:var(--hero-pos,50% 50%)}
.hero-media .poster{background-position:var(--hero-pos,50% 50%)}

/* ================= DRAWER NAV (<= 880px) ================= */
@media(max-width:880px){
  .nav .wrap{gap:10px}
  .nav-links{display:none!important}
  .nav img{height:44px;width:auto}

  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex:0 0 auto;
    border:1px solid rgba(244,239,231,.26);border-radius:14px;background:rgba(13,11,14,.5);backdrop-filter:blur(8px);
    color:var(--cream);cursor:pointer;padding:0;order:3}
  .nav-toggle:hover{border-color:var(--brass);color:var(--brass)}
  .nav-toggle span{position:relative;display:block;width:19px;height:2px;background:currentColor;border-radius:2px;
    transition:transform .22s ease,opacity .18s ease}
  .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:19px;height:2px;
    background:currentColor;border-radius:2px;transition:transform .22s ease}
  .nav-toggle span::before{top:-6px}
  .nav-toggle span::after{top:6px}
  .nav-toggle[aria-expanded="true"] span{background:transparent}
  .nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

  /* the top bar keeps the logo and the menu button only */
  .nav > .wrap > .btn{display:none}

  .nav-drawer{display:block;position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}
  .nav-drawer .scrim{position:absolute;inset:0;background:rgba(6,5,7,.72);backdrop-filter:blur(5px);opacity:0;transition:opacity .24s ease}
  .nav-drawer .sheet{position:absolute;top:0;right:0;bottom:0;width:min(360px,86vw);background:#131017;
    border-left:1px solid rgba(244,239,231,.12);box-shadow:-30px 0 80px rgba(0,0,0,.6);
    transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.25,1);
    display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 18px) 20px calc(env(safe-area-inset-bottom) + 20px);overflow:auto}
  .nav-drawer.open{visibility:visible;pointer-events:auto}
  .nav-drawer.open .scrim{opacity:1}
  .nav-drawer.open .sheet{transform:none}

  .nav-drawer .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .nav-drawer .head img{height:44px;width:auto}
  .nav-drawer .close{width:42px;height:42px;border-radius:50%;border:1px solid rgba(244,239,231,.24);
    background:none;color:var(--cream);font-size:1.4rem;line-height:1;cursor:pointer}
  .nav-drawer .close:hover{border-color:var(--brass);color:var(--brass)}

  .nav-drawer .links{display:flex;flex-direction:column;margin:14px 0 4px}
  .nav-drawer .links a{display:flex;align-items:center;justify-content:space-between;gap:12px;
    font-family:var(--font-display);font-weight:700;font-size:1.45rem;letter-spacing:.06em;text-transform:uppercase;
    color:var(--cream);padding:15px 2px;border-bottom:1px solid rgba(244,239,231,.09);min-height:56px}
  .nav-drawer .links a::after{content:"\2192";color:var(--brass);font-size:1.1rem;opacity:.75}
  .nav-drawer .links a:active{color:var(--brass)}

  .nav-drawer .status{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
  .nav-drawer .cta{display:flex;flex-direction:column;gap:10px;margin-top:18px}
  .nav-drawer .cta .btn{width:100%;justify-content:center;padding:16px 20px;font-size:1.15rem}
  .nav-drawer .mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
  .nav-drawer .mini a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;
    border:1px solid rgba(244,239,231,.2);border-radius:12px;font-family:var(--font-display);
    letter-spacing:.08em;text-transform:uppercase;font-size:1rem;color:var(--cream)}
  .nav-drawer .mini a svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7}
  .nav-drawer .mini a:hover{border-color:var(--brass);color:var(--brass)}
  /* the accessibility launcher gets out of the way of the open drawer */
  body.drawer-open .a11y-btn{opacity:0;pointer-events:none}
}
@media(min-width:881px){
  .nav-links a{padding:10px 2px}
}

/* ================= PHONE (<= 760px) ================= */
@media(max-width:760px){

  /* ---- rhythm ---- */
  .sec{padding:54px 0}
  .wrap{padding:0 20px}
  h2{font-size:clamp(1.75rem,7.4vw,2.4rem);margin:6px 0 12px}

  /* ---- hero ---- */
  .hero{min-height:82svh;min-height:82dvh}
  .hero .hero-inner.wrap{padding-top:92px}
  /* the last CTA clears the accessibility launcher in the corner */
  .hero-inner{padding-bottom:calc(env(safe-area-inset-bottom) + 78px)}
  .hero h1{font-size:clamp(2.9rem,13.5vw,4.4rem);line-height:.92;margin:10px 0 14px;letter-spacing:.01em}
  .hero-sub{font-size:1.02rem;line-height:1.5;max-width:34ch}
  .eyebrow{font-size:.66rem;letter-spacing:.22em}

  .scroll-cue{display:none}
  .live-strip{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
  .live-pill{font-size:.66rem;letter-spacing:.09em;padding:9px 13px;min-height:38px}

  .hero-ctas{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}
  .hero-ctas .btn{width:100%;justify-content:center;min-height:56px;font-size:1.18rem;padding:16px 20px}

  /* ---- buttons everywhere ---- */
  .btn{min-height:52px;padding:15px 22px;justify-content:center}
  .food-actions,.pkg-cta,.proof-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .food-actions .btn,.pkg-cta .btn,.proof-actions .btn{width:100%}

  /* ---- venue cards: photo on top, facts in a solid block below,
         so nothing important sits under text ---- */
  .venue-grid{gap:14px}
  .venue-card{min-height:0;display:block}
  .venue-card .bg{position:relative;inset:auto;z-index:0;height:200px;background-position:var(--card-pos,50% 45%)}
  .venue-card::after{inset:0 0 auto 0;height:200px;background:linear-gradient(180deg,rgba(13,11,14,.15) 40%,rgba(13,11,14,.75) 100%)}
  .venue-body{position:relative;z-index:1;padding:18px;background:#141016}
  .venue-card h3{font-size:1.85rem}
  .venue-facts{gap:6px;margin:10px 0 2px}
  .venue-facts li{font-size:.6rem;padding:5px 9px}
  .venue-foot{margin-top:14px;gap:10px;flex-wrap:wrap}
  .venue-cta{font-size:1rem}

  /* ---- play tiles ---- */
  .play-grid{grid-template-columns:1fr 1fr;gap:10px}
  .play-grid > *{min-width:0}
  /* a square reads better at phone width, and min-height must stay off
     or the aspect ratio pushes the tile wider than its grid column */
  .play-tile{aspect-ratio:1/1;min-height:0}
  .tile-tags{max-width:calc(100% - 16px);top:8px;right:8px}
  .play-tile span{font-size:1.02rem;padding:11px 12px}
  .play-tile span small{font-size:.62rem}
  .tile-tags{top:8px;right:8px;gap:3px}
  .tile-tags i,.play-tile em{font-size:.55rem;padding:3px 7px;letter-spacing:.08em}

  /* ---- film strip ---- */
  .strip .wrap{padding-top:44px;padding-bottom:44px}
  .strip-split{gap:24px}
  .strip-rule{margin:2px 0}
  .strip-side h3{font-size:clamp(1.5rem,7vw,2rem)}
  .strip-side p{font-size:.95rem}
  .strip-facts{gap:6px;margin:12px 0 16px}
  .strip-side .btn{width:100%}

  /* ---- food ---- */
  .food-row{grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
  .food-row img{border-radius:12px}

  /* ---- events and parties ---- */
  .event-hook{padding:18px}
  .event-hook b{font-size:1.28rem}
  .event-hook li{font-size:.6rem}
  .party-grid{gap:14px}
  .party-card{padding:22px 20px}
  .party-card h3{font-size:1.4rem}
  .party-card .btn{width:100%}

  /* ---- venue page bands ---- */
  .band{gap:18px}
  .band .media{aspect-ratio:16/10;min-height:0}
  .btn-price{width:100%;min-height:50px;font-size:1.02rem}
  .chips li,.strip-facts li{font-size:.6rem}

  /* ---- info bar ---- */
  .info-bar .wrap{grid-template-columns:1fr;gap:12px;padding-top:16px;padding-bottom:16px}
  .info-bar b{margin-bottom:2px}

  /* ---- good to know ---- */
  .gtk div{padding:15px 16px}
  .gtk b{font-size:.6rem}
  .gtk span{font-size:.95rem}

  /* ---- social proof ---- */
  .proof-top{gap:12px}
  .proof-score{padding:16px 18px}
  .proof-quotes{gap:12px}

  /* ---- footer ---- */
  footer{padding-bottom:calc(env(safe-area-inset-bottom) + 108px)}
  .foot-grid{gap:26px}
  .foot-links{gap:12px 16px}
  footer .wrap span,footer .wrap p{font-size:.86rem}

  /* ---- pricing modal ---- */
  .price-card{padding:22px 18px}

  /* ---- lighter images on phones ---- */
  .bg,.media,.poster{background-image:var(--img-sm,var(--img))}
}

/* ================= STICKY ACTION BAR (phones only) ================= */
@media(max-width:760px){
  .s10-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:100;gap:8px;
    padding:10px 12px calc(env(safe-area-inset-bottom) + 10px);
    background:linear-gradient(180deg,rgba(13,11,14,.72),rgba(13,11,14,.97) 42%);
    backdrop-filter:blur(14px);border-top:1px solid rgba(244,239,231,.12);
    transform:translateY(115%);transition:transform .28s cubic-bezier(.2,.8,.25,1);pointer-events:none}
  .s10-bar.show{transform:none;pointer-events:auto}
  .s10-bar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:54px;border-radius:14px;border:1px solid rgba(244,239,231,.2);background:rgba(244,239,231,.06);
    color:var(--cream);font-family:var(--font-display);font-size:.92rem;letter-spacing:.09em;text-transform:uppercase}
  .s10-bar a svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
  .s10-bar a.primary{background:var(--brass);color:#221807;border-color:var(--brass);box-shadow:0 6px 20px rgba(217,164,65,.28)}
  .s10-bar.solo a{flex:1;flex-direction:row;gap:9px;min-height:58px;font-size:1.14rem}
  .s10-bar.solo .ico{display:flex;flex:0 0 auto}
  .s10-bar.solo a span[data-bar-label]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* the accessibility launcher steps up so it never sits under the bar */
  body.bar-on .a11y-btn{bottom:calc(env(safe-area-inset-bottom) + 98px)}
  body.bar-on .a11y-panel{bottom:calc(env(safe-area-inset-bottom) + 160px)}
  /* and the bar hides itself whenever something is over the page */
  body.no-bar .s10-bar{transform:translateY(115%);pointer-events:none}
}

/* ================= SMALL PHONES (<= 380px) ================= */
@media(max-width:380px){
  .hero{min-height:78svh;min-height:78dvh}
  .hero .hero-inner.wrap{padding-top:84px}
  .hero h1{font-size:clamp(2.5rem,13vw,3.4rem)}
  .hero-sub{font-size:.97rem}
  .play-grid{grid-template-columns:1fr}
  .play-tile{aspect-ratio:16/10}
  .s10-bar a{font-size:.82rem;letter-spacing:.06em}
  .venue-facts li{font-size:.57rem;padding:4px 8px}
}

/* ================= PHONE LANDSCAPE ================= */
@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:0;padding-top:74px}
  /* the hero already has its own top padding here, so cancel the
     shared one rather than stacking the two */
  .hero .hero-inner.wrap{padding-top:0}
  .hero-inner{padding-bottom:26px}
  .hero h1{font-size:clamp(2rem,7vw,3rem);margin:6px 0 10px}
  .hero-sub{font-size:.95rem;max-width:46ch}
  .hero-ctas{grid-template-columns:1fr 1fr}
  .hero-inner{padding-bottom:calc(env(safe-area-inset-bottom) + 70px)}
  .scroll-cue{display:none}
  .sec{padding:44px 0}
  .s10-bar{padding-bottom:8px}
  .nav-drawer .sheet{padding-top:14px}
  .nav-drawer .links a{padding:11px 2px;min-height:48px;font-size:1.2rem}
}

/* ================= TABLET (761 - 1024) ================= */
@media(max-width:1024px){
  footer .wrap span,footer .wrap p,.foot-links a{font-size:.86rem}
}
@media(min-width:761px) and (max-width:1024px){
  .sec{padding:64px 0}
  .hero-ctas .btn,.food-actions .btn,.pkg-cta .btn,.btn-price{min-height:52px}
  .play-grid{grid-template-columns:repeat(2,1fr)}
  .food-row{grid-template-columns:repeat(3,1fr)}
  .food-row img:nth-child(n+4){display:none}
  .strip-split{grid-template-columns:1fr}
  .strip-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(217,164,65,.9),transparent)}
}

/* pointer-coarse devices get a bigger hit area everywhere */
@media(pointer:coarse){
  .nav-links a,.foot-links a,.venue-cta,.a11y-list button{min-height:44px;display:inline-flex;align-items:center}
  .a11y-tile{min-height:104px}
}