/* ============================================
   MARCOS COLLADO, RHP #7
   Design tokens
   ============================================ */
:root {
  --ink: #0e1116;          /* near-black navy, cap/jacket */
  --ink-soft: #16202c;
  --navy: #16324a;         /* secondary dark, jacket blue */
  --gold: #c9a227;         /* cap "H" gold */
  --gold-bright: #e2bc3f;
  --chalk: #f6f3ec;        /* off-white background, baseball chalk line */
  --chalk-dim: #ece7d9;
  --clay: #a8532e;         /* infield dirt accent */
  --line: #d8d2c2;
  --ink-70: rgba(14,17,22,0.7);
  --ink-45: rgba(14,17,22,0.45);

  --display: "Oswald", "Arial Narrow", sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--chalk);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
picture { display: block; }
picture img { width: 100%; height: 100%; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- layout shells ---------- */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.nav-name {
  font-family: var(--display);
  color: var(--chalk);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.nav-name .num {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.85rem;
  display: inline-block;
  transform-origin: center;
  animation: numPop 8.5s ease-in-out infinite;
  animation-delay: 0s;
}
.nav-name .shine {
  background-image: linear-gradient(
    100deg,
    var(--chalk) 28%,
    var(--chalk) 38%,
    #fff 50%,
    var(--gold-bright) 55%,
    var(--chalk) 68%,
    var(--chalk) 100%
  );
  background-size: 320% auto;
  background-position: 220% center;
  background-clip: text;
  -webkit-background-clip: text;
  color: var(--chalk);
  -webkit-text-fill-color: transparent;
  animation: nameShine 8.5s ease-in-out infinite;
  animation-delay: 0s;
}
@keyframes nameShine {
  0% { background-position: 220% center; }
  55% { background-position: -80% center; }
  100% { background-position: -80% center; }
}
@keyframes numPop {
  0%, 65% { transform: scale(1); }
  78% { transform: scale(1.45); }
  90% { transform: scale(1); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-name .shine { animation: none; background-position: -80% center; }
  .nav-name .num { animation: none; }
}
.nav-links {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: block;
  padding: 10px 16px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(246,243,236,0.75);
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--gold-bright);
  border-color: var(--gold);
}
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(246,243,236,0.3);
  color: var(--chalk);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 1rem;
}

@media (max-width: 1150px) {
  .nav-toggle { display: block; }
  /* The panel hangs off the bar itself rather than a hard-coded 68px offset.
     The nav shrinks to 52px once the page is scrolled, so a fixed offset left
     a 15px strip of page content showing between the bar and the open menu. */
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--ink);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 28px; }
}

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
  color: var(--chalk);
  position: relative;
  overflow: hidden;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 56px;
}
.hero-eyebrow {
  font-family: var(--mono);
  color: var(--gold-bright);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 0.98;
  text-transform: uppercase;
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}
.hero h1 span { color: var(--gold); }
.hero-sub {
  font-size: 1.05rem;
  color: rgba(246,243,236,0.8);
  max-width: 46ch;
  margin: 0 0 28px;
  line-height: 1.55;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  padding: 13px 26px;
  border-radius: 3px;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { background: var(--gold-bright); transform: translateY(-1px); }
.btn-ghost { border: 1px solid rgba(246,243,236,0.4); color: var(--chalk); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); }

.hero-photo {
  position: relative;
}
.hero-photo img {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.hero-photo .tag {
  position: absolute;
  bottom: -18px;
  left: -18px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  border-radius: 3px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: 1fr; padding-top: 40px; }
  .hero-photo { order: -1; max-width: 340px; margin: 0 auto; }
}

/* ---------- radar readout strip ---------- */
.readout {
  background: var(--ink-soft);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.readout .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 26px 28px;
}
.readout-item {
  text-align: center;
  border-left: 1px solid rgba(255,255,255,0.1);
  padding: 0 12px;
}
.readout-item:first-child { border-left: none; }
.readout-value {
  font-family: var(--mono);
  color: var(--gold-bright);
  font-size: 1.7rem;
  letter-spacing: 0.02em;
}
.readout-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246,243,236,0.6);
  margin-top: 4px;
}
@media (max-width: 640px) {
  .readout .wrap { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .readout-item:nth-child(3) { border-left: none; }
}

/* ---------- sections ---------- */
section.block { padding: 72px 0; }
.block-alt { background: var(--chalk-dim); }
.eyebrow {
  font-family: var(--mono);
  color: var(--clay);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
h2.section-title {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin: 0 0 28px;
  letter-spacing: 0.01em;
}
p.lede {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-70);
  max-width: 64ch;
}

/* ---------- two column ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 760px) {
  .two-col { grid-template-columns: 1fr; }
}
.portrait-frame {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(14,17,22,0.18);
}
.portrait-frame img { width: 100%; }

/* ---------- fact list ---------- */
.fact-list { list-style: none; margin: 24px 0 0; padding: 0; }
.fact-list li {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}
.fact-list li span:first-child {
  color: var(--ink-45);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--mono);
}
.fact-list li span:last-child { font-weight: 600; }

@media (max-width: 560px) {
  .fact-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 0;
  }
  .fact-list li span:first-child { font-size: 0.76rem; }
  .fact-list li span:last-child { text-align: left; font-size: 0.94rem; line-height: 1.4; }
}

