/* ==========================================================
   /qacowboy/riders/ : "Meet the Posse" + three rider stories.
   Shared by the posse index and all three detail pages.

   Self-contained: it redeclares the /qacowboy/ western palette tokens
   (same values as qacowboy.css) plus reset, nav, footer, buttons, and
   the rider-specific components, so these four pages do not depend on
   the gear page's stylesheet. Warm brown-black background, cream/tan
   text, amber accents, mono eyebrow labels. No em dashes, no emoji.
   ========================================================== */

:root {
  --bg-0: #140d07;
  --bg-1: #1c130a;
  --bg-2: #26190d;
  --panel-edge: rgba(217, 168, 99, .18);
  --tan: #c99a5b;
  --amber: #dc9a3c;
  --amber-bright: #ecb15a;
  --rust: #b13b25;
  --cream: #f4e9d8;
  --ink-mute: #cdbb9c;
  --ink-dim: #93805f;
  --line: rgba(244, 233, 216, .14);
  --maxw: 1240px;
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-1);
  color: var(--cream);
  font-family: var(--display);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: var(--amber); text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px;
}

/* ───────── nav (sticky, minimal) ───────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(20, 13, 7, .92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: 8px;
  min-height: 64px; padding-top: 10px; padding-bottom: 10px;
}
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; color: var(--cream); font-size: 13px; letter-spacing: 0.03em; }
.logo .mk {
  width: 28px; height: 28px; display: grid; place-items: center; flex: none;
  border: 1.5px solid var(--amber); color: var(--amber);
  font-weight: 700; font-size: 13px; border-radius: 3px;
}
.nav-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nav-links a {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-mute); white-space: nowrap;
}
.nav-links a:hover { color: var(--cream); }

/* "Solutions" dropdown (mirrors qacowboy.css so the riders pages match) */
.nav-drop { position: relative; display: inline-flex; }
.nav-drop-toggle {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-mute); background: none; border: 0; margin: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.nav-drop-toggle:hover,
.nav-drop:hover .nav-drop-toggle,
.nav-drop-toggle[aria-expanded="true"] { color: var(--cream); }
.nd-caret { font-size: 8px; transition: transform .2s ease; }
.nav-drop:hover .nd-caret,
.nav-drop-toggle[aria-expanded="true"] .nd-caret { transform: rotate(180deg); }
.nav-drop::after { content: ""; position: absolute; top: 100%; right: 0; height: 12px; width: 190px; }
.nav-drop-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px;
  background: var(--bg-2); border: 1px solid var(--panel-edge); border-radius: 8px;
  padding: 8px; display: none; flex-direction: column; gap: 2px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .55);
}
.nav-drop:hover .nav-drop-menu,
.nav-drop.open .nav-drop-menu { display: flex; }
.nav-drop-menu a {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-mute); padding: 9px 12px; border-radius: 6px; white-space: nowrap;
}
.nav-drop-menu a:hover { background: rgba(217, 168, 99, .12); color: var(--amber-bright); }

