/* ============================================================
   Wells DevOps — small-width wording fixes
   Measured on the live site, 14 Sept 2026, at widths
   320 / 360 / 375 / 414 / 480 / 560 / 768 / 900.

   Uses the existing 560 / 900 breakpoints and the existing
   clamp() idiom. The calc() offsets exist because each
   container is (100vw - a fixed px gutter), so a pure vw
   font-size can never fit at the small end.

   NOT YET VERIFIED IN A BROWSER. The fits below are arithmetic
   from measured glyph ratios, not measurements of the result.
   Verify each at 320/360/375/414/480/560 before shipping.
   ============================================================ */

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

  /* A long heading word must not be able to inflate the single
     grid column and drag .home-contact-card out of the clip box.
     Measured: column resolved to 339.1px inside a 259.2px box at 320. */
  .home-contact { grid-template-columns: minmax(0, 1fr); }
}

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

  /* 1. /work — "SELECTED" was sliced mid-letter, 17.6-35.3px cut
        at 320-560. Container = 100vw - 52.8px; the glyph run
        measures 4.961 x font-size, so 20vw can never fit. */
  .interior-hero h1 { font-size: clamp(3rem, calc(20vw - 11px), 6.8rem); }

  /* 2. home — "CONTACT" overhung its column by 17.7-50.5px and
        pushed the contact card up to 30.5px off the right edge.
        Container = 100vw - 60.8px; glyph = 4.456 x font-size. */
  .home-contact-title-wrap h2 { font-size: clamp(3rem, calc(22vw - 13px), 7rem); }

  /* 3. /contact — "DOMINICK" crossed the card border at 320 and
        had 0.14px of slack at 375. The 3.1rem floor was itself
        too large. Container = 100vw - 110.8px; glyph = 4.685. */
  .contact-title-card h1 { font-size: clamp(2.6rem, calc(15vw - 4px), 5.2rem); }

  /* 4. /studio — "CONTACT ↗" sat 2.1px past the viewport at 320. */
  .interior-next-link { font-size: clamp(2.6rem, calc(18vw - 10px), 6rem); }

  /* 5. /studio — headline had 1.0px of clearance at 320. The
        2.8rem clamp floor was the binding term, not the vw term. */
  .studio-hero h1 { font-size: clamp(2.6rem, 13vw, 4.8rem); }

  /* 6. header — the wordmark wrapped to two lines at <=~345px and
        its right edge met the first nav link at a 0.0px gap. */
  .site-header { gap: .6rem; }
  .wordmark { white-space: nowrap; letter-spacing: .09em; }
  .primary-nav { gap: .5rem; }
  .primary-nav a { letter-spacing: .04em; }

  /* 7. hero tagline stranded "WELLS" alone on line 2 at 360 and 375. */
  .hero-caption p { text-wrap: balance; }

  /* 8. /studio statement stranded "Wells." alone on line 4 at 320. */
  .statement-copy { text-wrap: balance; }

  /* 9. /work project titles broke to one word per line at 320
        ("Best" / "Origin" / "Foods"). */
  .work-row h2 { font-size: clamp(1.8rem, 9vw, 3.2rem); }

}

/* ---------------- <= 380px ---------------- */
/* 10. chip plate sat 14.5px from the viewport edge at 320, inside the 16px
       gutter, and 4.1px from the hero's inner right border. Scoped to 380
       rather than 560: the gutter is only breached below ~360, and at 560 the
       old rule moved the plate 21.5px left where nothing was wrong. */
@media (max-width: 380px) {
  .processor-plate { left: 71%; }
}

/* ---------------- 521px - 1050px ---------------- */
/* Project URLs were truncated mid-string: wellsdevops.ca/workflow-lens
   lost 153px, 64% of the string. The label span is nowrap + ellipsis
   inside a box far too narrow for it.

   WARNING: the real selector is a hashed CSS-module name
   (._artifactLabel_f16a7_293) that changes on every build. It is
   stable only because the live site is served as static assets and
   is not currently being rebuilt. If the site is ever rebuilt from
   source, fix this in PortfolioController's own .module.css instead
   and delete this block. */
@media (min-width: 521px) and (max-width: 1050px) {

  [class*="_artifactLabel_"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .2rem;
    min-height: auto;
    padding: .55rem 1rem;
  }
  [class*="_artifactLabel_"] span:last-child {
    white-space: normal;
    /* A URL contains no spaces, so `normal` alone can never wrap it: Chrome
       does not break at "/" or ".". Without this the string leaves the label
       box entirely and is cut by an ancestor with no ellipsis to signal it.
       Verified 15 Sept: closes the last 27-29px of loss at 768. */
    overflow-wrap: anywhere;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ---------------- not cramping, but broken small ---------------- */

/* .scroll-progress computed to 331px wide in a 320px viewport
   (position:fixed with left:0;right:0), so the progress bar's
   proportion is wrong by 3-4%. */
.scroll-progress { width: 100vw; max-width: 100%; }

/* ---------------- 18 Sept: four-item primary nav ---------------- */

/* Adding DOMAINS to the primary nav pushed CONTACT 42px past the header's
   right edge at 320 and gave the document a 351px scroll width. Tightening the
   wordmark and the nav together keeps all four items on one line at 320
   without hiding any of them. Measured at 320 / 360 / 375. */
@media (max-width: 560px) {
  .site-header { padding-left: .85rem; padding-right: .85rem; }
  .wordmark { font-size: .74rem; letter-spacing: .06em; }
  .primary-nav { gap: .5rem; }
  .primary-nav a { font-size: .58rem; letter-spacing: .02em; }
}

@media (max-width: 400px) {
  .wordmark { font-size: .66rem; letter-spacing: .03em; }
  .primary-nav { gap: .38rem; }
  .primary-nav a { font-size: .53rem; letter-spacing: .01em; }
}