/* =====================================================================
   TYPE POLISH — the last word on emphasis, weight and rhythm

   type-scale.css fixed the SIZES. This file settles what the audit of the
   rendered page found was still uneven:

   1 · Item titles (a process step, a stack card, a role, a question, a
       Work row) all do the same job but ran at three different weights
       (500 / 600 / 700) and four different trackings (-1% to -3.5%).
       They are one tier now: 500, -2%.
   2 · Weight 700 only ever appeared by accident (a <strong> or <b>
       inheriting the browser default). The scale is 400 reading, 500
       titles and controls, 600 for display and names.
   3 · The gap between a section title and its lead-in ranged from 3px to
       30px depending on the section. One rhythm per breakpoint.
   4 · Quiet text stays quiet: labels and meta are a size or a tone below
       the body, never a heavier weight than the thing they describe.
   ===================================================================== */

/* ---- 1 · Item titles: one tier ---------------------------------------- */
:root body main#top :is(
  #approach .design-process__step h3,
  #stack .stack-card__label,
  #experience .exp__role,
  #faq .accordion__title,
  #work h3
) {
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

/* ---- 2 · No accidental bold ------------------------------------------- */
:root body main#top :is(#work, #services, #approach, #stack, #experience, #faq) :is(strong, b) {
  font-weight: 600;
}

/* ---- 3 · Title -> lead-in rhythm -------------------------------------
   Measured on a phone the gap ran 0 / 10 / 10 / 12 / 14px because each
   section spaced its lead-in with its own flex gap or margin. Each lead-in
   is zeroed and given exactly what brings its section to 14px. */
@media (max-width: 767px) {
  :root body main#top :is(#work, #approach, #stack, #playground, #testimonials, #experience, #faq) h2 {
    margin-bottom: 0;
  }
  :root body main#top :is(.design-process__lede, .exp__head-desc)  { margin-top: 4px !important; }
  :root body main#top .toolkit__lede                              { margin-top: 0 !important; }
  :root body main#top .pg-gallery__summary                        { margin-top: 14px !important; }
}

/* ---- Section lead-ins: one line on desktop and tablet -------------------
   The one-sentence description beside each section title wrapped into a
   column of two or three short lines (the Services line broke after
   "storytelling"). From 768px up each now stays on one line, and its size
   follows the viewport (13px up to about 960px, rising to the full 16px from about
   1190px) so the sentence always fits beside its title. Phones keep their
   stacked layout and normal size. */
@media (min-width: 768px) {
  /* Written with each section's id so it out-ranks the id-level reading-copy
     rules in type-scale.css that would otherwise keep these at 16px. */
  :root body main#top :is(
    #work .sw__support, #services .xp__lede, #approach .design-process__lede,
    #stack .toolkit__lede, #playground .pg-gallery__summary,
    #experience .exp__head-desc, #testimonials .editorial-head > p,
    #education-recognition .section__lede
  )[class] {
    white-space: nowrap !important;
    max-width: none !important;
    width: auto !important;
    font-size: clamp(0.8125rem, 1.35vw, 1rem) !important;
    /* Sits level with the middle of the title beside it, not hanging from
       its top or resting on its bottom edge. */
    align-self: center !important;
    margin-block: 0 !important;
    line-height: 1.2 !important;
  }
}