/**
 * Velour. Every colour, type, space and shape decision in this template, and nowhere else.
 * Custom properties only: no selectors, no rules.
 *
 * Deep wine and warm cream, with gold used sparingly and only ever on the dark side. Velvet
 * rather than paper: where Hartfield is printed and Aurelia is engraved, this one is a room
 * with the lights down. Suits evening weddings, city venues, black tie.
 *
 * The type is the signature. Titles are set in Instrument Serif with the first letter of
 * each word swapped for a Luxurious Script swash cap, which is a nineteenth century
 * engraver's habit and the reason this template looks the way it does. See `.swash` in the
 * primitives region for how that is built and why it is a span rather than a pseudo-element.
 */

:root {
  /* Colour, by role. Every pair below was measured before a line of CSS was written. */
  --surface: #F7E7D3;        /* cream, the light half of the page */
  --surface-alt: #FFFFFF;    /* the form fields, and nothing else */
  --surface-card: var(--surface-alt);  /* what this template calls it */
  --surface-deep: #5E0B1C;   /* wine, the dark half */
  --surface-deeper: #4A0A18; /* the bar, and the fold behind the wine panels */

  --ink: #5E0B1C;            /* 11.25 on cream, 13.63 on white */
  --ink-soft: #6B0F1F;       /* 10.11 and 12.26 */
  --ink-faint: #8C3444;      /* 6.44 and 7.81 */
  --ink-invert: #F7E7D3;     /* 11.25 on wine, 12.86 on the bar */
  --ink-invert-soft: #EBD8C0;/* 9.81 and 11.22 */

  /* Gold, twice, because one value cannot do both jobs. On the wine it is the frame and the
     small icon at 6.48; on the cream the same value reads 1.73 and would fail before it was
     drawn, so anything gold on the light half uses the deep one at 4.86. */
  /* The accent, declared twice. One value cannot both sit on wine and sit on cream, so
     this palette carries a bright gold for the dark half and a deep gold for the light
     half, and the rule is in the comment because nothing else can enforce it. */
  --accent-invert: #D4AF37;  /* 6.48 on wine. Never on cream */
  --accent: #7E600F;         /* 4.86 on cream. Never on wine */
  --accent-ink: #F7E7D3;     /* cream, 4.86 on the deep gold */
  /* What this template calls them, kept so every rule below still reads naturally. */
  --gold: var(--accent-invert);
  --gold-deep: var(--accent);
  --line: #E0C9AC;           /* hairlines on cream */
  --line-deep: #7E2434;      /* hairlines on wine */

  /* The one thing on the page that is wrong, on the reply form and nowhere else. A garnet,
     brighter than the wine the ink is, or a message would read as more of the same sentence.
     6.46 on the cream page, 7.83 on the white fields. */
  --bad: #A31329;

  /* Type. Instrument Serif for everything set large, Instrument Sans underneath it, and
     Luxurious Script for one letter at a time. The two Instruments are a superfamily drawn
     to sit together, which is why the sans is that one rather than a near miss.

     Instrument Serif ships a single weight, so there is no heavier instance to ask for and
     presence has to come from size. Luxurious Script is enormous on the body and tiny on the
     cap height, which is why --swash-scale exists: a swash set at the same font-size as the
     text beside it comes out roughly half as tall as it should be. */
  --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-body: 400;
  --weight-soft: 500;
  --weight-strong: 600;
  --swash-scale: 1.62;       /* how much larger a script cap is set than the word it opens */
  --swash-drop: 0.12em;      /* and how far its baseline sits below the rest of the line */
  /* Luxurious Script's caps carry ink well past their advance width, and all of it above the
     baseline: it lands on the next letter rather than sweeping under it. Measured per glyph,
     the overhang runs from 0.085em on L to 0.506em on V, so no single value clears every
     letter without pushing the widest ones a quarter of a heading apart. This clears L, O and
     Q, and takes the edge off the rest without divorcing the cap from its word. In the
     swash's own em, so it scales with the title. */
  --swash-gap: 0.12em;

  --t-display: clamp(3.4rem, 12vw, 10rem);  /* the names on the cover */
  --t-h2: clamp(2.2rem, 5vw, 4rem);
  --t-h3: clamp(1.3rem, 2.2vw, 1.7rem);
  --t-lede: clamp(0.98rem, 1.1vw, 1.06rem);
  --t-body: 0.98rem;
  --t-small: 0.92rem;
  --t-meta: 0.8rem;
  --track-meta: 0.18em;      /* the letterspaced lines, which are set very wide here */
  --track-display: 0.005em;
  --leading: 1.66;

  /* 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, 9.5vw, 148px);
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 56px;             /* the plate itself */
  --nav-btn-h: 40px;         /* and the button in it, which sets the plate's inner padding */
  --nav-gap: var(--space-3); /* and the air around it */
  --bar-h: calc(var(--nav-h) + var(--nav-gap) * 2);  /* what the bar occupies, all told */

  /* Shape. Square by default. The one recurring move is a corner cut out of a card, which
     is the ticket the invitation and the schedule are both printed on. */
  --r-card: 0px;
  --r-image: 2px;
  --r-input: 4px;
  --r-button: 2px;
  --r-pill: 999px;
  --cut: 26px;               /* the bite taken out of a ticket's corners */
  --rule: 1px;
  --shadow-lift: 0 2px 6px rgb(30 4 10 / .14), 0 24px 60px rgb(30 4 10 / .22);

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

  /* Measure */
  --measure: 44ch;
  --content-width: 1200px;

  /* The wash over photographs, in two depths. Their own tones rather than --surface-deep,
     because a scrim that matches the panel behind it stops reading as a scrim. */
  --scrim-rgb: 40 5 14;
  --scrim-deep-rgb: 30 4 10;
}