:root {
  --black: #000;
  --blade: #f4f6f7;   /* the mark: cool, polished white */
  --steel: #c3c8cb;   /* copy */
  --gutter: clamp(20px, 3.6vw, 56px);
  --native: 2560px;   /* css px the photographs can fill unscaled; set per display in index.html */
  --reserve: 170px;   /* the sign's height plus breathing room, kept clear below the frame */
}

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

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--black);
}

body {
  color: var(--steel);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 380;
  font-variation-settings: "wdth" 84;
  line-height: 1.5;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--gutter);
  padding-bottom: max(var(--gutter), env(safe-area-inset-bottom));
}

/* Photography sits in a centred frame: about half the screen's width, at least
   640px, and never larger than the photograph's own pixels so it stays sharp.
   Without WebGL the first frame is shown as a still. */
.frame {
  grid-area: 1 / 1;
  place-self: center;
  width: min(
    max(50vw, min(640px, 100vw - 2 * var(--gutter))),
    var(--native),
    (100svh - 2 * (var(--gutter) + var(--reserve))) * 16 / 9
  );
  aspect-ratio: 16 / 9;
  background: #000 url("/img/warehouse-1600.webp") center / cover no-repeat;
}
.js .frame { background: #000; }
.no-gl .frame { background: #000 url("/img/warehouse-1600.webp") center / cover no-repeat; }
.no-gl canvas { display: none; }

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.sign {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
}

/* Phones and tall windows: the frame fills the space above the sign. */
@media (orientation: portrait) {
  main {
    height: 100vh;
    height: 100svh;
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: 24px;
  }
  .frame {
    grid-area: 1 / 1;
    place-self: stretch;
    width: auto;
    aspect-ratio: auto;
    background-image: url("/img/warehouse-portrait-1600.webp");
  }
  .js .frame { background-image: none; }
  .no-gl .frame { background-image: url("/img/warehouse-portrait-1600.webp"); }
  .sign { grid-area: 2 / 1; }
}

.mark {
  margin: 0;
  width: 240px;
  color: var(--blade);
  line-height: 0;
}
.mark svg {
  display: block;
  width: 100%;
  height: auto;
}

.sign p {
  margin: 14px 0 0;
  max-width: 31ch;
  text-wrap: pretty;
}

@media (max-width: 520px) {
  .mark { width: 200px; }
}

/* The first pass of the line reveals the sign; site.js moves --cut with it. */
.js .sign {
  -webkit-mask-image: linear-gradient(150deg, #000 var(--cut, 0px), transparent var(--cut, 0px));
  mask-image: linear-gradient(150deg, #000 var(--cut, 0px), transparent var(--cut, 0px));
}
.js.ready .sign {
  -webkit-mask-image: none;
  mask-image: none;
}