@font-face {
  font-family: "Anton";
  src: url("/fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --bg: #000;
  --fg: #f2efe9;
  --gutter: clamp(16px, 2.4vw, 40px);
  --icon: 22px;
  /* The icons sit centered in 44px tap targets; this is the empty space around them. */
  --icon-inset: calc((44px - var(--icon)) / 2);
}

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

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
}

body {
  overflow: hidden;
}

/* Landscape: video fills the screen. The footage sits on pure black,
   so the page background and the video edges are indistinguishable. */
.bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stage {
  position: relative;
  z-index: 1;
  height: 100svh;
  /* Top padding is reduced by the tap-target inset so the icons' visible edge,
     not their tap area, sits on the gutter. */
  padding:
    max(calc(var(--gutter) - var(--icon-inset)), env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    0
    max(var(--gutter), env(safe-area-inset-left));
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  margin: 0;
  font-family: "Anton", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.1vw + 6px, 24px);
  line-height: 1;
  letter-spacing: 0.01em;
}

.links {
  display: flex;
  gap: clamp(8px, 1vw, 16px);
  margin-right: calc(-1 * var(--icon-inset));
}

.links a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--fg);
  transition: opacity 0.2s ease;
}

.links a:hover,
.links a:focus-visible {
  opacity: 0.7;
}

.links a:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 2px;
}

.links svg {
  width: var(--icon);
  height: var(--icon);
  fill: currentColor;
}

/* Centered over the video, on both axes. */
.headline {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  pointer-events: none;
  font-family: "Anton", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: min(10.8vw, 20vh);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Portrait: a full-bleed crop would leave only a thin slice of the 16:9
   footage, so show a wide band through the middle and fade its edges. */
@media (orientation: portrait) {
  :root {
    --icon: 18px;
  }

  .bg {
    inset: 50% auto auto 50%;
    width: 170vw;
    height: auto;
    aspect-ratio: 16 / 9;
    transform: translate(-50%, -50%);
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  }

  /* 20px visible gap between icons: two tap-target insets (2 × 13px) minus 6px overlap. */
  .links {
    gap: 0;
  }

  .links a + a {
    margin-left: -6px;
  }

  /* "COMING SOON" is about 5.2em wide in Anton; fill the width between the gutters. */
  .headline {
    font-size: calc((100vw - 2 * var(--gutter)) / 5.3);
  }
}