/* ---------- honors ---------- */
.honors { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.honors li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.98rem;
  line-height: 1.5;
}
.honors li::before {
  content: "";
  width: 8px; height: 8px;
  margin-top: 7px;
  background: var(--gold);
  flex-shrink: 0;
  transform: rotate(45deg);
}

/* ---------- scouting card (signature element) ---------- */
.scout-card {
  background: var(--ink);
  color: var(--chalk);
  border-radius: 6px;
  padding: 36px;
  box-shadow: 0 24px 50px rgba(14,17,22,0.25);
}
.scout-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.scout-card-head h3 {
  font-family: var(--display);
  text-transform: uppercase;
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
}
.scout-card-head .scale-note {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: rgba(246,243,236,0.55);
}

.grade-row { margin-bottom: 22px; }
.grade-row:last-child { margin-bottom: 0; }
.grade-row-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.88rem;
}
.grade-row-top .name { text-transform: uppercase; letter-spacing: 0.04em; color: rgba(246,243,236,0.85); }
.grade-row-top .grade { font-family: var(--mono); color: var(--gold-bright); font-weight: 600; }

.scale-track {
  position: relative;
  height: 6px;
  background: rgba(246,243,236,0.15);
  border-radius: 3px;
}
.scale-fill {
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 0;
  background: var(--gold);
  border-radius: 3px;
}
.scale-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: rgba(246,243,236,0.4);
}

.scout-card-foot {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.78rem;
  color: rgba(246,243,236,0.5);
  line-height: 1.6;
}

/* ---------- stat table ---------- */
.stat-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.stat-table th, .stat-table td {
  text-align: left;
  padding: 14px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}
.stat-table th {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-45);
  font-weight: 500;
}
.stat-table td.num { font-family: var(--mono); color: var(--clay); font-weight: 600; }

/* ---------- video ---------- */
.video-frame {
  position: relative;
  padding-top: 56.25%;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(14,17,22,0.18);
}
.video-frame iframe,
.video-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--ink);
  object-fit: cover; object-position: top center;
}

/* ---------- gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
  justify-content: start;
  gap: 16px;
}
.gallery-grid figure {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(14,17,22,0.15);
  background: #fff;
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.gallery-grid figcaption {
  padding: 10px 12px;
  font-size: 0.82rem;
  color: var(--ink-70);
  line-height: 1.4;
}
.gallery-more {
  margin-top: 28px;
  border: 1px dashed var(--line);
  border-radius: 4px;
  padding: 24px;
  text-align: center;
  color: var(--ink-45);
  font-size: 0.92rem;
}

/* ---------- contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
}
.contact-card h3 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.05rem;
  margin: 0 0 18px;
  letter-spacing: 0.03em;
  color: var(--clay);
}
.contact-row { margin-bottom: 14px; font-size: 0.95rem; }
.contact-row .k {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 3px;
}
.contact-row a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--gold); }
.contact-row a:hover { color: var(--clay); }

.hero-tagline {
  font-family: var(--mono);
  color: var(--gold-bright);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-block;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* animated fill for scale bars */
.scale-fill {
  transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px 1px rgba(226,188,63,0.55);
}

/* card hover lift */
.contact-card, .scout-card, .portrait-frame, .gallery-grid figure {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(14,17,22,0.12); }
.scout-card:hover { transform: translateY(-3px); }
.portrait-frame:hover, .gallery-grid figure:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(14,17,22,0.22); }

/* ---------- personal motto ---------- */
.motto-block {
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px 22px;
  margin: 32px 0 0;
}
.motto-block .motto-text {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 6px;
}
.motto-block .motto-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.footer-motto {
  font-family: var(--mono);
  font-style: italic;
  color: rgba(201,162,39,0.85);
  letter-spacing: 0.04em;
}
.video-caption-motto {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ink-45);
  letter-spacing: 0.04em;
  margin-top: 10px;
}
.divider-gold {
  border: none;
  height: 1px;
  background: linear-gradient(to right, var(--gold), rgba(201,162,39,0.08));
  width: 100%;
  max-width: 380px;
  margin: 30px 0 20px;
}
.pull-quote {
  font-family: var(--body);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--ink-70);
  line-height: 1.6;
  max-width: 48ch;
  margin: 0;
}

