:root {
  --ink: #fff;
  --bg: #000;
  --accent: #E71919;
  --display: "Anton", "Impact", sans-serif;
  --text: "Oswald", "Arial Narrow", sans-serif;
  --gutter: clamp(16px, 2.5vw, 40px);
  /* How strongly the wordmark sits on the photo (desktop) */
  --word-blend: screen;
  --word-opacity: .75;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.page { position: relative; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; }

/* ---------- Desktop: the photo fills the screen ---------- */
.stage { position: absolute; inset: 0; }
.media { position: absolute; inset: 0; }
.cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 49% 70%;
}
.shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.3), transparent 40%, transparent 70%, rgba(0,0,0,.4)); }

.title { position: absolute; mix-blend-mode: var(--word-blend); opacity: var(--word-opacity); }

.head { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: var(--gutter);
        display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.head .brand { display: none; }
.head .mark { height: clamp(44px, 6vh, 64px); }

/* ---------- Phones: a poster, the photo seen through the logo ---------- */
@media (max-width: 600px) and (orientation: portrait) {
  .page { display: flex; flex-direction: column; gap: 20px; padding: var(--gutter); }
  .head { position: static; order: 0; padding: 0; align-items: center; }
  .head .brand { display: block; }
  .head .mark { height: 22px; }
  .stage { position: relative; inset: auto; order: 1; flex: 1; min-height: 0;
           display: flex; justify-content: center; align-items: center; }
  .media { position: relative; inset: auto; height: 100%; max-width: 100%; aspect-ratio: 309 / 501; overflow: hidden; }
  .cover { object-position: 50% 72%; }
  .shade { display: none; }
  .title { position: static; order: 2; mix-blend-mode: normal; opacity: 1; text-align: center; }
  .title .word { line-height: .78; }
}

/* Giant wordmark, sized to its container by fit.js */
.word {
  display: inline-block;
  font-family: var(--display);
  font-weight: 900;
  line-height: .8;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 18vw; /* rough size before fit.js runs */
}

.label {
  font-family: var(--text);
  font-weight: 300;
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .32em;
  text-transform: uppercase;
}

.mark { display: block; color: var(--ink); }
.mark svg { display: block; height: 100%; width: auto; overflow: visible; }
.mark svg * { vector-effect: non-scaling-stroke; stroke-width: 1.25px; }

h1 { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }