/* ==========================================================================
   ZERO-BLOCK ENGINE
   --------------------------------------------------------------------------
   The reference site is built on absolutely-positioned "artboards" that are
   authored against a fixed design grid and then scaled to fill the viewport.

   Grid widths:  1200 / 960 / 640 / 320
   Active grid:  the largest grid <= viewport width (floor 320)
   Scale:        s = viewportWidth / activeGrid       -> the grid always fills
                                                         the viewport exactly

   assets/js/engine.js writes the scale to --u as a px length, e.g. at a
   1440px viewport --u: 1.2px. Every geometry value in site.css is therefore
   written as a plain, unitless design-grid number and multiplied by --u:

       .el-logo { --t: 10; --l: 20; --fs: 11; }      /* grid units */

   Width/height are optional, so those are written out as full calc()
   expressions on the elements that need them:

       .el-hero-title { --w: calc(562 * var(--u)); }

   Anything you add later just follows the same pattern.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;                 /* artboards intentionally overflow */
  background-color: var(--bg-page);
  font-family: var(--font-sans);
  font-weight: var(--fw);
  color: var(--text-on-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Block + artboard
   -------------------------------------------------------------------------- */

.zb {
  position: relative;
  width: 100%;
}

.zb__artboard {
  position: relative;
  width: 100%;
  height: calc(var(--zb-h, 0) * var(--u));
  overflow: hidden;                   /* clip off-canvas elements */
}

/* The header artboard deliberately lets content spill (matches the source,
   where the clock sits outside the grid on small screens). */
.zb--overflow .zb__artboard { overflow: visible; }

/* --------------------------------------------------------------------------
   Element
   Defaults to shrink-to-fit ("autowidth" in the source). Set --w for a fixed
   measure ("autoheight") and --w + --h for a fully fixed box ("fixedsize").
   -------------------------------------------------------------------------- */

.zb__el {
  position: absolute;
  display: table;
  top:  calc(var(--t, 0) * var(--u));
  left: calc(var(--l, 0) * var(--u));
  width:  var(--w, auto);
  height: var(--h, auto);
  z-index: 3;
}

/* Bottom-anchored elements */
.zb__el--bottom {
  top: auto;
  bottom: calc(var(--b, 0) * var(--u));
}

.zb__el > .atom {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw);
  font-size: calc(var(--fs, 11) * var(--u));
  line-height: var(--lh, 1.55);
  color: inherit;
}

.zb__el--nowrap > .atom { white-space: nowrap; }
.zb__el--upper  > .atom { text-transform: uppercase; }

/* Image slots keep their grid geometry; drop your own artwork in and it will
   sit exactly where the source parks it. */
.zb__el > .atom > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}