/**
 * Laurel. Every colour, type, space and shape decision in this template, and nowhere else.
 * Custom properties only: no selectors, no rules.
 *
 * Blush paper, laurel green and gold leaf. Where Sorrel is editorial and Hartfield is
 * printed, Laurel is stationery: a wax seal on everything, paper torn along its edge rather
 * than cut, and photographs held in the page the way prints are held in an album, tilted
 * and overlapping. The green is a control colour and almost nothing else, so a page of soft
 * paper has exactly one hard object on it at a time.
 *
 * Four faces, each with one job. Aboreto sets the section headings, wide and open and only
 * ever used large. Instrument Serif carries the names on the cover and signs the last
 * screen, and its italic is the closest thing here to a hand. Lustria is the reading serif,
 * for the statement and the ledes. Manrope is the sans underneath all of it: labels,
 * buttons, notes and the reply form, where a serif at 0.82rem would be a fog.
 */

:root {
  /* Colour, by role. Every pair below was measured with packages/gate/color.js before a
     line of CSS was written, against 4.5 for text and 3 for a control's own boundary. */
  --surface: #F6F0EC;        /* blush paper, the page */
  --surface-alt: #EFE7E1;    /* the panels set into it */
  --surface-card: #FFFFFF;   /* prints, and the cards over photographs */
  --surface-deep: #4F5F45;   /* laurel green, the buttons and the one dark bar */

  --ink: #2B2A26;            /* 12.72 on paper, 14.36 on white, 11.76 on the panel */
  --ink-soft: #55534C;       /* 6.82, 7.70, 6.30 */
  --ink-faint: #6A6760;      /* 5.00, 5.64, 4.62. The floor, and it does not move */
  --ink-invert: #F6F0EC;     /* 6.09 on green */

  --accent: #4F5F45;
  --accent-ink: #F6F0EC;     /* 6.09, and the same figure is the button's edge on paper */

  /* Two golds, and the difference between them is the whole rule. The dark one is a text
     colour and clears 4.5 on all three surfaces. The bright one is leaf: it is the fill of a
     wax seal and the stroke of an ornament, it reads 2.08 against the paper, and nothing is
     ever set in it. */
  --gold-ink: #846226;       /* 4.95 on paper, 5.59 on white, 4.58 on the panel */
  --gold: #C9A45C;
  --gold-deep: #8E6B2C;      /* the shadow side of a seal, decorative */
  --gold-shine: #F2E1B4;     /* the band that crosses a label, decorative and brief */

  --line: #E3D9D2;           /* hairlines on paper. Decorative, never carrying text */
  --line-deep: #7E8C73;      /* a hairline on the green */

  /* The one thing on the page that is wrong, on the reply form and nowhere else. A brick red
     kept muted, so it sits with the laurel and the gold rather than shouting over them.
     6.72 on the paper card, 5.95 on the fields. */
  --bad: #9E3B33;
  --scrim: rgb(30 28 24 / .48);      /* over a photograph, under cream type */
  --scrim-deep: rgb(30 28 24 / .72);

  /* Type */
  --font-display: 'Aboreto', Georgia, serif;      /* section headings, and nothing small */
  --font-title: 'Instrument Serif', Georgia, serif;/* the names, and the signature */
  --font-serif: 'Lustria', Georgia, serif;         /* the statement and the ledes */
  --font-body: 'Manrope', system-ui, sans-serif;
  --weight-display: 400;     /* three of the four faces have one weight, which is the point */
  --weight-body: 400;
  --weight-soft: 500;
  --weight-strong: 600;

  --t-display: clamp(2.9rem, 11.2vw, 10rem); /* the names, nearly the width of the page */
  --t-script: clamp(3.2rem, 9vw, 7rem);     /* the signature at the end */
  --t-h2: clamp(1.9rem, 4vw, 3.1rem);
  --t-h3: clamp(1.2rem, 1.8vw, 1.45rem);
  --t-lede: clamp(1.08rem, 1.5vw, 1.35rem);
  --t-body: 1rem;
  --t-small: 0.94rem;
  --t-meta: 0.82rem;
  --track-display: -0.01em;
  --track-meta: 0.14em;       /* the gold labels, which are small and need the air */
  --leading: 1.7;
  --leading-display: 1.12;

  /* Space */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 80px;
  --section-y: clamp(76px, 9vw, 140px);
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 52px;              /* 44 for the button and 4 either side, which is the floor */
  --nav-top: clamp(14px, 2vw, 26px);
  --cover-pad: clamp(6px, 0.8vw, 12px);   /* the paper showing round the edge of the cover */

  /* Shape. Two kinds of edge and no others: a soft rectangle for anything that behaves like
     an object, and a torn edge for anything that behaves like paper. */
  --r-button: 8px;
  --r-card: 14px;
  --r-image: 10px;
  --r-input: 8px;
  --r-pill: 999px;
  --rule: 1px;
  --deckle: 9px;              /* how far a torn edge wanders from the straight */
  --tilt: 2.4deg;             /* how far a print sits off square */
  --shadow-print: 0 1px 2px rgb(43 42 38 / .08), 0 14px 34px rgb(43 42 38 / .12);
  --shadow-soft: 0 1px 2px rgb(43 42 38 / .05), 0 10px 26px rgb(43 42 38 / .07);
  /* A drop-shadow filter takes a colour rather than a shadow list, which is why the two
     torn-paper layers cannot use the pair above. */
  --shadow-cast: rgb(43 42 38 / .12);

  /* Motion */
  --ease-settle: cubic-bezier(.22, 1, .36, 1);
  --ease-glide: cubic-bezier(.33, 1, .68, 1);
  --dur-reveal: .9s;
  --dur-slow: 1.4s;
  --stagger: 90ms;
  --photo-zoom: 1.12;         /* how far a photograph closes in as its section is scrolled */

  /* Measure */
  --measure: 52ch;
  --content-width: 1160px;
  --image-ratio: 4 / 5;
}