/**
 * MADDev Bootstrap — responsive token DEFINITIONS.
 *
 * House rule (theme-css.md, Rudi 2026-07-22): everything that changes at a
 * viewport breakpoint is a CSS custom property. All variable definitions live
 * here; the ONLY viewport @media queries live in css/media-queries.css and
 * contain nothing but :root token redefinitions.
 *
 * Introduced 2026-08-24 while fixing B-201; the conversion FINISHED here on
 * 2026-09-10. style.css, project.css and admin-tab.css now contain zero
 * viewport @media blocks — the twelve that remained were wired to these
 * tokens, and eight ad-hoc breakpoints (640/680/720/768/820/899/900/920)
 * collapsed onto the two house tiers. Do NOT add a new viewport @media
 * anywhere but media-queries.css; add a token here instead.
 *
 * A token defined here with no `var()` consumer is a bug, not a spare part:
 * that state is exactly what let this file sit inert for two weeks while the
 * old @media blocks quietly drove the layout.
 *
 * Colour tokens stay in css/colors.css. Nothing here defines a colour.
 */
:root {

  /* ── Stats band (key_value, display_style=stats) ──────────────────
     Stat cell basis. Gap is 24px, so for N across the basis is
     calc(100%/N - (N-1)/N * 24px). Claude A cut the band from four stats to
     three on 2026-08-24, so the wide tier is 3-up; a 4th stat would wrap to a
     capped, left-aligned cell rather than stretching across the row (house
     card-wall recipe). If the stat count changes again, retune here only. */
  --resp-stats-basis: calc(50% - 0.75rem);   /* phones + small tablets: 2-up */
  /* NOTE: the 3-up wide tier this file was ported with belongs to stage,
     which cut its stats band to three. Both of www's bands hold FOUR, so the
     wide tier is 4-up here — 3-up wraps the fourth stat onto its own row. */

  /* ── Hero vertical rhythm ─────────────────────────────────────────
     The hero has to get its call to action above the fold on a real
     phone, not just on a desktop. Measured on a 375x812 viewport, the
     desktop rhythm pushed the CTA to 891px — 79px below the fold — so
     these three are tightened at the base tier and relax from 48rem up.
     Mobile-first: the base values ARE the phone values. */
  --resp-hero-center-gap: 1.25rem;   /* eyebrow / wordmark / tagline / CTA */
  --resp-hero-center-pt:   0;

  /* --resp-hero-meta-mb and --resp-hero-meta-dim used to live here. They
     described the hero paragraph's own meta strip, which no longer exists:
     it became the site-wide Meta bar block on 2026-09-10. Removed rather
     than repointed at .meta-bar — hiding half that strip on phones is a
     design decision about a different element, not a port. */

  /* ── Hero wordmark ────────────────────────────────────────────────
     B-203 scales the complete composition at the phone tier, not just
     its dominant MADD fragment. The factor is 56 / 76 = 0.737: each
     font clamp and the spacing inside .hero-mark is approximately 74%
     of the established brand size. The >=48rem tier restores every
     original value exactly. */
  --resp-hero-mark-gap:       0.36875rem;
  --resp-hero-mark-madd-size: clamp(3.5rem, 11.8vw, 10.625rem);
  --resp-hero-mark-the-size:  clamp(1.65625rem, 5.3vw, 5.0625rem);
  --resp-hero-mark-the-mr:    clamp(0.09375rem, 0.37vw, 0.36875rem);
  --resp-hero-mark-stack-gap: clamp(0.275rem, 0.74vw, 0.64375rem);
  --resp-hero-mark-stack-pt:  clamp(0rem, 0.22vw, 0.23125rem);
  --resp-hero-mark-big-size:  clamp(1.38125rem, 4.72vw, 4.2375rem);
  --resp-hero-mark-of-size:   clamp(1.2rem, 3.24vw, 2.7625rem);

  /* ── Navbar brand + logo ──────────────────────────────────────────
     The header is fixed-size at every width — it consumes none of the
     --resp-hero-mark-* tokens, which drive the big wordmark in the PAGE BODY
     only (style.css .hero-mark__*). So the header has always been laid out for
     a desktop and asked to fit a phone: at 320px the site gutter leaves ~288px
     of container for a brand measured at 254px plus a 52px toggler. B-203
     recorded exactly that overflow producing a 121px two-row header; dropping
     the base gutter to 1rem bought 8px, which is not margin.

     Base is the SAME 0.737 factor B-203 established for the hero mark, so the
     header shrinks by a ratio already accepted for this brand rather than an
     invented one. Every value returns exactly at 48rem, so no width >=768px
     changes at all. */
  --resp-brand-madd-size:  1.5625rem;    /* 34 x 0.737 */
  --resp-brand-big-size:    0.5625rem;    /* 12 x 0.737 */
  --resp-brand-of-size:   0.46875rem;    /* 10 x 0.737 */
  --resp-brand-strap-size:  0.3125rem;    /* 6.5 x 0.737 */
  --resp-logo-height:      2rem;    /* 44 x 0.737 */

  /* ── Section rhythm, blueprint chrome and footer columns ───────────
     These three replace the legacy `max-width: 768px` / `min-width: 769px`
     pair that used to govern them. That pair left 768.01-768.99 belonging to
     NEITHER rule, and applied both at exactly 768px (mobile padding with
     desktop gutters). A single `min-width: 48rem` boundary is total by
     construction, so the gap cannot exist. */
  --resp-section-v: var(--mad-section-v-tight);
  --resp-blueprint-display: none;   /* decorative pseudo-elements off on phones */
  --resp-admin-tab-display: none;   /* the left-edge admin rail (admin-tab.css) */
  --resp-footer-row-dir: column;
  --resp-footer-row-gap: 2rem;
  /* No token for the first column: Bootstrap's .col is flex: 1 0 0%, so it
     already absorbs whatever the pinned menu columns leave. */
  --resp-footer-col-rest: 100%;
  /* Footer menus sit left while the columns are stacked full-width. */
  --resp-footer-menu-align: flex-start;
  --resp-footer-menu-text: left;

  /* ── Hero wordmark stacking ───────────────────────────────────────
     Below the tablet tier the three parts of the wordmark sit in a column
     and centre themselves; from 48rem up they form the horizontal lock-up.
     Was a `max-width: 680px` block in style.css. */
  --resp-hero-mark-dir:         column;
  --resp-hero-mark-align:       center;
  --resp-hero-mark-stack-align: center;
  --resp-hero-mark-stack-text:  center;

  /* ── Hero gecko motif ─────────────────────────────────────────────
     The watermark behind the hero is sized against the viewport on phones
     and against the content shell from the tablet tier up, where it also
     comes back to full strength. Was a `max-width: 820px` block. */
  --resp-hero-motif-right:   -12%;
  --resp-hero-motif-size:    80vw;
  --resp-hero-motif-opacity: 0.08;

  /* ── Three-up card rows ───────────────────────────────────────────
     Content bands and the capabilities view share one shape: a single
     column until there is room for three across. Both were separate
     `max-width: 899px` blocks. */
  --resp-tri-basis: 100%;

  /* ── Intro grid / section head / work + method rows ───────────────
     Each of these is one flex row that stacks on small screens and lines
     up on large ones. The tokens carry whole `flex` shorthands because
     what changes is the whole shorthand, not just a basis: below the tier
     these children had no rule at all, so the default 0 1 auto IS the
     phone value and must be stated to be preserved.

     Sources: `min-width: 920px`, `900px` and two at `820px`. */
  --resp-intro-wrap:      wrap;
  --resp-intro-gap:       2rem;
  --resp-intro-side-flex: 0 1 auto;
  --resp-intro-body-flex: 0 1 auto;

  --resp-section-head-wrap:     wrap;
  --resp-section-head-gap:      1.125rem;
  --resp-section-head-col-flex: 0 1 auto;

  --resp-work-row-wrap:       wrap;
  --resp-work-row-gap:        0.875rem;
  --resp-work-row-meta-flex:  0 1 auto;
  --resp-work-row-body-flex:  0 1 auto;
  --resp-work-row-arrow-flex: 0 1 auto;

  --resp-method-row-wrap:       wrap;
  --resp-method-row-gap:        0.75rem;
  --resp-method-row-idx-flex:   0 1 auto;
  --resp-method-row-label-flex: 0 1 auto;
  --resp-method-row-body-flex:  0 1 auto;
  --resp-method-row-arrow-flex: 0 1 auto;

  /* ── Founder project logos (/about/track-record) ──────────────────
     Width of the right-hand logo column in a founder_project teaser, and the
     gap that keeps the other fields clear of it (style.css). Phones get a
     narrow column so the text keeps most of the row; from 48rem up the logos
     have room to read. */
  --resp-founder-logo-w:   4.5rem;
  --resp-founder-logo-gap: 1rem;

  /* ── Site gutter ──────────────────────────────────────────────────
     The shared left/right inset for .container, .site-margins and
     .content-margins. It used to be a single `clamp(40px, 8vw, 112px)`
     in style.css with no responsive tier, which put a 40px floor on a
     360px phone — 22% of the screen given to empty margin, and against
     the documented standard (theme-css.md: below 768px the gutter is
     `0 1rem`). It also had a concrete cost: the navbar brand (254px) plus
     the menu toggler (52px) could not fit in the 280px left over, so the
     toggler wrapped to a second row and the mobile header stood 121px
     tall on every page.

     Mobile-first: 1rem at the base tier, widening from 48rem up to the
     generous borders the desktop design wants (F-029). */
  --mad-gutter: 1rem;
}