/* ============================================================
   The Unshakeable Man, shared stylesheet.
   Extracted from index.html 2026-09-27. Every page links this
   instead of carrying its own copy. Page-specific rules stay in
   a small <style> block on that page, after this file loads.

   Do not re-inline this. The whole point is one place to change
   a colour, a font or the nav.
   ============================================================ */
:root{
  --navy:#0f1623; --navy-light:#161e2e; --charcoal:#1a2332; --charcoal-light:#1f2b3d;
  --gold:#c9a55c; --gold-light:#dbbe7a; --gold-glow:rgba(201,165,92,.15);
  --cream:#f5f0e8; --text-primary:#f0ece4; --text-secondary:#a8a299; --text-muted:#6b7280;
  --border-subtle:rgba(201,165,92,.12); --border-medium:rgba(201,165,92,.25);
  --gap:clamp(72px,9vw,124px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--navy); color:var(--text-primary);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:300; line-height:1.75; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:900px; margin:0 auto; padding:0 22px}
.narrow{max-width:660px; margin:0 auto}
section{padding:var(--gap) 0}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; color:var(--cream); letter-spacing:-.01em}
h2{font-size:clamp(1.75rem,4.4vw,2.7rem); line-height:1.2; margin:0 0 20px}
.eyebrow{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin:0 0 14px; font-family:'Inter',sans-serif;
}
p{margin:0 0 18px}
.lede{font-size:clamp(1.02rem,2vw,1.16rem)}
.muted{color:var(--text-secondary)}

/* ---------- hero ---------- */
.hero{padding:clamp(34px,5vw,58px) 0 0; text-align:center}
/* Was .9rem at 85% opacity in wide-tracked gold, which on this navy read as
   almost nothing, especially on a phone. Bigger, fully opaque, and the lighter
   gold so it holds its own at the top of the page. */
.mark{
  font-family:'Cormorant Garamond',serif; font-size:clamp(1.02rem,1.5vw,1.18rem);
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold-light);
  opacity:1; margin-bottom:clamp(38px,6vw,60px);
}
/* Attribution sits under the brand mark. Sentence-case italic with tight
   tracking so it reads as a signature, not a second headline competing
   with the wide-tracked mark above it. */
.mark-by{
  display:block; margin-top:9px;
  font-size:.82rem; letter-spacing:.1em; text-transform:none;
  font-style:italic; opacity:.8; color:var(--gold);
}
/* Hero deliberately breaks from the Cormorant used elsewhere. "Unshakeable,
   not just unstoppable" is a flat statement, not a flourish; an elegant italic
   serif fought it. Inter heavy, sentence case: firm without shouting. */
h1{
  font-family:'Inter',-apple-system,sans-serif;
  font-weight:800; font-size:clamp(2.2rem,7vw,4.3rem);
  line-height:1.04; letter-spacing:-.035em; margin:0 0 26px;
}
h1 .em{color:var(--gold); display:block}
.hero-sub{
  font-size:clamp(1.04rem,2.2vw,1.24rem); color:var(--text-secondary);
  max-width:31em; margin:0 auto 8px;
}
.hero-sub b{color:var(--cream); font-weight:500}

/* ---------- proof strip ---------- */
.proof{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin:clamp(38px,5vw,52px) 0 0; padding:26px 0;
  border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle);
}
.proof div{text-align:center}
.proof .n{
  font-family:'Cormorant Garamond',serif; font-size:clamp(1.5rem,3.6vw,2.15rem);
  color:var(--gold); font-weight:600; display:block; line-height:1.1;
}
.proof .l{font-size:.72rem; color:var(--text-muted); letter-spacing:.05em}

