/* =========================================================================
   One Man Band — Responsive overrides
   Loaded after site.css. Targets tablet (<= 980px) and mobile (<= 600px / 480px).
   ========================================================================= */

/* Global: kill horizontal scroll caused by long words & off-frame decoration */
html, body { overflow-x: hidden; max-width: 100%; }
.wrap { overflow: visible; }
.hero { overflow: hidden; }

/* ============================================================
   TABLET  (<= 980px)
   ============================================================ */
@media (max-width: 980px){

  /* Tighter section padding */
  .section { padding: clamp(48px, 7vw, 96px) 0; }
  .services, .ig, .sampler, .reel, .upto, .cta-panel, .pullquote, .press {
    padding-top: clamp(48px, 7vw, 96px);
    padding-bottom: clamp(48px, 7vw, 96px);
  }

  /* Hero: stack as single column, but keep most styling */
  .hero { padding: clamp(28px, 5vw, 60px) 0 clamp(48px, 7vw, 80px); }
  .hero__grid { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); }
  .hero__title {
    font-size: clamp(48px, 10vw, 92px);
    line-height: 0.88;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .hero__lead { max-width: 100%; }

  /* Hero photo: shrink, no rotation, smaller offset shadow */
  .hero__photo {
    transform: none;
    aspect-ratio: 4 / 5;
    max-width: 540px;
    margin: 0 auto;
    box-shadow: 8px 8px 0 var(--c-saffron), 8px 8px 0 2px var(--c-ink);
  }
  /* Hero stamp: smaller, inside the photo box (top-right) instead of hanging off corner */
  .hero__photo-stamp {
    right: 12px;
    bottom: 12px;
    width: 100px;
    height: 100px;
    font-size: 11px;
    padding: 10px;
  }
  .hero__photo-stamp strong { font-size: 28px; }

  /* About page hero photo */
  .hero__grid > .hero__photo[style*="rotate(1.2deg)"] {
    transform: none !important;
    box-shadow: -8px 8px 0 var(--c-saffron), -8px 8px 0 2px var(--c-ink) !important;
  }

  /* Hide drum disc — overflows hero box on small screens */
  .hero__disc { display: none; }

  /* Floating instruments — show fewer, smaller, lower opacity so text wins */
  .hero__svg-bg { opacity: 0.28; }
  .hero__svg-bg .instrument { width: 44px !important; }
  .hero__svg-bg .instrument:nth-of-type(n+5) { display: none; }

  /* "Up to 14" giant number — pull back stroke */
  .upto__inner { grid-template-columns: 1fr !important; gap: clamp(20px, 3vw, 32px) !important; }
  .upto__big { font-size: clamp(100px, 20vw, 180px); }
  .upto__big em { -webkit-text-stroke: 2px var(--c-ink); }
  .upto__list { grid-template-columns: 1fr 1fr; }

  /* Services: cards shrink */
  .svc { min-height: 320px; padding: 20px; }
  /* shows.html cards have inline grid-column: span 2 — force single column */
  .svc[style*="grid-column: span 2"] { grid-column: auto !important; min-height: 0 !important; }
  /* Feature lists inside service cards: single column once squeezed */
  .svc ul[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Stats — 2 cols (already there) but trim type */
  .stat__num { font-size: clamp(40px, 8vw, 64px); }

  /* CTA panel: stack, buttons full width */
  .cta-panel__inner { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); }
  .cta-panel__title { font-size: clamp(44px, 9vw, 80px); }
  .cta-panel__buttons .btn { padding: 18px 22px; }
  .cta-panel__buttons .btn small { font-size: 9px; }

  /* Services head: stack */
  .services__head { grid-template-columns: 1fr; gap: 16px; }
  .services__title { font-size: clamp(36px, 7vw, 56px); }

  /* Reel frame: ensure aspect-ratio holds */
  .reel__play-btn { width: 88px; height: 88px; font-size: 11px; }

  /* Form: drop sticky on tablet */
  body .wrap > aside[style*="sticky"] { position: static !important; }

  /* Book page hero: stack columns properly */
  .hero__grid[style*="1.4fr 0.6fr"],
  .hero__grid[style*="1.1fr 0.9fr"] { grid-template-columns: 1fr !important; }

  /* Book page form layout: stack sidebar + form (already part of the wrap grid override) */
  .section .wrap[style*="0.9fr 1.1fr"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* Pull quote grid — single column */
  .quotegrid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .pullquote__q { font-size: clamp(28px, 5.5vw, 44px); max-width: 100%; }

  /* IG grid: more breathing */
  .ig__grid { gap: 8px; }

  /* Numbered list (TEDx etc) */
  .numlist li { grid-template-columns: 56px 1fr; }
  .numlist__num { font-size: 22px; }
  .numlist__t { font-size: clamp(18px, 3.5vw, 22px); }

  /* Footer */
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__bottom { flex-direction: column; align-items: flex-start; }

  /* Press track / marquee — smaller type */
  .press__track { font-size: clamp(20px, 4vw, 26px); gap: 36px; }
  .press__track > span { gap: 36px; }

  /* Form sidebar tweaks (book.html) */
  #booking-form { box-shadow: 4px 4px 0 var(--c-ink); padding: clamp(20px, 4vw, 32px) !important; }
}

/* ============================================================
   MOBILE  (<= 600px)
   ============================================================ */
@media (max-width: 600px){

  /* Reduce gutter slightly so big type can breathe */
  :root { --gutter: 18px; }

  /* Nav */
  .nav__inner { height: 60px; }
  .nav__brand img { width: 34px; height: 34px; }
  .nav__brand-text { font-size: 12px; }
  .nav__brand-text small { font-size: 9px; letter-spacing: 0.14em; }

  /* Ticker */
  .ticker__track { font-size: 16px; gap: 28px; padding: 8px 0; }
  .ticker__track > span { gap: 28px; }
  .ticker__dot { width: 8px; height: 8px; }

  /* Hero */
  .hero { padding: 28px 0 60px; }
  .hero__eyebrow { font-size: 10px; gap: 8px; flex-wrap: wrap; }
  .hero__eyebrow .pipe { display: none; }
  .hero__title {
    font-size: clamp(44px, 12vw, 72px);
    letter-spacing: -0.025em;
    line-height: 0.88;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .hero__title .num { padding: 0 8px; }
  .hero__title .row--outline { -webkit-text-stroke: 1.5px var(--c-ink); }
  .hero__lead { font-size: 16px; }
  .hero__cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__cta-row .btn { justify-content: center; width: 100%; }

  /* Hero photo — limit height */
  .hero__photo { aspect-ratio: 4 / 5; max-height: 460px; }
  .hero__photo::after { font-size: 9px; padding: 4px 8px; top: 8px; left: 8px; }
  .hero__photo-stamp { width: 80px; height: 80px; font-size: 9px; padding: 6px; right: 8px; bottom: 8px; }
  .hero__photo-stamp strong { font-size: 22px; margin-bottom: 2px; }

  /* Eyebrow tag */
  .tag { font-size: 11px; }
  .tag::before { width: 16px; }

  /* Stats */
  .stat-strip { padding: 36px 0; }
  .stat__num { font-size: 36px; }
  .stat__rule { width: 40px; margin-top: 10px; }
  .stat__lbl { font-size: 10px; letter-spacing: 0.14em; margin-top: 8px; }

  /* Up to 14 */
  .upto { padding: 56px 0; }
  .upto__big { font-size: clamp(80px, 26vw, 140px); line-height: 0.82; }
  .upto__big em { -webkit-text-stroke: 1.5px var(--c-ink); }
  .upto__sub { font-size: 16px; }
  .upto__list { grid-template-columns: 1fr; gap: 0; }
  .upto__list li { font-size: 12px; padding: 6px 0; }

  /* Services full single column */
  .svc-grid,
  .section .svc-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .svc {
    min-height: 0 !important;
    padding: 18px !important;
    grid-column: auto !important;  /* override inline grid-column: span 2 */
  }
  .svc__title { font-size: 26px !important; }
  .svc__desc { font-size: 14px; }
  /* Feature lists inside service cards on shows.html: force single column */
  .svc ul[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    font-size: 12px !important;
  }
  /* Service-card photo at mobile: shorter, fits content */
  .svc__photo[style*="aspect-ratio: 16/9"] { aspect-ratio: 16/9 !important; }
  /* Force span:2 cards to single col too */
  .svc[style*="grid-column: span 2"] { grid-column: auto !important; }

  /* Services head buttons */
  .services__title { font-size: clamp(32px, 9vw, 48px); }

  /* Pull quote */
  .pullquote { padding: 48px 0; }
  .pullquote__q { font-size: clamp(26px, 7vw, 36px); line-height: 1.1; }

  /* Reel */
  .reel { padding: 56px 0; }
  .reel h2 { font-size: clamp(30px, 8vw, 44px); }
  .reel__play-btn { width: 68px; height: 68px; font-size: 10px; }

  /* IG grid: 2 cols */
  .ig__grid { grid-template-columns: 1fr 1fr; }

  /* CTA panel */
  .cta-panel { padding: 56px 0; }
  .cta-panel__title { font-size: clamp(36px, 10vw, 56px); }
  .cta-panel__sub { font-size: 15px; }
  .cta-panel__buttons .btn { padding: 16px 18px; font-size: 12px; }
  .cta-panel__buttons .btn small { display: block; font-size: 9px; }
  .btn--xl { padding: 18px 20px; font-size: 13px; }

  /* Footer */
  .foot { padding: 48px 0 24px; }
  .foot__grid { grid-template-columns: 1fr; gap: 32px; }
  .foot__brand { font-size: 26px; }
  .foot__sig { font-size: 24px; }

  /* Press marquee */
  .press { padding: 48px 0; }
  .press__lbl { font-size: 11px; letter-spacing: 0.16em; margin-bottom: 18px; }
  .press__track { font-size: 18px; gap: 24px; }
  .press__track > span { gap: 24px; }

  /* Numbered list */
  .numlist li { grid-template-columns: 44px 1fr; gap: 12px; padding: 14px 0; }
  .numlist__num { font-size: 18px; }
  .numlist__t { font-size: 16px; line-height: 1.15; }
  .numlist li p { font-size: 14px !important; }

  /* Book form */
  .form-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .field input, .field select, .field textarea { font-size: 16px; padding: 12px 14px; }
  .chips { gap: 6px; }
  .chip { padding: 8px 12px; font-size: 11px; }

  /* Book form CTA row (two big buttons) */
  .field--full[style*="flex-direction: row"] { flex-direction: column !important; align-items: stretch !important; }
  .field--full[style*="flex-direction: row"] .btn { justify-content: center; }

  /* About page mantra big type */
  body .upto__big[style*="200px"] { font-size: clamp(72px, 22vw, 110px) !important; }

  /* Rig grid: keep 2 col already at 560 — tighten */
  .rig-grid { gap: 6px !important; }
  .rig-grid .svc { padding: 12px !important; }
  .rig-grid .svc strong { font-size: 14px !important; }

  /* Hero photo column on book page becomes the buttons column — already stacks */
  /* Press page photo library: 2 cols */
  .section .svc-grid { grid-template-columns: 1fr 1fr; }
  .section .svc-grid .svc[style*="aspect-ratio: 3/4"] { min-height: 0; }

  /* Tweaks panel: smaller width */
  #omb-tweaks { right: 12px; bottom: 12px; width: calc(100vw - 24px) !important; max-width: 320px; }

  /* Secrets badge: smaller, bottom-left, don't cover photos */
  body > div[title*="Hidden things"] {
    left: 12px !important;
    bottom: 12px !important;
    font-size: 10px !important;
    padding: 7px 10px !important;
    opacity: 0.92;
  }
  body > div[title*="Hidden things"]:hover { opacity: 1; }
}

/* ============================================================
   VERY NARROW  (<= 380px)
   ============================================================ */
@media (max-width: 380px){
  .hero__title { font-size: 42px; }
  .nav__brand-text { display: none; }
  .nav__brand img { width: 38px; height: 38px; }
  .cta-panel__title { font-size: 32px; }
  .stat__num { font-size: 30px; }
  .upto__big { font-size: 64px; }
  .pullquote__q { font-size: 24px; }
  .services__title { font-size: 30px; }
}

/* ============================================================
   LANDSCAPE PHONES  (max-height: 500px and orientation landscape)
   Make sticky nav less aggressive
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape){
  .nav { position: static; }
  .hero { padding-top: 20px; }
}