html {
  /* Mobile Safari/Chrome silently boost font-size in text-heavy blocks
     ("text inflation") to make small text more readable - on a site with
     its own responsive clamp()-based sizing that fights the intended sizes
     and makes fonts look inconsistent/different from desktop. Turning it
     off means the sizes set below are what actually render, on every
     device, same as on a PC. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: #000;
  color: #fff;
  overflow-x: hidden;
  overflow-y: auto;
}

.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 0 clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}

.top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: clamp(28px, 6vw, 63px);
  padding-top: clamp(24px, 6vw, 60px);
}
.top-logo {
}
.top-logo-text {
  font-family: "Bitcount";
  font-size: 15px;
}
.top-logo-studio {
  font-family: "Orbitron";
  letter-spacing: 2.52em;
  font-size: 6px;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);

  max-width: 1560px;
  margin: 0 auto;
  width: 100%;
  padding: clamp(16px, 4vw, 40px) 0;

  flex: 1 1 auto;
}
.center-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 362px;
  min-width: 0;
  max-width: 362px;
}
.center-left-image {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  transition:
    box-shadow 0.4s ease,
    transform 0.4s ease;
}
.center-left-image img {
  display: block;
  width: 100%;
}
.center-left-image:hover {
  transform: translateY(-8px);
  box-shadow:
    0 0 40px rgba(219, 30, 30, 0.35),
    0 60px 80px -20px rgba(219, 30, 30, 0.6);
}
.center-left-btn {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  max-width: 208px;
  padding: 11px 28px;
  border-radius: 108px;
  background-color: #000;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 14px;
  position: relative;
  z-index: 100;
}

.center-left-btn img {
  width: 21px;
  height: 21px;
}
/* Sized in JS (scripts.js: layoutStage), not via flex-grow/aspect-ratio.
   This box has no in-flow content (every child is position:absolute), and
   relying on flex-basis/aspect-ratio resolution order for a contentless flex
   item is exactly what kept collapsing to 0x0 in Chrome across two previous
   attempts. Explicit inline pixel width/height from JS sidesteps that
   ambiguity entirely - the width/max-width/height below are just the pre-JS
   fallback so there's no flash of a wrong size, and the ceiling layoutStage
   uses on every screen size (607x464 on desktop, smaller on narrow/stacked
   layouts - see the media queries and scripts.js). flex:0 0 auto means this
   item does not grow/shrink on its own; JS is the sole source of truth. */
.center-center {
  position: relative;
  flex: 0 0 auto;
  width: 607px;
  max-width: min(607px, 100%);
  height: 464px;
}

.watcher-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  /* Scaled up uniformly (same transform on every layer) so look/wink/hide
     stay pixel-aligned - the box itself stays at the Figma-spec 607x464,
     only the visible content is enlarged. Background is black on both the
     page and the source footage, so the small overflow beyond the box
     blends in rather than clipping anything. */
  transform: scale(0.92);
  transform-origin: center center;
}
.watcher-layer.is-active {
  opacity: 1;
}
.watcher-look {
  z-index: 1;
  background-image: url("/img/watcher-sprite.webp?v=7");
  background-repeat: no-repeat;
  /* 10x10 grid of frames: image is 10x the element size in each axis.
     Sheet now also carries the blink sequence (sprite slots 1-14) - Wink
     just steps this same element's background-position instead of
     crossfading to a separate video layer. */
  background-size: 1000% 1000%;
  background-position: 0% 0%;
}
.watcher-hide {
  z-index: 3;
}
/* Same bg_tv footage as the page background, layered again right over the
   sandwich at low opacity - a static/scanline flicker on top of the eye
   itself, like it's being watched through the same screens as everything
   else. Always on (no is-active toggle, unlike the other watcher layers)
   and ignores pointer events, so it never blocks clicks or the hover/track
   behaviour underneath. */