/* ---------- signature mark (MC7 script) ---------- */
.dev-section-dark {
  background: var(--ink-soft);
  color: var(--chalk);
}
.dev-section-dark .eyebrow { color: var(--gold-bright); }
.dev-section-dark h2.section-title { color: var(--chalk); }
.script-mark {
  display: inline-block;
  line-height: 0;
}
.script-mark img { height: 30px; width: auto; display: block; }
.dev-header-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 14px;
}
.dev-header-mark .rule {
  height: 1px;
  width: 90px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.dev-header-mark .rule.right { background: linear-gradient(to left, transparent, var(--gold), transparent); }
.dev-subhead {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(246,243,236,0.55);
  margin: 0 0 40px;
}
.dev-section-head { text-align: center; }
.dev-section-head h2 { text-align: center; }

/* ---------- follow-development cards v2 ---------- */
.dev-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 34px;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.dev-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
}
.dev-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 46px rgba(0,0,0,0.35);
}
.dev-card-icon-v2 {
  width: auto;
  height: 64px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  transition: transform 0.28s ease;
}
.dev-card:hover .dev-card-icon-v2 { transform: scale(1.05); }
.dev-card-icon-v2 svg { width: 60px; height: 60px; fill: var(--chalk); }
.dev-card-icon-v2 .pg-badge { color: var(--chalk); font-size: 2.4rem; }
.dev-card h3 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gold-bright);
  font-size: 1.05rem;
  margin: 0 0 8px;
  text-align: center;
}
.dev-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  text-align: center;
}
.dev-list li {
  font-size: 0.9rem;
  color: rgba(246,243,236,0.75);
  padding: 4px 0;
}
.dev-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(226,188,63,0.5);
  color: var(--gold-bright);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 3px;
  margin-top: auto;
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}
.dev-btn:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.dev-btn svg { width: 12px; height: 12px; fill: currentColor; transition: transform 0.28s ease; }
.dev-btn:hover svg,
.dev-card:hover .dev-btn svg { transform: translateX(3px); }

/* ---------- featured video block ---------- */
.featured-video-block {
  background: var(--ink-soft);
  border-radius: 8px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 820px) {
  .featured-video-block { grid-template-columns: 1fr; }
}
.featured-video-block .lite-video {
  margin: 0;
  box-shadow: 0 20px 44px rgba(0,0,0,0.4);
}
.fv-copy {
  border: 1px solid rgba(226,188,63,0.25);
  border-radius: 8px;
  padding: 26px 30px;
  background: rgba(14,17,22,0.3);
}
.fv-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  color: rgba(246,243,236,0.85);
  font-family: var(--mono);
  font-size: 0.72rem;
  z-index: 2;
}
.fv-controls .fv-spacer { flex: 1; }
.fv-controls svg { width: 15px; height: 15px; fill: rgba(246,243,236,0.85); }
.fv-copy .eyebrow { margin-bottom: 6px; }
.fv-copy h3 {
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--chalk);
  font-size: 1.5rem;
  margin: 0 0 14px;
  letter-spacing: 0.01em;
}
.fv-copy p {
  color: rgba(246,243,236,0.65);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 22px;
}

/* ---------- brick stack icon ---------- */
.brick-stack { width: 46px; height: 25px; margin: 4px 0 0; }
.brick-stack rect { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.brick-stack line { stroke: var(--gold); stroke-width: 1.2; opacity: 0.7; }

/* ---------- footer v2 ---------- */
.footer-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding: 44px 0 8px;
}
@media (max-width: 760px) {
  .footer-v2 { grid-template-columns: 1fr; text-align: center; gap: 34px; }
}
.footer-col { display: flex; flex-direction: column; }
.footer-col.center { align-items: center; }
.footer-col.right { align-items: flex-end; text-align: right; }
@media (max-width: 760px) {
  .footer-col.right { align-items: center; text-align: center; }
  .footer-col { align-items: center; }
}
.footer-name { color: var(--gold-bright); font-size: 0.95rem; margin-top: 10px; letter-spacing: 0.03em; }
.footer-role {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(246,243,236,0.45);
  margin-top: 4px;
}
.footer-connect-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 14px;
}
.footer-quote {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-bright);
  line-height: 1.7;
  max-width: 26ch;
}
.footer-divider-row {
  border-top: 1px solid rgba(246,243,236,0.08);
  margin-top: 8px;
  padding-top: 18px;
  text-align: center;
}
footer.site-footer {
  background: var(--ink);
  color: rgba(246,243,236,0.6);
  padding: 40px 0 32px;
  font-size: 0.85rem;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.footer-mc7 {
  font-family: var(--display);
  color: var(--chalk);
  font-size: 1rem;
  letter-spacing: 0.08em;
}
.footer-mc7 .num { color: var(--gold); }
.footer-copy { color: rgba(246,243,236,0.5); font-size: 0.82rem; }
.footer-legal {
  /* Was 620px and centerd, which forced five short paragraphs into a tall
     narrow stack on desktop. Now full width in two columns, so the block
     reads as a footer band rather than a column of fine print.
     Opacity raised from 0.32, that was roughly 3:1 against the dark
     background, below the 4.5:1 WCAG AA floor for text this size. */
  color: rgba(246,243,236,0.58);
  font-size: 0.74rem;
  line-height: 1.65;
  max-width: 900px;
  margin: 10px auto 0;
  text-align: left;
}
.footer-legal p { break-inside: avoid; }
.footer-social { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(246,243,236,0.2);
  color: rgba(246,243,236,0.75);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  transform: translateY(-2px);
}
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.pg-badge {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 0.7rem;
  line-height: 1;
}
.fl-badge {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 0.7rem;
  line-height: 1;
}
.dev-card-icon-v2 .fl-badge { color: var(--chalk); font-size: 2.4rem; }
.dev-card-icon .fl-badge { font-size: 0.95rem; }
.dev-card-icon .pg-badge { font-size: 0.95rem; }
@media (max-width: 700px) {
  .footer-grid { flex-direction: column; text-align: center; }
}

/* ---------- scroll progress bar ---------- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(to right, var(--gold), var(--gold-bright));
  z-index: 100;
  transition: width 0.1s ease-out;
}

/* ---------- sticky shrinking nav ---------- */
.site-nav { transition: height 0.3s ease; }
.site-nav .wrap { transition: height 0.3s ease; }
.site-nav.scrolled .wrap { height: 52px; }
.site-nav.scrolled .nav-name { font-size: 0.92rem; transition: font-size 0.3s ease; }

/* ---------- hero parallax ---------- */
.hero-photo { will-change: transform; }
.hero-photo img { will-change: transform; }

/* ---------- image hover zoom ---------- */
.portrait-frame, .gallery-grid figure { position: relative; }
.portrait-frame img, .gallery-grid img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.portrait-frame:hover img, .gallery-grid figure:hover img {
  transform: scale(1.02);
}

/* ---------- card hover: gold accent bar ---------- */
.contact-card, .scout-card {
  position: relative;
  overflow: hidden;
}
.contact-card::before, .scout-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.contact-card:hover::before, .scout-card:hover::before {
  transform: scaleX(1);
}

/* ---------- timeline row reveal (event/camp tables) ---------- */
.reveal table tbody tr {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.in-view table tbody tr { opacity: 1; transform: translateX(0); }

/* ---------- heading reveal ---------- */
.reveal h2.section-title {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease 0.05s, transform 0.7s ease 0.05s;
}
.reveal.in-view h2.section-title { opacity: 1; transform: translateY(0); }

/* ---------- quote fade-in (distinct from slide reveal) ---------- */
.reveal .pull-quote, .reveal .motto-block {
  transform: none;
  opacity: 0;
  transition: opacity 1.1s ease 0.25s;
}
.reveal.in-view .pull-quote, .reveal.in-view .motto-block { opacity: 1; }

/* ---------- lite video (click-to-load embed with play overlay) ---------- */
.lite-video {
  display: block;
  position: relative;
  padding-top: 56.25%;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(14,17,22,0.18);
  cursor: pointer;
  background: var(--ink) center/cover no-repeat;
}
.lite-video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.lite-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14,17,22,0.25);
  transition: background 0.25s ease;
}
.lite-video:hover .lite-video-play { background: rgba(14,17,22,0.4); }
.lite-video-play-btn {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(246,243,236,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.25s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.lite-video:hover .lite-video-play-btn {
  transform: scale(1.08);
  background: var(--gold);
}
.lite-video-play-btn svg { width: 26px; height: 26px; fill: var(--ink); margin-left: 4px; }

/* ---------- lightbox ---------- */
#lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,12,16,0.94);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#lightbox-overlay.open { display: flex; opacity: 1; }
#lightbox-overlay img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: rgba(246,243,236,0.1);
  border: 1px solid rgba(246,243,236,0.25);
  color: var(--chalk);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
  background: var(--gold); border-color: var(--gold); color: var(--ink);
}
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox-prev, .lightbox-next { width: 38px; height: 38px; }
}
.gallery-grid figure, .portrait-frame { cursor: zoom-in; }

