/* ========== ABOUT page ========== */
#about-page-root { overflow-x: clip; }

[data-page="about"] .section-hero--about { overflow: hidden; }
[data-page="about"] .section-hero--about::before,
[data-page="about"] .section-hero--about::after { display: none; }
[data-page="about"] .section-hero--about {
  border-bottom: 1px solid rgba(221, 218, 210, 0.28);
  padding: 24px 0 32px;
}
[data-page="about"] .section-hero--about .cta-row { padding-top: 28px; }
[data-page="about"] .section-hero--about .h1 { overflow-wrap: anywhere; }
[data-page="about"] .about-hero__note {
  margin: 16px 0 0;
  max-width: 36rem;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  animation: sw-fade-up 0.7s var(--ease) both;
  animation-delay: 0.3s;
}

[data-page="about"] .cta-bar {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
}
[data-page="about"] .cta-bar > .container {
  position: relative;
  z-index: 1;
}
[data-page="about"] .cta-bar .h2 { margin-bottom: 24px; color: var(--ink); }
[data-page="about"] .cta-bar .muted-2 { color: var(--muted); }
[data-page="about"] .cta-bar .close-cta__sw {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  opacity: 0.07;
}

.about-kicker {
  display: block;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}

/* Hero typographic mark */
.about-mark {
  min-width: 0;
  max-width: 100%;
  padding: 4px 0 0;
  animation: sw-fade-up 0.7s var(--ease) both;
  animation-delay: 0.28s;
}
.about-mark__kicker {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}
.about-mark__word {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.about-mark__word--1 {
  font-size: clamp(40px, 11vw, 72px);
  color: rgba(17, 18, 20, 0.28);
}
.about-mark__word--2 {
  font-size: clamp(44px, 12vw, 80px);
  color: var(--navy);
  margin-left: 8%;
}
.about-mark__word--3 {
  font-size: clamp(48px, 13vw, 88px);
  color: var(--ink);
  margin-left: 16%;
}
.about-mark__rule {
  display: block;
  width: 48px;
  height: 3px;
  margin: 16px 0 14px 16%;
  background: var(--lime);
}
.about-mark__path {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}
.about-mark__path li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.about-mark__path li:not(:last-child)::after {
  content: "→";
  color: var(--lime);
  font-size: 12px;
  line-height: 1;
}

/* Who: editorial split */
.about-who {
  background: var(--white);
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}
.about-who__grid {
  display: grid;
  gap: 28px;
}
.about-who__claim {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 5.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}
.about-who__claim em {
  font-style: normal;
  color: var(--navy);
}
.about-who__copy p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}
.about-who__copy p:last-child { margin-bottom: 0; }

/* Approach: numbered editorial rows */
.about-way {
  background: var(--cream);
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}
.about-way__head { max-width: 40rem; margin-bottom: 28px; }
.about-principles {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}
.about-principles li {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.about-principles li:nth-child(2) .about-principles__body,
.about-principles li:nth-child(4) .about-principles__body { max-width: 34rem; }
.about-principles li:nth-child(3) {
  border-left: 3px solid var(--lime);
  padding-left: 16px;
}
.about-principles li:nth-child(5) .about-principles__body { max-width: 38rem; }
.about-principles__n {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: var(--navy);
  opacity: 0.28;
}
.about-principles li:nth-child(3) .about-principles__n { opacity: 1; color: var(--navy); }
.about-principles h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}
.about-principles p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* Experience: typographic facts, not a dashboard */
.about-exp {
  background: var(--white);
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}
.about-exp__head { max-width: 36rem; margin-bottom: 32px; }
.about-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}
.about-facts li {
  min-width: 0;
  padding: 24px 24px 24px 0;
  border-bottom: 1px solid var(--border);
}
.about-facts li:nth-child(odd) { padding-right: 24px; }
.about-facts li:nth-child(even) {
  padding-left: 24px;
  border-left: 1px solid var(--border);
}
.about-facts strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(32px, 8vw, 52px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.95;
  color: var(--ink);
}
.about-facts span {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}

/* Competencies: interactive name list */
.about-skill {
  background: var(--cream);
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}
.about-skill__head { max-width: 40rem; margin-bottom: 28px; }
.about-skill__head p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}
.about-skill__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}
.about-skill__nav li { margin: 0; padding: 0; }
.about-skill__btn {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-height: 48px;
  padding: 10px 18px 10px 0;
  margin-right: 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.about-skill__btn span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--navy);
  opacity: 0.45;
}
.about-skill__btn b {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.about-skill__btn.is-on {
  border-bottom-color: var(--lime);
}
.about-skill__btn.is-on span { opacity: 1; }
.about-skill__btn:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}
.about-skill__panel {
  max-width: 36rem;
  padding-top: 8px;
}
.about-skill__panel p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}
.about-skill__panel a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  min-height: 44px;
}
.about-skill__panel a:hover { color: var(--violet); }

/* Work: editorial timeline */
.about-work {
  background: var(--white);
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}
.about-work__head { max-width: 36rem; margin-bottom: 32px; }
.about-flow {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-flow li {
  position: relative;
  margin: 0;
  padding: 0 0 28px 28px;
  border-left: 1px solid var(--border);
}
.about-flow li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.about-flow li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  background: var(--lime);
}
.about-flow span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--navy);
}
.about-flow h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.about-flow p {
  margin: 0;
  max-width: 32rem;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* Why: compact */
.about-why {
  background: var(--white);
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}
.about-why__inner {
  max-width: 40rem;
  padding-left: 18px;
  border-left: 3px solid var(--lime);
}
.about-why h2 { margin-bottom: 16px; }
.about-why p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}
.about-why p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
  [data-page="about"] .section-hero--about { padding: 36px 0 48px; }
  .about-who,
  .about-way,
  .about-exp,
  .about-skill,
  .about-work,
  .about-why { padding: 64px 0; }
  .about-who__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: start;
  }
  .about-principles li {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    padding: 28px 0;
  }
  .about-facts li:nth-child(1),
  .about-facts li:nth-child(2) { border-bottom: 1px solid var(--border); }
  .about-flow {
    padding-left: 8px;
  }
}

@media (min-width: 1024px) {
  [data-page="about"] .hero-layout--about {
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    gap: 32px 48px;
  }
  .about-mark__word--1 { font-size: clamp(40px, 5.2vw, 68px); }
  .about-mark__word--2 { font-size: clamp(46px, 5.8vw, 76px); }
  .about-mark__word--3 { font-size: clamp(52px, 6.4vw, 84px); }
  .about-who,
  .about-way,
  .about-exp,
  .about-skill,
  .about-work { padding: 80px 0; }
  .about-principles li:nth-child(even) { padding-left: 8%; }
  .about-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .about-facts li,
  .about-facts li:nth-child(odd),
  .about-facts li:nth-child(even) {
    padding: 8px 40px 0 40px;
    border-bottom: 0;
    border-left: 0;
    border-right: 1px solid var(--border);
  }
  .about-facts li:first-child { padding-left: 0; }
  .about-facts li:last-child {
    padding-right: 0;
    border-right: 0;
  }
  .about-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 24px;
    padding-top: 18px;
    border-top: 2px solid var(--lime);
  }
  .about-flow li {
    padding: 20px 0 0;
    border-left: 0;
  }
  .about-flow li:last-child { border-left: 0; }
  .about-flow li::before {
    left: 0;
    top: -22px;
    width: 10px;
    height: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-page="about"] .about-mark,
  [data-page="about"] .sw-reveal,
  [data-page="about"] .about-hero__note {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none;
  }
}