/* ---------- offer / capture ---------- */
.offer{background:var(--navy-light); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle)}
.offer .head{text-align:center; margin-bottom:34px}
.form-card{max-width:430px; margin:0 auto}
.field{
  width:100%; padding:15px 17px; margin-bottom:12px;
  background:var(--charcoal); color:var(--text-primary);
  border:1px solid var(--border-subtle); border-radius:4px;
  font-family:inherit; font-size:1rem; font-weight:300; transition:border-color .25s ease;
}
.field::placeholder{color:var(--text-muted)}
.field:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow)}
.btn{
  width:100%; padding:16px 20px; border:0; border-radius:4px; cursor:pointer;
  background:linear-gradient(180deg,var(--gold-light),var(--gold)); color:#1a1408;
  font-family:inherit; font-weight:600; font-size:.86rem; letter-spacing:.13em;
  text-transform:uppercase; transition:transform .18s ease, filter .18s ease;
}
.btn:hover{filter:brightness(1.07); transform:translateY(-1px)}
.btn:disabled{opacity:.6; cursor:default; transform:none}
.micro{font-size:.78rem; color:var(--text-muted); text-align:center; margin:12px 0 0}
.err{display:none; color:#e2857f; font-size:.83rem; text-align:center; margin:9px 0 0}

.tiles{display:grid; grid-template-columns:1fr; gap:18px; margin:40px auto 0; max-width:640px}
.tile{
  background:var(--charcoal); border:1px solid var(--border-subtle); border-radius:5px;
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .3s ease, transform .3s ease;
}
.tile.ready{cursor:pointer}
.tile.ready:hover{border-color:var(--border-medium); transform:translateY(-3px)}
.thumb{position:relative; aspect-ratio:16/10; background:var(--charcoal-light); overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover; display:block; opacity:.5; transition:opacity .3s ease}
.tile.ready .thumb img{opacity:.82}
.tile.ready:hover .thumb img{opacity:1}
.badge{
  position:absolute; left:0; right:0; bottom:0; padding:16px 14px 13px; text-align:center;
  background:linear-gradient(to top,rgba(15,22,35,.97) 0%,rgba(15,22,35,.88) 45%,rgba(15,22,35,0) 100%);
}
.part{font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:600; display:block; margin-bottom:3px}
.tname{font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:600; color:var(--cream); display:block}
.lock{position:absolute; top:11px; right:12px; font-size:.85rem; opacity:.75}
.tile.ready .lock{display:none}
.play{
  position:absolute; top:0; left:0; right:0; bottom:64px; margin:auto;
  width:50px; height:50px; border-radius:50%; border:1.5px solid var(--gold);
  background:rgba(15,22,35,.55); display:none; align-items:center; justify-content:center;
}
.tile.ready .play{display:flex}
.play::after{content:''; border-left:12px solid var(--gold); border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:4px}
.tdesc{padding:14px 15px 17px; font-size:.82rem; line-height:1.6; color:var(--text-secondary); flex:1}
.frame{width:100%; aspect-ratio:16/9; border:0; display:block}

/* ---------- want list ---------- */
.want{list-style:none; padding:0; margin:0}
.want li{
  display:flex; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--border-subtle); color:var(--text-secondary);
}
.want li:last-child{border-bottom:0}
.want .a{color:var(--gold); flex-shrink:0}

/* ---------- quote ---------- */
blockquote{
  margin:0; padding:30px 28px; background:var(--charcoal);
  border:1px solid var(--border-subtle); border-radius:5px;
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(1.02rem,2.1vw,1.14rem); color:var(--text-secondary); line-height:1.75;
}
blockquote cite{
  display:block; margin-top:16px; font-family:'Inter',sans-serif; font-style:normal;
  font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; color:var(--gold); font-weight:600;
}