/* ───────── shared eyebrow + section scaffolding ───────── */
.eyebrow {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin: 0 0 14px;
}
.sect { padding: 84px 0; }
.sect-alt { background: var(--bg-2); }
/* story + origin, side by side on the profile pages */
.story .story-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; }
.story-copy h2 { margin-top: 0; }
.story-side { align-self: center; }
.story-side .eyebrow { margin: 0 0 12px; }
/* origin slot - vertical 9:16 video (Eli) or a matching Coming Soon panel (Ada, Cassidy) */
.origin-media {
  position: relative; width: 100%; aspect-ratio: 9 / 16;
  border: 1px solid var(--panel-edge); border-radius: 10px; overflow: hidden;
  background: #0d0a06; box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.origin-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.origin-soon { display: flex; align-items: center; justify-content: center; background: var(--bg-2); }
/* two-part origin as a full-width side-by-side row (Ada): story goes single
   column, the two 9:16 shorts sit beside each other under it */
.story-grid.story-solo { grid-template-columns: 1fr; }
.story-origin { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.story-origin > .eyebrow { margin: 0 0 18px; }
.story-origin-row { display: flex; gap: 22px; flex-wrap: wrap; }
.story-origin-row .origin-part { width: 300px; }
@media (max-width: 680px) { .story-origin-row .origin-part { width: 100%; max-width: 300px; } }
/* four-part origin (Ada): all four share one row, up to 300px each;
   two by two on phones */
.origin-row-four { flex-wrap: nowrap; }
.origin-row-four .origin-part { flex: 1 1 0; min-width: 0; width: auto; max-width: 300px; }
@media (max-width: 560px) {
  .origin-row-four { flex-wrap: wrap; }
  .origin-row-four .origin-part { flex: 1 1 calc(50% - 11px); max-width: none; }
}
.origin-part { margin: 0; }
.origin-part figcaption { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tan); text-align: center; margin-top: 8px; }
/* expand-to-lightbox control on origin videos, same as the episodes page.
   Our own button, so every video pops out the same way no matter which
   controls YouTube's player decides to show for that video. */
.eo-expand {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cream); background: rgba(20, 13, 7, .74); border: 1px solid rgba(244, 233, 216, .28);
  border-radius: 999px; padding: 5px 9px; cursor: pointer;
}
.eo-expand:hover { background: rgba(20, 13, 7, .92); border-color: var(--amber); color: var(--amber-bright); }
.eo-lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(8, 5, 2, .86); padding: 24px; }
.eo-lightbox.is-open { display: flex; }
.eo-lb-frame { position: relative; height: min(85vh, 640px); aspect-ratio: 9 / 16; max-width: 92vw; background: #000; border: 1px solid var(--panel-edge); border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.eo-lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.eo-lb-close { position: absolute; top: -15px; right: -15px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: var(--amber); color: var(--bg-0); border: 0; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.eo-lb-close:hover { background: var(--amber-bright); }
@media (max-width: 520px) { .eo-lb-close { top: 8px; right: 8px; } }
.os-badge {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); border: 1px solid var(--panel-edge); border-radius: 999px; padding: 8px 16px; background: rgba(20, 13, 7, .55);
}
@media (max-width: 860px) {
  .story .story-grid { grid-template-columns: 1fr; gap: 30px; }
  .story-side { max-width: 300px; }
}
/* before/after figures + creed that fill the story column beside the origin slot */
.story-figs-lede { margin: 26px 0 0; color: var(--ink-mute); font-size: 14px; }
.story-lower { display: flex; gap: 30px; align-items: center; margin-top: 14px; }
.story-lower .story-figs { margin-top: 0; flex: 0 0 auto; }
.story-creed {
  margin: 22px 0 0; font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: clamp(19px, 2.2vw, 27px); line-height: 1.22; letter-spacing: -0.01em; color: var(--amber);
}
.story-creed .creed-mark { display: block; font-family: var(--mono); font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 14px; }
/* Rides With, sized to fit beside the story images */
.story-rides { flex: 1 1 auto; }
.story-rides .eyebrow { margin: 0 0 12px; }
.story-rides .rw-line { font-size: 15px; line-height: 1.5; color: var(--cream); margin: 0 0 16px; }
.story-rides .rw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.story-rides .rw-chip {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tan); border: 1px solid var(--panel-edge); border-radius: 999px; padding: 6px 12px;
  transition: border-color .15s ease, color .15s ease;
}
.story-rides .rw-chip:hover { border-color: var(--amber); color: var(--amber-bright); }
.story-figs { display: flex; gap: 16px; margin-top: 14px; }
.story-figs figure { margin: 0; flex: 0 0 auto; text-align: center; }
.story-figs img { display: block; height: 320px; width: auto; border-radius: 8px; border: 1px solid var(--panel-edge); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.story-figs figcaption { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tan); margin-top: 10px; }
@media (max-width: 860px) {
  .story-lower { flex-direction: column; align-items: flex-start; gap: 22px; }
  .story-figs figure { flex: 1 1 0; min-width: 0; }
  .story-figs img { height: auto; width: 100%; }
}
@media (max-width: 760px) { .sect { padding: 56px 0; } }

