/* ============================================================
   Boys2Men · /men/ (Men Mentoring Men) and /chris/ (Chris Scott)
   Shared page styles. Builds on core.css; nothing here overrides tokens.
   ============================================================ */

/* ---------- page hero: tighter line length for the long /men/ headline ---------- */
.page-hero h1{max-width:15ch}
.page-hero .lead{margin-top:22px}
.page-hero .bg img{object-position:50% 40%}

/* ---------- "what it is" icon cards ---------- */
.card .tag{display:inline-block;margin-top:16px;font:800 .74rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--red-deep)}

/* ---------- "who it's for" photo cards ---------- */
.who{display:grid;gap:clamp(16px,2.4vw,28px)}
@media (min-width:760px){.who{grid-template-columns:repeat(3,1fr)}}
.who .pcard{aspect-ratio:4/5}
.who .cap h3{font-size:clamp(1.3rem,1.9vw,1.6rem);margin:0 0 6px;color:#fff}
.who .cap p{margin:0;font-weight:500;font-size:.95rem;line-height:1.45;color:rgba(255,255,255,.86)}
.who .pcard .cap{padding:90px 22px 22px;background:linear-gradient(transparent,rgba(0,0,0,.86) 60%)}

/* ---------- how it works on ink ---------- */
.on-ink .step::before{background:var(--line-ink)}
.on-ink .step p{color:var(--muted-ink)}
.on-ink .step h3{color:#fff}
.step .ico{margin-top:18px}
.step .ico + .n{margin-top:16px}
.now{display:flex;gap:16px;align-items:center;margin-top:clamp(36px,5vw,56px);padding:20px 22px;border-radius:var(--r);
  background:var(--ink-2);border:1px solid var(--line-ink)}
.now p{margin:0;color:#fff;font-weight:600}
.now .btn{margin-left:auto;flex:none}
@media (max-width:759px){.now{flex-direction:column;align-items:flex-start}.now .btn{margin-left:0;width:100%}}

/* ---------- the book card (both pages) ---------- */
.book{display:grid;gap:clamp(28px,4vw,56px);align-items:center;border-radius:28px;padding:clamp(24px,4vw,56px);
  background:var(--bone);position:relative;overflow:hidden}
.on-ink .book{background:var(--ink-2);border:1px solid var(--line-ink)}
@media (min-width:860px){.book{grid-template-columns:minmax(220px,340px) 1fr}}
.book .cover{width:100%;max-width:340px;margin-inline:auto;border-radius:10px;
  box-shadow:0 2px 4px rgba(0,0,0,.12),0 40px 70px -30px rgba(0,0,0,.55);transform:rotate(-2deg);transition:transform .5s var(--ease)}
.book:hover .cover{transform:rotate(0) translateY(-4px)}
@media (max-width:859px){.book .cover{max-width:230px}}
.book h2,.book h3{margin-bottom:14px}
.book h3.title{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:850}
.book .sub{font-weight:700;margin-bottom:18px}
.rating{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 20px}
.rating .stars{display:flex;gap:3px;color:#E8A317}
.rating .stars svg{width:20px;height:20px;fill:currentColor}
.rating b{font:900 1.35rem/1 var(--display)}
.rating span{color:var(--muted);font-size:.95rem}
.on-ink .rating span{color:var(--muted-ink)}
.book .btn-row{margin-top:24px}
.book .fine{margin-top:16px}

/* ---------- red "host a group" band ---------- */
.host{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:900px){.host{grid-template-columns:1fr 1fr}}
.host .pcard{aspect-ratio:4/3;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.host ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.host li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.host li svg{width:22px;height:22px;flex:none;margin-top:3px;background:rgba(255,255,255,.18);border-radius:50%;padding:3px}

/* ---------- FAQ layout ---------- */
.faq-wrap{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:900px){.faq-wrap{grid-template-columns:.8fr 1.2fr;align-items:start}}
.faq-side .pcard{aspect-ratio:4/3;margin-top:28px}

/* ============================================================
   /chris/
   ============================================================ */
.chero{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:clamp(120px,14vw,170px) 0 0}
.chero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 60% at 72% 45%,rgba(215,38,46,.32),transparent 70%)}
.chero .wrap{position:relative;display:grid;gap:12px;align-items:end}
@media (min-width:900px){.chero .wrap{grid-template-columns:1.05fr .95fr;gap:40px}}
.chero .txt{padding-bottom:clamp(40px,7vw,110px)}
.chero p{color:rgba(255,255,255,.82)}
.chero .lead{margin-top:22px}
.chero .who-line{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.chero .who-line li{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);border:1px solid var(--line-ink);font-weight:700;font-size:.92rem}
.chero .who-line svg{width:18px;height:18px;color:#FF5A60}
.chero .ph{position:relative;align-self:end;max-width:560px;margin-inline:auto;width:100%}
.chero .ph img{width:100%;height:auto;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
@media (max-width:899px){.chero .ph{max-width:420px;margin-top:-8px}.chero .txt{padding-bottom:12px}}

/* bio */
.bio-photo{position:relative}
.bio-photo .pcard{aspect-ratio:4/5}
.bio-photo .pcard img{object-position:50% 20%}
.bio p{max-width:62ch}
.facts{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px}
@media (min-width:600px){.facts{grid-template-columns:1fr 1fr}}
.facts li{display:flex;gap:12px;align-items:center;background:var(--bone);border-radius:14px;padding:12px 14px}
.facts b{font:900 1.05rem/1 var(--display);font-stretch:112%;color:var(--red);min-width:3.4em}
.facts span{font-weight:600;font-size:.95rem;line-height:1.35}

/* pull quote */
.pull{max-width:980px;margin-inline:auto;text-align:center}
.pull svg.q{width:52px;height:52px;margin:0 auto 22px;color:#fff;opacity:.85}
.pull .quote{font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.12;color:#fff}
.pull .quote-by{color:rgba(255,255,255,.88)}

/* four walls */
.walls .card{position:relative;overflow:hidden}
.walls .num{position:absolute;top:14px;right:20px;font:900 3.4rem/1 var(--display);font-stretch:118%;color:rgba(215,38,46,.10);letter-spacing:-.04em}

/* speaking */
.topics{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.topics li{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--sh)}
.topics h3{font-size:1.15rem;margin:2px 0 4px}
.topics p{margin:0;color:var(--muted);font-size:1rem}
.topics .ico{width:44px;height:44px;border-radius:12px}
.topics .ico svg{width:22px;height:22px}
.speak-photo .pcard{aspect-ratio:3/2}
.speak-photo .pcard img{object-position:50% 30%}
.aud{margin-top:18px}

/* dark-hero eyebrow contrast + filled rating stars */
.page-hero .eyebrow,.chero .eyebrow{background:rgba(255,255,255,.10);color:#fff}
@media (max-width:759px){.who .pcard{aspect-ratio:1/1}}
@media (max-width:899px){.faq-side .pcard{display:none}}
@media (max-width:599px){.walls.g4{grid-template-columns:1fr}.walls .card{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}.walls .card h3{margin:0}.walls .card p{grid-column:1/-1;margin-top:10px}}
@media (max-width:599px){.walls .num{display:none}}
.rating .stars svg path{fill:#E8A317}