/* ---------- follow the development section ---------- */
.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 760px) {
  .dev-grid { grid-template-columns: 1fr; }
}
.dev-card {
  background: var(--ink);
  color: var(--chalk);
  border-radius: 6px;
  padding: 34px 28px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dev-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(14,17,22,0.3); }

/* ---------- homepage identity strip ---------- */
.identity-strip {
  position: relative;
  background: var(--ink-soft);
}
.identity-strip::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
}
.identity-strip .wrap { padding: 22px 28px; }
.identity-strip p {
  margin: 0;
  text-align: center;
  color: rgba(246,243,236,0.85);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.5;
}
.journey-entry {
  border-left: 3px solid var(--gold);
  padding: 2px 0 2px 22px;
  margin: 0 0 26px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view .journey-entry { opacity: 1; transform: translateY(0); }
.journey-entry:last-child { margin-bottom: 0; }
.journey-entry-date {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.upcoming-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 3px;
  padding: 2px 7px;
}
@view-transition {
  navigation: auto;
}

/* ---------- development journey closing quote ---------- */
.journey-quote { padding: 90px 0; }
.journey-quote .wrap { max-width: 720px; text-align: center; }
.journey-quote-text {
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.65;
  color: rgba(14,17,22,0.78);
  margin: 0 0 18px;
}
.journey-quote-name {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

/* ---------- utility classes (replaces inline style="" attributes for CSP hardening) ---------- */
.u-pb-0 { padding-bottom: 0; }
.hero .wrap.u-subpage-head { grid-template-columns: 1fr; padding-bottom: 48px; }
.hero h1.u-h1-compact { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.u-subpage-head { grid-template-columns: 1fr; padding-bottom: 48px; }
.u-h1-compact { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.u-mw-640 { max-width: 640px; }
.u-mw-480 { max-width: 480px; }
.u-link-gold { border-bottom: 1px solid var(--gold); font-weight: 600; }
.u-mt-16 { margin-top: 16px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-26 { margin-top: 26px; }
.u-mb-8 { margin-bottom: 8px; }
.u-mb-20 { margin-bottom: 20px; }
.u-mb-28 { margin-bottom: 28px; }
.u-mt-24-mb-8 { margin-top: 24px; margin-bottom: 8px; }
.u-mt-16-sm { margin-top: 16px; font-size: 0.92rem; }
.u-label-strong { margin-bottom: 8px; font-weight: 600; color: var(--ink); }
.u-note-italic { margin-top: 14px; font-size: 0.82rem; color: var(--ink-45); font-style: italic; }
.u-btn-ghost-onlight { border-color: #d8d2c2; color: var(--ink); }
.u-btn-gold-solid { background: var(--gold); color: var(--ink); }

/* ============================================
   Hitting development + verified metrics
   Added Aug 2026 alongside the KBA/Rapsodo baseline.
   Reuses the existing token set, no new colors.
   ============================================ */

.hitting-block { border-top: 1px solid var(--line); }
.hitting-sub {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 6px 0 26px;
}
.hitting-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.swing-set { display: grid; }
.swing { margin: 0; }
.swing video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
  object-fit: cover;
}
.swing figcaption {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.swing-time { color: var(--ink-45); }

.hitting-note {
  max-width: 720px;
  margin: 24px 0 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-70);
}

/* --- verified metric cards --- */
.vstat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.vstat-grid-stack { grid-template-columns: 1fr; }
.vstat {
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  background: #fff;
  padding: 18px 18px 16px;
}
.vstat-value {
  display: block;
  font-family: var(--display);
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.vstat-unit {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  margin-left: 5px;
  color: var(--ink-45);
  letter-spacing: 0.04em;
}
.vstat-label {
  display: block;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* --- attribution: verified vs self-reported must read differently --- */
.attr-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  margin-right: 9px;
  border-radius: 2px;
  vertical-align: 1px;
}
.attr-verified { background: var(--gold); color: var(--ink); font-weight: 600; }
.attr-self { background: var(--chalk-dim); color: var(--ink-70); border: 1px solid var(--line); }
.attr-line {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--ink-70);
  line-height: 1.9;
}
.attr-fine {
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-45);
  max-width: 640px;
}

@media (max-width: 860px) {
  .hitting-grid { grid-template-columns: 1fr; gap: 26px; }
  .vstat-grid-stack { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ============================================
   Breadcrumbs, contact reveal, and touch/tablet
   accessibility fixes.
   ============================================ */

.breadcrumb {
  background: var(--chalk-dim);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 11px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; color: var(--ink-45); }
.breadcrumb li + li::before { content: "/"; color: var(--ink-45); }
.breadcrumb a {
  color: var(--ink-70);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
  padding: 6px 0;
}
.breadcrumb a:hover { color: var(--ink); text-decoration-color: var(--gold); }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* --- click-to-reveal contact --- */
.reveal-contact,
.contact-btn {
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--chalk-dim);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 9px 14px;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.reveal-contact:hover,
.contact-btn:hover { background: #fff; border-color: var(--gold); }
.revealed-contact {
  display: inline-block;
  padding: 10px 0;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold);
  word-break: break-word;
}

/* --- minimum legible sizes (previously as low as 9.9px) --- */
.vstat-label { font-size: 0.75rem; }
.attr-tag { font-size: 0.7rem; }
.attr-line { font-size: 0.78rem; }
.swing figcaption, .swing-time { font-size: 0.75rem; }

/* --- tablet portrait: two cramped columns became one --- */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr !important; gap: 32px; }
  .contact-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* --- touch targets: WCAG 2.5.8 wants 24px minimum, 44px is the comfortable
       target. Applied only on coarse pointers so mouse layouts stay tight. --- */
@media (pointer: coarse) {
  .nav-links a,
  .footer-social a,
  .dev-btn,
  .u-link-gold,
  .contact-row a,
  .breadcrumb a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-toggle { min-width: 44px; min-height: 44px; }
  .footer-social a { min-width: 44px; justify-content: center; }
}

/* --- honour notch/safe areas on modern phones --- */
@supports (padding: max(0px)) {
  .wrap {
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, env(safe-area-inset-right));
  }
}

/* --- visible keyboard focus everywhere --- */
a:focus-visible,
button:focus-visible,
video:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.card-fine {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-45);
}

/* ============================================
   Coach snapshot + schedule
   ============================================ */

.snapshot-block { border-bottom: 1px solid var(--line); }
.snapshot-strip {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px;
}
.snapshot-strip li {
  border-left: 2px solid var(--gold); padding-left: 12px;
  font-size: 0.95rem; color: var(--ink); line-height: 1.35;
}
.snapshot-strip span {
  display: block; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 4px;
}
.snapshot-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.snap-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 16px; border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.snap-btn:hover { border-color: var(--gold); background: #fff; }
.snap-btn-solid { background: var(--gold); border-color: var(--gold); font-weight: 600; }

.sched-list { list-style: none; margin: 0; padding: 0; }
.sched-item {
  display: grid; grid-template-columns: 190px 1fr; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.sched-item:last-child { border-bottom: none; }
.sched-date {
  display: block; font-family: var(--mono); font-size: 0.82rem;
  letter-spacing: 0.04em; color: var(--ink); font-weight: 600;
}
.sched-window { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-45); margin-top: 3px; }
.sched-event { margin: 0; font-weight: 600; font-size: 1rem; color: var(--ink); }
.sched-meta { margin: 4px 0 0; font-size: 0.86rem; color: var(--ink-70); }
.sched-note {
  margin: 6px 0 0; display: inline-block; font-family: var(--mono);
  font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink); background: var(--gold); padding: 3px 8px; border-radius: 2px;
}
.sched-empty { max-width: 620px; font-size: 0.95rem; line-height: 1.7; color: var(--ink-70); margin: 0; }

@media (max-width: 640px) {
  .sched-item { grid-template-columns: 1fr; gap: 8px; }
  .snap-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================
   Motion, adapted from the Manaco stack.

   The existing .reveal system already handles section-level entrances and
   has bespoke staggering for tables and journey entries. What was missing:
   a general child-stagger for grids, and image entrance/hover treatment.
   All of it sits behind prefers-reduced-motion.
   ============================================ */

@media (prefers-reduced-motion: no-preference) {

  /* --- child stagger: grid items arrive in sequence rather than as a slab.
         Delays are capped at six so a long list doesn't crawl in. --- */
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
  .reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.04s; }
  .reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.12s; }
  .reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.20s; }
  .reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.28s; }
  .reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.36s; }
  .reveal-stagger.in-view > *:nth-child(n + 6) { transition-delay: 0.44s; }

  /* --- photos settle from a slight overscale instead of just fading --- */
  .gallery-grid figure img { transform: scale(1.06); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
  .reveal-stagger.in-view .gallery-grid figure img,
  .gallery-grid.in-view figure img,
  .reveal.in-view .gallery-grid figure img { transform: scale(1); }

  /* --- gold sweep under the hero, borrowed from Manaco's .hero-line --- */
  .accent-sweep {
    position: relative;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    background-size: 200% 100%;
    animation: accentSweep 5s ease-in-out infinite;
  }
  @keyframes accentSweep {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
  }
}

