/* ==========================================================================
   Cypress Creek TV
   Colors and sizes worth touching are the custom properties in :root below.
   ========================================================================== */

:root {
  --ink: #0a0d0c;          /* page background */
  --paper: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --accent: #e11d18;       /* the red from the show's title card */
  --accent-hot: #ff2a24;
  --line: rgba(255, 255, 255, 0.18);

  --container: 78rem;      /* outer width the content aligns to */
  --column: min(34rem, 37vw);   /* button column — yields room for Jared */
  /* Rendered width of the wordmark. The footer stack borrows it so the Jolt
     Life mark and copyright centre under the logo rather than sitting flush
     left. Deliberately a plain clamp with no var() inside — see the note on
     .figure about nested math. */
  --logo-w: clamp(13rem, 30vw, 24rem);
  --pad: clamp(1.25rem, 4vw, 3rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Hero — stacking order, bottom to top:
   media (0) → vignette (1) → Jared (2) → content (3)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(3rem, 9vh, 6rem) var(--pad) 0;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--ink);
  background-image: image-set(
    url("assets/background.webp") type("image/webp"),
    url("assets/background.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: 62% 30%;
  background-repeat: no-repeat;
}

/* Safari < 17 and older Chrome ignore image-set(); give them the JPEG. */
@supports not (background-image: image-set(url("x.webp") type("image/webp"))) {
  .hero__media { background-image: url("assets/background.jpg"); }
}

/* Darkens the left side for the logo and the bottom for the buttons */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(6, 9, 8, 0.92) 0%, rgba(6, 9, 8, 0.72) 38%, rgba(6, 9, 8, 0.15) 78%, rgba(6, 9, 8, 0.35) 100%),
    linear-gradient(180deg, rgba(6, 9, 8, 0.4) 0%, transparent 26%, rgba(6, 9, 8, 0.55) 78%, rgba(6, 9, 8, 0.9) 100%);
}

.hero__inner,
.footer {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

/* Hugs its content and centres itself with auto margins, rather than
   stretching and centring the content inside. Same result on screen, but it
   makes this box the logo's box — which is what Jared is positioned against. */
.hero__inner {
  flex: 0 0 auto;
  margin-block: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Jared — measured from the logo, bleeding off the right edge
   -------------------------------------------------------------------------- */

/* NOTE ON THE MATH BELOW
   Everything here is deliberately kept to plain values and single-level
   functions. An earlier version nested var()s holding clamp() inside calc()
   and max() — Chrome resolved it, Safari dropped the declarations, and with
   `top` and `right` both invalid he fell back to his static position, sitting
   straight on top of the logo and buttons and spreading further over them as
   the window widened. Widths are stepped with media queries instead. */

.figure {
  position: absolute;
  z-index: -1;          /* behind the logo and buttons, above the backdrop */
  /* Held above the logo's top edge and scaling with it, so the two stay
     together at every size. One clamp, no var(), no calc. */
  top: clamp(-6.9rem, -8.64vw, -3.75rem);
  bottom: auto;
  /* Offset out from this block's right edge, far enough to reach the window
     edge. Three stepped values rather than one expression — see the note
     above. Below 84rem that distance is just the hero's side padding. */
  left: auto;
  right: clamp(-3rem, -4vw, -1.25rem);
  width: 46vw;
  pointer-events: none;
}

/* Height follows the image's own 1300x1731 ratio, so the box hugs him exactly
   and the mask lines up with no aspect-ratio needed. */
.figure img {
  width: 100%;
  height: auto;
  /* Dissolves the waist the cutout ends at, so he tapers off instead of
     terminating on a hard horizontal edge. */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 97%);
}

/* Past 84rem the block stops growing, so the gap out to the window edge starts
   widening and has to be tracked. */
@media (min-width: 84rem) {
  .figure { right: calc(39rem - 50vw); }
}

/* 46vw reaches 40rem at 1392px — cap him there so he stops growing. */
@media (min-width: 87rem) {
  .figure { width: 40rem; }
}

/* Past 100rem he stops chasing the window edge and holds a fixed offset, so he
   stays put relative to the buttons however wide the screen gets. */
@media (min-width: 100rem) {
  .figure { right: -11rem; }
}

/* --------------------------------------------------------------------------
   Logo + rule
   -------------------------------------------------------------------------- */

.logo { margin: 0; }

.logo img,
.logo svg {
  display: block;
  width: var(--logo-w);
  height: auto;
  filter: drop-shadow(0 0.15em 1.75rem rgba(0, 0, 0, 0.7));
}

.rule {
  width: 4.5rem;
  height: 0.375rem;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem);
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.actions {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: var(--column);
}

.btn {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.0625rem 1.375rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  background: rgba(10, 13, 12, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--paper);
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.btn__label {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.btn__sub {
  font-size: 0.8125rem;
  color: var(--muted);
}

.btn:hover,
.btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
}

.btn--primary .btn__sub { color: rgba(255, 255, 255, 0.82); }

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--accent-hot);
  border-color: var(--accent-hot);
}

