/* Colors and measures come from the site's Figma file, Carrara Website 2.0, node 169-424.
   The grain comes from the annual letter, Carrara Identity/Letters To Partners/idea-4. */

:root {
  /* Brand palette. Lemon and sage are the two card papers and are not in the brand
     file yet. */
  --white: #ffffff;
  --marmol: #edebea;
  --grafite: #2d2a2a;
  --ardesia: #59534f;
  --ardesia-dark: #615b52;
  --nuvola: #9a938e;
  --ember: #eb4e19;
  --cielo: #b2cded;
  --lemon: #ffff7d;
  --sage: #a4c69b;

  --mat: 16px;

  /* The logotype is seven letters of 162, 198, 96, 96, 198, 96 and 198 with 9 between
     them: 1098, or 5.5454 blocks. Those are the drawing's own measures — the r is 96
     wide, not 102, or its block stands wider than the letter it holds. The row scales
     as one, inside the mat and the footer's own margin — four mats in all. */
  --block: min(198px, (100vw - 4 * var(--mat)) / 5.5454545);
  --block-gap: calc(var(--block) * 9 / 198);

  --sans: Manrope, system-ui, sans-serif;
  --serif: Portrait, Georgia, serif;
  --mono: "Courier Prime", ui-monospace, monospace;   /* only the letter's index numbers */

  --text: 18px;
  --text-leading: 27px;
  --small: 14px;
  --small-leading: 21px;

  --measure: 768px;
  --statement: clamp(32px, 26.06px + 1.524vw, 48px);   /* 32 at 390, 48 at 1440 */
  --lede-gap: 24px;
  --gap-xxxl: 160px;
  --band-gap: var(--mat);       /* the band to the lines under it */

  /* The band's letters. Read off the live site, where a letter arrives within a single
     frame and leaving is what gives the band its hand: it holds its colour, then goes
     out. 90 is short enough that the arrival does not read as a transition, and long
     enough that a hand crossing the word still paints every letter whole.

     The hold is the one number worth doubting: it was read off a tab the browser was
     throttling, which stretches whatever it measures. The run that was not throttled
     puts it near 500, and 500 is what reads as the same band. */
  --cell-in: 90ms;
  --cell-hold: 500ms;
  --cell-fade: 700ms;

  /* Letter */
  --letter-measure: 650px;
  --letter-side: clamp(200px, calc((100vw - 2 * (var(--mat) + var(--letter-pad-x)) - var(--letter-measure) - 120px) / 2), 264px);
  --letter-max: 1440px;
  --page-pad-y: 120px;            /* the margin both pages keep, top and bottom */
  --letter-pad-x: 40px;
  --letter-text: 16px;
  --letter-leading: 24px;
  --heading: 28px;
  --heading-leading: 1.2;
  --pullquote-measure: 476px;   /* narrower than the column, as the annual letter sets it */
  --cover-height: 104px;
  --section-gap: 24px;
  --figure-gap: 80px;           /* the air the annual letter leaves around a figure */
  --letter-foot: 80px;          /* end of the letter to the band on a phone; desktop has its own 120 */

  /* Cards */
  --card: 600px;
  --card-margin: 56px;
  --card-pad: 40px;
  --card-pad-sm: 32px;
  --card-text: clamp(34px, 31.89px + 0.5634vw, 40px);
  --headshot: 131px;
  --cursor-size: 42px;

  /* Not found. Read off carrara.is/404 at 1440. */
  --not-found-art: 398px;
  --not-found-heading: 40px;
  --not-found-gap: 40px;
  --not-found-line-gap: 10px;

  /* Grain. One pixel across and two down, cut in two by a steep transfer, over a flat
     ink. Names match the design system. */
  --grain-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.45' numOctaves='1' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='200' intercept='-127'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-ink: #eb4e19;
  --grain-bite: 0.049;
}

/* On a phone the wordmark is the largest thing on the page, and the line under it needs
   more room than it does on a wide window. The home reads this to work out where its
   first screen ends, so the two can never fall out of step. */
@media (max-width: 899px) {
  :root { --band-gap: calc(var(--mat) * 2); }
}