.watcher-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
  opacity: 0.1;
  pointer-events: none;
}
.center-right {
  flex: 1 1 360px;
  min-width: 0;
  max-width: 360px;
  font-family: "Bitcount Grid Single", serif;
  font-size: clamp(16px, 1.8vw + 10px, 24px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0;
}

.center-right span {
  color: #db1e1e;
}
.bottom {
  padding-bottom: clamp(32px, 6vw, 73px);
}
.bottom-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 46px);
  margin-bottom: 32px;
}
.bottom-btns path {
  fill: inherit;
  stroke: inherit;
  transition: fill 0.3s ease;
}
.bottom-wide-btn,
.bottom-hide-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 104px;
  border: 1px solid;
  padding: 10px 28px;
  width: 208px;
  max-width: 100%;
  background-color: transparent;
  cursor: pointer;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 14px;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.bottom-wide-btn {
  color: #fff;
}
.bottom-wide-btn path {
  fill: #fff;
}
.bottom-wide-btn:hover {
  background-color: #fff;
  color: #000;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
}
.bottom-wide-btn:hover path {
  fill: #000;
}

.bottom-hide-btn {
  color: #db1e1e;
}
.bottom-hide-btn path {
  fill: #db1e1e;
}
.bottom-hide-btn:hover {
  background-color: #db1e1e;
  color: #fff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 20px rgba(219, 30, 30, 0.4);
  border-color: #db1e1e;
}
.bottom-hide-btn:hover path {
  fill: #fff;
}
.bottom-hide-btn.is-toggled {
  background-color: #db1e1e;
  color: #fff;
  border-color: #db1e1e;
}
.bottom-hide-btn.is-toggled path {
  fill: #fff;
}
.bottom-btns svg {
  width: 24px;
  height: 24px;
}
.bottom-text {
  text-align: center;
  font-size: clamp(12px, 1.3vw + 8px, 16px);
  font-family: "Bitcount Grid Single", serif;
  max-width: 640px;
  margin: 0 auto;
}
.bottom-text p {
  color: #db1e1e;
}
.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: clamp(20px, 4vw, 32px);
}
.social-links-item {
  display: flex;
  width: 36px;
  height: 36px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.social-links-item img {
  display: block;
  width: 100%;
  height: 100%;
}
.social-links-item:hover {
  transform: translateY(-3px) scale(1.08);
  opacity: 0.85;
}

/* ---------------------------------------------------------------------- */
/*  Responsive: below this the three-column row (left image / eye / right */
/*  text) no longer has room to breathe - .center-left and .center-right  */
/*  don't shrink past their content, so the row would start clipping      */
/*  rather than resizing gracefully. Stack instead. scripts.js mirrors    */
/*  this exact 980px breakpoint (STACK_BREAKPOINT) to switch how it sizes */
/*  the eye stage (see layoutStage), and separately gates cursor-tracking */
/*  on (hover: hover) and (pointer: fine) - there's no cursor to track on */
/*  a touch device, and the eye just stays on its default frame.          */
/* ---------------------------------------------------------------------- */
@media (max-width: 980px) {
  body {
    overflow-y: auto;
  }
  .center {
    flex-direction: column;
    gap: clamp(24px, 6vw, 40px);
    padding: clamp(16px, 5vw, 32px) 0;
  }
  .center-left,
  .center-right {
    flex: 0 0 auto;
    width: 100%;
    max-width: 380px;
  }
  .center-left {
    order: 1;
  }
  .center-right {
    order: -1;
    text-align: center;
  }
  .center-center {
    order: -2;
    max-width: min(420px, 100%);
  }
  /* Wink/Hide don't make sense on mobile (no cursor to aim the eye with in
     the first place - see the pointer:fine gate in scripts.js), so both
     copies stay hidden here; the description text goes right under the
     sandwich instead, ahead of the watcher-banner image/wishlist button. */
  .bottom-btns--desktop {
    display: none;
  }
}

@media (max-width: 480px) {
  .bottom-wide-btn,
  .bottom-hide-btn {
    flex: 1 1 150px;
    padding: 10px 18px;
  }
  .top-logo-text {
    font-size: 13px;
  }
}