/* ==========================================================================
   home.css — hero, split plates, style index, roster strip, review wall
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — the black-and-white needle shot is the thesis. It is sized to what
   it holds, not to the viewport, so the page below is visible in the first
   frame instead of being pushed off it.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: min(72svh, 40rem);
  padding-block: clamp(5rem, 16vw, 9rem) clamp(2.5rem, 7vw, 4rem);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Hold the crop high enough that the neon script stays whole, with the
     painted glass below it still in frame. */
  object-position: 50% 24%;
  /* Desaturated, not greyscale: the sign and the glass are the whole point. */
  filter: saturate(0.8) contrast(1.08) brightness(0.8);
}
/* Two scrims: one from the left so the type always has ground under it,
   one from the bottom so the section below continues rather than stopping. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg, rgba(8, 9, 11, 0.96) 0%, rgba(8, 9, 11, 0.86) 42%, rgba(8, 9, 11, 0.46) 100%),
    linear-gradient(to top, var(--ground) 2%, transparent 46%);
}

.hero__inner { display: grid; gap: var(--sp-5); width: 100%; min-width: 0; }
.hero__inner > * { min-width: 0; }

.hero h1 {
  font-size: var(--fs-mega);
  line-height: 0.84;
  letter-spacing: 0.004em;
  max-width: 11ch;
  margin: 0;
}
.hero h1 .line-red { color: var(--red-hi); display: block; }

.hero__sub {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  max-width: 40ch;
  margin-top: var(--sp-2);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.hero__meta {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-4);
  font-family: var(--label); font-size: var(--fs-label);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.hero__meta li { display: flex; align-items: center; gap: 0.6rem; }
.hero__meta li::before {
  content: ""; flex: none;
  width: 6px; height: 6px; background: var(--red); border-radius: var(--r-round);
}

/* --------------------------------------------------------------------------
   Split plate — text against a photograph, alternating side
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.split > * { min-width: 0; }
.split--reverse .split__text { order: 2; }
.split__text { display: grid; gap: var(--sp-4); justify-items: start; }
.split__text h2 { font-size: var(--fs-h2); max-width: 16ch; }
.split__text p { color: var(--ink-2); max-width: 52ch; }
.split__media { aspect-ratio: 4 / 5; border-radius: var(--r-soft); }
.split__media--wide { aspect-ratio: 5 / 4; }

/* Facts list under the studio copy */
.facts { display: grid; gap: 0; margin-top: var(--sp-2); width: 100%; }
.facts li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.facts li:last-child { border-bottom: 1px solid var(--line-soft); }
.facts a {
  display: inline-block;
  padding-block: 0.62rem;
  text-decoration: underline;
  text-decoration-color: var(--red-dim);
  text-underline-offset: 0.2em;
}
.facts a:hover { color: var(--red-hi); }
.facts strong {
  font-family: var(--label); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.28rem;
}

/* --------------------------------------------------------------------------
   Style index — a numbered list because it IS an index, not decoration
   -------------------------------------------------------------------------- */
.style-index { border-top: 1px solid var(--line); }
.style-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: var(--sp-4) var(--sp-5);
  align-items: baseline;
  padding-block: clamp(0.9rem, 2vw, 1.35rem);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.style-row:hover { background: var(--red-faint); padding-left: var(--sp-4); }
.style-row__num {
  font-family: var(--label); font-size: 0.72rem;
  letter-spacing: 0.14em; color: var(--red-hi);
  font-variant-numeric: tabular-nums;
}
.style-row__name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  text-transform: uppercase; line-height: 1;
}
.style-row__note { color: var(--ink-3); font-size: var(--fs-small); text-align: right; }

/* --------------------------------------------------------------------------
   Roster strip — photographs first, names over them
   -------------------------------------------------------------------------- */
.roster-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.4vw, 1rem);
}
.roster-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-soft);
  aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-4);
  min-width: 0;
}
.roster-tile img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transition: filter 700ms var(--ease), transform 800ms var(--ease);
}
.roster-tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8, 9, 11, 0.94) 12%, rgba(8, 9, 11, 0.25) 55%, transparent 100%);
}
.roster-tile:hover img,
.roster-tile:focus-within img { filter: grayscale(0) contrast(1.02); transform: scale(1.05); }
.roster-tile h3 { font-size: 1.05rem; color: var(--ink); }
.roster-tile p {
  font-family: var(--label); font-size: var(--fs-label);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-hi);
  margin-top: 0.2rem;
}
/* Christian's source photo is only 150 x 150; scaling it into a tall tile
   turns it to mush, so that one tile pins the image to the top and lets the
   gradient carry the rest. */
.roster-tile--lowres img { object-position: 50% 18%; image-rendering: auto; }
/* Aly has no page on the studio site yet, so her tile is a panel, not a link. */
.roster-tile--nolink { cursor: default; }

/* --------------------------------------------------------------------------
   Review wall — real text, lifted out of the screenshot images that used to
   hold it. Screenshots of reviews are unreadable to screen readers and to
   search engines, and they cannot be selected or translated.
   -------------------------------------------------------------------------- */
.review-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
.review-wall > :nth-child(2) { margin-top: clamp(1.5rem, 4vw, 3rem); }
.review-wall > :nth-child(3) { margin-top: clamp(0.5rem, 1.6vw, 1.25rem); }

.review {
  display: grid; gap: var(--sp-4);
  padding-left: var(--sp-5);
  border-left: 1px solid var(--red-dim);
  min-width: 0;
}
.review blockquote { margin: 0; color: var(--ink); line-height: 1.65; }
.review figcaption {
  font-family: var(--label); font-size: var(--fs-label);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  line-height: 1.9;
}
.stars {
  display: flex; gap: 0.2rem;
  color: var(--red-hi);
  font-size: 0.9rem; letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 64rem) {
  .roster-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-wall > :nth-child(3) { margin-top: 0; }
}

@media (max-width: 52rem) {
  .split, .split--reverse { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split__text { order: 0; }
  .split__media { aspect-ratio: 16 / 10; }
  .style-row { grid-template-columns: 3rem minmax(0, 1fr); }
  .style-row__note { grid-column: 2; text-align: left; }
}

@media (max-width: 40rem) {
  .hero { min-height: auto; padding-block: clamp(3.5rem, 14vw, 5rem) var(--sp-7); }
  .hero__media img { object-position: 68% 38%; }
  .hero__actions .btn { flex: 1 1 auto; }
  .roster-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-wall { grid-template-columns: minmax(0, 1fr); }
  .review-wall > :nth-child(2) { margin-top: 0; }
  .facts li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}