/* Embrace rebuild: coaches roster and coach profiles. Uses the tokens, header, band and .coach .rank from home.css. */
.links a[aria-current="page"]::after{ transform:scaleX(1); }
.coaches-page h1, .coach-profile h1, .private-page h1{ font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; text-transform:uppercase; line-height:.95; font-size:clamp(2.6rem,5.5vw,4rem); margin-bottom:.9rem; }
.coaches-page .lede, .private-page .lede{ max-width:560px; font-size:1.05rem; }
.rank{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.cr-teaches{ color:var(--muted); font-size:.95rem; }

/* roster: one row per coach (owner, 2026-11-03). The photo sits on the left in a fixed 4:5 frame, so every row lines up;
   the name, rank, what they teach, a short line and See more sit to its right, left aligned. No cards: the rows sit
   straight on the page, kept apart by space alone. */
.coach-rows{ display:grid; gap:clamp(2.5rem,5vw,3.5rem); margin:3rem 0 3rem; }
.coach-row{ display:grid; grid-template-columns:240px minmax(0,1fr); column-gap:2.5rem; align-items:center; }
.cb-figure{ display:grid; place-items:center; aspect-ratio:4/5; border-radius:10px; overflow:hidden; background:var(--black); border:1px solid var(--line); }
.cb-figure img.card{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }   /* apply.py cuts it to 4:5 around the face */
.cb-figure:hover img.card{ transform:scale(1.03); }
.cb-figure img.ph{ width:46%; height:auto; opacity:.5; }

.cb-text{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; }
.cb-text h2{ font-size:clamp(3rem,5vw,4.2rem); line-height:.95; margin:0; white-space:nowrap; overflow:hidden; text-overflow:clip; max-width:100%; }   /* one line; the page script shrinks a long name to fit */
/* the text side of each row is a card with the coach's belt across its top (owner, 2026-11-03): the belt is solid along the top
   edge and its lower half blends into the black card, rank bar and all, so there is no block of color between belt and card. The rank bar sits near the belt's far end (red on a black belt, black on
   the rest, a white stripe per degree or stripe). The photo stays off the card. */
.coach-row .cb-text{
  --belt:#c99f0a; --bar:#0b0b0c;
  position:relative; isolation:isolate; overflow:hidden; align-self:stretch; justify-content:center;
  padding:calc(32px + 1.25rem) 2rem 2rem; border:1px solid var(--line); border-radius:12px; background:var(--ink);
}
.coach-row .cb-text.belt-black{ --belt:#2a2a2a; --bar:#c62828; }   /* a touch lighter than the page so the black belt still shows */
.coach-row .cb-text.belt-brown{ --belt:#6b4226; }
.coach-row .cb-text.belt-purple{ --belt:#5b2a86; }
.coach-row .cb-text.belt-blue{ --belt:#1f5fbf; }
.coach-row .cb-text.belt-white{ --belt:#efefef; }
.belt-band{
  position:absolute; left:0; right:0; top:0; height:32px; display:flex; justify-content:flex-end; background:var(--belt);
  -webkit-mask-image:linear-gradient(180deg, #000 0, #000 40%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.18) 82%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0, #000 40%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.18) 82%, transparent 100%);
}
.belt-bar{ width:84px; margin-right:24px; display:flex; justify-content:flex-end; gap:6px; padding-inline:10px; background:var(--bar); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }   /* the edge keeps a black rank bar from melting into a dark belt */
.belt-bar i{ width:6px; background:#f5f5f2; }
.coach-row .cr-teaches{ color:#d8d8da; }
.coach-row .cr-bio{ max-width:560px; margin-top:0; }
/* See more: a gold text link right under the summary */
.coach-row .cr-more{ margin-top:.5rem; border:0; padding:0; font-size:1.05rem; }
.coach-row .cr-more:hover{ background:none; color:var(--white); }

.cr-bio{ color:#d8d8da; max-width:640px; margin-top:.35rem; }
.cr-more{
  display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap;
  font-size:1rem; font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--gold); color:var(--gold); border-radius:4px; padding:.75rem 1.3rem;
  transition:background .2s, color .2s;
}
.cr-more i{ font-style:normal; transition:transform .2s; }
.cr-more:hover{ background:var(--gold); color:#000; }
.cr-more:hover i{ transform:translateX(4px); }

/* private session page: a short form. Pick a coach from the dropdown, then Book Session turns from grey to gold and opens their calendar */
.ps-form{ max-width:520px; margin:2.5rem 0 1rem; display:grid; gap:1.25rem; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.75rem; }
.ps-form label{ display:grid; gap:.5rem; font-size:.9rem; color:var(--muted); }
.ps-form select{ width:100%; padding:.85rem 2.5rem .85rem .9rem; border-radius:6px; border:1px solid var(--line); background:var(--ink); color:var(--white); font:inherit; font-size:1rem; appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; cursor:pointer; }
.ps-form select:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.ps-go{ justify-self:start; }
.ps-go[aria-disabled="true"]{ background:#3a3a3e; color:#8a8a90; cursor:not-allowed; filter:none; }   /* grey until a coach is picked */

/* additional staff under the coaches: a simple card per person, photo on top, name under it */
.staff-title{ font-size:clamp(2rem,3.5vw,2.6rem); margin:4.5rem 0 1.5rem; padding-bottom:.6rem; border-bottom:2px solid var(--gold); }
.staff-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.staff-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.staff-photo{ aspect-ratio:4/3; background:var(--black); display:grid; place-items:center; border-bottom:3px solid var(--gold); }
.staff-photo img{ width:22%; opacity:.5; }
.staff-card h3{ font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; text-transform:uppercase; font-size:1.5rem; line-height:1; padding:1.25rem 1.5rem; margin:0; }
@media (max-width:860px){ .staff-grid{ grid-template-columns:1fr 1fr; } }

/* profile: a big photo header with the name, rank and programs on it; the coach's social links and booking right under it;
   then the bio on the left and the classes they teach, with days and times, on the right */
.back{ display:inline-block; color:var(--gold); font-weight:600; margin-bottom:1.5rem; }
.back:hover{ text-decoration:underline; text-underline-offset:4px; }
.ph{ display:grid; grid-template-columns:340px 1fr; gap:3.5rem; align-items:center; }
.ph-photo{ aspect-ratio:4/5; border-radius:10px; overflow:hidden; background:var(--black); display:grid; place-items:center; }
.ph-photo img{ width:100%; height:100%; object-fit:cover; }
.ph-photo img.ph-ph{ width:30%; height:auto; opacity:.45; }
.ph-text{ display:flex; flex-direction:column; gap:.5rem; }
.ph-text h1{ margin:0; font-size:clamp(2.8rem,5vw,4.4rem); }
/* labeled facts in a row: small label over a bold value */
.ph-stats{ display:flex; flex-wrap:wrap; gap:1.25rem 2.75rem; margin-top:1.5rem; padding-block:1.25rem; border-block:1px solid var(--line); }
.ph-stats dt{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.ph-stats dd{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:600; font-size:1.35rem; letter-spacing:.03em; color:var(--white); margin-top:.2rem; }
/* social: round gold icons only */
.ph-links{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; }
.ph-ico{ width:44px; height:44px; border-radius:50%; background:var(--gold); color:#000; display:grid; place-items:center; transition:transform .2s, filter .2s; }
.ph-ico svg{ width:22px; height:22px; }
.ph-ico:hover{ transform:translateY(-2px); filter:brightness(1.1); }
.ph-book{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.25rem; }
/* below the header, one column: Career summary, About, Classes and times, then the story */
.ph-body{ margin-top:3rem; }
.ph-body .cp-bio{ max-width:820px; }   /* keep story lines to a comfortable reading length */
.ph-sum{ margin-bottom:3rem; }
.ph-h{ font-size:2rem; padding-bottom:.6rem; margin-bottom:1.25rem; border-bottom:2px solid var(--gold); }
.cp-bio p{ font-size:1.08rem; line-height:1.75; }
.cp-bio p + p{ margin-top:1rem; }
/* Career summary: plain bullets of one to two sentences under the header, two columns */
.ph-sum{ border-top:1px solid var(--line); }
.ph-sum ul{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:1rem 3rem; }
.ph-sum li{ position:relative; padding-left:1.25rem; color:var(--white); line-height:1.55; }
.ph-sum li::before{ content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; background:var(--gold); border-radius:50%; }
/* a coach's one combined callout (Tiago's Why I teach): a gold box, the title in black, the words in white */
/* a coach's one combined callout (Tiago's Why I teach): the "Your first class is free" band, full width, left aligned,
   the title small and black, the words big and white like the favorite quote band */
.ph-callout{ background:var(--gold); text-align:left; padding:clamp(3rem,7vw,4.5rem) max(16px, calc((100vw - 1140px) / 2 + 16px)); margin:.75rem calc(50% - 50vw) 0; }   /* text lines up with the page's left edge */
.ph-follow:has(.ph-callout){ margin-bottom:-.5rem; }
.ph-body .cp-bio:has(.ph-callout){ max-width:none; }
.cp-long .ph-callout h3{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:600; font-size:1.15rem; letter-spacing:.12em; text-transform:uppercase; color:#000; margin:0 0 .9rem; }
.ph-callout .st-pull{ margin:0; padding:0; border-left:0; max-width:980px; font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; text-transform:uppercase; font-size:clamp(1.8rem,3.6vw,3rem); line-height:1.05; text-wrap:balance; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.3); }
/* drop downs: Career summary and the coaching answers open and close like the Common questions, a gold + turns to x */
.ph-drop{ border-bottom:1px solid var(--line); }
.ph-drop summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.1rem 0; font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:600; font-size:1.4rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
.ph-drop summary::-webkit-details-marker{ display:none; }
.ph-drop summary::after{ content:"+"; flex:none; font-family:var(--display); font-size:1.9rem; line-height:1; color:var(--gold); transition:transform .25s ease; }
.ph-drop[open] summary::after{ transform:rotate(45deg); }
.ph-drop summary:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.ph-drop > :not(summary){ padding-bottom:1.4rem; }
.ph-follow .ph-drop:first-child{ border-top:1px solid var(--line); }
/* sections down the left column: About, then the coach's own My story, Competition highlights, Coaching, Rank and lineage */
.ph-sec + .ph-sec{ margin-top:3.25rem; }
.ph-sec + .ph-follow{ margin-top:2rem; }   /* the coaching answers run on from About, no title of their own */
/* sections moved below the photos */
.ph-later .ph-sec{ margin-top:4rem; }
/* the favorite quote band: the free class band's gold and size, with the quote in white, running straight into
   the free class band below it */
.band.ph-quote{ padding-bottom:0; }
.band.ph-quote .wrap > :last-child{ margin-bottom:0; }   /* with no padding under it, a quote with no credit line would push its margin out as a black gap */
.band.ph-quote ~ .band{ margin-top:-1px; }   /* overlap a pixel so no hairline of page shows where the two gold bands meet (scripts sit between them) */
.ph-quote-label{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:600; font-size:1.15rem; letter-spacing:.12em; text-transform:uppercase; color:#000; margin-bottom:.9rem; }
.ph-quote-by{ margin-top:1rem; font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:600; font-size:1.05rem; letter-spacing:.1em; text-transform:uppercase; color:#000; }
.band.ph-quote h2{ color:#fff; max-width:980px; margin-inline:auto; text-shadow:0 2px 6px rgba(0,0,0,.3); }
/* the long About, in the coach's own words: a short heading over each part */
.cp-long .cp-part + .cp-part{ margin-top:2.25rem; }
.cp-long h3{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:600; font-size:1.3rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-bottom:.6rem; }
.cp-long ul{ list-style:none; display:grid; gap:.6rem; margin-top:.9rem; }
.cp-long ul li{ position:relative; padding-left:1.25rem; color:#d8d8da; }
.cp-long ul li::before{ content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; background:var(--gold); border-radius:50%; }   /* plain gold bullets, like the Career summary */
/* the coach's story: two kinds of emphasis only, bold phrases and callout sentences, plus the number callout at the top */
.cp-long strong{ color:var(--white); font-weight:700; }
.st-pull{ margin:.25rem 0 1.25rem; padding:.2rem 0 .2rem 1.4rem; border-left:4px solid var(--gold); font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:600; font-size:1.7rem; line-height:1.25; color:var(--white); }
/* highlight: shown on by default; with the script, it starts plain and goes bold, then a gold marker sweeps across */
mark.hl{ color:var(--white); font-weight:700; background:linear-gradient(rgba(245,197,24,.42),rgba(245,197,24,.42)) no-repeat 0 88% / 100% 42%; padding:0 .08em; }
.hl-anim mark.hl{ color:inherit; font-weight:inherit; background-size:0% 42%; transition:background-size 1s ease .35s, color .25s; }
.hl-anim mark.hl.on{ color:var(--white); font-weight:700; background-size:100% 42%; }
.st-nums{ display:grid; grid-template-columns:repeat(2,1fr); margin:0 0 1.75rem; border-block:1px solid var(--line); }
.st-nums div{ display:flex; align-items:center; gap:1rem; padding:1.25rem 1rem; }
.st-nums div + div{ border-left:1px solid var(--line); }
.st-nums b{ font-family:var(--display); font-weight:var(--display-w); font-size:3.4rem; line-height:1; color:var(--gold); white-space:nowrap; text-transform:none; }
.st-nums span{ color:#d8d8da; font-size:.95rem; line-height:1.4; }
/* Classes and times: a small schedule table (class, days, time, location) with the full schedule link under it */
/* Classes and times as one card: the room's map down the left, where they teach, their classes and the links on the right */
.ph-card{ display:grid; grid-template-columns:400px 1fr; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.ph-card .loc-photo{ min-height:100%; }
.ph-card-body{ padding:2rem 2.25rem; }
.ph-card-room{ padding-bottom:1.25rem; margin-bottom:.5rem; border-bottom:1px solid var(--line); }
.ph-eye{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.ph-card-room h3{ font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; text-transform:uppercase; font-size:2rem; line-height:1; margin:.3rem 0 .45rem; }
.ph-card-room p{ color:#d8d8da; } .ph-card-room a{ color:var(--gold); }
.ph-card-links{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; margin-top:1.5rem; }
.ph-dir{ color:var(--gold); font-weight:700; }
.ph-dir i{ font-style:normal; display:inline-block; transition:transform .2s; } .ph-dir:hover i{ transform:translateX(4px); }
.ph-table tbody th small{ display:block; font-weight:400; font-size:.8rem; color:var(--muted); margin-top:.15rem; }
/* highlight cards: the homepage class card (home.css .class-card) in a swipe row, photo and title only. Room above and
   below the row so the hover grow is not clipped; a placeholder mark until the photo is in. */
.st-cards{ display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:14px 6px; margin:-14px -6px; }
.st-cards::-webkit-scrollbar{ display:none; }
.st-cards > .class-card{ flex:0 0 calc((100% - 2rem) / 3); scroll-snap-align:start; }
.st-cards .class-card:hover{ transform:scale(1.03); }
.st-cc-empty{ position:absolute; inset:0; display:grid; place-items:center; background:var(--black); }
.st-cc-empty img{ position:static; width:56px; height:auto; opacity:.35; }
.st-cc .cc-label h3{ font-size:1.6rem; }
.st-cc::after{ display:none; }   /* no dimming on hover: the card only grows */
.ph-later .cp-bio:has(.st-cards){ max-width:none; }
/* swipe rows: the round gold arrows sit on the left and right edges, on every screen size */
.sw-wrap{ position:relative; }
.sw-wrap .pg-btn{ display:grid; place-items:center; position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border-radius:50%; border:0; background:var(--gold); color:#000; font-size:1.15rem; font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.5); cursor:pointer; }
.sw-wrap .pg-btn.prev{ left:-18px; } .sw-wrap .pg-btn.next{ right:-18px; }
@media (max-width:860px){
  .st-cards > .class-card{ flex-basis:84%; scroll-snap-align:center; aspect-ratio:4/3; }
  .st-cards .class-card:hover{ transform:none; }
  .sw-wrap .pg-btn.prev{ left:-6px; } .sw-wrap .pg-btn.next{ right:-6px; }
}
.ph-table{ width:100%; border-collapse:collapse; }
.ph-table th, .ph-table td{ text-align:left; padding:.9rem 1rem .9rem 0; border-bottom:1px solid var(--line); }
.ph-table thead th{ font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:400; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.ph-table tbody th{ color:var(--white); font-weight:700; }
.ph-table td{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:600; font-size:1.1rem; letter-spacing:.04em; text-transform:uppercase; color:var(--gold); }
.ph-table .soon, .ph-soon{ color:var(--muted); }
/* the coach's photo gallery under the bio: three across, each opens full size */
.ph-photos{ margin-top:4rem; }
.pg{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.pg a{ display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line); transition:border-color .2s, transform .2s; }
.pg a:hover{ border-color:var(--gold); transform:translateY(-3px); }
.pg img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.pg-empty{ aspect-ratio:4/3; border-radius:10px; border:1px dashed var(--line); background:var(--panel); display:grid; place-items:center; }
.pg-empty img{ width:56px; aspect-ratio:auto; opacity:.3; }
.pg-wrap{ position:relative; }
.pg-btn{ display:none; }   /* desktop: the three-across grid, no arrows */
.pg-soon{ color:var(--muted); margin-top:.9rem; }

/* Coaches page rows (owner, 2026-11-03): side by side until phone size; tablets and narrow windows get a smaller photo */
@media (max-width:860px){
  .coach-row{ grid-template-columns:190px minmax(0,1fr); column-gap:1.5rem; }
  .coach-row .cb-text{ padding:calc(32px + 1rem) 1.5rem 1.5rem; }
}
@media (max-width:600px){
  .coach-row{ grid-template-columns:1fr; row-gap:1.25rem; }   /* phones: the photo on top, the text under it */
  .coach-row .cb-text{ padding:calc(25px + 1rem) 1.25rem 1.5rem; }   /* phones: a slimmer belt and tighter card */
  .belt-band{ height:25px; }
  .belt-bar{ width:60px; margin-right:16px; gap:4px; padding-inline:7px; }
  .belt-bar i{ width:4px; }
  .cb-figure{ width:100%; }   /* phones: the photo spans the card width, so the two line up */
}
@media (max-width:860px){
  .st-nums{ grid-template-columns:1fr; } .st-nums div + div{ border-left:0; border-top:1px solid var(--line); }
  .ph-card{ grid-template-columns:1fr; } .ph-card .loc-photo{ min-height:220px; } .ph-card-body{ padding:1.5rem 1.25rem; }
  .ph{ grid-template-columns:1fr; gap:1.5rem; } .ph-sum ul{ grid-template-columns:1fr; } .ph-table thead{ display:none; } .ph-table tr{ display:grid; grid-template-columns:auto 1fr; column-gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line); } .ph-table th, .ph-table td{ border:0; padding:.1rem 0; } .ph-table tbody th{ grid-column:1 / -1; } .ph-table td::before{ content:attr(data-l) "  "; font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.14em; color:var(--muted); }
  /* phones: the photos become a swipe row, one at a time with the next peeking in, and arrows on the left and right */
  .pg{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .pg::-webkit-scrollbar{ display:none; }
  .pg > *{ flex:0 0 84%; scroll-snap-align:center; }
  .pg-btn{ display:grid; place-items:center; position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:40px; height:40px; border-radius:50%; border:0; background:var(--gold); color:#000; font-size:1.1rem; font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.5); cursor:pointer; }
  .pg-btn.prev{ left:-6px; } .pg-btn.next{ right:-6px; }
}