/* ───────── buttons ───────── */
.btn-west {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--amber); color: var(--bg-0);
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 13px 20px; border-radius: 4px; border: none; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.btn-west:hover { background: var(--amber-bright); transform: translateY(-1px); }
.btn-west .price { opacity: .82; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; color: var(--cream);
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 12px 19px; border-radius: 4px; border: 1px solid var(--panel-edge);
  transition: border-color .15s ease, color .15s ease;
}
.btn-ghost:hover { border-color: var(--amber); color: var(--amber-bright); }

/* ═════════ POSSE INDEX ═════════ */
.posse-hero { padding: 116px 0 8px; }
.posse-hero h1 {
  font-family: var(--display); font-weight: 800; font-size: clamp(34px, 6vw, 60px);
  line-height: 1.06; letter-spacing: -0.02em; color: var(--cream); margin: 0 0 14px;
}
.posse-hero .posse-sub { font-size: clamp(15px, 2vw, 19px); color: var(--ink-mute); margin: 0; max-width: 520px; }

.posse-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  padding: 48px 0 8px;
}
@media (max-width: 860px) { .posse-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

.posse-card {
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--panel-edge); border-radius: 8px;
  overflow: hidden; color: var(--cream);
  transition: border-color .16s ease, transform .16s ease;
}
.posse-card:hover { border-color: var(--amber); transform: translateY(-2px); }
.posse-card .pc-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-0); }
.posse-card .pc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.posse-card .pc-body { padding: 18px 18px 22px; display: flex; flex-direction: column; flex: 1; }
.posse-card .pc-title { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin: 0 0 8px; }
.posse-card .pc-name { font-family: var(--display); font-weight: 800; font-size: clamp(19px, 2.1vw, 23px); line-height: 1.12; color: var(--cream); margin: 0 0 8px; }
.posse-card .pc-role { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tan); line-height: 1.3; margin: 0 0 16px; }
.posse-card .pc-creed { font-size: 15px; line-height: 1.5; color: var(--ink-mute); font-style: italic; margin: 0 0 18px; flex: 1; }
.posse-card .pc-read { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--amber); display: inline-flex; align-items: center; gap: 6px; }
.posse-card:hover .pc-read { color: var(--amber-bright); }

.posse-close {
  margin-top: 40px; padding: 30px; border: 1px solid var(--panel-edge); border-radius: 8px;
  background: linear-gradient(160deg, rgba(220, 154, 60, .12), transparent 62%);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
}
.posse-close p { margin: 0; font-size: 15.5px; color: var(--ink-mute); }
.posse-close p a { font-weight: 700; }

