/* ============================================================
   theme-fluid.css — fluid scaling layer (Birman-style tokens)
   Added 2026-10-13. Loaded AFTER theme.css, BEFORE custom.css.

   Scope: makes the READING experience scale continuously with
   viewport width. UI chrome (nav, forms, buttons, footer,
   breadcrumbs) deliberately stays static — chrome should not
   breathe with the window, content should.

   Everything below is additive: set nothing that theme.css
   doesn't already set, except the two places noted.
   Rollback: remove the addCss line in base.html.twig.
   ============================================================ */

:root {
  /* ---- fluid type ladder ----
   * Each token: clamp(min, slope*vw + offset, max).
   * Floors equal today's exact values, so phones render
   * pixel-identical to the current site; growth starts
   * around ~1100px and caps on wide monitors. */

  /* body copy: 16px -> 18px */
  --f-body:  clamp(1rem,      0.25vw + 0.94rem, 1.125rem);
  /* lead / intro: 18px -> 22px */
  --f-lead:  clamp(1.125rem,  0.35vw + 1.02rem, 1.375rem);
  /* h4: 19px -> 23px */
  --f-h4:    clamp(1.1875rem, 0.4vw  + 1.06rem, 1.4375rem);
  /* h5: 17px -> 20px */
  --f-h5:    clamp(1.0625rem, 0.3vw  + 0.97rem, 1.25rem);
  /* blog card titles: 19px -> 22px */
  --f-card-title: clamp(1.1875rem, 0.3vw + 1.1rem, 1.375rem);
  /* card summary text: 15px -> 17px */
  --f-card-body:  clamp(0.9375rem, 0.2vw + 0.89rem, 1.0625rem);
  /* dates / subtitles / meta: 13px -> 15px */
  --f-meta:  clamp(0.8125rem, 0.15vw + 0.79rem, 0.9375rem);

  /* ---- fluid micro-spacing ----
   * The bricklayer column gutter stepped 12px -> 0 at 720px.
   * This ramps it smoothly instead, starting exactly at the
   * old breakpoint so nothing moves below it. */
  --f-brick-gutter: clamp(0rem, (100vw - 720px) * 0.02, 0.75rem);
}

/* ---------- reading type ---------- */

p,
li {
  font-size: var(--f-body);
}

.lead,
.blog-page-header .blog-page-intro {
  font-size: var(--f-lead);
}

h4 { font-size: var(--f-h4); }
h5 { font-size: var(--f-h5); }

/* blog listing cards */
.card-title :is(h1, h2, h3, h4, h5, h6) {
  font-size: var(--f-card-title);
}
.card-body p {
  font-size: var(--f-card-body);
}
.blog-date,
.card-subtitle {
  font-size: var(--f-meta);
}

/* ---------- smooth the one real spacing step ---------- */
/* theme.css: padding 0 0.75rem, zeroed wholesale at <=720px */

.bricklayer [data-bricklayer-column] {
  padding: 0 var(--f-brick-gutter);
}