/* ---------- cta ---------- */
.cta{text-align:center; background:var(--navy-light); border-top:1px solid var(--border-subtle)}
.btn-ghost{
  display:inline-block; padding:15px 34px; border-radius:4px; border:1px solid var(--gold);
  color:var(--gold); text-decoration:none; font-weight:600; font-size:.82rem;
  letter-spacing:.13em; text-transform:uppercase; transition:background .25s ease,color .25s ease;
}
.btn-ghost:hover{background:var(--gold); color:#1a1408}

footer{text-align:center; padding:54px 0 46px; color:var(--text-muted); font-size:.78rem}
footer a{color:var(--text-secondary); text-decoration:none}
footer a:hover{color:var(--gold)}

@media (max-width:760px){
  .tiles{grid-template-columns:1fr; gap:15px}
  .thumb{aspect-ratio:16/9}
  .proof{grid-template-columns:1fr; gap:20px; padding:22px 0}
}

/* ---- Top navigation, added 2026-08-20 ----
   The site had no nav at all: every other page (practice, scorecard, sessions,
   and catchyourbreath.me) was reachable only if you already knew the URL.
   Sticky so it survives the long scroll, and it wraps rather than collapsing
   into a burger, because four items do not need a menu behind a tap. */
.topnav{
  position:sticky; top:0; z-index:50;
  background:rgba(15,22,35,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-subtle);
}
.topnav .inner{
  max-width:1080px; margin:0 auto; padding:11px 22px;
  display:flex; flex-wrap:wrap; gap:6px 26px;
  align-items:center; justify-content:center;
}
.topnav a{
  color:var(--text-secondary); text-decoration:none;
  font-size:.9rem; letter-spacing:.02em; white-space:nowrap; padding:4px 0;
}
.topnav a:hover{color:var(--gold-light)}
.topnav a.cta{color:var(--gold)}
@media(max-width:520px){
  .topnav .inner{gap:2px 14px; padding:7px 10px}
  .topnav a{font-size:.78rem; padding:2px 0}
}

/* ---- Join button in the nav -----------------------------------------
   Peter Crone's site keeps a permanent button pointing at the cheapest
   PAID rung, never at a call. This is that button. It must stay visually
   distinct from the text links or it reads as a sixth menu item. */
.topnav a.join{
  color:var(--navy); background:var(--gold);
  padding:7px 16px; border-radius:999px;
  font-weight:600; font-size:.85rem; letter-spacing:.01em;
}
.topnav a.join:hover{background:var(--gold-light); color:var(--navy)}
@media(max-width:520px){
  .topnav a.join{padding:5px 12px; font-size:.76rem}
}

/* ---- Price / offer card, used on community, group, courses ---------- */
.price-card{
  border:1px solid var(--border-medium); border-radius:14px;
  padding:clamp(26px,4vw,40px); background:var(--charcoal);
  text-align:center; margin:34px auto 0; max-width:520px;
}
.price-card .amount{
  font-family:'Cormorant Garamond',Georgia,serif; color:var(--cream);
  font-size:clamp(2.6rem,7vw,3.6rem); line-height:1; display:block; margin-bottom:4px;
}
.price-card .per{color:var(--text-secondary); font-size:.95rem; display:block; margin-bottom:22px}
.price-card .fine{color:var(--text-muted); font-size:.82rem; margin-top:16px}
.price-card ul{
  text-align:left; list-style:none; padding:0; margin:0 0 26px;
  color:var(--text-secondary); font-size:.97rem;
}
.price-card li{padding:9px 0 9px 26px; position:relative; border-bottom:1px solid var(--border-subtle)}
.price-card li:last-child{border-bottom:0}
.price-card li::before{content:"\2014"; position:absolute; left:0; color:var(--gold)}

/* ---- Brand strip ----------------------------------------------------
   Peter Crone's homepage puts "Trusted by Elite Performers" immediately
   under the hero, before he asks for anything. Same slot, same job.

   The band sits on its own colour so the row reads as one object rather
   than fifteen loose marks floating on the page background. That also
   hides the biggest problem with supplied logo artwork: it arrives
   black-on-white, gold-on-brown, pale-blue-on-white and everything in
   between. Every mark is flattened to a single colour by
   ~/normalise-logos.py before it gets here, so the band only has to
   handle one ink.

   Each slot degrades: if the PNG is missing the <img> hides itself via
   onerror and the brand NAME shows instead. So the strip is never broken,
   it is just less finished. -------------------------------------------- */
.brands{
  background:var(--navy-light);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  padding:clamp(40px,5vw,62px) 0;
}
.brands .eyebrow{text-align:center; margin-bottom:26px}
.brands .list{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(18px,3vw,38px) clamp(24px,4vw,52px);
  max-width:940px; margin:0 auto;
}
/* The PNGs are already balanced by optical AREA, so a single max-height here
   would throw that away and squash the tall marks (Immersiv, Echoes) to
   nothing. Give height and width generous independent caps and let each
   mark's own aspect ratio decide. */
.brands .b{display:inline-flex; align-items:center; justify-content:center; min-height:34px}
.brands .b img{
  height:auto; width:auto; max-height:54px; max-width:200px; display:block;
  opacity:.72; transition:opacity .25s ease;
}
.brands .b:hover img{opacity:1}
.brands .b.noimg .nm{display:inline}
/* Hidden by default; the img's onerror adds .noimg to the slot, which is
   the only thing that reveals the name. Without this the name would sit
   next to a logo that loaded fine. */
.brands .b .nm{display:none;
  color:var(--text-secondary); font-size:.9rem; letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap;
}
@media(max-width:600px){
  .brands .list{gap:14px 22px}
  .brands .b{min-height:24px}
  .brands .b img{max-height:38px; max-width:132px}
  .brands .b .nm{font-size:.74rem; letter-spacing:.04em}
}

/* ---- The ladder -----------------------------------------------------
   The single biggest thing missing from this homepage. Peter shows every
   rung on the front page in price order so a visitor can place himself.
   Rungs that do not exist yet are marked, not hidden: an unmarked
   "coming soon" reads as a broken link, and the _redirects catch-all
   will serve the homepage at 200 rather than 404 if one is wrong. */
.ladder{display:grid; gap:14px; margin-top:34px}
.rung{
  display:grid; grid-template-columns:1fr auto; gap:6px 20px; align-items:center;
  border:1px solid var(--border-subtle); border-radius:12px;
  padding:20px 24px; background:var(--charcoal); text-decoration:none;
}
a.rung:hover{border-color:var(--border-medium); background:var(--charcoal-light)}
.rung .name{font-family:'Cormorant Garamond',Georgia,serif; font-size:1.3rem; color:var(--cream)}
.rung .desc{grid-column:1/-1; color:var(--text-secondary); font-size:.95rem; margin:0}
.rung .tag{
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap;
}
.rung .tag.soon{color:var(--text-muted)}
@media(max-width:560px){
  .rung{grid-template-columns:1fr; padding:17px 18px}
  .rung .tag{margin-top:2px}
}

/* ---- Portrait beside a text block -----------------------------------
   Used on the story section. Stacks under the text on narrow screens so
   the copy always leads. */
.withpic{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(26px,4vw,48px); align-items:start}
.withpic img{
  width:100%; height:auto; display:block; border-radius:10px;
  border:1px solid var(--border-subtle);
}
.withpic .cap{font-size:.76rem; color:var(--text-muted); margin-top:10px; text-align:center}
@media(max-width:760px){
  .withpic{grid-template-columns:1fr}
  .withpic figure{order:-1; max-width:360px; margin:0 auto 26px}
}