/* About page: page-only layout on top of assets/r3.css (load it after r3.css).
   Every colour, face, size and component is from r3.css. Nothing here adds a hue, a face or a step off the scale.
   Photographs: the hero is a crisp panel on the shared dark top; the story's frame changes with each chapter;
   "The rest of me" is the training shot, crisp, on the band's ground. No circles, no fades over her. */

/* ---------- hero: the same h1 as the home page, a short question on three set lines (r3.css); her positioning line
   ("I help people uncover the stories they've mistaken for truth.") leads the paragraph under it. ---------- */
.about-hero .lead{margin-bottom:clamp(1.4rem,2.4vw,2.2rem)}   /* no aside on this page, so the lead keeps the aside's distance from the buttons */

/* ---------- my story: three chapters beside one frame. On a wide screen the frame stays centred in the screen with
   the staircase photograph the whole way through (James, 2026-10-06); narrower, the photograph sits once above
   chapter I. ---------- */
.story{background:var(--cream)}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,104px);align-items:start}
/* the frame lives in a full-height sticky column, so it stays centred in the screen while the chapters pass */
.story-stick{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;padding-top:var(--hdr)}
.story-frame{position:relative;width:min(100%,calc((100svh - var(--hdr) - 10vh) * .75));aspect-ratio:3/4;margin:0;border-radius:2px;overflow:hidden;background:var(--ink-2);box-shadow:0 40px 80px -40px rgba(20,18,16,.35)}
/* the next photograph wipes down over the last (no double exposure); the last one clears once it is covered */
.story-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease-out) .6s}
.story-frame img.on{clip-path:inset(0);z-index:1;transition-delay:0s}
.chapter{padding:clamp(56px,8vh,104px) 0}
.chapter:first-child{padding-top:0}   /* its label lines up with the top of the frame */
.chapter:last-child{padding-bottom:0}
.chapter-photo{display:none;margin:0 0 clamp(28px,5vw,44px)}
.chapter .kicker{display:flex;align-items:center;gap:.9rem}
.ch-num{display:inline-flex;align-items:center;gap:.9rem;font:500 1.75rem/1 var(--display);color:var(--gold-deep);font-variant-numeric:lining-nums}   /* roman, so "I" never reads as a slash */
.ch-num::after{content:"";width:1.75rem;height:1px;background:var(--gold)}
.story h2{font-size:clamp(2.3rem,3.6vw,3.35rem);line-height:1.12;margin:0 0 1.7rem;max-width:20ch}
.stanza{font:italic 500 clamp(1.5rem,2vw,1.8rem)/1.45 var(--display);color:var(--ink-text);margin:0 0 2.2rem;padding-left:1.4rem;border-left:1px solid var(--gold);max-width:none}
.story .lead{margin-bottom:1.2rem;max-width:44ch;text-wrap:balance}
.story p{max-width:52ch}
.settle{font:italic 500 clamp(1.9rem,2.4vw,2.5rem)/1.1 var(--display);color:var(--ink-text);margin:0 0 1.2rem;max-width:none}
.story .closer{margin-top:1.8rem;max-width:26ch}
.story-quote{margin:0;padding:clamp(48px,7vh,88px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.story-quote p{margin:0;max-width:24ch;font:italic 500 clamp(2rem,3vw,2.75rem)/1.25 var(--display);letter-spacing:-.01em;color:var(--ink-text)}

/* ---------- the rest of me: copy on the left, the photograph fills the right of the band to the viewport edge ---------- */
.alive{background:var(--ink-2);overflow:hidden}
.alive-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:stretch}
.alive-copy{padding:var(--sec) 0}
.alive-photo{position:relative;margin-right:calc(-1 * max(var(--gutter),(100vw - 1240px) / 2))}
.alive-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}   /* the three of them and their raised arms, with sky above */
.alive-photo::before{content:"";position:absolute;left:0;right:0;top:0;height:14%;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--cream) 0%,rgba(245,240,232,.55) 35%,rgba(245,240,232,.16) 70%,rgba(245,240,232,0) 100%)}   /* K15: the sky comes out of the cream story above */
.alive-list{list-style:none;margin:1.6rem 0 0;padding:0}
.alive-list li{padding:.55rem 0 .55rem 2.2rem;text-indent:-2.2rem;color:var(--on-dark)}
.alive-list li::before{content:"";display:inline-block;width:1.1rem;height:1px;margin-right:1.1rem;vertical-align:middle;background:var(--gold-l)}   /* at mid-letter, not at the top of the capital */
.alive-copy .closer{max-width:30ch;margin:clamp(40px,4.5vw,64px) 0 0;color:var(--cream)}   /* the closing line sits in the copy, so the photograph runs the full height of the band */

