.about-page .desktop-nav a[aria-current="page"],
.about-page .mobile-menu a[aria-current="page"] { color: var(--accent); }

.about-hero { padding: clamp(4.5rem,7vw,6.75rem) 0; overflow: hidden; background: var(--bg-main); }
.about-hero-grid { display: grid; min-height: 38rem; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 1.5rem; align-items: center; }
.about-hero-copy { grid-column: 1 / span 6; }
.about-hero-copy .eyebrow { color: var(--accent); }
.about-hero h1 { margin: 1.15rem 0 1.35rem; font-size: clamp(2.7rem,4.5vw,4.2rem); font-weight: 680; line-height: 1; letter-spacing: -.055em; }
.about-hero-lead { max-width: 36rem; color: var(--text-secondary); font-size: clamp(1rem,1.4vw,1.18rem); }
.identity-line { display: flex; flex-wrap: wrap; margin-top: 2rem; gap: .55rem; }
.identity-line span { padding: .38rem .68rem; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); color: var(--text-muted); font-size: .72rem; }

.about-portrait-stage { position: relative; grid-column: 8 / -1; min-height: 38rem; overflow: hidden; border: 1px solid rgba(23,63,62,.16); border-radius: var(--radius-lg); background: #dfe7e4; box-shadow: inset 0 0 0 8px rgba(255,255,255,.27); }
.about-portrait-stage::before { position: absolute; top: 2rem; right: 2rem; width: 5.5rem; height: 2px; background: var(--accent); content: ""; }
.portrait-index { position: absolute; z-index: 3; top: 1.25rem; left: 1.35rem; color: var(--accent); font: 850 clamp(3.3rem,5vw,5.1rem)/1 var(--font-en); letter-spacing: -.065em; }
.portrait-word { position: absolute; z-index: 0; right: -1.2rem; bottom: 5rem; color: rgba(23,63,62,.08); font: 850 7rem/.8 var(--font-en); letter-spacing: -.06em; transform: rotate(-90deg) translateX(50%); transform-origin: bottom right; }
.portrait-photo-frame { position: absolute; z-index: 2; top: 10%; right: 12%; bottom: 4.25rem; left: 18%; overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: var(--radius-md); background: #cad6d1; box-shadow: 0 30px 72px rgba(17,17,17,.17); }
.portrait-photo-frame picture,.portrait-photo-frame img { width: 100%; height: 100%; }
.portrait-photo-frame img { object-fit: cover; object-position: 50% 35%; filter: saturate(.72) contrast(1.02); transform: scale(1.06); }
.about-portrait-stage figcaption { position: absolute; z-index: 3; right: 1.35rem; bottom: 1.15rem; left: 1.35rem; display: flex; justify-content: space-between; gap: 1rem; padding-top: .7rem; border-top: 1px solid rgba(23,63,62,.2); color: var(--mountain-deep); font: 750 .56rem/1.2 var(--font-en); letter-spacing: .11em; }

.now-head h2,.projects-head h2,.method-head h2,.timeline-head h2 { max-width: none; }
.now-head,.timeline-head { align-items: center; }
.now-head > div,.timeline-head > div { grid-column: 1 / span 4; }
.now-head > p,.timeline-head > p { grid-column: 5 / span 4; }
.work-evidence { grid-column: 10 / -1; width: min(100%,12rem); margin: 0; justify-self: end; }
.work-evidence picture { display: block; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: #dfe7e4; box-shadow: var(--shadow-sm); }
.work-evidence img { width: 100%; height: 100%; object-fit: cover; }
.work-evidence figcaption { display: flex; justify-content: space-between; gap: .65rem; margin-top: .55rem; color: var(--text-muted); font-size: .62rem; line-height: 1.2; }
.work-evidence figcaption strong { color: var(--text-main); font-weight: 680; }
.work-evidence figcaption span { font: 750 .5rem/1.25 var(--font-en); letter-spacing: .08em; text-align: right; }
.now-list { border-top: 1px solid var(--text-main); }
.now-list article { display: grid; min-height: 8rem; padding: 1.25rem 0; grid-template-columns: 4.5rem minmax(14rem,4fr) minmax(20rem,6fr); gap: 1.5rem; align-items: center; border-bottom: 1px solid var(--border-soft); }
.now-list article > span { color: var(--accent); font: 850 1.35rem/1 var(--font-en); }
.now-list small { color: var(--text-muted); font: 750 .55rem/1 var(--font-en); letter-spacing: .11em; }
.now-list h3 { margin-top: .5rem; font-size: clamp(1.2rem,1.7vw,1.45rem); font-weight: 680; }
.now-list article > p { color: var(--text-secondary); font-size: .92rem; }

.about-projects { background: var(--bg-white); }
.about-projects-layout { display: grid; grid-template-columns: minmax(0,7fr) minmax(22rem,5fr); gap: clamp(2.5rem,5vw,5.5rem); align-items: stretch; }
.featured-project { display: grid; grid-template-rows: minmax(31rem,1fr) auto; overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--bg-main); box-shadow: var(--shadow-sm); }
.featured-project-cover { position: relative; min-height: 31rem; overflow: hidden; background: #162b2a; }
.featured-project-cover::after { position: absolute; right: -8%; bottom: -17%; width: 43%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); content: ""; }
.cover-head { position: absolute; z-index: 4; top: 1.2rem; right: 1.25rem; left: 1.25rem; display: flex; justify-content: space-between; color: rgba(255,255,255,.75); font: 750 .56rem/1 var(--font-en); letter-spacing: .1em; }
.featured-project-main { position: absolute; z-index: 1; top: 15%; right: 10%; left: 7%; height: 61%; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.featured-project-main img { height: 100%; object-fit: cover; object-position: center 8%; }
.featured-project-detail { position: absolute; z-index: 2; right: 6%; bottom: 7%; width: 24%; height: 58%; overflow: hidden; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-sm); background: var(--bg-white); box-shadow: var(--shadow-lg); }
.featured-project-detail img { height: 100%; object-fit: cover; object-position: center 4%; }
.cover-result { position: absolute; z-index: 3; bottom: 1.15rem; left: 1.25rem; display: grid; grid-template-columns: auto auto; gap: .15rem .6rem; color: var(--dark-text); align-items: baseline; }
.cover-result strong { color: var(--accent); font: 850 clamp(1.9rem,3.1vw,3rem)/.85 var(--font-en); letter-spacing: -.055em; }
.cover-result span { font: 750 .5rem/1 var(--font-en); letter-spacing: .1em; }
.featured-project-copy { padding: 1.45rem; }
.featured-project-copy .eyebrow { color: var(--accent); }
.featured-project-copy h3 { margin: .65rem 0 .6rem; font: 800 clamp(1.8rem,2.8vw,2.45rem)/1 var(--font-en); letter-spacing: -.045em; }
.featured-project-copy > p:not(.eyebrow) { max-width: 38rem; margin-bottom: 1rem; color: var(--text-secondary); font-size: .9rem; }
.secondary-projects { display: grid; grid-template-rows: 1fr 1fr; border-top: 1px solid var(--text-main); }
.secondary-projects article { position: relative; display: grid; padding: 1.5rem 3rem 1.5rem 1.25rem; grid-template-columns: 2.5rem 1fr; gap: .8rem; align-content: center; border-bottom: 1px solid var(--border-soft); }
.secondary-projects article > span { grid-row: 1 / span 2; color: var(--accent); font: 800 .68rem/1.4 var(--font-en); }
.secondary-projects small { color: var(--text-muted); font: 750 .55rem/1 var(--font-en); letter-spacing: .1em; }
.secondary-projects h3 { margin: .65rem 0 .75rem; font: 800 clamp(1.5rem,2.3vw,2rem)/1 var(--font-en); letter-spacing: -.04em; }
.secondary-projects article p { color: var(--text-secondary); font-size: .86rem; }
.secondary-projects dl { display: grid; grid-column: 2; margin-top: 1.1rem; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border-soft); }
.secondary-projects dl div { padding-top: .75rem; }
.secondary-projects dt { color: var(--text-muted); font-size: .68rem; }
.secondary-projects dd { margin-top: .2rem; font: 750 .82rem/1.3 var(--font-en); }
.secondary-projects article > a { position: absolute; top: 50%; right: .6rem; color: var(--text-muted); font-size: 1.15rem; transform: translateY(-50%); transition: color 220ms ease,transform 220ms var(--ease); }
.secondary-projects article:hover > a { color: var(--accent); transform: translate(.2rem,-50%); }

.method-section { background: var(--bg-soft); }
.method-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--text-main); border-left: 1px solid var(--border-soft); }
.method-grid article { display: grid; min-height: 14rem; padding: 1.5rem; grid-template-columns: 3rem 1fr; gap: 1rem; align-content: center; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.method-grid article > span { color: var(--accent); font: 850 1.2rem/1 var(--font-en); }
.method-grid h3 { margin-bottom: .7rem; font-size: clamp(1.22rem,1.8vw,1.5rem); font-weight: 680; }
.method-grid p { max-width: 26rem; color: var(--text-secondary); font-size: .9rem; }

.timeline-section { background: var(--bg-main); }
.timeline { position: relative; display: grid; margin: 0; padding: 2.5rem 0 0; grid-template-columns: repeat(5,minmax(0,1fr)); list-style: none; }
.timeline::before { position: absolute; top: 4.65rem; right: 0; left: 0; height: 1px; background: var(--border-soft); content: ""; }
.timeline li { position: relative; min-width: 0; padding-right: 1.4rem; }
.timeline li > span { display: block; min-height: 1.7rem; color: var(--text-muted); font-size: .7rem; }
.timeline i { position: relative; z-index: 2; display: block; width: .65rem; height: .65rem; margin: .8rem 0 1.5rem; border: 2px solid var(--bg-main); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.timeline h3 { margin-bottom: .65rem; font-size: 1.05rem; font-weight: 680; }
.timeline p { color: var(--text-secondary); font-size: .8rem; line-height: 1.65; }

.direction-section { background: #e6ece9; }
.direction-layout { display: grid; grid-template-columns: minmax(18rem,4fr) minmax(0,8fr); gap: clamp(3rem,7vw,7rem); align-items: start; }
.direction-layout header .eyebrow { margin-bottom: 1rem; color: var(--accent); }
.direction-layout h2 { font-size: clamp(2.15rem,3vw,2.65rem); font-weight: 680; line-height: 1.1; letter-spacing: -.045em; }
.direction-layout header > p:not(.eyebrow) { max-width: 25rem; margin: 1.2rem 0 1.5rem; color: var(--text-secondary); }
.direction-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--text-main); border-left: 1px solid rgba(23,63,62,.16); }
.direction-list span { display: grid; min-height: 6rem; padding: 1rem; grid-template-columns: 2rem 1fr; gap: .75rem; align-items: center; border-right: 1px solid rgba(23,63,62,.16); border-bottom: 1px solid rgba(23,63,62,.16); font-weight: 650; }
.direction-list b { color: var(--accent); font: 800 .66rem/1 var(--font-en); }

@media (max-width:64rem) {
  .about-hero-grid,.about-portrait-stage { min-height: 34rem; }
  .about-hero-copy { grid-column: 1 / span 6; }
  .about-portrait-stage { grid-column: 7 / -1; }
  .about-projects-layout { grid-template-columns: 1fr; }
  .secondary-projects { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .now-list article { grid-template-columns: 4rem minmax(12rem,4fr) minmax(15rem,5fr); }
}

@media (max-width:47.999rem) {
  .about-hero { padding: 3.75rem 0 4.25rem; }
  .about-hero-grid { display: flex; min-height: auto; flex-direction: column; align-items: stretch; gap: 2.5rem; }
  .about-hero-copy { order: 1; }
  .about-hero h1 { margin: .9rem 0 1rem; font-size: 2.45rem; white-space: nowrap; }
  .about-hero-lead { font-size: .98rem; }
  .identity-line { margin-top: 1.5rem; }
  .about-portrait-stage { order: 2; min-height: min(31rem,126vw); border-radius: var(--radius-md); }
  .portrait-photo-frame { top: 11%; right: 11%; bottom: 4rem; left: 16%; }
  .portrait-index { top: 1rem; left: 1rem; font-size: 3.5rem; }
  .portrait-word { right: -.8rem; bottom: 5rem; font-size: 5rem; }
  .about-portrait-stage figcaption { right: 1rem; bottom: 1rem; left: 1rem; font-size: .48rem; }

  .section-head { display: block; }
  .section-head > p { margin-top: 1.1rem; }
  .now-head,.timeline-head { display: block; }
  .now-head > p,.timeline-head > p { margin-top: 1.1rem; }
  .work-evidence { width: 100%; margin-top: 1.1rem; }
  .work-evidence picture { aspect-ratio: 8 / 3; }
  .work-evidence figcaption { margin-top: .45rem; font-size: .62rem; }
  .work-evidence figcaption span { font-size: .45rem; text-align: right; }
  .now-list article { min-height: 0; padding: 1.2rem 0; grid-template-columns: 2.6rem 1fr; gap: .45rem .75rem; }
  .now-list article > div { grid-column: 2; }
  .now-list article > p { grid-column: 2; font-size: .84rem; }

  .featured-project { grid-template-rows: 27rem auto; }
  .featured-project-cover { min-height: 27rem; }
  .featured-project-main { top: 16%; right: 8%; left: 6%; height: 58%; }
  .featured-project-detail { right: 5%; bottom: 8%; width: 27%; height: 54%; }
  .cover-head { top: 1rem; right: 1rem; left: 1rem; font-size: .47rem; }
  .cover-result { bottom: 1rem; left: 1rem; }
  .cover-result strong { font-size: 1.7rem; }
  .secondary-projects { display: block; }
  .secondary-projects article { min-height: 18rem; }

  .method-grid { grid-template-columns: 1fr; }
  .method-grid article { min-height: 10rem; padding: 1.2rem; }
  .timeline { display: block; padding: 0 0 0 1.4rem; }
  .timeline::before { top: 0; bottom: 0; left: .3rem; width: 1px; height: auto; }
  .timeline li { padding: 0 0 2.2rem 1.3rem; }
  .timeline li:last-child { padding-bottom: 0; }
  .timeline li > span { min-height: 0; margin-bottom: .55rem; }
  .timeline i { position: absolute; top: .2rem; left: -1.38rem; margin: 0; border-color: var(--bg-main); }

  .direction-layout { display: block; }
  .direction-layout header { margin-bottom: 2.3rem; }
  .direction-layout h2 { font-size: 2rem; }
  .direction-list span { min-height: 5rem; padding: .8rem; font-size: .88rem; }
}

@media (prefers-reduced-motion:reduce) {
  .secondary-projects article > a { transition: none; }
}