/* Design tokens for the blog. Every color, size and space blog.css uses comes
   from here, so the no-inline-values lint passes and one change moves every
   page. The ink and the orange stock are the poster's own (../../style.css,
   BRAND.md in Yardstick Standards). Long reading sits on a neutral paper;
   the sky from the home page heads every page, torn off along the bottom, and
   the orange stock carries the pinned bar and the foot, as it carries the
   home page's banner and about panel. */
:root {
  --ink: #1e0907;
  --stock: #eb3c0c;
  --paper: #f5f3ef;
  --ink-soft: rgba(30, 9, 7, 0.66);
  --ink-faint: rgba(30, 9, 7, 0.08);
  --ink-rule: rgba(30, 9, 7, 0.18);
  --band: 6px;
  /* The white core of the paper, showing along the tear. */
  --fiber: #fdfbf6;
  --shade: rgba(30, 9, 7, 0.3);
  --shade-soft: rgba(30, 9, 7, 0.16);
  --shade-faint: rgba(30, 9, 7, 0.09);
  --wash: rgba(255, 255, 255, 0.16);
  --veil: rgba(20, 8, 4, 0.82);

  --font-display: Impact, "Haettenschweiler", "Arial Narrow Bold", "Franklin Gothic Bold", sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* Long reading on the stock: a book face rather than the UI sans. */
  --font-text: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;

  --size-eyebrow: 12px;
  --size-text: clamp(18px, 1.9vw, 20px);
  --size-standfirst: clamp(19px, 2.2vw, 24px);
  --size-title: clamp(38px, 7vw, 84px);
  --size-h2: clamp(22px, 2.7vw, 30px);
  --size-h3: clamp(18px, 2vw, 22px);
  --size-list-title: clamp(26px, 3.6vw, 40px);
  --size-small: 15px;
  --size-index-title: clamp(76px, 17vw, 210px);
  --size-bar-title: clamp(17px, 2vw, 24px);

  --leading-text: 1.62;
  --leading-tight: 0.96;
  --track-eyebrow: 0.34em;
  --track-display: 0.02em;

  --measure: 64ch;
  --sheet: 1060px;
  --gutter: max(20px, 5vw);
  --rule: 2px;
  --rule-thin: 1px;

  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 28px;
  --space-5: 44px;
  --space-6: 72px;
  --space-7: 112px;
  --hero-air: clamp(var(--space-4), 6vw, var(--space-6));

  /* The sky and its tear. --tear-w and --tear-h must match TEAR_W and TEAR_H
     in tools/content/lib/tear.mjs, which draws the tile at that size. */
  --sky: url("/sky.jpg");
  /* Centred, as the home page centres its sky. */
  --sky-focus: 50% 50%;
  --tear-w: 1600px;
  --tear-h: 80px;
  --tear-shadow: drop-shadow(0 1px 0.75px var(--shade)) drop-shadow(0 5px 5px var(--shade-faint));
  --solid: linear-gradient(black, black);
  /* How far the sky lags behind the page as the hero scrolls away. */
  --drift: 22vh;
  --lift: 9vh;

  /* The orange stock, laid on the poster's own grain once blog.js has built
     the mirrored tile; flat stock until then, or without JavaScript. The size
     is the home page's at a 900px-tall window. */
  --paper-size: 500px;
  --bar-h: 58px;
  --bar-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  /* Lighter than the about panel's: this one falls on the reading paper, not the sky. */
  --sheet-shadow: 0 -6px 22px rgba(30, 9, 7, 0.14);
  --ink-line: 30px;
  --ink-line-lead: 38px;

  /* The reading ruler under the pinned bar: a yardstick, read as you go. */
  --ruler-h: 12px;
  --tick: 8px;
  --tick-mid: 40px;
  --tick-major: 80px;
  --tick-h: 4px;
  --tick-mid-h: 7px;
  --tick-major-h: 11px;

  --print-shadow: 0 1px 2px var(--shade-soft), 0 18px 40px -22px var(--shade);
  --print-shadow-lift: 0 2px 4px var(--shade-soft), 0 26px 50px -24px var(--shade);
  --lightbox-shadow: 0 30px 80px -20px var(--shade);

  --thumb-w: 300px;
  --reveal: 180px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --quick: 0.18s;
  --settle: 0.42s;
  /* The home page's about panel dropping off the sky: gathering speed, as a
     sheet does when it falls. */
  --fall: 0.52s;
  --fall-ease: cubic-bezier(0.55, 0, 0.8, 0.2);
}

@media (max-width: 560px) {
  :root { --ink-line: 24px; --ink-line-lead: 30px; }
}