.kaz-about { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(6rem, 11vw, 10rem); }

.about-portrait { position: relative; display: grid; grid-template-areas: 'name avatar' 'quote avatar'; grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem); gap: 1.5rem clamp(3rem, 8vw, 7.5rem); min-height: min(43rem, calc(100dvh - 8rem)); padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line-strong); }
.about-name { position: relative; grid-area: name; align-self: end; min-width: 0; }
.about-name h1 { position: relative; z-index: 1; max-width: 9ch; margin: 0; font-family: var(--serif); font-size: clamp(3.6rem, 7.7vw, 6rem); font-weight: 400; line-height: .9; letter-spacing: -.04em; overflow-wrap: anywhere; }

.about-avatar { position: relative; grid-area: avatar; align-self: center; margin: 0; }
.avatar-frame { position: relative; isolation: isolate; aspect-ratio: 1; padding: .55rem; border: 1px solid var(--ink); background: var(--paper); }
.avatar-frame::before { position: absolute; z-index: -1; inset: 1.35rem -1.35rem -1.35rem 1.35rem; content: ''; background: var(--accent); }
.avatar-frame::after { position: absolute; right: .95rem; bottom: .95rem; width: 1.1rem; aspect-ratio: 1; content: ''; border-radius: 50%; background: var(--accent); outline: .45rem solid rgba(11, 14, 11, .72); }
.avatar-fallback { position: absolute; inset: .55rem; display: grid; place-content: center; gap: .35rem; color: var(--paper); background: var(--terminal); text-align: center; }
.avatar-fallback strong { font-family: var(--serif); font-size: clamp(4rem, 9vw, 6rem); font-weight: 400; line-height: .8; }
.avatar-fallback span { color: var(--accent); font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; }
.avatar-photo { position: absolute; z-index: 1; inset: .55rem; background-image: url('https://q1.qlogo.cn/g?b=qq&nk=121777080&s=640'); background-position: center; background-size: cover; }

.about-quote { grid-area: quote; align-self: start; max-width: 28rem; margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.about-quote p { margin: 0; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(.95rem, 1.35vw, 1.05rem); font-style: italic; line-height: 1.7; }

.about-content { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(19rem, .8fr); gap: clamp(3.5rem, 9vw, 8rem); padding-top: clamp(4rem, 8vw, 7rem); }
.about-prose { max-width: 68ch; }
.about-prose p { margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.18rem); line-height: 1.9; }
.about-prose p + p { margin-top: 2rem; color: var(--ink-soft); }

.about-contact { align-self: start; }
.about-contact h2 { margin: 0 0 1.25rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; }
.about-contact ul { margin: 0; padding: 0; border-top: 1px solid var(--line-strong); list-style: none; }
.about-contact li { border-bottom: 1px solid var(--line); }
.about-contact a, .contact-row { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) 1rem; align-items: center; gap: .85rem; min-height: 4rem; padding: .85rem .15rem; font-family: var(--mono); font-size: .7rem; line-height: 1.65; }
.contact-row { grid-template-columns: 1.2rem minmax(0, 1fr); }
.about-contact a { transition: color .2s ease, background-color .2s ease, padding .2s ease; }
.about-contact a:hover { padding-inline: .75rem; color: var(--terminal); background: var(--accent); }
.about-contact svg { width: 1.1rem; height: 1.1rem; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.about-contact li:first-child a > svg:first-child { fill: currentColor; stroke: none; }
.about-contact .qq-icon { fill: currentColor; stroke: none; }
.contact-arrow { transition: transform .2s ease; }
.about-contact a:hover .contact-arrow { transform: translate(.15rem, -.15rem); }
.contact-value { overflow-wrap: anywhere; }

@media (max-width: 850px) {
  .about-portrait { grid-template-columns: minmax(0, 1fr) minmax(15rem, .75fr); gap: 1.5rem 3rem; min-height: auto; }
  .about-content { grid-template-columns: 1fr; gap: 4rem; }
  .about-contact { max-width: 34rem; }
}

@media (max-width: 620px) {
  .kaz-about { padding-top: 2.75rem; }
  .about-portrait { grid-template-areas: 'name' 'avatar' 'quote'; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .about-name h1 { font-size: clamp(3.25rem, 17vw, 5rem); }
  .about-avatar { width: calc(100% - 1.35rem); max-width: 26rem; }
  .about-quote { margin-top: .5rem; }
  .about-content { gap: 3.5rem; padding-top: 3.5rem; }
  .about-prose p { font-size: 1.05rem; line-height: 1.85; }
  .about-contact a, .contact-row { min-height: 4.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .about-contact a, .contact-arrow { transition: none; }
}