/* M21 design tokens ----------------------------------------------------------
   The reusable half of the system: every value here is a decision (colour,
   type, rhythm, easing) rather than a layout. A sister site — the Xhek
   Construction corporate site — can swap this sheet for its own palette and
   keep base.css, components.css and motion.css unchanged.

   Palette notes
   · Paper is a warm, milky off-white. No surface anywhere on the page is pure
     #fff: the brightest tone in the system is --milk.
   · --paper-2 is one step down from paper: the ground every other section
     sits on, close enough to share the page's temperature and far enough that
     the edge between two sections can be seen.
   · Dark grounds are warm charcoal rather than black. --charcoal is the
     section ground, --charcoal-2 the deeper tone for the footer, the opening
     curtain and cards that sit on paper.
   · Type on dark grounds is --paper, never white, so the two halves of the
     page share one temperature.
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --paper: #f4f2ed;
  --paper-2: #ebe8e1;
  --milk: #faf9f6;
  --charcoal: #2a2925;
  --charcoal-2: #1d1c19;

  /* The same tones as rgb triplets, for washes and hairlines at an alpha. */
  --paper-rgb: 244, 242, 237;
  --ink-rgb: 35, 34, 30;
  --charcoal-rgb: 29, 28, 25;

  /* Type on paper */
  --ink: #23221e;
  --ink-2: #605d56;
  --ink-3: #8f8c83;

  /* Type on charcoal */
  --cream: var(--paper);
  --cream-2: rgba(var(--paper-rgb), .68);
  --cream-3: rgba(var(--paper-rgb), .5);

  /* Hairlines */
  --line: rgba(var(--ink-rgb), .18);
  --line-light: rgba(var(--paper-rgb), .2);

  /* Accents: the tower's planting and its warm stone. */
  --green: #7c8a73;
  --warm: #a98f78;

  /* Type ------------------------------------------------------------------
     Two faces, one weight ceiling. Cormorant Garamond carries the display
     and every large number; Jost carries the reading sizes and the tracked
     uppercase labels. Nothing on the page is set heavier than 400.
     -------------------------------------------------------------------- */
  --font-display: "Cormorant Garamond", Cormorant, Garamond, "Times New Roman", serif;
  --font-sans: Jost, Futura, "Avenir Next", "Century Gothic", "Helvetica Neue", Arial, sans-serif;

  --w-light: 300;
  --w-regular: 400;

  --type-body: 17px;
  --lead-body: 1.65;

  /* Tracking. Display type is set with a little air rather than tight, which
     is what lets the light serif read as architectural instead of editorial. */
  --track-display: .02em;
  --track-title: .01em;
  --track-label: .22em;
  --track-nav: .16em;
  --track-caption: .12em;

  --lead-display: .9;
  --lead-title: .96;

  /* Rhythm ------------------------------------------------------------- */
  --space-section: clamp(96px, 12vw, 184px);
  --space-intro: clamp(76px, 9.5vw, 144px);
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Layout system -----------------------------------------------------------
     --maxw   the measure the whole page is built on; nothing spans wider
     --gutter the minimum breathing room at the screen edge
     --pad    the side padding every full-bleed section uses. Once the viewport
              grows past --maxw it takes over as the centring margin, so the
              hero frame and all sections stay on one vertical rhythm.
     --rail   inner offset that keeps content off the hero's frame lines.
     -------------------------------------------------------------------- */
  --maxw: 1680px;
  --gutter: max(clamp(22px, 3.2vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --pad: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  --rail: clamp(14px, 1.5vw, 36px);
  /* Height of a one-line figure caption: figcaption's 12px padding-top plus a
     10px line at 1.3. Lets a neighbouring block line up with the image's
     bottom edge rather than with the caption below it. */
  --caption-h: 25px;
}