/* Reusable components: image placeholder, THE STORIES grid, waitlist */

/* ---------- Placeholder (until real imagery exists) ---------- */
.ph {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 25%, rgb(207 196 170 / 0.1), transparent 70%),
    linear-gradient(180deg, var(--c-charcoal), var(--c-black));
  border: 1px solid var(--c-line);
}
.ph span {
  font-size: var(--fs-small);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* Placeholder caption: what the slot needs and the file name that fills it */
.ph span {
  padding: 1rem;
  text-align: center;
}
.ph small {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 0.75;
}

/* Status tag (quality band coin) */
.piece__status {
  display: inline-block;
  margin: var(--space-2) 0 0;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--c-line);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-cream);
}

/* ---------- DROP 01 / THE STORIES (Home + Drop 01) ----------
   One editorial grid: 01 opens the chapter with the largest tile, the rest change format around it.
   Phones: 01 large, then two 2-up rows. From 48rem: 01 spans 2x2, 02/03 stack beside it, 05 runs wide under 04.
   Title sits top-left in every tile, so images should keep the top third calm and dark. */
.stories-head .eyebrow {
  margin: 0;
}
.stories-head h2 {
  margin-top: var(--space-1);
}
.stories {
  margin-top: calc(var(--space-4) + var(--space-2)); /* editorial breathing room under THE STORIES */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "a a" "b c" "d e";
  /* tiles share hairlines, like a contact sheet: 1px gap over a line-coloured frame */
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.stories__item--01 { grid-area: a; }
.stories__item--02 { grid-area: b; }
.stories__item--03 { grid-area: c; }
.stories__item--04 { grid-area: d; }
.stories__item--05 { grid-area: e; }
.stories__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 16rem;
  overflow: hidden;
  color: var(--c-text);
  background: var(--c-charcoal);
}
/* The image or placeholder fills the tile; text sits top-left on a dark fade */
.stories__item.stories__item--01 {
  min-height: clamp(24rem, 115vw, 32rem);
}
.stories__media,
.stories__media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stories__media > * {
  aspect-ratio: auto !important;
  object-fit: cover;
}
.stories__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 10 10 / 0.9), rgb(10 10 10 / 0.55) 35%, transparent 70%);
  pointer-events: none;
}
.stories__media .ph {
  place-items: end center;
  border: 0;
}
.stories__body {
  position: relative;
  padding: var(--space-2);
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.6);
}
.stories__num {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--c-cream);
}
.stories__num::after {
  content: "";
  display: block;
  width: 1.5rem;
  margin-top: 0.35rem;
  border-top: 2px solid var(--c-red);
}
.stories__name {
  margin-top: var(--space-1);
  font-size: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  line-height: 1;
}
.stories__item--01 .stories__name {
  font-size: clamp(2.25rem, 1.4rem + 4vw, 4.5rem);
}
.stories__line {
  margin: 0.5rem 0 0;
  max-width: 26rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--c-text-muted);
}
.stories__item--01 .stories__line {
  font-size: 1rem;
}
/* Only tiles that link somewhere react to hover/focus */
a.stories__item .stories__media > * {
  transition: transform var(--t-slow) var(--ease);
}
a.stories__item:hover .stories__media > *,
a.stories__item:focus-visible .stories__media > * {
  transform: scale(1.03);
}

@media (min-width: 48rem) {
  .stories {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "a a b" "a a c" "d e e";
    grid-template-rows: repeat(2, clamp(15rem, 24vw, 20rem)) clamp(14rem, 20vw, 17rem);
  }
  .stories__item,
  .stories__item--01 {
    min-height: 0;
  }
  .stories__body {
    padding: var(--space-3);
  }
}
/* Home: same grid, shorter tiles */
@media (min-width: 48rem) {
  .stories--compact {
    grid-template-rows: repeat(2, clamp(12rem, 18vw, 15rem)) clamp(11rem, 15vw, 13rem);
  }
}
.stories--compact .stories__item.stories__item--01 {
  min-height: clamp(20rem, 95vw, 26rem);
}
@media (min-width: 48rem) {
  .stories__item.stories__item--01 {
    min-height: 0;
  }
  .stories--compact .stories__item.stories__item--01 {
    min-height: 0;
  }
}

