/* About page editorial layout. Shared navigation and footer remain in style.css. */
.about-page {
  background: #f6f5f1;
  color: #191919;
}

.about-page .about-hero::before {
  background: rgba(13, 13, 13, .78);
}

.about-hero .page-hero-inner {
  max-width: 1120px;
}

.about-hero-label,
.about-eyebrow {
  color: #b9902c;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.about-hero .about-hero-label { color: #e2c25c; margin: 0 0 20px; }

.about-hero h1 span { display: block; color: #e2c25c; }

.about-hero .about-hero-intro {
  max-width: 570px;
  color: rgba(255, 255, 255, .86);
  font-size: 1.04rem;
  margin: 0 0 3px;
}

.about-hero .about-hero-ko {
  color: rgba(255, 255, 255, .65);
  font-size: .94rem;
  margin: 0;
}


.about-page .about-toc-wrap { max-width: 1120px; padding: 18px 24px 6px; }
.about-page .about-toc { gap: 6px; }

.about-page .about-toc a {
  padding: 6px 11px;
  border: 1px solid #e4dfd2;
  border-radius: 999px;
  background: #fff;
  color: #6c6a64;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

/* Keep the jump-nav on a single row on desktop; if a narrower desktop
   window still can't fit every pill, scroll horizontally instead of
   wrapping "Join Us" onto its own second line. */
@media (min-width: 901px) {
  .about-page .about-toc {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .about-page .about-toc::-webkit-scrollbar { display: none; }
  .about-page .about-toc a { flex-shrink: 0; }
}

.about-page .about-toc a:hover,
.about-page .about-toc a:focus-visible {
  border-color: #c9a227;
  background: #c9a227;
  color: #171717;
}

.about-page #who-we-are { padding-top: 34px; }

.about-page .about-section {
  padding: 76px 24px 82px;
  scroll-margin-top: 80px;
  background: #f6f5f1;
}

.about-page #our-story,
.about-page #football,
.about-page #how-run { background: #fff; }

.about-page #what-we-believe { background: #232321; color: #f7f4ed; }
.about-page #coaching { background: #efede6; }
.about-page #join-us { background: #171717; color: #f7f4ed; }

.about-page .about-section-inner { max-width: 1120px; }
.about-section-heading { margin-bottom: 35px; }
.about-page .about-eyebrow { margin: 0 0 9px; }

.about-page .about-section h2 {
  display: block;
  margin: 0 0 3px;
  color: inherit;
  font-family: "Inter", sans-serif;
  font-size: clamp(1.85rem, 3.2vw, 2.55rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.04em;
  text-transform: none;
}

.about-page .about-section h2::before { content: none; }
.about-page .about-heading-ko { margin: 0; color: #6c6a64; font-size: .96rem; }
#what-we-believe .about-heading-ko,
#join-us .about-heading-ko { color: rgba(255, 255, 255, .55); }

.about-page .about-bilingual {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 46px;
  align-items: start;
}

.about-page .about-bilingual > * { min-width: 0; }

.about-page .about-bilingual .ko-block {
  margin: 0;
  padding: 0 0 0 45px;
  border: 0;
  border-left: 1px solid rgba(151, 117, 37, .3);
}

.about-page .about-bilingual p {
  max-width: 66ch;
  margin: 0 0 19px;
  color: #34332f;
  font-size: .99rem;
  line-height: 1.7;
}

.about-page .about-bilingual .ko-block p {
  color: #484741;
  line-height: 1.82;
}

.about-page .about-bilingual p:last-child { margin-bottom: 0; }

.about-fact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid #d7d1c2;
  border-bottom: 1px solid #d7d1c2;
}

.about-fact-grid > div {
  min-width: 0;
  padding: 19px 20px;
  border-left: 1px solid #d7d1c2;
}

.about-fact-grid > div:first-child { border-left: 0; padding-left: 0; }
.about-fact-label { display: block; color: #8b712f; font-size: .73rem; font-weight: 700; margin-bottom: 7px; }
.about-fact-grid strong { display: block; color: #211f1a; font-size: .96rem; font-weight: 600; overflow-wrap: anywhere; }
.about-fact-grid [lang="ko"] { display: block; margin-top: 4px; color: #66635b; font-size: .84rem; }
.about-intro-register { margin-top: 25px !important; }

.about-page .belief-emphasis {
  padding-left: 20px;
  border-left: 2px solid #c9a227;
}

.about-page #what-we-believe .about-bilingual p,
.about-page #join-us .about-bilingual p { color: rgba(255, 255, 255, .83); }
.about-page #what-we-believe .about-bilingual .ko-block p { color: rgba(255, 255, 255, .77); }
.about-page #what-we-believe .about-bilingual .ko-block { border-left-color: rgba(226, 194, 92, .38); }


.about-commit-intro { margin-bottom: 27px; }
.about-page .commit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.about-page .commit-card {
  min-width: 0;
  padding: 22px 22px 25px;
  border: 1px solid #ded9cb;
  border-top: 2px solid #c9a227;
  background: #fff;
}

.commit-number { display: block; color: #a68223; font-size: .75rem; font-weight: 700; margin-bottom: 20px; }
.about-page .commit-card p { margin: 0; color: #33322f; font-size: .92rem; line-height: 1.7; }
.about-page .commit-card strong { display: inline-block; margin-bottom: 5px; color: #181818; }

.commit-ko {
  margin-top: 23px;
  padding-top: 20px;
  border-top: 1px solid #e3dfd5;
}

.about-page .commit-ko p { color: #51504b; line-height: 1.82; }
.about-closing { margin-top: 35px; padding-top: 25px; border-top: 1px solid #d8d2c4; }
.about-page .about-closing > p { margin: 0 0 9px; font-size: 1.15rem; font-weight: 600; color: #1e1c18; }
.about-page .about-closing [lang="ko"] p { margin: 0; color: #625f58; }

.about-page .committee-placeholder {
  margin-top: 38px;
  border: 1px dashed #cfc7b5;
  border-radius: 0;
  text-align: left;
}

.about-page #join-us .join-list { margin: 0; color: rgba(255, 255, 255, .85); }
.about-page #join-us .join-label { color: #e2c25c; }
.about-page #join-us .join-list a { color: #e2c25c; overflow-wrap: anywhere; }
.about-page #join-us .ko-block { border-left-color: rgba(226, 194, 92, .38); }

.about-final-cta { margin-top: 52px; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, .22); }
.about-page .about-final-cta h3 {
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700;
  letter-spacing: -.035em;
  text-transform: none;
  margin: 0 0 5px;
}
.about-page .about-final-cta p { color: rgba(255, 255, 255, .7); margin: 0 0 23px; }
.about-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 920px) {
  .about-page .commit-grid { grid-template-columns: 1fr; }
  .about-page .commit-card { padding: 22px 24px; }
}

@media (max-width: 760px) {
  .about-page .about-toc-wrap { padding: 14px 20px 4px; }
  .about-page .about-section { padding: 56px 20px 62px; }
  .about-page #who-we-are { padding-top: 26px; }
  .about-page .about-section-heading { margin-bottom: 27px; }
  .about-page .about-bilingual { display: block; }
  .about-page .about-bilingual .ko-block {
    margin-top: 28px;
    padding: 23px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(151, 117, 37, .35);
  }
  .about-page .en-block::before,
  .about-page .about-bilingual .ko-block::before {
    display: block;
    margin: 0 0 13px;
    color: #a68223;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
  }
  .about-page .en-block::before { content: "ENGLISH"; }
  .about-page .about-bilingual .ko-block::before { content: "한국어"; }
  .about-page #what-we-believe .en-block::before,
  .about-page #what-we-believe .ko-block::before,
  .about-page #join-us .en-block::before,
  .about-page #join-us .ko-block::before { color: #e2c25c; }
  .about-page .commit-card p { font-size: .96rem; }
  .about-final-cta { margin-top: 39px; }
  .about-fact-grid { grid-template-columns: 1fr; }
  .about-fact-grid > div,
  .about-fact-grid > div:first-child { padding: 16px 0; border-left: 0; }
  .about-fact-grid > div + div { border-top: 1px solid #d7d1c2; }
}

.about-inline-link {
  color: var(--gold);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.about-inline-link:hover,
.about-inline-link:focus-visible {
  color: var(--onyx);
}