/* ==========================================================================
   tokens.css -- design tokens
   --------------------------------------------------------------------------
   Every colour, font stack and layout constant lives here. Nothing else in the
   CSS should contain a raw hex value or a magic number that appears twice.

   The values are not invented: they were measured off the original Squarespace
   site with tools/fingerprint.js. See docs/parity.md for the measurements and
   the derivations behind the less obvious numbers.
   ========================================================================== */

:root {
  /* ---------- Colour ---------- */
  --ydb-cream:      rgb(252, 252, 247);   /* the page field the text sits on */
  --ydb-green:      rgb(210, 219, 87);    /* footer, and the canvas behind the page */
  --ydb-ink:        rgb(32, 23, 19);      /* headings, hours */
  --ydb-ink-soft:   rgba(28, 28, 28, .8); /* phone + address */
  --ydb-white:      rgb(255, 255, 255);   /* footer text */
  --ydb-icon:       rgb(0, 0, 0);         /* Instagram glyph */
  --ydb-overlay:    rgba(0, 0, 0, .2);    /* darkening wash over the hero photo */

  /* ---------- Type ----------
     futura-pt is an Adobe Fonts (Typekit) face and cannot legally be self-hosted.
     Jost is the closest open-source geometric sans and is what ships here.
     To restore the original exactly, add an Adobe Fonts kit and put 'futura-pt'
     at the front of --font-display. That is the only substituted face on the page. */
  --font-display: "Jost", "Futura PT", Futura, "Century Gothic", sans-serif;
  --font-body:    "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-footer:  "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---------- Layout ---------- */
  --measure:  1080px;  /* max width of the centred content column */
  --gutter:   34px;    /* horizontal padding inside that column */

  /* Width of the text column. Drives centring and line wrapping. */
  --col: calc(min(100%, var(--measure)) - (2 * var(--gutter)));

  /* ---------- Hero geometry ----------
     On the original these numbers are an emergent property of two invisible
     Squarespace "spacer" blocks stacked inside the banner. They are reproduced
     here as an explicit formula so the hero is the same height at every width.
     Derivation in docs/parity.md.

     The two ratios are kept separate rather than summed to .314925, because the
     browser snaps each percentage padding to 1/64px independently. Summing them
     lands 0.016px away from the original; keeping them apart lands exactly on it. */
  --hero-spacer-a:     13.8806%; /* first spacer, as a % of the banner column width */
  --hero-spacer-b:     17.6119%; /* second spacer */
  --hero-spacer-fixed: 119px;    /* their fixed padding component */
  --hero-pad-y:        102px;    /* vertical padding on the banner content */

  /* ---------- Vertical rhythm below the hero ---------- */
  --info-pad-top:    100px; /* hero bottom -> tagline top */
  --info-pad-bottom: 117px; /* Instagram icon bottom -> footer top */
  --stack-gap:       24px;  /* between every text line in the info block */
  --social-gap:      34px;  /* last hours row -> Instagram icon */

  /* ---------- Footer ---------- */
  --footer-pad-top:    68px;
  --footer-pad-bottom: 68px;
  --backtotop-gap:     0px;  /* "Back To Top" -> contact details */
}

/* --------------------------------------------------------------------------
   The original serves a taller banner to short screens, via a
   `max-device-height: 1024px` query in Squarespace's stylesheet. It keys off
   the physical *screen* height, not the window, so the same page is genuinely
   a different height on a 768p laptop than on a 1080p monitor.

   That is odd, but it is what the original does, and reproducing it is what
   keeps this rebuild pixel-identical on every machine rather than just on the
   one it was measured on. Delete this block to normalise the banner to a
   single height everywhere -- nothing else depends on it.
   -------------------------------------------------------------------------- */
@media only screen and (max-device-height: 1024px) {
  :root {
    --hero-pad-y:      136px;
    --info-pad-top:    68px;
    --info-pad-bottom: 85px;
  }
}

/* Phone layout: tighter gutters and a shallower banner. */
@media only screen and (max-width: 640px) {
  :root {
    --gutter:            20px;
    --hero-pad-y:        51px;
    --hero-spacer-fixed: 136px;
    --info-pad-top:      57px;
    --info-pad-bottom:   57px;

    /* The footer tightens up and goes asymmetric once "Back To Top" appears. */
    --footer-pad-top:    20px;
    --footer-pad-bottom: 37px;
    --backtotop-gap:     17px;
  }
}