/**
 * Marlow. Every colour, type, space and shape decision in this template, and nowhere else.
 * Custom properties only: no selectors, no rules.
 *
 * Blush paper and a forest green. The first screen is one photograph with the names set
 * across the middle of it in capitals, and every section after it is paper and type with a
 * centred heading. The green is the only saturated thing on the page and it appears on
 * controls, on the frames of the prints, and nowhere else.
 *
 * Nothing here needs a photograph except the cover, and the cover needs exactly one. The day is type on a line, the questions
 * are type on a line, and the story reads perfectly well with its picture taken out, which
 * is the case the library was missing.
 *
 * Prata sets the two display lines and nothing else: one weight, high contrast, and wide
 * enough in capitals to carry a whole screen. Outfit does everything else, from the section
 * headings down to the reply form, which is why it is variable rather than static. Sacramento
 * signs the monogram in the bar, once.
 */

: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: #F7EFED;        /* blush paper, the page */
  --surface-alt: #F0E5E2;    /* the panels set into it */
  --surface-card: #FFFFFF;   /* the bar, and the face of a print */
  --surface-deep: #1B3A28;   /* forest, the buttons and the frames */

  --ink: #232323;            /* 13.86 on paper, 12.73 on the panel */
  --ink-soft: #55524F;       /* 6.85 and 6.29 */
  --ink-faint: #696560;      /* 5.10 on paper, 5.78 on white, 4.68 on the panel. The floor */
  --ink-invert: #F7EFED;     /* 11.01 on forest */

  --accent: #1B3A28;
  --accent-ink: #F7EFED;     /* 11.01, and the same figure is the button's edge on paper */
  /* The green is also a text colour, which is unusual for an accent and is the reason the
     names can be set in it: 11.01 on the paper and 12.48 on white. */
  --accent-ink-on-paper: #1B3A28;

  --line: #E4D8D5;           /* hairlines on paper. Decorative, never carrying text */
  --line-deep: #4A6353;      /* a hairline on the forest */

  /* The one thing on the page that is wrong, on the reply form and nowhere else. Blush taken
     to its own depth, which is the red this palette already implies.
     6.76 on the page, 6.21 on the fields. */
  --bad: #992C24;
  --scrim: rgb(24 22 21 / .46);      /* over a photograph, under cream type */
  --scrim-deep: rgb(24 22 21 / .68);
  /* The opposite of a scrim, and the one the cover uses: the paper itself, laid over the
     photograph. It is the page colour rather than white so that the seam at the foot of the
     picture is the same wash carried to full strength.
     0.55 is as light as it goes. Against the darkest pixel a photograph can hold, the wash
     lifts the ground to about 0.28 luminance, where the near-black of the date clears 4.9
     and the green of the names clears 4.0, which is over the 3 a line that size needs. Any
     less and the small type is the first thing to fail. */
  --wash: rgb(247 239 237 / .55);

  /* The seam: where a photograph stops being a photograph and becomes the page again.
     Two things make it invisible. It fades to the page colour at zero alpha rather than to
     `transparent`, which is black at zero and drags the ramp through a grey nobody asked
     for. And the alpha is eased rather than linear: a straight ramp ends in a visible band,
     because the eye reads the corner where the rate of change stops, not the colour itself.
     Written once as a list of stops and pointed at whichever edge needs it. */
  --seam: clamp(120px, 20vh, 280px);
  --seam-stops:
    var(--surface) 0%,
    color-mix(in srgb, var(--surface) 96%, transparent) 10%,
    color-mix(in srgb, var(--surface) 85%, transparent) 22%,
    color-mix(in srgb, var(--surface) 66%, transparent) 36%,
    color-mix(in srgb, var(--surface) 43%, transparent) 52%,
    color-mix(in srgb, var(--surface) 22%, transparent) 68%,
    color-mix(in srgb, var(--surface) 8%, transparent) 84%,
    color-mix(in srgb, var(--surface) 0%, transparent) 100%;

  /* Type */
  --font-display: 'Prata', Georgia, serif;         /* the names, and the itinerary title */
  --font-body: 'Outfit', system-ui, sans-serif;    /* everything else, including headings */
  --font-script: 'Sacramento', 'Apple Chancery', cursive;
  --weight-display: 400;      /* Prata has one weight, which is the point of it */
  --weight-body: 400;
  --weight-soft: 500;
  --weight-strong: 600;

  --t-display: clamp(2.2rem, 7.2vw, 6rem);  /* the names, in capitals, across the page */
  --t-title: clamp(1.6rem, 3.6vw, 2.6rem);  /* the letterspaced display headings */
  --t-h2: clamp(1.7rem, 3.4vw, 2.6rem);     /* the sans headings, which are most of them */
  --t-h3: clamp(1.3rem, 2.4vw, 1.9rem);
  --t-lede: clamp(1.05rem, 1.4vw, 1.2rem);
  --t-body: 1rem;
  --t-small: 0.94rem;
  --t-meta: 0.84rem;
  --track-display: 0.01em;
  --track-title: 0.12em;      /* the two lines set in Prata capitals */
  --track-meta: 0.02em;
  --leading: 1.72;
  --leading-display: 1.06;

  /* 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(72px, 8.5vw, 132px);
  --gutter: clamp(20px, 4vw, 48px);
  --nav-h: 56px;
  --nav-top: clamp(12px, 1.6vw, 20px);

  /* Shape */
  --r-button: 8px;
  --r-card: 12px;
  --r-image: 6px;
  --r-input: 8px;
  --r-pill: 999px;
  --rule: 1px;
  --dot: 11px;                /* the mark on the itinerary spine, which the line runs through */
  --tilt: 2deg;               /* how far a print sits off square */
  --shadow-print: 0 2px 4px rgb(35 35 35 / .06), 0 16px 36px rgb(35 35 35 / .12);
  --shadow-soft: 0 1px 2px rgb(35 35 35 / .05), 0 10px 26px rgb(35 35 35 / .07);
  --shadow-lift: 0 26px 50px rgb(35 35 35 / .16);   /* a print picked up off the shelf */

  /* Motion */
  --ease-settle: cubic-bezier(.22, 1, .36, 1);
  --ease-glide: cubic-bezier(.33, 1, .68, 1);
  --dur-reveal: .9s;
  --dur-slow: 1.35s;
  --stagger: 80ms;
  --rail-cycle: 64s;          /* one pass of the shelf of prints, which never stops */
  --photo-zoom: 1.1;

  /* Measure */
  --measure: 58ch;
  --content-width: 1120px;
  --image-ratio: 3 / 2;
}