/**
 * Hartfield. Every colour, type, space and shape decision in this template, and nowhere
 * else. Custom properties only: no selectors, no rules.
 *
 * The gold is darker than it looks in an English summer. The value the design wanted sat
 * at 4.20:1 on --surface-alt, under the 4.5 floor, and eyebrows are small text. This is
 * the nearest tone that passes on both surfaces.
 */

:root {
  /* Colour, by role. Never name a colour after what it looks like. */
  --surface: #F7F5F0;        /* the page */
  --surface-alt: #EFEBE3;    /* alternating sections, cards */
  --ink: #1A1713;            /* body and headings. 16.39 on --surface */
  --ink-soft: #3E362F;       /* supporting copy. 10.87 and 9.96 */
  --ink-faint: #5C5348;      /* captions, labels, meta. 6.92 and 6.34 on the two surfaces */
  --accent: #755630;         /* eyebrows, actions, small marks. 6.16 and 5.64 */
  --accent-ink: #FFFFFF;     /* text on accent */
  --line: #DED8CD;           /* hairlines */

  /* Inverted, for the RSVP panel and the footer.
     Not in the contract's set, and this template cannot be built without it: two sections
     are dark, and --ink as a background with --surface as text only covers the two extremes.
     The muted greys and the hairline on a dark ground have no role to borrow. */
  --surface-deep: #221E1A;
  --ink-invert: #F7F5F0;
  --ink-invert-soft: #D2CBC0;   /* 10.28 on --surface-deep */
  --ink-invert-faint: #B5AB9C;  /* 7.31 on --surface-deep */
  --line-invert: #3A342D;

  /* The one thing on the page that is wrong. It lives on the reply form and nowhere else,
     and that panel is the inverted one, so this is a light tone: a deep red would be the
     invisible mistake the submit button already made here once. 7.07 on --surface-deep. */
  --bad: #E8938A;

  /* Type.
     Two display faces rather than one. Marcellus sets the mixed-case headings, Marcellus SC
     the capitalised ones, and they are different fonts rather than a text-transform: the
     small-capital forms are drawn, not scaled. --font-display-alt is the second contract
     extension this template needs. */
  --font-display: 'Marcellus', Georgia, serif;
  --font-display-alt: 'Marcellus SC', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;
  --weight-display: 400;     /* Marcellus has one weight. Asking for bold gets a synthetic one. */
  --weight-body: 420;
  /* Supporting copy carries a little more weight than the body it sits under. Jost is
     variable from 300 to 600, so this is a real instance rather than a synthetic bold, and
     it is what stops small grey text looking thin on a bright phone. */
  --weight-soft: 490;
  --t-display: clamp(2.6rem, 8.4vw, 6.6rem);
  --t-h2: clamp(2rem, 4.4vw, 3.4rem);
  --t-h3: 1.45rem;
  --t-lede: clamp(1.06rem, 1.35vw, 1.18rem);
  --t-body: 1rem;
  --t-small: 0.96rem;
  --t-meta: 0.81rem;
  --track-meta: 0.18em;      /* the letterspacing that makes an eyebrow read as a label */
  --track-display: 0.02em;

  /* Space */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --section-y: clamp(80px, 11vw, 156px);
  --gutter: clamp(20px, 5vw, 44px);

  /* Shape. Nothing in this template is rounded: the whole design rests on square corners
     and hairlines, so the radii are zero rather than small. */
  --r-button: 0px; --r-card: 0px; --r-image: 0px; --r-input: 0px;
  --shadow-card: none;

  /* Motion. Timing is a design decision like any other, so the reveals read it from here
     rather than carrying their own numbers. --stagger is read by motion.js. */
  --ease-settle: cubic-bezier(.22, 1, .36, 1);
  --ease-glide: cubic-bezier(.33, 1, .68, 1);
  --dur-reveal: .8s;
  --dur-slow: 1.15s;
  --stagger: 80ms;

  /* Measure */
  /* Tighter than the 1.64 it started at. The page reads denser without the lines touching. */
  --leading: 1.56;

  --measure: 54ch;
  --content-width: 1160px;
  --image-ratio: 3 / 4;
}