/* Hover lift on photos, pointer devices only, so it never fires as a
   sticky :hover state on touch. */
@media (hover: hover) and (pointer: fine) {
  .gallery-grid figure { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .gallery-grid figure:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(14, 17, 22, 0.22); }
  .gallery-grid figure img { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
  .gallery-grid figure:hover img { transform: scale(1.04); }
}

/* --- swipeable photo strip instead of a cramped stack ---
   Same 900px threshold as .swing-set, so photos and videos always behave
   alike. Covers phones, phone landscape and tablet portrait. --- */
@media (max-width: 900px) {
  .gallery-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    padding-bottom: 4px;
    margin-inline: calc(-1 * max(28px, env(safe-area-inset-left)));
    padding-inline: max(28px, env(safe-area-inset-left));
  }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gallery-grid figure { flex: 0 0 78%; scroll-snap-align: start; }
}

.footer-legal p { margin: 0 0 9px; }
.footer-legal p:last-child { margin-bottom: 0; }

/* Two columns hold up to about 700px, each column is still ~55 characters,
   which is comfortable. Below that they'd be too narrow, so collapse to one. */
@media (max-width: 700px) {
  .footer-legal {
    max-width: none;
    font-size: 0.78rem;
    line-height: 1.7;
  }
  .footer-legal p { margin-bottom: 12px; }
}

