/* ==========================================================================
   refine.css — mobile calm
   ==========================================================================
   Loaded after the design bundle so it can override the inline styles the
   design tool emits. Three problems, all of which only really bite on a
   phone:

   1. TEXTURE SCALE. The speckle tiles at 88/132/108/152/68/96px. On a 430px
      phone the 152px layer is over a third of the screen width, so what
      reads as fine grain on a desktop reads as large blotches on a phone —
      and at .15-.17 alpha they compete with the text sitting on top.

   2. TYPOGRAPHY DRIFT. Section eyebrows use mono at .14-.16em tracking,
      uppercase. Next to Archivo headings that is three type treatments in
      one screen. It looks like a technical report because that is exactly
      the convention it borrows.

   3. DENSITY. Small print stacked under every figure adds words without
      adding persuasion.

   The desktop composition is deliberate and stays as-is. This only
   intervenes below 720px.
   ========================================================================== */

@media (max-width: 720px) {

  /* ---- 1. texture: smaller grain, a quarter of the contrast ------------- */
  /* Targeting by inline style because the bundle emits these as element
     styles with no class to hook. Replacing the whole image list rather
     than just background-size — shrinking the tiles alone makes the
     speckle denser, not quieter. */
  [style*="radial-gradient(circle"] {
    background-image:
      radial-gradient(circle at 28% 38%, rgba(0,0,0,.040) 0 1px, transparent 1.6px),
      radial-gradient(circle at 72% 76%, rgba(0,0,0,.030) 0 1px, transparent 1.6px) !important;
    background-size: 26px 26px, 37px 37px !important;
  }

  /* On the dark and clay sections the speckle is white; keep it lighter
     still, since light-on-dark reads hotter than dark-on-light.

     NOTE the selector spacing. The browser normalises inline styles to
     "rgba(255, 255, 255, 0.055)" — with spaces and a leading zero. Matching
     the author's ".055" form silently hits nothing, which is exactly what
     the first version of this file did. */
  [style*="radial-gradient"][style*="255, 255, 255"] {
    background-image:
      radial-gradient(circle at 30% 42%, rgba(255,255,255,.030) 0 1px, transparent 1.6px),
      radial-gradient(circle at 70% 74%, rgba(255,255,255,.022) 0 1px, transparent 1.6px) !important;
    background-size: 28px 28px, 40px 40px !important;
  }

  /* ---- 2. one voice for labels ----------------------------------------- */
  /* Targeted by "mono + uppercase" rather than by tracking value. That pair
     IS the engineering-report convention — a monospaced, letter-spaced,
     all-caps label above a heading is how a spec sheet announces a section.
     It's also stable: the tracking values vary per element (0.09em, 0.14em,
     0.34em) and differ between source and runtime, so matching on them is
     brittle. Matching on the treatment is not.

     Result: a section label becomes a smaller sibling of the heading under
     it instead of a second typographic system competing with it. */
  /* The 0.34em exclusion is the wordmark. "LEVELING" under "RED DIRT" is
     mono, uppercase and widely tracked — it matches this selector exactly,
     and restyling it would quietly redraw the logo. Its tracking is far
     wider than any section label, which makes it a reliable thing to
     exclude on. */
  [style*="IBM Plex Mono"][style*="uppercase"]:not([style*="0.34em"]) {
    font-family: Archivo, "Helvetica Neue", sans-serif !important;
    letter-spacing: .07em !important;
    font-weight: 700 !important;
    opacity: .82;
  }

  /* Numbers stay mono — deliberately exempt above, because they are never
     uppercase-transformed. A price or a measurement set in a proportional
     face loses its tabular alignment, and the data is the proof: it should
     still look measured. */
  .num, .stat, .card-price, [class*="price"], [class*="stat"] {
    font-family: "IBM Plex Mono", ui-monospace, monospace !important;
    letter-spacing: 0 !important;
  }

  /* ---- 3. quieter small print ------------------------------------------ */
  figcaption,
  [style*="font-size:12px"],
  [style*="font-size:12.5px"],
  [style*="font-size: 12px"] {
    color: #8A909C !important;
    line-height: 1.5 !important;
  }

  /* ---- breathing room --------------------------------------------------- */
  /* Tighter headline leading and a bit more space between blocks: the
     complaint was "a lot of words", and most of that feeling is rhythm
     rather than count. */
  h1 { line-height: 1.06 !important; letter-spacing: -.025em !important; }
  h2 { line-height: 1.12 !important; }
  h1, h2 { text-wrap: balance; }
}

/* Very small phones: the largest speckle layer disappears entirely. */
@media (max-width: 400px) {
  [style*="radial-gradient(circle"] {
    background-size: 22px 22px, 31px 31px !important;
  }
}

/* Respect the OS setting — a texture is decoration, and some people find
   fine repeating patterns genuinely unpleasant. */
@media (prefers-reduced-motion: reduce) {
  [style*="radial-gradient(circle"] { background-image: none !important; }
}