/* Narrow-viewport corrections.

   Several two-column grids carry a fixed minimum on one track, and several
   full-bleed blocks size themselves from 100vw and then recentre with a
   percentage margin plus a translate. Both patterns hold up on a desktop and
   overflow the viewport on a phone, which is where the copy was running out of
   its box. Measured at 390px before this file existed:

     /work/overlook/          755px wide in a 390px viewport
     /work/hotel-figueroa/    549px
     /work/killer-networks/   410px
     /work/oxford/            405px
     /about/, /services/      hero paragraph collapsed to 0px wide

   This file loads after every other stylesheet so these win the cascade
   without raising specificity anywhere else. */

@media (max-width: 900px) {

  /* the agency-* page grids: one track has a 320px or 440px floor, which is
     wider than the whole column on a phone, so the text track collapsed to
     zero and the copy stacked one character per line */
  /* work.css sets several of these behind body[data-page="..."], which outranks
     a bare class. body[data-page] matches the same weight and this file loads
     last, so source order settles it. */
  body[data-page] .agency-hero__copy,
  body[data-page] .agency-section__intro,
  body[data-page] .agency-split,
  body[data-page] .contact-layout,
  body[data-page] .services-hero-note,
  .agency-hero__copy,
  .agency-section__intro,
  .agency-split,
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* homepage row grids. The trailing track has a 280-330px floor, which on a
     tablet leaves the copy column around 177px and a word like "architecture"
     is wider than that, so the paragraph ran outside its box. */
  .service-row,
  .client-slide,
  .home-about-teaser {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-row-copy,
  .service-row-copy p,
  .client-slide-copy,
  .home-about-teaser p {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  /* case-study grids that assume two or three columns */
  .fig-signature-grid,
  .killer-product-grid,
  .killer-poster-grid,
  .overlook-logo-stage,
  .overlook-system-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* full-bleed blocks: drop the 100vw sizing and the recentring transform so
     they simply fill the column they are in */
  .fig-photo-wall,
  .overlook-logo-stage,
  .overlook-system-grid {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }

  .fig-photo-wall {
    grid-template-columns: minmax(0, 1fr);
  }

  .fig-photo-wall > *,
  .killer-product-grid > *,
  .killer-poster-grid > *,
  .overlook-logo-stage > *,
  .overlook-system-grid > *,
  .fig-signature-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto;
    max-width: 100%;
  }

  /* a single long word in a display heading is wider than the column */
  .mw-title-glint,
  .artboard-title-glint {
    overflow-wrap: anywhere;
  }

  .mw-title-glint .split-word,
  .artboard-title-glint .split-word {
    white-space: normal;
    max-width: 100%;
  }

  /* hero art is deliberately oversized for the parallax drift; keep the
     overscan but stop it reaching the page scroll width */
  .mw-hero__media {
    overflow: clip;
  }

  .philosophy-image {
    max-width: 100%;
  }
}

/* ============================================================
   Display text must never paint outside its column
   ============================================================
   The proof bands and result panels size their type from the viewport with
   clamp(), while the column they sit in is a fraction of the container. At
   certain widths the single longest word is simply wider than its cell, and
   because the page clips horizontally the text was cut off mid-word rather
   than pushing out a scrollbar. That is why it was invisible to a page-level
   overflow check. Measured before this block:

     /contact/               "Senior collaboration"   127px over at 1440
                                                      113px over at 1920
     /work/rosenthal/        "+35%"                    71px over at 1920
     /work/rcpga/            "≈15%"                    17px over at 1920
     /work/redtouch-media/   "Rebuilt architecture"     6px over at 1920
     /ai-systems/            ladder step              186px over at 390

   break-word only acts when a word genuinely cannot fit, so ordinary copy is
   untouched. min-width:0 lets a flex or grid child shrink below its content
   width, which is what allows the wrap to happen at all. */

.agency-proof-band strong,
.agency-proof-band em,
.agency-proof-list strong,
.ai-proof-band strong,
.ai-proof-band span,
.ai-ladder span,
.pc-response-grid strong,
.pc-insight-strip strong,
.pc-loop-strip strong,
.pc-creative-board__signal strong,
.about-hero-board__signal strong,
.about-evolution strong,
.copycat-stats strong,
[class*="result-panel"] strong,
[class*="result-field"] strong,
[class*="process-strip"] strong,
[class*="-strip"] strong {
  overflow-wrap: break-word;
  min-width: 0;
}

/* "Senior collaboration" is the longest label in the contact band and did not
   fit its quarter column at 1280 and above. Sized so the word fits as a word
   rather than being hyphenated. */
.agency-proof-band strong {
  font-size: clamp(26px, 2.5vw, 42px);
}

/* the large result numbers, sized so the widest of them clears its panel */
.rosenthal-result-panel__content strong {
  font-size: clamp(56px, 7.5vw, 128px);
}

@media (max-width: 900px) {
  /* sticky section navs: ai-jump is flex-wrap:nowrap, so on a phone its items
     ran straight off the page. A horizontal scroller is the honest fix for a
     nav that genuinely has more items than fit. */
  .ai-jump {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ai-jump::-webkit-scrollbar { display: none; }

  /* The section nav holds eight items, each white-space: nowrap, needing 625px
     in a 352px column. It cannot wrap without breaking the labels, and a
     previous attempt to clip it simply hid four of them. A horizontal scroller
     is the honest answer, and the same pattern the AI page already wanted.
     nav.agency-jump rather than the bare class: something further down work.css
     forces flex-wrap: nowrap and beat a class-only selector. */
  nav.agency-jump {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  nav.agency-jump::-webkit-scrollbar { display: none; }

  /* The hero's command line is deliberately nowrap for the terminal effect.
     overflow-x: auto alone did nothing, because the grid track was pinned to
     the column width, so the scroller had a content width equal to its own and
     nothing to scroll: the text was clipped and genuinely unreachable. Sizing
     the track to max-content gives the scroller something to move. */
  .ai-command-line {
    grid-template-columns: max-content;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ai-command-line::-webkit-scrollbar { display: none; }

  /* grids that still assumed more than one column on a phone */
  .pc-response-grid,
  .ai-ladder,
  .redtouch-process-strip {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   Line-reveal mask was clipping the glyphs it frames
   ============================================================
   .m-line sets line-height .86, so the line box is far shorter than the type.
   Measured on the homepage at 1280px, font-size 102.4px:

     line box   88.06px
     glyph ink  129.00px   (21.0px above the box, 20.0px below it)
     mask       100.35px   (line box + .12em bottom padding, none on top)

   With overflow: hidden that removed 21px from the top of every line and 7.7px
   from the bottom, on both homepage headings, at every width. The padding here
   covers the real ink extent and each value is cancelled by an equal negative
   margin, so nothing in the layout moves.

   The park distance in motion.js moves with it. A line waiting to animate sits
   below the mask, and a taller mask would have let the tops of the next line
   show through, so 118% became 165%: enough that the parked glyphs clear the
   new bottom edge. */
.m-line-mask {
  padding-top: .30em;
  padding-bottom: .26em;
  margin-top: -.30em;
  margin-bottom: -.26em;
}