/* ============================================
   Mobile readability floor.

   Several mono labels sit at 10.5–11.8px, which is fine on a desktop
   monitor and hard work on a phone held at arm's length. Bumped to ~12.5px
   on small screens. Uppercase mono at this size stays compact, so nothing
   reflows; only legibility changes.
   ============================================ */
@media (max-width: 900px) {
  .breadcrumb { font-size: 0.8rem; }
  .posprofile span { font-size: 0.76rem; }
  .sched-window, .sched-date { font-size: 0.8rem; }
  .snapshot-strip span { font-size: 0.78rem; }
  .snap-btn { font-size: 0.78rem; }
  .scout-card-head .scale-note { font-size: 0.78rem; }
  .attr-tag { font-size: 0.76rem; }
  .attr-line { font-size: 0.82rem; }
  .footer-role,
  .footer-connect-label { font-size: 0.78rem; }
  .contact-row .k { font-size: 0.76rem; }
  .vstat-label { font-size: 0.8rem; }
  .swing figcaption,
  .swing-time { font-size: 0.78rem; }
  .motto-block .motto-label { font-size: 0.78rem; }
  .card-fine,
  .attr-fine { font-size: 0.82rem; }
}

/* The wordmark link was a 20px-tall tap target in a 69px nav bar, the
   hardest thing on the page to hit, and it's the "go home" control. */
