.header-soon { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand langs"; row-gap: 0; padding-top: 18px; padding-bottom: 28px; }
.site-footer { margin-top: 0; border-top: 0; }

/* Headings are skewed as one block, so a second line drifts left of the column: on phones they shrink to stay on one line. */
.page-soon .intro .display-xl { font-size: min(clamp(44px, 8vw, 64px), (100vw - 2 * var(--gutter)) / 8.6); }
.lost h1 { font-size: min(clamp(30px, 6vw, 34px), (100vw - 2 * var(--gutter)) / 11.6); }

/* The ticker, the line over the motto and the language links use the body font, like the lead, in capitals. */
.ticker-track.pixel, .intro .heading-text.pixel, .langs a { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 1.5px; }


/* The pause control is a checkbox, so it works without JavaScript. */
.motion-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.motion-input + .ticker-toggle { cursor: pointer; }
.motion-input:focus-visible + .ticker-toggle { outline: 2px solid var(--ticker-text); outline-offset: -4px; }
.motion-input:checked + .ticker-toggle .i-pause { display: none; }
.motion-input:checked + .ticker-toggle .i-play { display: block; }
body:has(#pause-motion:checked) .anim { animation-play-state: paused; }

/* From 600 px the page fills one screen. The banner, cropped around the lettering, takes three
   quarters of the free height up to half the screen; the rest centres the motto. */
@media (min-width: 600px) {
  .page-soon { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
  .page-soon main { flex: 1 0 auto; display: flex; flex-direction: column; }
  .page-soon .hero { position: relative; flex: 3 1 0; min-height: 200px; max-height: 50vh; overflow: hidden; }
  .page-soon .hero-picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .page-soon .intro { flex: 1 0 auto; width: 100%; align-content: center; }
  /* Two lines in every language, so switching language never resizes the banner. */
  .page-soon .intro .lead { min-height: 3em; }
}

/* Pixel equalizer at rest, like the player's volume bars; only the 404 shows it. */
.eq-pixels { display: flex; align-items: flex-end; gap: 3px; height: 40px; margin-top: 28px; }
.eq-pixels i { width: 8px; height: 100%; background: repeating-linear-gradient(to top, var(--strip-accent) 0 5px, transparent 5px 7px); clip-path: inset(86% 0 0 0); }
.eq-pixels i:nth-child(4n) { background: repeating-linear-gradient(to top, #ff8a33 0 5px, transparent 5px 7px); }

.live-dot.anim { animation: blink 1.2s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .15; } }

/* 404: "signal lost". */
.page-404 { min-height: 100vh; display: flex; flex-direction: column; background: var(--strip-bg); }
.page-404 .site-header { background: var(--bg); }
.page-404 main { flex: 1; display: grid; align-items: center; color: var(--strip-text);
  background-image: repeating-linear-gradient(to bottom, rgba(245, 242, 236, .04) 0 1px, transparent 1px 4px); }
.lost { width: 100%; max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter) 72px; }
.lost-code { margin: 0; font-family: Anton, sans-serif; font-style: italic; line-height: .9; letter-spacing: .01em;
  font-size: clamp(120px, 30vw, 280px); color: var(--strip-text);
  text-shadow: -4px 0 0 rgba(255, 45, 85, .85), 4px 0 0 rgba(156, 201, 255, .75); }
.lost .strip-accent { margin: 0 0 24px; }
/* The italic glyphs and their shadow lean past the box; the padding keeps them inside it. */
.lost-code { padding-right: .12em; }
.lost h1 { margin: 22px 0 12px; color: var(--strip-text); }
.lost .lead { color: var(--strip-muted); }
.lost .actions { margin-top: 28px; }
@media (min-width: 900px) {
  .lost { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 72px; align-items: center; }
  .lost > * { grid-column: 2; }
  .lost .lost-code { grid-column: 1; grid-row: 1 / span 5; }
  .lost .strip-accent { margin-bottom: 16px; }
  .lost h1 { margin-top: 0; }
  .lost .eq-pixels { margin-top: 20px; }
}
.page-404 .site-footer { background: var(--strip-bg); }
.page-404 .footer-bottom p { border-top-color: #2a2a30; color: var(--strip-muted); }

@media (prefers-reduced-motion: reduce) {
  .anim { animation: none !important; }
  .motion-input, .motion-input + .ticker-toggle { display: none; }
}