/* Shared compact contact area; the dedicated biography is scoped below. */
.about-more { margin-top: .5rem; font-family: var(--sans); font-size: .78rem; }
.compact-contact .contact-main { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-areas: "title links" "copy links"; gap: .75rem 3rem; padding-block: 2.5rem; }
.compact-contact .contact-title { grid-area: title; align-self: end; }
.compact-contact .contact-title .eyebrow { margin-bottom: .75rem; }
.compact-contact .contact-title h2 { font-size: clamp(1.8rem, 2.5vw, 2.5rem); max-width: none; line-height: 1.15; }
.compact-contact .contact-copy { grid-area: copy; align-self: start; font-size: .8rem; }
.compact-contact .contact-copy p { margin: 0; max-width: 36ch; }
.compact-contact .contact-links { grid-area: links; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.compact-contact .contact-links a { min-width: 0; }
.site-nav a[aria-current="page"]::after { right: 0; }

.about-page { background: #f5f1eb; }
.bio-main { padding-bottom: 1.5rem; }
.bio-hero { display: grid; grid-template-columns: 1fr 1.1fr; width: 100%; max-width: 56rem; min-height: 38rem; align-items: center; position: relative; margin: 0 auto 2rem; }
.bio-intro { padding: clamp(2rem, 5vw, 5rem) 0; position: relative; z-index: 1; }
.bio-intro > .eyebrow { color: #8c7aa1; margin-bottom: 2rem; }
.bio-intro h1 { font-family: var(--serif); font-size: clamp(2.05rem, 3.2vw, 3.4rem); line-height: 1.08; font-weight: 300; letter-spacing: -.02em; max-width: 18ch; margin: 0 0 2rem; }
.bio-lead { max-width: 41ch; font-size: .9rem; line-height: 1.85; margin: 0; padding-top: 1.5rem; position: relative; }
.bio-lead::before { content: ""; width: 2rem; height: 1px; background: var(--line); position: absolute; top: 0; left: 0; }
.bio-art { position: relative; display: grid; place-items: center; align-self: stretch; min-width: 0; margin-left: -2rem; }
.bio-portrait { position: relative; width: 48%; max-width: 13rem; aspect-ratio: 4 / 5; margin: 2rem 0; overflow: hidden; border-radius: .5rem; box-shadow: 0 1rem 3rem rgba(60, 46, 39, .1); }
.bio-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bio-story { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; width: 100%; max-width: 56rem; margin-inline: auto; border-top: 1px solid var(--line); padding: 2rem 0 3rem; }
.bio-story-copy { max-width: 76ch; }
.bio-story-copy p { font-size: .9rem; line-height: 1.8; margin: 0 0 1.15rem; }
.bio-story-copy p:last-child { margin-bottom: 0; }
.bio-grid { display: grid; grid-template-columns: 1.25fr .9fr 1fr; gap: 1rem; }
.bio-panel { border-radius: .65rem; padding: clamp(1.5rem, 2.5vw, 2.5rem); min-width: 0; }
.bio-panel > .eyebrow { font-size: .68rem; letter-spacing: .18em; font-weight: 400; margin-bottom: 1.5rem; color: var(--ink); }
.bio-experience { background: linear-gradient(135deg, #f2e7e1, #f1eae5); }
.bio-skills { background: linear-gradient(135deg, #ece7ef, #e6e1eb); }
.bio-tools { background: linear-gradient(135deg, #eeede5, #e9e8e0); }
.bio-note { font-size: .7rem; color: var(--muted); line-height: 1.6; margin: 0 0 1.5rem; }
.bio-timeline { list-style: none; padding: 0 0 0 1.3rem; margin: 0; border-left: 1px solid #c8c3b5; }
.bio-timeline li { position: relative; padding-bottom: 1.8rem; }
.bio-timeline li:last-child { padding-bottom: 0; }
.bio-timeline li::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: #8e907a; position: absolute; top: .4rem; left: -1.53rem; }
.bio-timeline p { font-size: .75rem; line-height: 1.6; margin: .5rem 0 0; }
.bio-timeline .timeline-date { margin: 0 0 .35rem; font-size: .63rem; letter-spacing: .04em; color: #655e58; }
.bio-timeline h3 { font-size: .94rem; line-height: 1.4; font-weight: 500; margin: 0; }
.bio-timeline .timeline-role { font-size: .71rem; color: #655e58; margin-top: .3rem; }
.bio-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.bio-pills li { border: 1px solid rgba(79,67,78,.12); border-radius: 2rem; text-align: center; padding: .85rem 1rem; font-size: .78rem; line-height: 1.4; }
.bio-tool-grid { display: flex; flex-direction: column; gap: 1rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.bio-tool-grid li { border: 1px solid rgba(79,67,78,.12); border-radius: 2rem; text-align: center; padding: .85rem 1rem; font-size: .78rem; line-height: 1.4; }
.bio-education { display: grid; grid-template-columns: minmax(10rem,.42fr) minmax(0,1.58fr); gap: clamp(2rem,5vw,5rem); align-items: start; padding: 2.2rem 2.5rem; margin-top: 1rem; background: #f0eae3; border-radius: .65rem; }
.bio-education > .eyebrow { margin: .1rem 0 0; }
.bio-education > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; list-style: none; padding: 1.65rem 0 0; margin: 0; border-top: 1px solid rgba(79,67,78,.18); }
.bio-education li { position: relative; padding: 0 clamp(1rem,2.2vw,2rem); }
.bio-education li:first-child { padding-left: 0; }
.bio-education li:last-child { padding-right: 0; }
.bio-education li::before { content: ""; position: absolute; width: .48rem; height: .48rem; top: -1.92rem; left: clamp(1rem,2.2vw,2rem); border-radius: 50%; background: #8e907a; }
.bio-education li:first-child::before { left: 0; }
.bio-education h3 { font-size: .9rem; font-weight: 500; margin: 0 0 .5rem; }
.bio-education p { font-size: .72rem; line-height: 1.55; margin: .4rem 0 0; color: var(--muted); }
.bio-languages { display: flex; align-items: center; gap: 3rem; padding: 1.5rem 2.5rem; background: #eeeae4; border-radius: .65rem; margin-top: 1rem; }
.bio-languages h2 { font-weight: 400; margin: 0; }
.bio-languages .bio-pills { flex-direction: row; flex-wrap: wrap; flex: 1; }
.bio-languages li { flex: 1; padding-block: .55rem; }
.bio-connect { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: center; padding: 2rem 2.5rem; margin-top: 1rem; border-radius: .65rem; background: linear-gradient(120deg, #efd7ca, #f3e7df 55%, #eedbd3); }
.bio-connect h2 { font-family: var(--serif); font-weight: 300; font-size: 2.1rem; line-height: 1.1; margin: 0 0 1rem; }
.bio-connect p { font-size: .74rem; line-height: 1.6; margin: 0; }
.bio-connect a { min-width: 0; display: flex; flex-direction: column; gap: .5rem; text-decoration: none; font-size: .72rem; }
.bio-connect a:hover { text-decoration: underline; text-underline-offset: .25rem; }
.bio-link-symbol { font-size: 1.6rem; color: #7e806d; line-height: 1; }
.bio-connect small { font-size: .65rem; overflow-wrap: anywhere; }
.bio-main :lang(ja) h1, .bio-main :lang(ja) h2 { line-height: 1.35; }
.bio-main p, .bio-main h3 { overflow-wrap: break-word; }

@media (max-width: 1000px) {
  .bio-grid { grid-template-columns: 1.2fr 1fr; }
  .bio-experience { grid-row: span 2; }
  .bio-connect { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bio-connect > div { grid-column: 1 / -1; }
  .bio-hero { min-height: 32rem; }
  .bio-intro h1 { font-size: 2.4rem; }
}
@media (max-width: 800px) {
  .compact-contact .contact-main { grid-template-columns: 1fr; grid-template-areas: "title" "copy" "links"; gap: 1rem; }
  .bio-hero { grid-template-columns: 1fr; }
  .bio-intro { padding: clamp(2rem, 5vw, 5rem) 0 2rem; }
  .bio-intro h1, .bio-lead { max-width: none; }
  .bio-art { margin: 0; height: 22rem; }
  .bio-story { grid-template-columns: 1fr; gap: .5rem; padding-bottom: 2rem; }
  .bio-education { grid-template-columns: 1fr; gap: 1.25rem; }
  .bio-languages { align-items: flex-start; flex-direction: column; gap: 1rem; padding: 1.5rem; }
  .bio-languages .bio-pills { width: 100%; }
}
@media (max-width: 520px) {
  .compact-contact .contact-links { grid-template-columns: 1fr; }
  .bio-grid { grid-template-columns: 1fr; }
  .bio-experience { grid-row: auto; }
  .bio-intro h1 { font-size: 2rem; }
  .bio-education { padding: 1.5rem; }
  .bio-education > ul { grid-template-columns: 1fr; gap: 1.5rem; padding: 0; border-top: 0; border-left: 1px solid rgba(79,67,78,.18); }
  .bio-education li, .bio-education li:first-child, .bio-education li:last-child { padding: 0 0 0 1.5rem; }
  .bio-education li::before, .bio-education li:first-child::before { top: .35rem; left: -.27rem; }
  .bio-connect { grid-template-columns: 1fr 1fr; padding: 1.5rem; }
  .bio-languages .bio-pills { flex-direction: column; }
}