.nav-name {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 404 link list: give the links a real tap target on touch. */
@media (pointer: coarse) {
  .fact-list li a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Reversed-text email fallback for no-JS visitors. The character order in the
   HTML is backwards; unicode-bidi + direction render it correctly on screen. */
.rtl-mail {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: left;
  font-size: 0.9rem;
}

/* ============================================
   Video player sizing.

   Chrome progressively removes native controls as the player narrows: below
   roughly 380-400px it drops the volume slider and the fullscreen button, so
   visitors lose mute and expand entirely. At 3-up the players were 332px.
   The hitting section therefore runs wider than the standard wrap, and falls
   to 2-up before the players would shrink under that threshold.
   ============================================ */
.hitting-block .wrap { max-width: 1360px; }

.swing-set,
.swing-set-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* Breakpoints are set by the width each player ends up at, not by how many
   clips look tidy in a row. Three across only survives above 1360px; below
   900px even two across drops under the control threshold. */
@media (max-width: 1359px) {
  .swing-set,
  .swing-set-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* No stacked fallback. Below 900px the swings become a horizontal strip
   (see the carousel block further down), which covers tablet portrait and
   phone landscape as well as phones. */

/* Home no longer duplicates the hitting videos or the metric cards. It carries
   a short band that names the assessment and routes to the two pages that own
   the material: the metrics on the scouting report, the footage on The Process. */
.twoway-band { border-top: 1px solid var(--line); }
.twoway-copy {
  max-width: 640px;
  margin: 4px 0 22px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-70);
}
.twoway-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Compact position profile, replacing the two separate promotional cards. */
.posprofile { list-style: none; margin: 0 0 18px; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.posprofile li { border-left: 2px solid var(--gold); padding-left: 12px;
  font-size: 1rem; color: var(--ink); line-height: 1.35; }
.posprofile span { display: block; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45); margin-bottom: 4px; }
.posprofile-note { max-width: 640px; margin: 0; font-size: 0.95rem;
  line-height: 1.7; color: var(--ink-70); }

/* Home shows the next event or two only. */
.sched-teaser { list-style: none; margin: 0; padding: 0; }
.sched-teaser li { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line); }
.sched-teaser li:last-child { border-bottom: none; }

/* ============================================
   Mobile: swipe the swings, don't stack them.

   Stacked, three 16:9 players run past a phone screen and the section reads
   as an endless column. Same horizontal scroll-snap the photo gallery uses,
   with the next card peeking in at the right edge so the gesture is obvious.
   Cards bleed to the viewport edges so the strip looks intentional rather
   than clipped.
   ============================================ */
@media (max-width: 900px) {
  .swing-set,
  .swing-set-wide {
    display: flex;
    grid-template-columns: none;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    padding-bottom: 4px;
    margin-inline: calc(-1 * max(28px, env(safe-area-inset-left)));
    padding-inline: max(28px, env(safe-area-inset-left));
    scroll-padding-inline-start: max(28px, env(safe-area-inset-left));
  }
  .swing-set::-webkit-scrollbar,
  .swing-set-wide::-webkit-scrollbar { display: none; }

  .swing-set .swing,
  .swing-set-wide .swing {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
}

/* A gallery with one photo shouldn't render as an 78%-wide card with empty
   space beside it and nothing to swipe to. */
@media (max-width: 900px) {
  .gallery-grid > figure:only-child,
  .swing-set > .swing:only-child { flex: 0 0 100%; }
}

/* ============================================
   Readability floor, final pass.

   These sit at the end of the file on purpose. Earlier attempts were placed
   mid-file and then overridden by base rules appended after them, which is
   why several labels stayed under 12px on phones and tablets despite the
   media query existing.
   ============================================ */
@media (max-width: 900px) {
  .posprofile span { font-size: 0.76rem; }
  .footer-legal { font-size: 0.78rem; line-height: 1.7; }
  .snap-btn { font-size: 0.78rem; }
  .motto-block .motto-label { font-size: 0.78rem; }
  .footer-role,
  .footer-connect-label { font-size: 0.78rem; }
  .fact-list li,
  .fact-list li a { font-size: 0.9rem; }
}

/* The open menu is an overlay sitting on top of page content. Without a
   defined lower edge it reads as if the page has broken mid-sentence. */
@media (max-width: 1150px) {
  .nav-links.open {
    box-shadow: 0 18px 34px -12px rgba(0, 0, 0, 0.55);
    padding-bottom: 6px;
  }
}

/* ============================================
   Reading text vs labels.

   Uppercase mono labels stay at 11-11.5px: they are one-to-three-word
   signposts and letter-spacing carries them. Anything that is actually read
   in sentences gets a floor of about 13px, at every viewport. The footer
   disclosures were the worst case, 36 words of legal prose set smaller than
   the labels beside them.
   ============================================ */
.footer-legal { font-size: 0.82rem; line-height: 1.7; }
.breadcrumb { font-size: 0.8rem; }
.scout-card-head .scale-note { font-size: 0.78rem; }
.fact-list li,
.fact-list li a { font-size: 0.92rem; }

/* The open mobile menu must fully cover what is behind it. */
@media (max-width: 1150px) {
  .nav-links.open {
    background: var(--ink);
    z-index: 60;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
}

/* Three metric cards wrapped 2-then-1 on a phone, leaving an orphan. Below
   560px they become one column with the figure and its label on a single
   line, so three cards cost about the height one wrapped pair did. */
@media (max-width: 560px) {
  .vstat-grid { grid-template-columns: 1fr; gap: 10px; }
  .vstat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
  }
  .vstat-value { font-size: 1.75rem; }
  .vstat-label { margin-top: 0; text-align: right; }
}

.dr-body { max-width: 720px; margin: 0 0 16px; font-size: 1rem; line-height: 1.75; color: var(--ink-70); }
.dr-body:last-of-type { margin-bottom: 26px; }

/* A velocity range renders as static text; match the count-up figure's style. */
.grade-static { font-family: var(--mono); font-weight: 600; }

.faq { margin: 0; max-width: 760px; }
.faq dt { font-weight: 600; font-size: 1rem; color: var(--ink); margin: 0 0 6px; }
.faq dd { margin: 0 0 20px; font-size: 0.95rem; line-height: 1.7; color: var(--ink-70); }
.faq dd:last-child { margin-bottom: 0; }

/* ============================================
   Fixture list.
   ============================================ */
.fx-month + .fx-month { margin-top: 30px; }
.fx-month-label {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-45);
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.fixtures { list-style: none; margin: 0; padding: 0; }
.fixture {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.fixture:last-child { border-bottom: none; }

.fx-date { text-align: center; line-height: 1.1; }
.fx-dow {
  display: block; font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45);
}
.fx-day { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--ink); }

.fx-opp { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ink); }
.fx-meta { margin: 3px 0 0; font-size: 0.85rem; color: var(--ink-70); }
.fx-tag {
  display: inline-block; margin-left: 6px; vertical-align: 2px;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-45);
  border: 1px solid var(--line); border-radius: 2px; padding: 2px 6px;
}

