/**
 * Sorrel. Every colour, type, space and shape decision in this template, and nowhere else.
 * Custom properties only: no selectors, no rules.
 *
 * Warm cocoa on oat paper. Where Hartfield is printed and flat, Nocturne is a dark page
 * with paper cut into it, Como is stationery and Aurelia is engraved, Sorrel is editorial:
 * one photograph filling the first screen, wide rounded panels, and two rails that move
 * sideways while the page moves down. The brown is a surface first and ink second, which is
 * the opposite of the way Aurelia uses its red, and it is why the deep sections read as
 * furniture rather than as emphasis.
 *
 * Playfair Display carries every heading, with its italic doing the work a second face
 * would: the second name in the monogram, the pull quotes, the wordmark in the footer.
 * Inclusive Sans underneath, which is drawn for legibility at small sizes and has the
 * generous apertures that survive being set at 0.85rem in --ink-faint over a photograph.
 */

: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: #F7EFE7;        /* oat paper, the page */
  --surface-alt: #F1E6DB;    /* the inset panels cut into it */
  --surface-card: #FFFFFF;   /* the white cards over photographs */
  --surface-deep: #8A5236;   /* cocoa, the deep sections and the bar */

  --ink: #2A170F;            /* 15.03 on paper, 17.10 on white, 13.91 on the inset */
  --ink-soft: #5C4133;       /* 8.17, 9.30, 7.56 */
  --ink-faint: #7A5744;      /* 5.64, 6.41, 5.22. The floor, and it does not move */
  --ink-invert: #F7EFE7;     /* 5.52 on cocoa */
  --ink-invert-soft: #EDDBCC;/* 4.67 on cocoa */

  /* The cocoa is the accent as well as the panel, so a button on paper and a panel behind
     cream type are one value read from either side. There is no second hue in this
     template on purpose: the photographs are the colour. */
  --accent: #8A5236;
  --accent-ink: #F7EFE7;     /* 5.52, and 5.52 is also the button's own edge against paper */

  --line: #E0CDBD;           /* hairlines on paper. Decorative, never carrying text */
  --line-deep: #A87255;      /* hairlines on cocoa. Decorative */

  /* The one thing on the page that is wrong, on the reply form and nowhere else. The cocoa
     pulled towards red, so it reads as this palette rather than as a browser default.
     6.59 on the card, 5.79 on the fields. */
  --bad: #A33A24;

  /* The three weights of scrim that go under cream type on a photograph. These are not a
     taste decision and they are not computed: the cover was sampled pixel by pixel under
     each line of type, the veil composited over it, and the numbers raised until the bright
     tail of the picture cleared 4.5. A photograph carries its own dark and light, so the
     strong one is only ever used where the type actually sits. */
  --scrim-deep: rgb(42 23 15 / .82);
  --scrim: rgb(42 23 15 / .58);
  --scrim-soft: rgb(42 23 15 / .30);

  /* The bar over the cover carries no fill and no tint: it only blurs what is behind it.
     Blur alone moves nothing towards dark, so the white type in the bar is held up by a
     shadow on the glyphs rather than by anything laid over the picture. */
  --glass-blur: 20px;
  --glass-shadow: rgb(42 23 15 / .55);

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inclusive Sans', system-ui, sans-serif;
  --weight-display: 400;
  --weight-display-strong: 500;
  --weight-body: 400;
  --weight-strong: 600;

  --t-display: clamp(3.4rem, 13vw, 9rem);  /* the names, three lines down the first screen */
  --t-wordmark: clamp(2rem, 11vw, 10rem);  /* the footer, which is wider than it is tall */
  --t-h2: clamp(2.1rem, 5vw, 3.7rem);
  --t-h3: clamp(1.25rem, 2.2vw, 1.65rem);
  --t-lede: clamp(1.05rem, 1.4vw, 1.25rem);
  --t-body: 1rem;
  --t-small: 0.94rem;
  --t-meta: 0.85rem;
  --track-display: -0.015em;  /* Playfair sets wide at display sizes and wants closing up */
  --track-meta: 0.02em;
  --leading: 1.68;
  --leading-display: 1.04;

  /* 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(72px, 8.5vw, 132px);
  --gutter: clamp(20px, 4vw, 56px);
  /* Declared once and read by the bar, the cover's height arithmetic and the sticky pin on
     the schedule, so the three cannot drift apart. */
  --nav-h: 76px;

  /* Shape. Everything is a soft rectangle, and the radius grows with the object: a pill for
     a control, a generous corner for a card, and the largest one on the photographs, which
     is what keeps a full-bleed picture reading as a panel rather than as a background. */
  --r-button: 999px;
  --r-card: 20px;
  --r-image: 24px;
  --r-image-sm: 8px;          /* the story rail, where a soft corner at that size reads as a
                                 rounded tile rather than as a print on a shelf */
  --r-input: 12px;
  --r-pill: 999px;
  --rule: 1px;
  --shadow-card: 0 2px 4px rgb(42 23 15 / .04), 0 24px 60px rgb(42 23 15 / .10);
  --shadow-lift: 0 1px 2px rgb(42 23 15 / .06), 0 12px 30px rgb(42 23 15 / .08);

  /* Motion */
  --ease-settle: cubic-bezier(.22, 1, .36, 1);
  --ease-glide: cubic-bezier(.33, 1, .68, 1);
  /* Slower than the other templates, to sit with the longer glide the page now scrolls
     with. A reveal that finishes before the scroll settles is the thing that makes a page
     feel stepped. */
  --dur-reveal: 1s;
  --dur-slow: 1.5s;
  --stagger: 85ms;
  --rail-cycle: 52s;          /* one pass of the story rail, which never stops */
  --photo-zoom: 1.16;         /* how far a photograph closes in as its section is scrolled */

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