:root {
  --bg: #13181e;
  --mint: #6fcfa6;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --caution: #f5c518;
  --stripe-tile: 24px;
  --stripe-height: 10px;
}

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

html, body { height: 100%; margin: 0; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Construction tape bands pinned to the top and bottom of the viewport.
   The inner strip overhangs by one tile on each side and shifts by exactly one
   tile per cycle, so the loop is seamless and the speed is the same at any width. */
.stripes {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10;
  height: var(--stripe-height);
  overflow: hidden;
  pointer-events: none;
}

.stripes--top { top: 0; }
.stripes--bottom { bottom: 0; }

.stripes::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--stripe-tile) * -1);
  right: calc(var(--stripe-tile) * -1);
  background-image: linear-gradient(
    45deg,
    var(--caution) 25%, #111 25%, #111 50%,
    var(--caution) 50%, var(--caution) 75%, #111 75%
  );
  background-size: var(--stripe-tile) var(--stripe-tile);
  animation: 1.2s linear infinite stripes-left;
  will-change: transform;
}

.stripes--bottom::before { animation-name: stripes-right; }

@keyframes stripes-left {
  from { transform: translateX(0); }
  to { transform: translateX(calc(var(--stripe-tile) * -1)); }
}

@keyframes stripes-right {
  from { transform: translateX(0); }
  to { transform: translateX(var(--stripe-tile)); }
}

@media (prefers-reduced-motion: reduce) {
  .stripes::before { animation: none; }
}

/* Desktop: the artwork sits on the left, content in the dark space on the right */
.page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(2rem, 5vw, 5rem);
  background-color: var(--bg);
  background-image: url("/.netlify/images?url=/img/background.png&w=1920&fm=webp&q=85");
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}

/* Contrast gradients live on this layer (set per breakpoint) so they stay
   above the pixel-trail canvas and the effect never reduces text contrast */
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Cursor pixel-trail (WebGL, see pixel-trail.js); sits between artwork and text */
.pixel-trail {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.content {
  position: relative;
  z-index: 2;
  width: min(40%, 34rem);
  margin-right: clamp(0rem, 4vw, 6rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  color: var(--mint);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 2px;
  background: var(--mint);
}

h1 {
  margin: 0;
  font-size: clamp(2.75rem, 5.6vw, 5.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

h1 span { color: var(--mint); }

.lede {
  margin: 1.5rem 0 0;
  max-width: 28rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.6;
}

/* Tablet: stretch the image a bit narrower and darken the right side for contrast */
@media (max-width: 1024px) {
  .page {
    background-image: url("/.netlify/images?url=/img/background.png&w=1400&fm=webp&q=85");
    background-position: 30% center;
  }

  .page::before {
    background-image: linear-gradient(90deg, rgba(19, 24, 30, 0) 30%, rgba(19, 24, 30, 0.85) 60%);
  }

  .content {
    width: min(50%, 30rem);
    margin-right: 0;
  }
}

/* Mobile / portrait: artwork fills the top, text sits below on the dark fade */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px) {
  .page {
    align-items: flex-end;
    justify-content: flex-start;
    padding: 2rem 1.5rem 3rem;
    background-image: url("/.netlify/images?url=/img/background.png&w=1200&fm=webp&q=85");
    background-size: auto 70%;
    background-position: 22% top;
  }

  .page::before {
    background-image: linear-gradient(180deg, rgba(19, 24, 30, 0) 30%, rgba(19, 24, 30, 0.9) 58%, var(--bg) 72%);
  }

  .content { width: 100%; max-width: 32rem; }

  .eyebrow { margin-bottom: 1rem; }

  h1 { font-size: clamp(2.4rem, 11vw, 3.6rem); }

  .lede { margin-top: 1rem; }
}