/* Every value the design is made of.
 *
 * Taken off the source frames (desktop 1280x859, mobile 375x859) rather than
 * invented: 40px insets all round, labels on the side edges, nav on the top
 * edge, the mark 116px dead centre. Repainting the site is this file.
 *
 * The breakpoint is 760px. It appears as a literal in every @media below
 * because a custom property cannot be used in a media query condition — if it
 * moves, it moves in all of them.
 */
:root {
  --page: #fafafa;
  --ink: #161616;

  --inset: 40px;

  /* The name on the first screen, before it comes apart. The type is the same
     size everywhere it appears: the lockup loses letters and travels, it never
     shrinks, so there is one size and no scale anywhere. */
  --wordmark-size: 36px;
  --wordmark-track: 0;
  --wordmark-leading: 1.16;
  /* Between the three lines of the name on the first screen. The boxes are
     trimmed to cap height — 26.1px at 36 — so without a gap the lines sit 26px
     apart and the drawn mark, which is taller than its box, lands on both of
     them. 21 puts 47px between the line tops, which is the rhythm the design
     sets the same three lines in. */
  --wordmark-gap: 21px;
  /* The bar the made lockup sits in, centred on its middle. Everything at the
     top edge is measured from this, not from the edge itself. */
  --wm-bar: 66px;
  --wm-lock-gap: 5px;       /* between K, the mark and R once they are one line */
  /* Where the two letters come to rest when they part: the header's own padding
     in the design, so they sit exactly where its K and R do. */
  --wm-split-inset: 20px;
  /* Cap height as a share of the em for this face — 26.1px at 36px. The design
     builds its glyph boxes out of this number. */
  --cap: 0.725em;

  /* The face at the bottom edge — the way into the menu. */
  --face-size: 56px;
  --face-bottom: 20px;

  /* Between the blocks of a case, and inside a grid block. A hairline in the
     design and a hairline at any width, so it stays a fixed number. */
  --block-gap: 10px;

  /* Between the lines of a three-line block: the name, the mark, the role — and
     the same on a case's opening screen. */
  --line-gap: 10px;

  /* How far the list of names stands off the face below it. */
  --menu-stand: 31px;

  --mark-size: 116px;

  --copy-size: 76px;
  --copy-measure: 824px;
  --copy-gutter: 240px;   /* what the measure gives back to the edges */


  /* The face the design is set in, in the weight it is set in. Book is 450 —
     between Regular and Medium — so it is asked for by number, not by a keyword
     that cannot name it. The whole ramp is declared in styles/fonts.css. */
  --font: "Suisse Intl", ui-sans-serif, system-ui, sans-serif;
  --weight: 450;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 760px) {
  :root {
    --wordmark-size: 22px;
    --wordmark-track: 0;
    --wordmark-gap: 13px;
    --wm-bar: 48px;
    --wm-lock-gap: 4px;
    --wm-split-inset: 16px;

    --menu-stand: 24px;

    --copy-size: 48px;
    --copy-measure: 335px;
    --copy-gutter: 40px;
  }
}

/* Above the narrowest phones the copy takes the size it was drawn at. */
@media (max-width: 760px) and (min-width: 380px) {
  :root {
    --copy-size: 56px;
    --copy-measure: 350px;
  }
}