/* thisLiquidSpace tokens: every size, gap, line and ink strength comes from one scale with the ratio 1.5.
   The landing page uses these too. Values are the spec's "Gradation rules". */
:root {
  /* paper and ink */
  --paper: #f1e9d4;
  --ink: #2a251e;
  --i0: #2a251e;                                          /* 100%: body, headings, menu, outline, shadow engraving */
  --i1: color-mix(in srgb, var(--ink) 70%, transparent);  /* captions, closing line, compass letters, horizon, ring */
  --i2: color-mix(in srgb, var(--ink) 44%, transparent);  /* sunlit engraving, engraved sea, compass ticks */
  --i3: color-mix(in srgb, var(--ink) 30%, transparent);  /* nothing yet */
  --i4: color-mix(in srgb, var(--ink) 20%, transparent);  /* the 8 main rhumb lines */
  --i5: color-mix(in srgb, var(--ink) 13%, transparent);  /* all other rhumb lines */
  --accent: #a9c8d0;                                      /* the powder blue of water: only ever a wash under ink */
  --water: var(--accent);

  /* type: 1.125rem × 1.5ⁿ */
  --t0: .75rem;
  --t1: 1.125rem;
  --t2: 1.6875rem;
  --head: 6.98rem;          /* the section heading: half-steps, snapping at 64rem and 40rem */
  --leading: 1.6;
  --face-head: Didot, "Bodoni 72", "Bodoni MT", "Playfair Display", Georgia, serif;
  --face-text: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* space */
  --s0: .5rem;
  --s1: .75rem;
  --s2: 1.125rem;
  --s3: 1.6875rem;
  --s4: 2.53rem;
  --s5: 3.8rem;
  --s6: 5.7rem;
  --s7: 8.54rem;

  /* line: fixed screen pixels */
  --rule: 1px;
  --fine: .67px;
  --hair: .44px;
  --focus: 2px;

  /* the page edge, and the room the compass needs beside the text */
  --edge: var(--s5);
  --compass-size: 5.5rem;
  --compass-clear: calc(var(--s2) + var(--compass-size) + var(--s2));
}
@media (max-width: 64rem) { :root { --head: 4.65rem; --edge: var(--s4); } }
@media (max-width: 44rem) { :root { --edge: var(--s2); } }
@media (max-width: 40rem) { :root { --head: 3.1rem; } }