.fx-side { text-align: right; }
.fx-team {
  display: inline-block; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.1em; font-weight: 600; color: var(--ink);
  background: var(--gold); border-radius: 2px; padding: 2px 7px;
}
.fx-time { display: block; margin-top: 5px; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-70); }

/* Once marcosTeam is set, his fixtures carry a gold rule and the rest recede. */
.fixture-mine { border-left: 3px solid var(--gold); padding-left: 14px; }
.fixture-other { opacity: 0.55; }
.fixture-other .fx-team { background: transparent; border: 1px solid var(--line); color: var(--ink-45); }

.fixtures-teaser .fixture:first-child { padding-top: 0; }

@media (max-width: 560px) {
  .fixture { grid-template-columns: 46px 1fr; gap: 12px; row-gap: 6px; }
  .fx-side { grid-column: 2; text-align: left; display: flex; align-items: center; gap: 10px; }
  .fx-time { margin-top: 0; }
}

.honors-context {
  margin: 2px 0 10px; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-45);
}
.honors-note { margin: 12px 0 0; font-size: 0.85rem; line-height: 1.6; color: var(--ink-45); max-width: 46ch; }

.contact-role {
  margin-left: 8px; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-45);
}

/* ============================================
   Contrast corrections.

   Measured against WCAG AA (4.5 for body text, 3.0 for large). Four failures,
   all of them a color used against the wrong background.
   ============================================ */

/* 1. .btn-ghost carries chalk text for dark sections. On a light section it
      was chalk on chalk: a completely invisible button sitting beside the
      recruiting links. Scope the light-section variant explicitly. */
.block:not(.dev-section-dark):not(.hero) .btn-ghost,
.block-alt .btn-ghost {
  color: var(--ink);
  border-color: var(--ink-45);
}
.block:not(.dev-section-dark):not(.hero) .btn-ghost:hover,
.block-alt .btn-ghost:hover { border-color: var(--gold); background: var(--chalk-dim); }

/* 2. Gold on a light background measures 1.96. It works as a fill behind dark
      text, not as text itself. The quote attribution moves to clay. */
.journey-quote-name { color: var(--clay); }

/* 3. Clay on chalk-dim lands at 4.31, just under the 4.5 floor for small
      text. Darkened slightly; still reads as infield clay. */
:root { --clay: #8f4526; }

/* 4. The <video> fallback link inherits the browser default blue-black
      against a dark panel. Only visible when video cannot play, which is
      exactly when someone needs to read it. */
.featured-video-block video a,
video a { color: var(--gold-bright); }

.contact-monitored {
  display: block; margin-top: 6px; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-45);
}

.sched-download { margin: 26px 0 0; }

/* The Santo Domingo clips are different shapes: one vertical 720x1280, one
   landscape 832x464. Forcing a shared aspect box letterboxed the landscape
   clip inside thick black bars. Each keeps its own shape, capped in height so
   the vertical one cannot tower, and aligned to the top of the row. */
.swing-set-mixed {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 900px;
  align-items: start;
}
.swing-set-mixed video {
  aspect-ratio: auto;
  height: auto;
  max-height: 440px;
  width: 100%;
  background: var(--ink);
}
@media (max-width: 900px) {
  .swing-set-mixed { max-width: none; }
  .swing-set-mixed video { max-height: 62vh; }
}

.venues { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.venues-label {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-45); margin: 0 0 10px;
}
.venues ul { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 30px; }
.venues li { font-size: 0.92rem; line-height: 1.5; }
.venue-name { display: block; font-weight: 600; color: var(--ink); }
.venue-addr { color: var(--ink-70); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line); }
.venue-addr:hover { color: var(--ink); text-decoration-color: var(--gold); }

.prog-table { width: 100%; max-width: 820px; border-collapse: collapse; margin-top: 20px; font-size: 0.92rem; }
.prog-table th {
  text-align: left; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-45); font-weight: 500;
  padding: 0 14px 8px 0; border-bottom: 1px solid var(--line);
}
.prog-table td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); color: var(--ink-70); }
.prog-table td:first-child { font-weight: 600; color: var(--ink); }
.prog-val { font-family: var(--mono); color: var(--ink); }