/* =========================================================
   HOW NOT TO BE A ROCKSTAR — public one-pager
   Public-only components. Loads AFTER epk.css and reuses its
   design system (tokens, .epk-section, .epk-h2, .epk-feature,
   .epk-divider, .epk-brands marquee, .epk-cast, contact form).
   ========================================================= */

/* ---------- Scroll hero ---------- */
/* Un-pinned hero: a normal 100vh section that scrolls away. The fist rises via a
   non-pinned parallax (see site.js) so the page never gets held up scrolling. */
.hero-scene { position: relative; height: auto; background: #423b30; }
.hero-stage { position: relative; height: 100vh; overflow: hidden; }
.hero-layer { position: absolute; will-change: transform; }
.hero-bg { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-toptext { position: absolute; top: 4.5vh; left: 0; right: 0; text-align: center; z-index: 8; padding: 0 1rem; }
.hero-tag { font-family: var(--font-display); color: var(--acid); text-transform: uppercase;
  font-size: clamp(16px, 2.6vw, 32px); transform: skewX(-6deg); text-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3); line-height: 0.95; }
.hero-sub {
  font-family: var(--font-accent);
  font-size: clamp(8px, 1vw, 11px);
  letter-spacing: 0.12em;
  margin-top: 12px;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.hero-sub span {
  background: var(--acid);
  color: var(--ink);
  padding: 3px 8px;
  font-weight: 700;
  border: 1px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: skewX(-4deg);
  display: inline-block;
}
.hero-title { position: absolute; top: calc(4.5vh + 7.5rem); left: 0; right: 0; text-align: center; z-index: 2; font-family: var(--font-display);
  color: var(--acid); text-transform: uppercase; line-height: 0.93; text-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.35); }
.hero-title .l1 { display: block; font-size: clamp(42px, 8.6vw, 120px); }
.hero-title .l2 { display: block; font-size: clamp(68px, 16vw, 216px); }
/* 3-layer sandwich anchored to the TV's own size (not the viewport) so it holds
   at any aspect ratio. tvbottom is the in-flow sizer; tvtop sits behind it (same
   canvas, exact overlap); the arm is sandwiched between. All inner offsets are %
   of the group, which scales with --tvw. --arm-x shifts the arm left onto the
   off-center shattered hole; the wrapper owns horizontal, GSAP only the vertical. */
/* TV sized by width AND height (82vh cap), so on a wide/short window the TV
   doesn't hit the 940px cap and crowd the fist up into the title. Keeps the
   fist sitting cleanly below the title across aspect ratios. */
.hero-scene { --tvw: min(940px, 78vw, 82vh); --arm-x: -28%; }
/* clip-path open at the top (-100vh) but cut at the group's bottom edge: the fist
   overflows upward freely, while the extended forearm tube below the TV is hidden
   (it would otherwise show as a "pedestal" when the TV is lifted up on mobile). */
.hero-tv-group { position: absolute; z-index: 3; left: 50%; bottom: -3%; width: var(--tvw); transform: translateX(-50%);
  clip-path: inset(-100vh 0 0 0); }
.hero-tv-group .hero-tvbottom { position: relative; display: block; width: 100%; z-index: 8; }
.hero-tv-group .hero-tvtop { position: absolute; left: 0; top: 0; width: 100%; z-index: 3; }
.hero-tv-group .hero-tv-screen {
  position: absolute;
  left: 11.96%;
  top: 8.87%;
  width: 59.78%;
  height: 54.72%;
  object-fit: cover;
  z-index: 1;
  background: #000;
  filter: brightness(0.9) contrast(1.06) saturate(1.06);
}
.hero-tv-group .hero-tvhole {
  position: absolute;
  left: 11.96%;
  top: 8.87%;
  width: 59.78%;
  height: 54.72%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(42% 40% at 47% 44%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.32) 45%, rgba(0,0,0,0) 72%);
}
.hero-tv-group .hero-tvshatter-back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 3;
  clip-path: inset(0 0 65% 0);
}
.hero-arm-wrap { position: absolute; z-index: 4; left: 50%; bottom: -12%; width: 71.1%;
  transform: translateX(calc(-50% + var(--arm-x))); will-change: transform; }
