/* ============================================================
   CREATIVES DRINK — QA FIX LAYER (Oct 2026)
   Loads after every page's own styles. Bug, mobile and
   accessibility repairs only. The locked desktop design is
   unchanged; anything visual is scoped to phones or to a
   state that was rendering broken.
   For Squarespace: paste below the design-system CSS.
   ============================================================ */

/* ---------- 1. Rendering bugs (all widths) ---------- */

/* Program cards (collabs): the ".partners" credit line inherited the
   ".partners" SECTION rule (ink panel, 120px padding), producing a
   large black box with invisible text inside every card. */
.prog .body .partners{padding:0;background:none;color:var(--gray-3)}

/* Italic emphasis in light-on-dark lead paragraphs inherited
   `.lead em{color:ink}` and vanished (ink on ink). */
.credits .lead em,
.thet .lead em,
.stock .lead em{color:var(--paper)}

/* Wordmark letters are separate inline-blocks, so a line could break
   mid-word ("CREATIVE / S"). Keep each word on one line. */
.wordmark .line-wrap{white-space:nowrap}

/* Grid/flex children default to min-width:auto, so one long word or a
   form field could hold a single-column track wider than the phone. */
.credits-grid > *,.alt-reach-grid > *,.story-grid > *,.notes-grid > *,
.stock-grid > *,.form-grid > *,.studio-info-grid > *,.thet-grid > *,
.t-block > *,.evt-desc-inner > *,.agency-lead > *,.tagline-sub > *,
.svcpage-grid > *,.foot-grid > *{min-width:0}
.foot-col a{overflow-wrap:anywhere}
.credits-form input{min-width:0}

/* The T map has no data or map library yet; its panels carry [hidden]. */
.tmap-wrap[hidden],.tmap-hint[hidden]{display:none}

/* Fill the visible screen on phones (100vh runs under the browser bar). */
.hero{height:100vh;height:100svh}

/* ---------- 2. Navigation overlay ---------- */
body.menu-open{overflow:hidden}
.cd-menu{overflow-y:auto;overscroll-behavior:contain}
/* Short landscape phones: list taller than the screen was clipped
   top and bottom with no way to scroll to it. */
@media (max-height:560px){
  .cd-menu{justify-content:flex-start;padding-top:24px;padding-bottom:24px}
  .cd-menu-foot{position:static;margin-top:28px}
}

/* In-page jump bar was positioned for the old 40px nav and tucked
   12px under the current 56px bar. */
.pagenav{top:68px}

/* ---------- 3. Keyboard focus ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible{outline:2px solid var(--rec);outline-offset:3px}
.credits-form:focus-within{border-color:var(--rec)}

/* ---------- 4. Phones ---------- */
@media (max-width:820px){
  /* 16px stops iOS Safari zooming the page when a field is tapped. */
  .credits-form input,
  .cd-form input,.cd-form select,.cd-form textarea,
  .stock-form input,.stock-form select,.stock-form textarea,
  .tmap-search input{font-size:16px}
}

@media (max-width:640px){
  /* Footer wordmark had a 90px floor, wider than any phone. It widened
     the whole page to ~480px, pushing the menu button off-screen on
     every page and clipping the word. Scale it to the screen instead. */
  .foot-word{font-size:16.5vw}

  /* Hero wordmark: same floor problem. */
  .wordmark{font-size:15vw}

  /* Chapter cards: three columns squeezed the slate meta into a sliver
     that clipped off the right edge. Number + title stay paired;
     meta drops to its own row. */
  .chapter-inner{grid-template-columns:auto minmax(0,1fr);gap:20px 24px}
  .chapter-meta{grid-column:1 / -1;text-align:left;padding-bottom:0}

  /* Agency thesis: inline 1fr/2fr grid left a ~200px text column. */
  .section-inner > div[style*="grid-template-columns:1fr 2fr"]{grid-template-columns:1fr !important;gap:24px !important}

  /* Long email addresses wrap instead of running off the edge. */
  .studio-facts .fact .v,
  .credits-info b,
  .alt-cell .btn span{overflow-wrap:anywhere}
}

@media (max-width:400px){
  /* "Collaboration" at the 56px floor is wider than a 320-375px screen. */
  .tagline-h{font-size:14vw}
}

@media (max-width:480px){
  /* Agency stat trios: 36px figures overran three narrow columns. */
  .stats-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats-row .n{font-size:min(36px,8vw)}
}

/* ---------- 5. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  .grain{animation:none !important}
  .tagline-h .l span{transform:none !important}
  .reveal{opacity:1 !important;transform:none !important}
}

/* ---------- 6. v5 audit additions (Oct 27 2026) ---------- */
/* Contact studio facts: between ~820px and ~1000px the two-column
   studio grid left the email value wider than its 1fr track and the
   page scrolled sideways (985px wide at 900px). Let the value shrink
   and wrap; no change where it already fit. */
.studio-facts .fact{grid-template-columns:120px minmax(0,1fr)}
.studio-facts .fact .v{overflow-wrap:anywhere}