/* WA HIAB holding page: the full site's look (true black, hi-vis fluro, black-and-white
   photo, hi-vis tape band) on one centred screen. Phone fixes: 100dvh, html and body
   both black so over-scroll never shows a white seam, safe-area padding. */

@font-face { font-family: "Big Shoulders"; src: url("fonts/big-shoulders-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  --black: #000000;
  --ink: #f4f4f0;
  --dim: #c9c9c2;
  --fluro: #c6ff00;
  --silver: #c7cacc;
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--black); }

body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font: 400 17px/1.5 "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

.backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
  filter: grayscale(1) contrast(1.08) brightness(.32);
}

.card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: max(48px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left));
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  font: 900 2rem/1 "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  letter-spacing: .03em;
}

h1 {
  margin: 0;
  font: 900 clamp(4rem, 16vw, 10rem)/.88 "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase;
  color: var(--fluro);
}

.what { margin: 24px 0 0; max-width: 24em; color: var(--dim); font-size: clamp(1.05rem, 2.6vw, 1.3rem); font-weight: 600; }

.tape {
  position: relative;
  height: calc(22px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(var(--fluro) 0 8px, var(--silver) 8px 14px, var(--fluro) 14px 22px, var(--black) 22px);
}