/* Clybourn Creative Group: tokens. Three tones of near-black, bone type, and one accent.
 * The accent is brass, flat, the engraving-plate material behind the logo: it marks the action and the engraved marks.
 * Sections are told apart by a step in tone, never by a line. Photography carries the colour.
 * One typeface, Jost, at seven sizes from the Instagram figure to the captions.
 */
:root {
  color-scheme: dark;

  /* surfaces */
  --ground:     #100f0d;   /* the whole page: near-black */
  --ground-2:   #0b0a09;   /* deeper bands: hero, contact, footer */
  --ground-3:   #191714;   /* one step up: alternate sections, cards, the bar once it follows */

  /* text */
  --ink:        #edece9;   /* headings, emphasis: bone, not cream */
  --ink-2:      #d0ccc5;   /* running text */
  --muted:      #a39e96;   /* captions and notes */

  /* brass */
  --brass:      #a8864f;   /* the plate */
  --brass-ink:  #d6b680;   /* small brass type over dark ground and photographs */
  --engrave:    #2a2116;   /* letters cut into the plate */

  /* buttons */
  --btn:        #ebeae6;

  /* the press clippings: paper, its ink, and a highlighter */
  --paper:       #f1f0ed;
  --paper-ink:   #1b1a17;
  --paper-muted: #66625b;
  --marker:      #efcd62;
  --btn-ink:    #1a1714;
  --btn-hover:  #ffffff;


  /* type */
  --serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;   /* the press clippings only: the articles' own voice */
  --sans:  "Jost", "Futura", "Avenir Next", "Century Gothic", system-ui, sans-serif;
  /* six sizes, far apart: 92 / 60 / 36 / 24 / 19 / 15px on a laptop */
  --t-head:      clamp(2.75rem, 6.4vw, 6rem);     /* the hero line and the two big figures (600,000+ and the Instagram reach) */
  --t-chapter:   clamp(2.25rem, 4.2vw, 4rem);     /* section titles and the three company chapters */
  --t-statement: clamp(1.5rem, 2.5vw, 2.25rem);   /* statements, fields, figures in a row */
  --t-name:      1.5rem;                          /* names, quotations, sub-heads */
  --t-body:      clamp(1.0625rem, 1.3vw, 1.25rem);/* running text */
  --t-small:     0.9375rem;                       /* captions, links, buttons, credits */

  /* space and motion */
  --gutter:  clamp(1rem, 4vw, 3.5rem);
  --wrap:    84rem;
  --section: clamp(4.5rem, 9vw, 8rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);     /* strong ease-out: hovers, presses, reveals */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* things that move on screen */
}

/* A phone gets its own scale, not the laptop's shrunk: the title, the section heads and the Instagram reach are set
 * to the width of the screen, so the jump from text to headline is as big in a hand as it is on a desk. */
@media (max-width: 47.99rem) {
  :root {
    --t-head:    17vw;   /* section titles, the hero line and the two big figures, edge to edge */
    --section:   5.5rem;
  }
}