/* ---------- work with Stacey: the offers, the podcast strip, then the two direct ways in ---------- */
.ways{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;border-top:1px solid var(--line)}
.ways li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;padding:1.35rem 0;border-bottom:1px solid var(--line)}
.ways li>div{flex:1 1 15rem;min-width:0}
.ways .ways-h{font:500 clamp(1.5rem,2vw,1.85rem)/1.25 var(--display);font-variant-numeric:lining-nums;color:var(--ink-text);margin:0}
.ways .ways-sub{font-size:1rem;color:var(--char);margin:.3rem 0 0;max-width:52ch}
.ways .btn{flex:none;min-width:16rem}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .story-grid{grid-template-columns:1fr;gap:0}
  .story-stick{display:none}
  .chapter-photo{display:block;width:100%;max-width:560px;aspect-ratio:3/4;overflow:hidden;border-radius:2px}
  .chapter-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
  .chapter{padding:clamp(48px,9vw,72px) 0}
  .chapter:first-child{padding-top:0}
}
/* mid widths: give the photograph more of the band so the three of them and the raised fist stay in frame */
@media (min-width:1024px) and (max-width:1180px){
  .alive-grid{grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:clamp(36px,4vw,56px)}
  .alive-photo img{object-position:54% 62%}
}
/* tablets and phones: the photograph on top, shaped so their raised hands and their feet both stay in frame */
@media (max-width:1023px){
  .alive-grid{grid-template-columns:1fr;gap:0}
  .alive-photo{order:-1;margin:0 calc(-1*var(--gutter));aspect-ratio:6/5}
  .alive-photo img{object-position:50% 75%}
  .alive-photo::before{content:"";position:absolute;left:0;right:0;top:0;height:16%;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--cream) 0%,rgba(245,240,232,.55) 35%,rgba(245,240,232,.16) 70%,rgba(245,240,232,0) 100%)}   /* out of the cream story into the sky */
  .alive-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(33,30,26,0) 0%,rgba(33,30,26,.14) 25%,rgba(33,30,26,.4) 50%,rgba(33,30,26,.72) 74%,rgba(33,30,26,.93) 90%,var(--ink-2) 100%)}   /* the rocks dissolve into the copy's ground */
  .alive-copy{padding-top:clamp(28px,4vw,40px)}
}
@media (max-width:640px){
  .alive-photo{aspect-ratio:1/1}
  .ways li{flex-direction:column;align-items:stretch}
  .ways li>div{flex:none}
  .ways .btn{width:100%;min-width:0}
}

/* ---------- the hero image (James, 2026-10-07, ChatGPT): a fogged window with one arc wiped clear onto a lake at sunrise.
   Composed exactly like the home hero: a full-height panel on the right, running up behind the see-through header,
   melting into the ground on its left edge, top and foot (keen-eye K15), so it reads as one picture with the page. ---------- */
.about-hero{background:linear-gradient(rgba(193,127,89,.025),rgba(193,127,89,.025)),var(--ink-2)}
@media (min-width:901px){
  .dark-top .about-hero .hero-photo{top:0;bottom:0;right:0;left:auto;width:50%;height:auto;aspect-ratio:auto;max-height:none}
  .about-hero .hero-photo img{object-position:88% 50%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(20,18,16,.4) 5%,rgba(20,18,16,.85) 11%,var(--ink) 16%,var(--ink) 78%,rgba(20,18,16,.6) 89%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(20,18,16,.4) 5%,rgba(20,18,16,.85) 11%,var(--ink) 16%,var(--ink) 78%,rgba(20,18,16,.6) 89%,transparent 100%)}
  .top-dark.about-hero .hero-photo::before{content:"";display:block;position:absolute;top:0;bottom:0;left:0;width:50%;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgb(37,32,28) 0%,rgba(37,32,28,.93) 12%,rgba(37,32,28,.78) 26%,rgba(37,32,28,.56) 42%,rgba(37,32,28,.32) 58%,rgba(37,32,28,.14) 74%,rgba(37,32,28,.04) 88%,rgba(37,32,28,0) 100%)}   /* the left edge melts into the ground, as on the home page */
  .top-dark.about-hero .hero-photo::after{display:none}
  .about-hero .hero-copy{width:min(640px,48%)}
}
@media (max-width:900px){
  .about-hero .hero-photo{height:min(112vw,560px);max-height:none}
  .about-hero .hero-photo img{object-position:86% 50%}
}

/* one size for every section heading on the page */
.alive h2,#connect h2{font-size:clamp(2.3rem,3.6vw,3.35rem)}
/* tablets: the chapter photographs fill the column */
@media (min-width:641px) and (max-width:1023px){
  .chapter-photo{max-width:none;aspect-ratio:4/5}
}