.hero-tv-group .hero-tv-screen--front {
  z-index: 5;
  clip-path: polygon(0% 51%, 5% 45%, 9% 53%, 13% 43%, 17% 50%, 21% 39%, 25% 47%, 28% 54%,
    32% 44%, 36% 51%, 39% 40%, 43% 48%, 47% 41%, 50% 50%, 53% 42%, 57% 38%,
    61% 49%, 65% 42%, 69% 52%, 73% 44%, 77% 50%, 81% 40%, 85% 48%, 89% 43%,
    93% 51%, 97% 44%, 100% 49%, 100% 100%, 0% 100%);
}
.hero-tv-group .hero-tvcontact {
  position: absolute;
  left: 11.96%;
  top: 8.87%;
  width: 59.78%;
  height: 54.72%;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(36% 24% at 47% 42%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.28) 52%, rgba(0,0,0,0) 80%);
}
.hero-tv-group .hero-tvshatter-front {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 7;
  clip-path: inset(35% 0 0 0);
}
.hero-arm-wrap img {
  width: 100%;
  display: block;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  contain: paint;
  will-change: transform;
}
/* Mobile (portrait): the arm is too short to connect a top title to a bottom TV
   on a tall screen, so we (1) pin the TV to the bottom (no dead space below),
   (2) push the fist higher above the TV so it still punches the title, (3) go
   big on title + tagline to fill the upper half, (4) drop the subtitle. */
/* Compact STATIC hero for phones (portrait) and short/landscape viewports.
   Drops the 300vh scroll-pin (which felt sparse and dead-ended) for a poster
   that's a bit shorter than the viewport, so the next section peeks. The JS
   skips the scroll timeline under these same conditions. */
@media (max-width: 768px), (max-height: 600px) {
  .hero-scene { height: auto; }
  /* position:relative (not static) so the stage stays the containing block for
     the absolute layers — its overflow:hidden then clips the 112vw TV and kills
     the stray horizontal scroll. relative still removes the sticky pin. */
  .hero-stage { position: relative; height: 86vh; overflow: hidden; }
  .hero-tv-group { bottom: -2%; }
  .hero-arm-wrap { bottom: 14%; }
  .hero-tag span { display: block; }
  /* keep the doc context ("The Joe Cerisano Story") on mobile, drop the longer
     director credit so the line stays compact */
  .hero-sub span.hero-sub__dir { display: none; }
  .hero-sub { font-size: clamp(10px, 2.9vw, 14px); margin-top: 6px; }
  .hero-cue { display: none; }
}
/* Portrait phones: TV sized by width, big readable title. The fist starts
   lower (arm-wrap -100%) so it rises into the title without burying it. */
@media (max-width: 768px) {
  .hero-scene { --tvw: 112vw; }
  .hero-stage { height: 80vh; }
  .hero-arm-wrap { bottom: -1%; }
  .hero-toptext { top: 3.5vh; }
  .hero-tag { font-size: clamp(14px, 4.3vw, 28px); line-height: 1.15; }
  .hero-title { top: calc(3.5vh + 6.2rem); }
  .hero-title .l1 { font-size: 11vw; }
  .hero-title .l2 { font-size: 20vw; }
}
/* Short / landscape viewports: TV sized by HEIGHT so it fits the short screen
   instead of the width-driven desktop TV blowing up huge. */
@media (max-height: 600px) {
  .hero-scene { --tvw: min(48vw, 115vh); }
  .hero-stage { height: 94vh; }
  .hero-toptext { top: 2.5vh; }
  .hero-tag { font-size: clamp(13px, 3.4vh, 22px); line-height: 1.1; }
  .hero-title { top: calc(2.5vh + 5.5rem); }
  .hero-title .l1 { font-size: 7.5vh; }
  .hero-title .l2 { font-size: 13.5vh; }
}
.hero-cue { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; z-index: 9;
  font-family: var(--font-accent); font-size: 10px; letter-spacing: 0.2em; color: #efe6cf; text-transform: uppercase; opacity: 0.85;
  animation: bounceCue 2.2s infinite ease-in-out; }

