/* ==========================================================================
   HAVEN. — the palette, the type scale and the few numbers the whole page
   agrees on. Nothing here draws anything.

   The palette is the brief's, unchanged: chalk and limestone for the ground,
   ink for type, sea and deep sea for the water, sun and bougainvillea as the
   two accents the island actually has. Night is the only dark, and it is used
   once, behind the closing window.
   ========================================================================== */
:root {
  --chalk:     #F5F1E8;
  --limestone: #D9CDBB;
  --ink:       #151515;
  --sea:       #2E9FB3;
  --deep:      #0B5264;
  --sun:       #F0B35C;
  --boug:      #C94C72;
  --night:     #182126;

  --ink-70: rgba(21, 21, 21, .70);
  --ink-45: rgba(21, 21, 21, .45);
  --ink-18: rgba(21, 21, 21, .18);
  --ink-08: rgba(21, 21, 21, .08);

  /* THE WRAP IS THE SIZES STRING.
     g-band says a full-width photograph is 1120px at large sizes and 92vw
     below that. This is that same fact as a layout: change one and change
     tools/grid.json with it, or every band photograph is served at the wrong
     width and nothing errors. */
  --wrap: min(1120px, 92vw);
  /* and the same again for one frame of the window wall: this is g-wall's
     `sizes` string written as a layout. */
  --wall-w: min(380px, 78vw);
  --gutter: 4vw;

  /* the window's resting inset on the opening and closing screens. The
     stylesheet clips the hero photograph to exactly this, and the lens's first
     station is an empty box at exactly this — one number, two users, so the
     handover between the two lands on one rectangle. */
  --open-x: 7vw;
  --open-top: 15vh;
  --open-bottom: 11vh;

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --d-huge: clamp(2.9rem, 7.6vw, 6.2rem);
  --d-big:  clamp(2.3rem, 5.2vw, 4.2rem);
  --d-mid:  clamp(1.5rem, 2.9vw, 2.4rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-window: cubic-bezier(.65, .02, .18, 1);
}