/* meatpuck.com v1 TEASER (Red 5c14850febaf; roadmap ROADMAP.md): only Meatpuck, in shadow. Phone first.
   Master palette (brand starter kit). Tagline font: Teko Medium 500, self-hosted (SIL OFL 1.1, see assets/fonts/OFL-Teko.txt); no third-party loads. */
@font-face { font-family: "Teko HL"; src: url("/assets/fonts/teko-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+2013-2014, U+2018-2019, U+201C-201D, U+2026; }
:root {
  --navy: #0E1A26; --teal: #1F3B4B; --red: #D43D2B; --orange: #F27C2C; --gold: #F6C55C; --cream: #EEDFC3;
  --display: Impact, "Haettenschweiler", "Arial Narrow Bold", "Franklin Gothic Bold", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark; background: var(--navy);
}
/* Contrast (WCAG): cream on navy 13.4; cream on Meat Red 3.9 (display size only); gold on navy 10.9. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--navy); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--navy); color: var(--cream); font: 400 1rem/1.5 var(--body); }

/* the stage: full height, art as the background, copy layered on top */
.stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: max(5vh, 1.5rem) max(16px, env(safe-area-inset-left, 0px)) 0 max(16px, env(safe-area-inset-right, 0px)); }
/* phone: the art follows the copy in the flow at its own 2:3 shape (full width), pulled up so the top of the goggles
   (23.4% down the art) sits about 12px below the swoosh (10.2% above the wordmark's bottom); the wordmark is
   min(100vw - 32px, 30rem) wide at 440/1200 (Red 75f2cdd7d09a, 9f9532a43730). The whole figure, smoke included,
   stays in the first screen; the art's empty bottom 9vw is trimmed. */
.bg { position: relative; z-index: -2; flex: none; align-self: stretch; aspect-ratio: 2 / 3;
  margin-top: calc(13px - 35.1vw - 0.0375 * min(100vw - 32px, 30rem)); margin-bottom: -9vw;
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 86%, transparent 99%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 86%, transparent 99%); }
.bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg img { object-fit: cover; object-position: 50% 0%; animation: breathe 7s ease-in-out infinite; }
/* soft dark wash at the top so the wordmark reads over the haze */
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(14,26,38,.85) 0%, rgba(14,26,38,0) 32%, rgba(14,26,38,0) 78%, rgba(14,26,38,.9) 100%); }
@keyframes breathe { 0%, 100% { filter: brightness(.88) saturate(.95); } 50% { filter: brightness(1.06) saturate(1.08); } }

.copy { width: 100%; max-width: 34rem; text-align: center; display: grid; gap: .5rem; order: -1; }
h1 { margin: 0; }
.wordmark { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; filter: drop-shadow(0 4px 18px rgba(0,0,0,.6)); }
.tagline { margin: 0; font: 500 clamp(1.6rem, 8vw, 2.6rem)/1 "Teko HL", var(--display); color: var(--cream);
  text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 2px 10px rgba(0,0,0,.85); text-wrap: balance; }
/* phone: the line sits ABOVE the wordmark so it stays clear of the hero (Red e9fc1a4068b0); wide screens: below */
.tagline { order: -1; }

/* wide screens: the wide art (figure on the left), copy on the right */
@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  .stage { flex-direction: row; justify-content: flex-end; align-items: center; padding-right: 6vw; padding-bottom: 2rem; gap: 0; }
  .bg { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
  .bg img { object-position: 30% 50%; }
  .stage::before { background: linear-gradient(to left, rgba(14,26,38,.7) 0%, rgba(14,26,38,0) 55%); }
  .copy { max-width: 36rem; text-align: right; }
  .wordmark { margin: 0 0 0 auto; }
  .tagline { order: 0; }
}

@media (prefers-reduced-motion: reduce) { .bg img { animation: none; filter: none; } }