@keyframes bounceCue {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---------- Jingle TV strip (story motif) ---------- */
.tvstrip { display: flex; gap: 14px; overflow-x: auto; padding: 0.5rem 0 1rem; scroll-snap-type: x mandatory; }
.tvstrip::-webkit-scrollbar { height: 6px; }
.tvstrip::-webkit-scrollbar-thumb { background: var(--ink); }
.tvstrip__item { flex: 0 0 auto; width: clamp(220px, 30vw, 340px); border: 3px solid var(--ink); scroll-snap-align: start; background: #000; }
.tvstrip__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

/* ---------- Gallery ---------- */
.site-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.site-gallery figure { position: relative; margin: 0; cursor: pointer; overflow: hidden; border: 3px solid var(--ink); background: #000; }
.site-gallery img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform 0.5s ease; display: block; }
.site-gallery figure:hover img { transform: scale(1.06); }
.site-gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  font-family: var(--font-accent); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bone); padding: 1.7rem 0.7rem 0.55rem;
  background: linear-gradient(transparent, rgba(20,16,14,0.82)); }

/* ---------- Act labels (broadcast-slate eyebrows on the story acts) ---------- */
.act-label { font-family: var(--font-accent); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 0.7rem; display: inline-flex; align-items: center; gap: 0.55rem; }
.act-label::before { content: ''; width: 26px; height: 2px; background: var(--ink); display: inline-block; }


/* ---------- Footer ---------- */
.site-foot { background: var(--panel); color: var(--bone); text-align: center; padding: 3rem 1rem;
  font-family: var(--font-accent); font-size: 0.78rem; letter-spacing: 0.05em; }
.site-foot p { margin: 0.25rem 0; opacity: 0.85; }
.site-foot a { color: var(--acid); }

/* nav offset for in-page anchors */
section[id] { scroll-margin-top: 70px; }

/* Brand-wall thesis: lift the "Voices you know / Names you don't"
   punchline out of the lead sentence into its own acid kicker so it lands
   as a beat instead of getting skimmed past. */
.epk-brands__lead { margin-bottom: 0.9rem; }
.epk-brands__kicker {
  margin: 0 auto 2.2rem;
  max-width: 24ch;
  color: var(--acid);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  transform: skewX(-5deg);
}

/* ---- Frontman section: interwoven text + photo mosaic ----
   Lives inside .rock-proof (dark panel). Replaces the old two-column
   copy/media split with a 4-col grid that weaves the copy through the
   archival photos. Concept: the past is black-and-white, the one color
   photo is Joe now. */
.fm-mosaic {
  width: min(1180px, calc(100% - (var(--pad, 1.5rem) * 2)));
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto 1fr 1fr auto;
  grid-template-areas:
    "head  head  child vest"
    "copy  copy  condor vest"
    "now   now   condor close"
    "now   now   cred   cred"
    "btn   btn   cred   cred";
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
  min-height: clamp(550px, 50vw, 750px);
}
.fm-head { grid-area: head; align-self: center; }
.fm-copy { grid-area: copy; align-self: center; }
.fm-cred { grid-area: cred; align-self: center; }
.fm-btn  { 
  grid-area: btn; 
  align-self: center; 
  border-left: 4px solid var(--acid); 
  padding-left: 1.2rem; 
  margin-left: 0.2rem;
}

.rock-proof h2.fm-h2 {
  margin: 0;
  max-width: 25ch;
  color: var(--bone);
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
}
.rock-proof h2.fm-h2 .keep {
  color: var(--acid);
  display: inline-block;
}

.fm-copy p,
.fm-cred p { margin: 0 0 0.9rem; max-width: 42rem; color: rgba(239,233,218,0.92); font-size: clamp(1rem, 1.2vw, 1.12rem); }
.fm-copy__inline { display: none; }
.fm-copy p:last-child { margin-bottom: 0; }
.fm-cred p { margin: 0; color: rgba(239,233,218,0.74); font-size: clamp(1rem, 1.2vw, 1.12rem); }
.fm-cred strong { color: var(--bone); }
.fm-btn p {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--bone);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: 0.05em;
  transform: skewX(-5deg);
}

