/* ============================================================================
   RootPro — fluid typography
   ----------------------------------------------------------------------------
   THE PROBLEM

   The site's root font size is a fixed 16px, and every size in the design
   derives from it. On a 1440px laptop that is correct. On a 2560px monitor the
   same 16px is physically small, the article's reading column (48rem = 768px,
   which the template then splits into ~530px of text plus a 220px contents
   rail) occupies barely a fifth of the screen, and the result reads as tiny text
   marooned in empty space.

   THE FIX

   One lever: scale the root font size with the viewport. Because the design is
   rem-based, this scales the type AND the containers together, in proportion —
   `max-w-3xl` is 48rem, so it widens by exactly the same factor as the text
   inside it. Line length in *characters* stays where the designer put it, which
   is the measure that actually governs readability.

   Widening the column in pixels instead would have pushed past a comfortable
   measure (~60–75 characters) and made it harder to read, not easier.

     <= 1280px   16px   unchanged - every phone, tablet and laptop is untouched
        1600px   17px
        1920px   18px
     >= 2560px   20px   25% larger text, and the reading column grows from
                        ~530px to ~665px because it is measured in rem

   The 16px floor is deliberate: nothing at or below 1280px changes at all, so
   there is no regression risk on the viewports where most traffic sits. The
   ceiling stops it growing absurdly on an ultrawide.
   ========================================================================== */

html {
  /* Pixel fallback for anything that cannot do clamp() with mixed units.
       1280px -> 12 + 4 = 16px
       1920px -> 12 + 6 = 18px
       2560px -> 12 + 8 = 20px                                               */
  font-size: clamp(16px, 12px + 0.3125vw, 20px);

  /* Preferred: the same curve expressed in rem.
     A hard px root font-size overrides the reader's own browser font-size
     setting, which is an accessibility failure. On the root element `rem`
     resolves against the browser default, so this keeps their preference as the
     baseline and scales up from there - someone browsing at 20px keeps 20px
     instead of being clamped back down to 16px. Declared second so it wins
     wherever it is understood. */
  font-size: clamp(1rem, 0.75rem + 0.3125vw, 1.25rem);
}

/* ----------------------------------------------------------------------------
   Long-form measure
   ----------------------------------------------------------------------------
   Article body copy sits a little tighter than the design default at large
   sizes; nudging line-height down as type grows keeps the block from feeling
   airy. Purely proportional, no layout change.
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  article p,
  article li {
    line-height: 1.65;
  }
}

/* ----------------------------------------------------------------------------
   Guard rails
   ----------------------------------------------------------------------------
   A larger root font size makes every rem-based box larger, so anything that
   was already close to overflowing could now clip. These are cheap insurance.
   -------------------------------------------------------------------------- */
/* Deliberately NOT setting overflow-x on html/body here. It looks like cheap
   insurance against a horizontal scrollbar, but any overflow value other than
   `visible` on an ancestor can break `position: sticky` descendants — and the
   article template relies on `sticky top-28` for its contents rail. Constraining
   the few elements that can actually overflow is the safer trade. */
@media (min-width: 1280px) {
  /* Tables and code blocks scroll internally rather than widening the page. */
  article table,
  article pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  /* Long unbroken strings (URLs, IDs) wrap instead of pushing the column out. */
  article p, article li, article h1, article h2, article h3 {
    overflow-wrap: break-word;
  }
}

/* Printed output should use print sizing, not viewport sizing. */
@media print {
  html { font-size: 12pt; }
}