/* ============================================================
   Merge overrides — journey intro + portal sections on one page.
   Load order: portal.css, journey.css, merge.css (this file wins).
   ============================================================ */

/* Journey layers sit under the rail (rail z-index:100) */
canvas#film{z-index:0;}
.grain{z-index:1;}
.scroll-track{position:relative; z-index:2; height:700vh;}
.overlay{z-index:3;}

/* Rail must float above the film */
.rail{z-index:100;}

/* Portal content is opaque and above the fixed canvas */
.portal{position:relative; z-index:4; background:var(--cream, #FFF8EE);}

/* Once the film completes, drop it so the portal owns the screen */
body.journey-done canvas#film,
body.journey-done .grain,
body.journey-done .overlay{opacity:0 !important; visibility:hidden; pointer-events:none; transition:opacity .4s ease;}

/* Keep journey overlays clear of the rail on desktop */
@media (min-width: 721px){
  .overlay-inner{margin-left:calc(var(--rail-w, 224px) + 4vw);}
  .overlay-inner--right{margin-left:auto; margin-right:8vw;}
}

/* Hero jump links replace the old "Venture in" button */
.hero-jumps{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.hero-jumps a{
  display:inline-flex; align-items:center;
  font-family:var(--font-display); font-weight:800; font-size:0.95rem;
  color:#fff; background:var(--amber, #F0913A);
  padding:11px 20px; border-radius:999px; text-decoration:none;
  pointer-events:auto;
  box-shadow:0 8px 20px rgba(217,113,30,0.3);
  transition:transform .18s ease, background .18s ease;
}
.hero-jumps a:hover{transform:translateY(-2px); background:var(--amber-deep, #D9711E);}

/* Anchor target at very top of the film */
.anchor-home{position:absolute; top:0; left:0; width:1px; height:1px;}

/* Grown-ups email capture */
.grownups .email-form{margin-top:2.2rem; max-width:560px;}

/* Blog CTA under news grid */
.news-blog-cta{margin-top:2rem;}

/* Smooth in-page anchor travel (rail + hero jumps) */
html{scroll-behavior:smooth;}

/* ============ FEELINGS — 3 x 8 roster with hover-pop bios ============ */
.roster{max-width:1100px;}
.roster-grid--three{grid-template-columns:repeat(3, 1fr); gap:1.1rem; row-gap:1.3rem;}
.roster-row-label{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:0.55rem;
  font-family:var(--font-display); font-weight:800; font-size:0.95rem;
  margin-top:0.9rem;
}
.roster-row-label:first-child{margin-top:0;}
.roster-row-label .dot{width:12px; height:12px; border-radius:50%; background:var(--fam-color);}
.roster-row-label .hood{color:var(--ink-soft); font-weight:700; font-size:0.82rem;}

.roster-grid--three .roster-card{
  display:block; text-decoration:none; color:inherit;
  padding:1rem 0.95rem 1.1rem;
  overflow:hidden;
}
.roster-grid--three .roster-card:hover,
.roster-grid--three .roster-card:focus-visible{
  transform:translateY(-8px) scale(1.03);
  box-shadow:0 22px 48px rgba(46,36,64,0.22);
  border-color:var(--fam-color);
  z-index:5;
}
.roster-grid--three .roster-card .name{font-size:0.95rem;}
.roster-grid--three .roster-card .intensity-tier{font-size:0.72rem;}

/* bio slides up over the card on hover / focus / touch-tap */
.card-bio{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end; gap:0.6rem;
  padding:1rem 1.05rem 1.05rem;
  background:linear-gradient(to top,
    color-mix(in srgb, var(--fam-color-dark, #2E2440) 94%, black) 0%,
    color-mix(in srgb, var(--fam-color-dark, #2E2440) 82%, transparent) 72%,
    transparent 100%);
  color:#fff;
  opacity:0; transform:translateY(14px);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
  border-radius:inherit;
  text-align:left;
}
.roster-card:hover .card-bio,
.roster-card:focus-visible .card-bio{
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.card-bio-text{
  font-size:0.8rem; line-height:1.45; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden;
}
.card-bio-link{
  font-family:var(--font-display); font-weight:800; font-size:0.8rem;
  color:#fff; text-decoration:underline; text-underline-offset:3px;
}

@media (max-width:720px){
  .roster-grid--three{grid-template-columns:repeat(3, 1fr); gap:0.6rem;}
  .card-bio-text{-webkit-line-clamp:5; font-size:0.68rem;}
}

/* ============ NEIGHBOURHOODS — real imagery ============ */
.world-grid{grid-template-columns:repeat(4, 1fr);}
.world-card--photo{
  padding:0; min-height:0; aspect-ratio:4/3;
  background:var(--fam-color, #444);
}
.world-card-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.world-card--photo::after{display:none;}
.world-card-copy{
  position:relative; z-index:1;
  margin-top:auto; padding:2.2rem 1.1rem 1rem;
  width:100%;
  background:linear-gradient(to top, rgba(20,14,32,0.86) 0%, rgba(20,14,32,0.45) 60%, transparent 100%);
}
.world-card-flavour{
  font-size:0.76rem; line-height:1.4; font-weight:600; color:rgba(255,255,255,0.85);
  margin:0.35rem 0 0;
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .25s ease, max-height .25s ease;
}
.world-card--photo:hover .world-card-flavour{opacity:1; max-height:5em;}
@media (max-width:900px){.world-grid{grid-template-columns:repeat(2, 1fr);}}

/* Reduced-motion: static beats then straight into portal */
body.rm-active .scroll-track{height:auto !important;}
body.rm-active .overlay{display:none;}
body.rm-active canvas#film, body.rm-active .grain, body.rm-active .loader{display:none;}