/**
 * Como. Every colour, type, space and shape decision in this template, and nowhere else.
 * Custom properties only: no selectors, no rules.
 *
 * Cream paper with peach panels set into it, a black serif over both, and one gold that only
 * ever appears as a small letterspaced label. Warm and stationery-like where Hartfield is
 * printed and Nocturne is lit, which is the third corner of the three.
 *
 * The gold is darker than the design drew it. At the tone in the reference it measured
 * 3.84:1 on the cream and 3.51 on the peach, and it carries small capitals, which are the
 * hardest thing on any page to read. This value clears both surfaces and carries white.
 */

:root {
  /* Colour, by role. */
  --surface: #FDFAF2;        /* the page */
  --surface-alt: #FBEFD8;    /* the peach panels and cards */
  --ink: #16130E;            /* 17.76 on the page, 16.27 on the peach */
  --ink-soft: #3E372E;       /* 11.24 and 10.30 */
  --ink-faint: #5C5347;      /* 7.23 and 6.63 */
  --accent: #82641F;         /* gold. 5.31 and 4.86, and carries white at 5.54 */
  --accent-ink: #FFFFFF;
  --line: #EADFC6;

  /* The one thing on the page that is wrong, on the reply form and nowhere else. A warm
     brick, which is where this palette goes when the gold is pushed towards red.
     6.53 on the page, 5.98 on the peach panel. */
  --bad: #A82F17;

  /* The two full-bleed photographs at either end of the page, which carry their own type. */
  --surface-deep: #100D09;
  --ink-invert: #FDFAF2;       /* 18.58 on --surface-deep */
  --ink-invert-strong: #FFFFFF;/* the cover eyebrow, which sits bare on the photograph */
  --ink-invert-soft: #DED8CC;  /* 13.66 */

  /* Type. Instrument Serif and Instrument Sans are one superfamily, drawn to sit together,
     which is why the sans is that one rather than a near miss. Luxurious Script appears once,
     on the venue name, and is the only decorative face on the page.

     Instrument Serif has a single weight, so --weight-display-strong is the same 400: asking
     for 500 would smear the letterforms rather than draw them. Presence here comes from
     size, which a display serif this open gives cheaply. */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-script: 'Luxurious Script', 'Instrument Serif', cursive;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --weight-display: 400;
  --weight-display-strong: 400;
  --weight-body: 400;
  --weight-soft: 450;
  --t-display: clamp(2.8rem, 8vw, 6.6rem);
  --t-h2: clamp(2rem, 4.4vw, 3.6rem);
  --t-h3: 1.45rem;
  --t-lede: clamp(1rem, 1.2vw, 1.1rem);
  --t-body: 1rem;
  --t-small: 0.94rem;
  --t-meta: 0.82rem;
  --track-meta: 0.02em;
  --track-label: 0.24em;      /* the one letterspaced label, over the venue name */
  --track-display: -0.005em;
  --leading: 1.62;

  /* Space */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --section-y: clamp(84px, 10vw, 150px);
  --gutter: clamp(20px, 4vw, 56px);

  /* Shape. Softly rounded everywhere, which is the middle ground between Hartfield's square
     corners and Nocturne's panels turning whole corners. */
  --r-button: 999px; --r-button-soft: 10px; --r-card: 18px; --r-image: 12px; --r-input: 10px;
  --r-cover: 16px;
  /* The cover photograph sits inside the page rather than bleeding off it, so a margin of
     cream runs all the way round it. Narrow enough on a phone that the picture keeps the
     screen. */
  --cover-inset: clamp(6px, 0.7vw, 11px);
  --shadow-card: 0 1px 2px rgb(22 19 14 / .04), 0 12px 32px rgb(22 19 14 / .06);
  /* The scratch card only. It is the one panel a guest is meant to reach for, so it
     sits further off the page than the panels that only hold text. */
  --shadow-lift: 0 2px 4px rgb(22 19 14 / .09), 0 18px 44px rgb(22 19 14 / .16);

  /* Motion */
  --ease-settle: cubic-bezier(.22, 1, .36, 1);
  --ease-glide: cubic-bezier(.33, 1, .68, 1);
  --dur-reveal: .8s;
  --dur-slow: 1.15s;
  --stagger: 75ms;

  /* Measure */
  --measure: 44ch;
  --content-width: 1200px;
  --image-ratio: 4 / 5;

  /* The wash over photographs. Deliberately its own tone rather than --ink, which is
     warmer and lighter than a scrim wants to be. Channel triplets so one value serves
     every opacity the page uses. */
  --scrim-rgb: 16 13 9;
  --on-photo-rgb: 255 255 255;
  --surface-rgb: 253 250 242;  /* --surface, for the frosted panels */
}