/* Autopost, direction "Maison": warm paper, serif headings, hairline rules.
   The visual language is deliberately restrained: one action per screen, thin
   rules instead of stacked cards, and the photo carrying the page. */

/* Layer 0 of the CUBE order: custom properties only, no rules. This is the one
   file allowed to hold a colour literal; every other layer reaches a colour
   through var(). A restyle is then a change to this file alone. */

/* Breakpoints, documented here and written literally in the media queries: a
   custom property cannot be read inside an @media condition, so these three
   values are a contract the queries repeat rather than a variable they share.
   Queries are desktop-down (max-width); adding a fourth value is a decision,
   not a convenience.

     phone   <= 640px   dense rows reflow, gutters tighten
     tablet  <= 880px   two-column layouts stack
     wide    <= 1180px  wide multi-column collapses

   880 is the one this project uses: .split is 1.1fr 1fr over a 27rem promise
   panel and a 23rem form, which still fit at 880 (440/400px) and would stack a
   working layout too early at 1180. */

:root {
  --ink: #1c1a17;
  --ink-muted: #6e6860;
  --ink-faint: #8a8278;
  --surface: #faf7f2;
  --surface-raised: #fffdf9;
  --canvas: #ede8e0;
  --sunk: #f3eee5;
  --line: #e4ddd2;
  --line-strong: #d6cdbf;
  --accent: #a6512f;
  --accent-deep: #7e3b21;
  --danger: #8e3d2a;
  --danger-line: #e3c4be;
  --danger-bg: #fbf0ee;
  --ok: #3f6b4e;
  --radius: 2px;
  --gap: 1rem;
  --measure: 23rem;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* The tone a photo occupies before it loads, and behind one that never
     does. Warmer than --canvas so an empty frame still reads as paper. */
  --photo-placeholder: #e7e0d4;

  /* Scrim stops, --ink over a photo. Written as literals rather than
     color-mix(var(--ink), transparent) so the gradient keeps rendering on the
     browsers that predate color-mix; the three stops are one visual object. */
  --scrim-top: rgba(28, 26, 23, 0.55);
  --scrim-mid: rgba(28, 26, 23, 0.42);
  --scrim-bottom: rgba(28, 26, 23, 0.68);

  /* --surface held back off full strength, for text sitting on the scrim. */
  --on-scrim: rgba(250, 247, 242, 0.86);
  --on-scrim-muted: rgba(250, 247, 242, 0.7);
}