/* ═════════ RIDER DETAIL ═════════ */
/* 1. full-height hero: geared portrait, name + role at the bottom */
.rider-hero {
  position: relative; height: 92vh; min-height: 560px; max-height: 960px; overflow: hidden;
  display: flex; align-items: flex-end;
}
.rider-hero .rh-media { position: absolute; inset: 0; z-index: 0; }
.rider-hero .rh-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.rider-hero .rh-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,13,7,.08) 0%, rgba(20,13,7,.22) 52%, rgba(20,13,7,.92) 100%);
}
.rider-hero .rh-copy { position: relative; z-index: 2; width: 100%; padding-bottom: 54px; }
/* archetype eyebrow: amber lead-tick + editorial tracking, layered shadow for photo legibility */
.rider-hero .rh-title {
  display: inline-flex; align-items: center; gap: clamp(12px, 1.4vw, 18px);
  font-family: var(--mono); font-size: clamp(13px, calc(0.6vw + 10px), 17px);
  font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--amber-bright); margin: 0 0 clamp(14px, 1.8vw, 20px);
  text-shadow: 0 2px 14px rgba(0,0,0,.72), 0 1px 2px rgba(0,0,0,.6);
}
.rider-hero .rh-title::before {
  content: ""; flex: none; width: clamp(24px, 4vw, 32px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--amber-bright), var(--amber));
  box-shadow: 0 0 10px rgba(220, 154, 60, .55);
}
/* job role: amber-to-rust hairline lead-in, balanced two-line wrap for the long SDET string */
.rider-hero .rh-role {
  display: block; max-width: 660px; margin: clamp(20px, 2.4vw, 28px) 0 0;
  font-family: var(--mono); font-size: clamp(14px, calc(0.9vw + 9px), 18px);
  font-weight: 600; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase;
  color: var(--tan); text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0,0,0,.72), 0 1px 2px rgba(0,0,0,.6);
}
.rider-hero .rh-role::before {
  content: ""; display: block; width: clamp(150px, 30vw, 240px); height: 1px;
  margin-bottom: clamp(14px, 1.8vw, 18px);
  background: linear-gradient(90deg,
    var(--amber) 0, var(--amber-bright) 18px, var(--rust) 30px,
    var(--line) 30px, var(--line) 100%);
}
@media (max-width: 760px) {
  .rider-hero .rh-title { gap: 12px; letter-spacing: 0.16em; margin-bottom: 13px; }
  .rider-hero .rh-role { letter-spacing: 0.04em; margin-top: 15px; }
  .rider-hero .rh-role::before { width: clamp(120px, 40vw, 170px); margin-bottom: 13px; }
}
.rider-hero h1 {
  font-family: var(--display); font-weight: 800; font-size: clamp(34px, 7vw, 68px);
  line-height: 1.04; letter-spacing: -0.02em; color: var(--cream); margin: 0;
  text-shadow: 0 3px 26px rgba(0,0,0,.55);
}
@media (max-width: 760px) { .rider-hero { height: 84vh; min-height: 520px; } .rider-hero .rh-copy { padding-bottom: 40px; } }

/* 2. the story */
.story h2, .creed-sect h2, .gearup h2, .rides h2, .rider-cta h2 {
  font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.2; color: var(--cream); margin: 0 0 22px;
}
.story p { font-size: 17px; line-height: 1.72; color: var(--ink-mute); margin: 0; max-width: 720px; }

/* 3. the gear-up: bareback | geared */
.gearup .gu-lede { font-size: 16px; line-height: 1.6; color: var(--ink-mute); max-width: 640px; margin: 0 0 34px; }
.gearup-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--panel-edge); border-radius: 8px; overflow: hidden; }
.gearup-pair .gu-fig { margin: 0; position: relative; background: var(--bg-0); }
.gearup-pair .gu-fig + .gu-fig { border-left: 2px solid var(--amber); }
.gearup-pair .gu-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; aspect-ratio: 3 / 4; }
.gearup-pair .gu-cap {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  font-family: var(--mono); font-size: clamp(20px, 3.4vw, 30px); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
  color: var(--cream); padding: 18px 12px 30px;
  background: linear-gradient(180deg, rgba(20,13,7,.9) 0%, rgba(20,13,7,.55) 55%, rgba(20,13,7,0) 100%);
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.gearup-pair .gu-fig.is-geared .gu-cap { color: var(--amber-bright); }
/* Nudge the crop down a touch so the big top label sits over sky and hat,
   not across the rider's face. */
.gearup-pair .gu-fig img { object-position: 50% 26%; }
@media (max-width: 640px) {
  .gearup-pair { grid-template-columns: 1fr; }
  .gearup-pair .gu-fig + .gu-fig { border-left: none; border-top: 2px solid var(--amber); }
}

/* 4. the creed */
.creed-sect { text-align: center; }
.creed-sect blockquote {
  margin: 0 auto; max-width: 900px;
  font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: clamp(26px, 5vw, 46px); line-height: 1.18; letter-spacing: -0.01em;
  color: var(--amber);
}
.creed-sect .creed-mark { display: block; font-family: var(--mono); font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 20px; }

/* 5. rides with */
.rides .rw-line { font-size: 18px; line-height: 1.6; color: var(--cream); margin: 0 0 20px; max-width: 720px; }
.rides .rw-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.rides .rw-chip {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tan); border: 1px solid var(--panel-edge); border-radius: 999px; padding: 8px 15px;
  transition: border-color .15s ease, color .15s ease;
}
.rides .rw-chip:hover { border-color: var(--amber); color: var(--amber-bright); }