.btn:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Social row
   -------------------------------------------------------------------------- */

.social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;          /* full tap target around a small glyph */
  border-radius: 0.25rem;
  color: var(--paper);
  opacity: 0.72;
  transition: opacity 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.social svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: currentColor;
  filter: drop-shadow(0 0.1em 0.5rem rgba(0, 0, 0, 0.6));
}

/* Instagram is drawn as outlines, not a filled silhouette. This has to be a
   CSS rule rather than a fill="none" attribute — the rule above would win. */
.social svg.is-stroke {
  fill: none;
  stroke: currentColor;
}

.social a:hover,
.social a:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.social a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  display: flex;            /* keeps the stack hugging its own content width */
  padding: clamp(2.5rem, 7vh, 4rem) 0 clamp(1.5rem, 4vh, 2.25rem);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Jolt Life mark over the copyright line, the pair centred under the logo */
.footer__stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: var(--logo-w);
}

.footer p {
  margin: 0;
  white-space: nowrap;   /* stays one centred line even if it outruns the box */
}

.footer__jolt {
  display: block;
  opacity: 0.72;
  transition: opacity 0.18s ease;
}

.footer__jolt img,
.footer__jolt svg { display: block; width: 6.5rem; height: auto; }

.footer__jolt:hover,
.footer__jolt:focus-visible { opacity: 1; }

.footer__jolt:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Narrow screens — Jared drops behind the content and the scrim gets heavier
   -------------------------------------------------------------------------- */

@media (max-width: 44rem) {
  /* Phones only. There is no room beside full-width buttons, so Jared stops
     being a layout element and becomes part of the backdrop: held to the
     right, faded down, running behind the buttons rather than sitting under
     them. He is out of flow entirely, so he cannot push the page around. */
  body { --column: 100%; }

  /* Placed so his head crests above the logo and his whole face lands in the
     clear band between the logo and the SHOP button. At this width his
     silhouette never reaches back into the logo's column, so the two never
     crowd each other. --logo-w is a flat 13rem down here, so the lift is a
     plain value rather than a fraction of it. */
  .figure {
    top: -2.75rem;
    width: 73vw;
    /* 20px is the hero's side padding at phone widths (the clamp floor), so
       this puts his right edge 24vw past the window edge. */
    right: calc(-24vw - 20px);
  }

  /* He no longer fills the leftover space, so the footer needs pushing down */
  .footer {
    margin-top: auto;
    justify-content: center;   /* Jolt Life mark + copyright centred on phones */
  }

  .figure img {
    /* Dissolves him downward into the buttons, so the waist the cutout ends
       at is never a visible edge. */
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 50%, transparent 96%);
  }

  /* Content sits at the top on phones; the footer's auto margin takes the slack */
  .hero__inner { margin-block: 0; }

  /* He sits behind the buttons at full strength now, so they have to be near
     solid or his jacket reads straight through them. No blur either — it
     smears him into a frosted smudge behind the text. */
  .btn {
    background: rgba(10, 13, 12, 0.88);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .btn--primary { background: var(--accent); }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(6, 9, 8, 0.55) 0%, rgba(6, 9, 8, 0.3) 22%, rgba(6, 9, 8, 0.82) 62%, rgba(6, 9, 8, 0.95) 100%);
  }

  .actions { max-width: none; }
}

/* Smallest phones. The logo has a minimum width, so on a 320px screen it eats
   most of the row — he steps back a little further to stay clear of it. */
@media (max-width: 22.5rem) {
  .figure { width: 66vw; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}