/* Stacey Vanthuyne - home page sheet, loaded after r3.css (James chose the dark hero, 2026-10-06).
   Hero: her studio photograph stands on the guide site's ink (#211E1A), the allowed value closest to its backdrop.
   Only the photograph's own backdrop is blended into the ground, at its outer edges; nothing fades over her.
   Alcatraz: Quin's order over a photo of the island. Everything else on the page is the shared R3 system. */

.hero-dark{background:var(--ink-2);color:var(--on-dark)}
.hero-dark h1{color:var(--cream)}
.hero-dark .lead{color:var(--on-dark);max-width:38ch}   /* stops short of her dress at every width */
.hero-dark .hero-actions{margin-top:2.2rem}

/* her title, set as a title rather than as one more section label */
.hero-title{font:500 1.125rem/1.4 var(--label);letter-spacing:.04em;color:var(--gold-l);margin:0 0 1.4rem;max-width:none}
.hero .hero-title{color:var(--gold-l)}   /* beats ".dark p": the eyebrow on a dark ground is gold (Baley's design contract) */

/* the three lines: in the copy column until there is room for their own column at the right */
.hero-stack{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;font:italic 500 1.375rem/1.35 var(--display);color:var(--on-dark)}   /* the tagline, set as in the footer */
.js .hero-stack{animation:fade-in 700ms var(--ease-out) 640ms both}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* the scroll cue: a short gold line and one word, wide screens only */
.scroll-cue{display:none}

@media (min-width:901px){
  .hero-dark .hero-photo{width:46%}
  .hero-dark .hero-photo img{object-position:65% 18%}
  .hero-dark .hero-photo::before{width:20%;background:linear-gradient(90deg,var(--ink-2) 0%,rgba(33,30,26,0) 100%)}
  /* on tall screens she stops growing at the size she has on a 1080p screen; her outfit's own dark runs into the ground */
  .home .hero-dark .hero-photo{bottom:auto;height:min(100%,1080px)}
  .home .hero-dark .hero-photo img{-webkit-mask-image:linear-gradient(180deg,var(--ink) 84%,transparent 100%);mask-image:linear-gradient(180deg,var(--ink) 84%,transparent 100%)}
}

/* wide screens: the photograph moves in from the edge and the three lines get their own column */
@media (min-width:1240px){
  .hero-dark .hero-photo{width:38vw;right:calc(max(var(--gutter),(100% - 1240px) / 2) + 12rem + 1.5rem)}
  .hero-dark .hero-photo::after{content:"";position:absolute;top:0;bottom:0;right:0;width:10%;background:linear-gradient(270deg,var(--ink-2) 0%,rgba(33,30,26,0) 100%);z-index:1;pointer-events:none}
  .hero-stack{position:absolute;z-index:2;right:max(var(--gutter),calc((100% - 1240px) / 2));top:50%;transform:translateY(-50%);display:block;width:12rem;margin:0;padding-top:1.2rem;border-top:1px solid var(--gold)}
  .hero-stack li{margin:0 0 .9rem}
  .scroll-cue{position:absolute;z-index:2;bottom:clamp(20px,2.4vw,32px);left:max(var(--gutter),calc((100% - 1240px)/2));display:flex;align-items:center;gap:.85rem;font:500 1rem/1 var(--label);letter-spacing:.03em;color:var(--on-dark-2);text-decoration:none;padding:.4rem 0;transition:color var(--fast) var(--ease-io)}
  .scroll-cue::before{content:"";width:1px;height:40px;background:linear-gradient(180deg,var(--gold-l) 0%,var(--gold) 100%)}
  .scroll-cue:hover{color:var(--cream)}
  .js .scroll-cue{animation:fade-in 700ms var(--ease-out) 760ms both}
}