/* 6a. the persona (educational): technique + a real prompt to steal */
.persona .persona-lede { font-size: 16px; line-height: 1.65; color: var(--ink-mute); max-width: 680px; margin: 0 0 30px; }
.persona-card {
  border: 1px solid var(--panel-edge); border-radius: 10px; overflow: hidden;
  background: linear-gradient(165deg, rgba(220, 154, 60, .08), var(--bg-2) 60%);
  max-width: 780px;
}
.persona-card .persona-name {
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--amber); margin: 0; padding: 20px 22px 0;
}
.persona-card .persona-what { font-size: 15.5px; line-height: 1.6; color: var(--ink-mute); margin: 8px 0 0; padding: 0 22px 20px; }
.prompt-block { border-top: 1px solid var(--panel-edge); background: rgba(20, 13, 7, .55); }
.prompt-block .prompt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px 12px 22px;
}
.prompt-block .prompt-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.prompt-block .prompt-copy {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--amber); background: transparent; border: 1px solid var(--panel-edge); border-radius: 4px;
  padding: 7px 12px; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.prompt-block .prompt-copy:hover { border-color: var(--amber); color: var(--amber-bright); }
.prompt-block .prompt-copy.copied { color: var(--cream); border-color: var(--amber); }
.prompt-block .prompt-text {
  margin: 0; padding: 4px 22px 22px; white-space: pre-wrap; word-break: break-word;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.65; color: var(--cream);
}
.persona-more { font-size: 14px; color: var(--ink-mute); margin: 18px 0 0; }
.persona-more a { font-weight: 700; }

/* 6. cta */
.rider-cta .cta-sub { font-size: 16px; color: var(--ink-mute); margin: 0 0 26px; max-width: 620px; }
.rider-cta .cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* 7. footer nav: other riders + back to posse */
.rider-footnav { border-top: 1px solid var(--line); padding: 44px 0 64px; }
.rider-footnav .fn-back { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.rider-footnav .fn-back:hover { color: var(--amber); }
.rider-footnav .fn-others { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
@media (max-width: 560px) { .rider-footnav .fn-others { grid-template-columns: 1fr; } }
.rider-footnav .fn-card {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  border: 1px solid var(--panel-edge); border-radius: 8px; background: var(--bg-2); color: var(--cream);
  transition: border-color .16s ease;
}
.rider-footnav .fn-card:hover { border-color: var(--amber); }
.rider-footnav .fn-card img { width: 56px; height: 70px; object-fit: cover; object-position: 50% 20%; border-radius: 4px; flex: none; }
.rider-footnav .fn-meta { display: flex; flex-direction: column; }
.rider-footnav .fn-meta .fn-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 3px; }
.rider-footnav .fn-meta .fn-name { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--cream); margin: 0; }

/* ───────── footer ───────── */
footer.site-foot { border-top: 1px solid var(--line); padding: 34px 0 56px; }
footer.site-foot .foot-links { display: flex; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 12.5px; color: var(--ink-mute); }
footer.site-foot .foot-links a:hover { color: var(--amber); }
footer.site-foot .foot-copy { margin-top: 16px; font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }

@media (max-width: 480px) {
  .posse-hero { padding: 100px 0 4px; }
  .posse-close { padding: 22px; }
}