:root {
  --bg: #d3d9df;

  /* Geometric centre reads bottom-heavy, so the mark sits fractionally high. */
  --optical-lift: 1.5%;

  /* Intrinsic aspect ratios of the two lockups, as width ÷ height.
     Height limits are expressed through width so the ratio is never broken:
     a max-height on a replaced element with an explicit width squashes it. */
  --ratio: 10.711;   /* horizontal: 329.04 × 30.72 */
  --height-cap: 74;  /* percent of viewport height the mark may occupy */
}

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

html {
  height: 100%;
  background-color: var(--bg);
  -webkit-text-size-adjust: 100%;
}

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

  /* Nothing on this page scrolls, at any size. */
  overflow: hidden;
  overscroll-behavior: none;
}

.stage {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100vh;
  height: 100dvh;

  /* Keeps the mark clear of notches and rounded corners. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);

  transform: translateY(calc(var(--optical-lift) * -1));
}

.mark {
  display: block;
  height: auto;

  /* The last term is the height cap restated as a width, so short and
     landscape viewports shrink the mark instead of overflowing it. */
  width: min(62vw, 900px, calc(var(--height-cap) * 1vh * var(--ratio)));
  width: min(62vw, 900px, calc(var(--height-cap) * 1dvh * var(--ratio)));
}

@media (max-width: 699.98px) {
  :root {
    --optical-lift: 1.2%;
    --ratio: 1.2025;  /* stacked: 68.40 × 56.88 */
    --height-cap: 38;
  }

  /* The stacked lockup is nearly square, so matching the desktop's 62vw keeps
     the same restraint on a phone instead of filling the screen. The 260px
     ceiling stops it growing back out on wide phones and small tablets. */
  .mark {
    width: min(62vw, 260px, calc(var(--height-cap) * 1vh * var(--ratio)));
    width: min(62vw, 260px, calc(var(--height-cap) * 1dvh * var(--ratio)));
  }
}

/* Nothing moves here — this is a guard, not a feature. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}