.fm-photo {
  position: relative;
  margin: 0;
  background: #050505;
  border: 4px solid var(--bone);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  overflow: hidden;
}
.fm-photo img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) saturate(0.92); display: block; }

.p-condor { grid-area: condor; }
.p-condor img { object-position: 50% 40%; }
.p-close  { grid-area: close; }
.p-close img { object-position: 50% 24%; }
.p-child  { grid-area: child; }
.p-child img { object-fit: cover; object-position: center; }
.p-vest   { grid-area: vest; }
.p-vest img { object-position: 50% 20%; }
.p-now    { grid-area: now; }
.p-now img { object-position: 50% 42%; }

@media (max-width: 860px) {
  .fm-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "head   head"
      "copy   copy"
      "cred   cred"
      "condor close"
      "now    now"
      "btn    btn";
    min-height: 0;
  }
  /* child + vest move inline between the copy paragraphs on mobile */
  .p-child, .p-vest { display: none; }
  .fm-copy__inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin: 1.1rem 0;
  }
  .fm-copy__inline .fm-photo img { height: auto; }
  .p-condor, .p-close { aspect-ratio: 0.78; }
  .p-now { aspect-ratio: 1.55; }
  .rock-proof h2.fm-h2 { max-width: 100%; }
  /* payoff line: single centered line on mobile (no forced break) */
  .fm-btn__br { display: none; }
  .fm-btn p { text-align: center; white-space: nowrap; font-size: clamp(1.2rem, 4.8vw, 1.7rem); }
}

@media (max-width: 500px) {
  .fm-btn__br { display: block; }
  .fm-btn p {
    white-space: normal;
    text-align: left;
    font-size: clamp(1.3rem, 5.2vw, 1.6rem);
    line-height: 1.2;
  }
}

/* ---------- Legacy / Three Joe Lineage inside Story ---------- */
.story-legacy {
  border-top: 2px dashed var(--line);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.story-legacy__title {
  font-family: var(--font-accent);
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin-bottom: 0.6rem;
  text-align: center;
}
.story-legacy__text {
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  color: var(--ink-soft);
  max-width: 68ch;
  margin: 0 auto 2rem;
  text-align: center;
  line-height: 1.65;
}
.story-legacy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2.2rem);
  max-width: 740px;
  margin: 0 auto;
}
.story-legacy__card {
  position: relative;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.story-legacy__photo {
  margin: 0;
  border: 3px solid var(--ink);
  background: var(--ink);
  box-shadow: 6px 6px 0 rgba(33, 29, 27, 0.12);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.story-legacy__photo img {
  width: 100%;
  aspect-ratio: 1 / 1.15;
  object-fit: cover;
  display: block;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Custom crops to zoom past blank scanner/album margins and center faces */
.story-legacy__card:nth-child(1) .story-legacy__photo img {
  transform: scale(1.36) translateY(-2%); /* Grandfather: crop black album border and center up */
}
.story-legacy__card:nth-child(2) .story-legacy__photo img {
  transform: scale(1.28); /* Father: crop white border */
}
.story-legacy__card:nth-child(3) .story-legacy__photo img {
  transform: scale(1.18); /* Son: crop white border */
}

.story-legacy__label {
  margin-top: 1rem;
  text-align: center;
}
.story-legacy__label h4 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 0.15rem;
  letter-spacing: 0.02em;
}
.story-legacy__label p {
  font-family: var(--font-accent);
  font-size: clamp(0.64rem, 1vw, 0.76rem);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin: 0;
}


/* Responsive Breakpoints */
@media (max-width: 768px) {
  .story-legacy__grid {
    gap: 0.7rem;
  }
  .story-legacy__label {
    margin-top: 0.55rem;
  }
  .story-legacy__label h4 {
    font-size: 0.85rem;
  }
  .story-legacy__label p {
    font-size: 0.7rem;
  }
}