/* phones and tablets: photograph on top with a clean edge, copy below on the same ground */
@media (max-width:900px){
  .hero-dark .hero-photo img{object-position:50% 16%}
}
@media (max-width:640px){
  .hero-dark .hero-photo::after{display:none}
  .hero-dark .hero-copy{margin-top:0;padding-top:28px}
  .hero-title{font-size:1rem;letter-spacing:.02em;margin-bottom:1rem}   /* one line at phone width */
  .hero-dark .hero-stack{margin-top:1.6rem;gap:.3rem 1.4rem}
}

/* the shared dark top (r3.css) starts bright photographs under the header; hers runs up behind it */
@media (min-width:901px){
  .home .hero-dark .hero-photo{top:0}
}

/* ======================================================================
   ALCATRAZ in Quin's order: the island is the photograph, the feat leads,
   the belief lands last, her own words on the right. The scrim is a tint of
   the section ink so the cream type holds on the grey bay sky.
   ====================================================================== */
.race-island .race-photo img{object-position:60% 55%}   /* the sunset at full warmth: this one has to make you want to do it */
.race-island h2{font-size:clamp(2.2rem,3.1vw,2.75rem);line-height:1.15;margin:0;max-width:none;text-wrap:balance}
.race-island .legs{margin:1.8rem 0 1.8rem}
.race-island .legs b{font-size:clamp(2.6rem,4vw,3.6rem);letter-spacing:-.02em}
.race-island .facts{margin:0 0 .5rem;max-width:none}
.race-island .bike{font:italic 500 clamp(1.35rem,1.9vw,1.6rem)/1.35 var(--display);color:var(--cream);margin:0}
.race-island .belief{font:italic 500 clamp(1.5rem,2.1vw,1.85rem)/1.35 var(--display);color:var(--cream);margin:1.8rem 0 0;max-width:none}
.race-island .belief span{display:block}   /* two lines, as written */
.race-island .belief::before{content:"";display:block;width:2.75rem;height:2px;background:var(--gold);margin-bottom:1.4rem}
.race-island .race-quote{margin:2.4rem 0 0;max-width:22ch}
.race-island .race-quote cite::before{content:"";display:inline-block;width:1.6rem;height:1px;background:var(--gold);vertical-align:middle;margin-right:.75rem}

@media (min-width:901px){
  /* the words sit on the darker water and sky at the left; the quote gets its own soft shade at the top right, and the sun stays bright */
  /* Layers paint first-on-top. The foot dissolve is FIRST, so nothing (the left text shade included) can paint over
     it: the whole width eases into the Meet band's exact brown, rgb(45,37,31), across the last 45% (no seam). */
  .race-island .race-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:
    linear-gradient(180deg,rgba(45,37,31,0) 55%,rgba(45,37,31,.03) 61%,rgba(45,37,31,.1) 67%,rgba(45,37,31,.22) 73%,rgba(45,37,31,.38) 79%,rgba(45,37,31,.57) 85%,rgba(45,37,31,.74) 90%,rgba(45,37,31,.87) 94%,rgba(45,37,31,.95) 97%,rgb(45,37,31) 100%),
    linear-gradient(90deg,rgba(20,18,16,.86) 0%,rgba(20,18,16,.66) 30%,rgba(20,18,16,.2) 52%,rgba(20,18,16,0) 64%),
    radial-gradient(ellipse 34% 30% at 88% 16%,rgba(20,18,16,.62) 0%,rgba(20,18,16,.3) 55%,rgba(20,18,16,0) 100%),
    linear-gradient(180deg,rgba(20,18,16,.25) 0%,rgba(20,18,16,0) 30%)}
  .race-island .race-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:start}
  .race-island .race-copy{width:auto;max-width:34rem}
  .race-island h2 span{display:block}   /* the feat on two lines: who and when, then the race */
  .race-island .race-quote{justify-self:end;text-align:right;margin:0;padding-top:var(--sec)}
}
@media (max-width:900px){
  .race-island .race-photo{height:56.25vw;max-height:520px}   /* the photograph's own 16:9, so the island is never trimmed */
  .race-island .race-photo img{object-position:68% 50%}
  .race-island .race-quote{padding-bottom:var(--sec)}
  .race-island .race-copy{padding-bottom:0}
}

