/*
 * Utopia fluid type & space system
 * ---------------------------------
 * Generated by hand from the formulas published at https://utopia.fyi,
 * so this is a drop-in equivalent of what their calculator outputs.
 *
 * Inputs used (Utopia's own default preset — tweak and regenerate at
 * utopia.fyi if you want a different feel):
 *
 *   Viewports:    320px  ->  1240px
 *   Font sizes:   16px   ->  19px      (--step-0)
 *   Type scale:   1.200  ->  1.250     (Minor Third -> Major Third)
 *   Space scale multipliers: 3xs .25, 2xs .5, xs .75, s 1, m 1.5,
 *                             l 2, xl 3, 2xl 4, 3xl 6
 *
 * This file is NOT wired into the site — it's standalone so you can
 * link it wherever you want to try it (a test page, a copy of
 * all-posts.html, browser devtools, etc). Because most of the site's
 * font-sizes currently come from Tachyons utility classes (.f1, .f2,
 * lh-solid, ...) which out-specificity plain element selectors, this
 * sheet alone won't override them on the live pages — it needs to run
 * either without Tachyons, or on markup that isn't using Tachyons'
 * type-sizing classes.
 */

:root {
  /* ---- Fluid type scale --------------------------------------- */
  /* --step-0 is body text; negative steps go smaller, positive go
     bigger. Values are clamp(min, preferred, max) so they scale
     smoothly between the two viewports above, then hold steady. */
  --step--2: clamp(0.6944rem, 0.6716rem + 0.1140vw, 0.76rem);    /* 11.1px -> 12.2px */
  --step--1: clamp(0.8333rem, 0.7928rem + 0.2029vw, 0.95rem);    /* 13.3px -> 15.2px */
  --step-0:  clamp(1rem, 0.9348rem + 0.3261vw, 1.1875rem);       /* 16px   -> 19px   */
  --step-1:  clamp(1.2rem, 1.1011rem + 0.4946vw, 1.4844rem);     /* 19.2px -> 23.8px */
  --step-2:  clamp(1.44rem, 1.2955rem + 0.7226vw, 1.8555rem);    /* 23px   -> 29.7px */
  --step-3:  clamp(1.728rem, 1.5223rem + 1.0284vw, 2.3193rem);   /* 27.6px -> 37.1px */
  --step-4:  clamp(2.0736rem, 1.7864rem + 1.4358vw, 2.8992rem);  /* 33.2px -> 46.4px */
  --step-5:  clamp(2.4883rem, 2.0933rem + 1.975vw, 3.624rem);    /* 39.8px -> 58px   */

  /* ---- Fluid space scale ---------------------------------------
     Same clamp() approach applied to spacing, scaled off the same
     16px/19px base so type and space stay in proportion. */
  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);   /* 4px  -> 5px   */
  --space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);     /* 8px  -> 10px  */
  --space-xs:  clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);    /* 12px -> 14px  */
  --space-s:   clamp(1rem, 0.9348rem + 0.3261vw, 1.1875rem);      /* 16px -> 19px  */
  --space-m:   clamp(1.5rem, 1.413rem + 0.4348vw, 1.75rem);       /* 24px -> 28px  */
  --space-l:   clamp(2rem, 1.8696rem + 0.6522vw, 2.375rem);       /* 32px -> 38px  */
  --space-xl:  clamp(3rem, 2.8043rem + 0.9783vw, 3.5625rem);      /* 48px -> 57px  */
  --space-2xl: clamp(4rem, 3.7391rem + 1.3043vw, 4.75rem);        /* 64px -> 76px  */
  --space-3xl: clamp(6rem, 5.6087rem + 1.9565vw, 7.125rem);       /* 96px -> 114px */

  /* One-up pairs: for transitions that need to grow from one step to
     the next (e.g. a heading's top margin growing faster than body
     spacing as the viewport widens). Standard Utopia convention. */
  --space-s-m:  clamp(1rem, 0.7391rem + 1.3043vw, 1.75rem);   /* 16px -> 28px */
  --space-m-l:  clamp(1.5rem, 1.1957rem + 1.5217vw, 2.375rem); /* 24px -> 38px */
  --space-l-xl: clamp(2rem, 1.4565rem + 2.7174vw, 3.5625rem);  /* 32px -> 57px */
}

/* ---- Document defaults ------------------------------------------ */
body {
  font-size: var(--step-0);
  line-height: 1.6;
}

img {
    width: 100%;
    max-width: 100%;
}

/* ---- Headings -----------------------------------------------------
   Line-height tightens as size increases, per Utopia's convention
   that large display text needs less breathing room than body copy. */
h1 {
  font-size: var(--step-5);
  line-height: 1.05;
  margin-block: var(--space-l-xl) var(--space-s);
}

h2 {
  font-size: var(--step-4);
  line-height: 1.1;
  margin-block: var(--space-m-l) var(--space-2xs);
}

h3 {
  font-size: var(--step-3);
  line-height: 1.15;
  margin-block: var(--space-m) var(--space-2xs);
}

h4 {
  font-size: var(--step-2);
  line-height: 1.2;
  margin-block: var(--space-s-m) var(--space-2xs);
}

h5,
h6 {
  font-size: var(--step-1);
  line-height: 1.25;
  margin-block: var(--space-s) var(--space-2xs);
}

/* ---- Body copy ---------------------------------------------------- */
p {
  font-size: var(--step-0);
  line-height: 1.6;
  margin-block: 0 var(--space-s);
}

small {
  font-size: var(--step--1);
}

blockquote {
  font-size: var(--step-1);
  line-height: 1.5;
  margin-block: var(--space-m);
  margin-inline: 0;
  padding-inline-start: var(--space-m);
  border-inline-start: var(--space-3xs) solid currentColor;
}

code,
pre {
  font-size: var(--step--1);
}

pre {
  padding: var(--space-s);
  line-height: 1.5;
  overflow-x: auto;
}

ul,
ol {
  font-size: var(--step-0);
  line-height: 1.6;
  margin-block: 0 var(--space-s);
  padding-inline-start: var(--space-m);
}

hr {
  margin-block: var(--space-l);
}

a {
  font-size: inherit;
}

/* ---- Flow spacing --------------------------------------------------
   Every Layout / Utopia's "owl" pattern: put class="flow" on a
   container (an <article>, for example) and every direct child gets
   consistent top spacing from the one before it, without needing
   margin rules sprinkled through every element above. Headings still
   get their own bigger lead-in via margin-block-start above; flow
   just handles the general case. */
.flow > * + * {
  margin-block-start: var(--space-m);
}

/* ---- Direct-use utility classes -------------------------------------
   Equivalent to Tachyons' f1..f7, for sprinkling the scale directly
   onto elements when you want a size that doesn't match the semantic
   heading level. */
.text-step--2 { font-size: var(--step--2); }
.text-step--1 { font-size: var(--step--1); }
.text-step-0  { font-size: var(--step-0); }
.text-step-1  { font-size: var(--step-1); }
.text-step-2  { font-size: var(--step-2); }
.text-step-3  { font-size: var(--step-3); }
.text-step-4  { font-size: var(--step-4); }
.text-step-5  { font-size: var(--step-5); }