/* ---------- Waitlist ---------- */
.join {
  text-align: center;
  border-top: 1px solid var(--c-line);
  background: radial-gradient(60% 80% at 50% 100%, rgb(140 29 29 / 0.14), transparent 70%);
}
.join .inner {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}
.join p {
  color: var(--c-text-muted);
}
.join__closed {
  max-width: 46rem; /* fits the longer Serbian message on one line on desktop */
  margin: 0 0 var(--space-2);
}
.join .form {
  width: 100%;
  max-width: 34rem;
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
}
.join input[type='email'] {
  width: 100%;
  padding: 1rem 1.1rem;
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-line);
  font: inherit;
  border-radius: 0;
}
.join input[type='email']::placeholder {
  color: var(--c-text-muted);
}
.join input[type='email']:focus {
  outline: none;
  border-color: var(--c-cream);
}
.join .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.join .status {
  min-height: 1.5em;
  margin: 0;
  font-size: var(--fs-small);
}
.join .status.is-ok {
  color: var(--c-cream);
}
.join .status.is-err {
  color: #c4574f;
}
@media (min-width: 40rem) {
  .join .form {
    grid-template-columns: 1fr auto;
  }
  .join .status {
    grid-column: 1 / -1;
  }
}

/* Phones: small story tiles get a compact placeholder caption so it clears the title */
@media (max-width: 47.99rem) {
  .stories__item:not(.stories__item--01) .ph span {
    padding: 0.5rem;
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
  }
}

/* Per-image framing: keep each subject clear of the title (retune when an image is replaced).
   Phones: portrait tiles show only a narrow slice, so aim the slice at the fighter.
   From 48rem: crop from the left edge and enlarge from the top-left corner, so the fighter
   moves right and down and the title gets the dark, calm zone on the left. */
.stories__item--02 .stories__media img { object-position: 72% 50%; } /* the-last-round.jpg */
.stories__item--03 .stories__media img { object-position: 68% 50%; } /* no-superpowers.jpg */
@media (min-width: 48rem) {
  .stories__item--02 .stories__media img,
  .stories__item--03 .stories__media img {
    object-position: 0% 50%;
    transform: scale(1.3);
    transform-origin: 0% 0%;
  }
  /* Home tiles are shorter, so they need a slightly larger push */
  .stories--compact .stories__item--02 .stories__media img,
  .stories--compact .stories__item--03 .stories__media img {
    transform: scale(1.45);
  }
}
/* Home tiles are too short for a placeholder caption under the title; the Drop page shows the file names */
.stories--compact .stories__media .ph span {
  display: none;
}
/* 03: push further right so the photo's back print stays a secondary detail beside the title, not under it */
@media (min-width: 48rem) {
  .stories__item--03 .stories__media img {
    transform: scale(1.42);
  }
  .stories--compact .stories__item--03 .stories__media img {
    transform: scale(1.8);
  }
}
/* 04 the-corner.jpg: a wide 2:1 frame, so shifting the crop is enough (no zoom): cornerman and fighter move right of the title */
@media (min-width: 48rem) {
  .stories__item--04 .stories__media img {
    object-position: 35% 50%; /* narrow tablet tile: a smaller shift keeps both figures in frame */
  }
}
@media (min-width: 64rem) {
  .stories__item--04 .stories__media img {
    object-position: 0% 50%;
  }
}
/* 05 after-the-bell.jpg: a very wide frame with the fighter right of centre.
   Desktop needs nothing (the title already sits on the dark left); phones aim the narrow tile at the fighter. */
@media (max-width: 47.99rem) {
  .stories__item--05 .stories__media img {
    object-position: 67% 50%;
  }
}

/* ---------- Waitlist note, privacy page, 404 ---------- */
.join__note {
  margin: 0;
  font-size: var(--fs-small);
}
.join__note a,
.legal-page a {
  color: var(--c-cream);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.legal-page__inner {
  max-width: 40rem;
}
.legal-page h2 {
  margin-top: var(--space-4);
  font-size: var(--fs-h3);
}
.legal-page p {
  margin: var(--space-1) 0 0;
  color: var(--c-text-muted);
}
.not-found {
  min-height: 100svh;
  display: grid;
  align-items: center;
}
.not-found__logo {
  width: 9rem;
  height: auto;
  margin-bottom: var(--space-4);
}
.not-found h1 {
  margin-top: var(--space-1);
}
.not-found p:not(.eyebrow) {
  margin-top: var(--space-2);
  color: var(--c-text-muted);
}
.not-found__ctas {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}