/* the belief chain heading: one sentence per line, as written */
#chain-h span{display:block}

/* Meet Stacey (James, 2026-10-07): her seated studio portrait, moved up from the close, on its own warm brown.
   The photograph keeps its 16:9 at the band's width and sits on the band's floor; if the copy makes the band
   taller, the extra height is the same brown above her, faded in, so she is never scaled into the copy and
   never trimmed (keen-eye K1). The ground is the backdrop's own colour (a copper tint over the ink). */
.meet-band{position:relative;display:flex;align-items:center;aspect-ratio:16/9;background:linear-gradient(rgba(193,127,89,.075),rgba(193,127,89,.075)),var(--ink-2)}
.meet-band-photo{position:absolute;left:0;right:0;bottom:0;margin:0}
.meet-band-photo img{display:block;width:100%;height:auto}
.meet-band-photo::before{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(rgb(45,37,31) 0%,rgba(45,37,31,.6) 40%,rgba(45,37,31,.18) 75%,rgba(45,37,31,0) 100%)}
.meet-band .wrap{position:relative;z-index:1}
.meet-band-copy{margin-left:auto;width:min(560px,46%);padding:var(--sec) 0}
.meet-band .roles{margin:1.4rem 0 2rem}
.meet-band .text-link{color:var(--cream)}
.meet-band .text-link:hover{color:var(--gold-l)}
@media (max-width:900px){
  .meet-band{display:block;aspect-ratio:auto;padding:0 0 var(--sec)}
  .meet-band-photo{position:relative;height:min(100vw,560px)}
  .meet-band-photo img{height:100%;object-fit:cover;object-position:4% 50%}
  .meet-band-photo::before{height:90px;z-index:1;background:linear-gradient(var(--ink-2) 0%,rgba(33,30,26,.55) 45%,rgba(33,30,26,0) 100%)}   /* out of Alcatraz's ink into her backdrop */
  .meet-band-copy{width:auto;margin:0;padding:clamp(32px,6vw,48px) 0 0}
  .meet-band-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(45,37,31,0) 0%,rgba(45,37,31,.12) 25%,rgba(45,37,31,.38) 50%,rgba(45,37,31,.7) 74%,rgba(45,37,31,.92) 90%,rgb(45,37,31) 100%)}   /* her dress dissolves into the band, no cut line */
}

/* ======================================================================
   SOUND FAMILIAR (James's mockup, 2026-10-06): the copy on the cream ground, the A More Alive You photograph
   running off the right edge. The pattern line and her six lines light up as you read (word fill, r3.js).
   ====================================================================== */
.familiar{position:relative;overflow:hidden;background:var(--cream)}
.familiar-photo{position:absolute;top:0;right:0;bottom:0;width:52%;margin:0}
.familiar-photo img{width:100%;height:100%;object-fit:cover;object-position:4% 64%}   /* the mug's handle sits 4% in from the left: keep it, crop from the window side */
@media (min-width:1024px){
  .familiar-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;pointer-events:none;background:linear-gradient(180deg,rgba(20,18,16,0) 0%,rgba(20,18,16,.14) 25%,rgba(20,18,16,.42) 52%,rgba(20,18,16,.74) 76%,rgba(20,18,16,.93) 91%,var(--ink) 100%)}   /* K15: the desk melts into the chain section's near-black below */
}
.familiar .wrap{position:relative;z-index:1}
.familiar-copy{width:min(560px,44%);padding:var(--sec) 0}
.familiar h2{margin:0 0 1.3rem}
.familiar-pattern{margin:0 0 2.4rem;max-width:26ch;text-wrap:balance;font:italic 500 clamp(1.6rem,2.3vw,2.2rem)/1.3 var(--display);color:var(--ink-text)}
.familiar-lines{list-style:none;margin:0 0 2.4rem;padding:0;border-top:1px solid var(--line)}
.familiar-lines li{padding:.8rem 0;border-bottom:1px solid var(--line);max-width:none;font:500 clamp(1.3rem,1.65vw,1.5rem)/1.35 var(--display);color:var(--ink-text)}
.familiar-close{margin:0;max-width:none;font:italic 500 clamp(1.5rem,2vw,1.8rem)/1.4 var(--display);color:var(--ink-text)}
.familiar-close::before{content:"";display:block;width:2.75rem;height:2px;margin-bottom:1.2rem;background:var(--gold)}
@media (max-width:1023px){
  .familiar-photo{position:relative;width:auto;height:min(108vw,600px)}
  .familiar-photo img{object-position:40% 66%}
  .familiar-copy{width:auto;padding:clamp(40px,8vw,64px) 0 var(--sec)}
}
.familiar-close>span{display:block;text-wrap:balance}   /* on a phone: "Maybe it isn't your life / that needs to change." */

/* ======================================================================
   THE CLOSE (James, 2026-10-07): no photograph. "Start here", the question and the two ways in, centred on
   the brown the footer shares, with a soft gold light behind the question (eased, wholly inside the band).
   The question lights up word by word as you arrive (word fill, r3.js).
   ====================================================================== */
.close-band{position:relative;overflow:hidden;display:flex;align-items:center;padding:var(--sec) 0;text-align:center;background:
  radial-gradient(ellipse 48% 44% at 50% 50%,rgba(212,173,106,.11) 0%,rgba(212,173,106,.06) 38%,rgba(212,173,106,.02) 68%,rgba(212,173,106,0) 100%),
  linear-gradient(rgba(193,127,89,.075),rgba(193,127,89,.075)),var(--ink-2)}
.close-band .wrap{position:relative;z-index:1}
.close-copy{margin:0 auto;max-width:900px}
.close-copy h2{margin:0 auto 1.4rem;max-width:15ch;font-size:clamp(2.7rem,5.2vw,5.4rem);line-height:1.04;letter-spacing:-.015em;color:var(--cream)}
.close-copy .kicker,.close-copy .lead{margin-inline:auto}
.close-copy .lead{margin-block:0;max-width:34ch}
.close-band .cta-actions{justify-content:center;margin-top:2.4rem}

/* as heard on: the show names in Stacey's italic, a gold rule between them */
.heard ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 0;margin:0;padding:0}
.heard li{display:flex;align-items:center}
.heard li+li::before{content:"";width:1.2rem;height:1px;margin:0 1rem;background:var(--gold)}
.heard a{font:italic 500 1.25rem/1.4 var(--display);color:var(--ink-text)}
@media (max-width:1279px){
  .heard ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.15rem 2rem}
  .heard li::before,.heard li+li::before{content:"";flex:none;width:1.2rem;height:1px;margin:0 1rem 0 0;background:var(--gold)}   /* every name has its dash, at mid-letter */
}
@media (max-width:640px){.heard ul{grid-template-columns:1fr}}

/* the chain: the couplet holds two lines on wide screens ("We don't get what we want." / "We get who we are.") */
@media (min-width:901px){
  .chain-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
}
/* the first question: a raised card on the sand, its label level with the column beside it */
.assess{align-items:start}
.assess .qpanel{background:var(--cream);box-shadow:0 40px 80px -40px rgba(20,18,16,.3)}
.assess .row{flex-direction:column;gap:.35rem}
/* tablets and phones: the hero photograph with headroom (its own file), framed head to waist */
@media (max-width:900px){
  .hero-dark .hero-photo img{object-position:50% 0}
}
@media (min-width:641px) and (max-width:900px){
  .home .hero-dark .hero-photo{height:min(84vw,680px);flex:none}
}

/* the close and the footer fill the last screen together: the band keeps at least its 16:9 and grows into
   whatever height the footer leaves (r3.js sets --foot-h), so nothing of the section above shows at the bottom */
@media (min-width:901px){
  .close-band{width:100%;min-height:calc(100svh - var(--foot-h,0px))}   /* width fixed, so growing taller never makes it wider */
}