/* Personal page: GOH typography and the yellow/brown brand system. */
.main-nav a[aria-current="page"] {color: var(--yellow); text-decoration: underline; text-underline-offset: 8px;}
.about-hero {overflow: hidden;}
.about-hero-grid {display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 65px; padding-top: 55px;}
.about-hero-copy {padding-bottom: 48px;}
.about-hero-copy .eyebrow {font-size: 9px; margin-bottom: 28px;}
.about-hero h1 {font-size: clamp(54px, 5.4vw, 78px); line-height: 1.06; letter-spacing: -.045em; font-weight: 600;}
.about-hero h1 span {color: var(--yellow);}
.about-name {font: 600 26px/1.3 var(--font-heading); margin-top: 27px;}
.about-role {font-size: 11px; color: var(--subtle-text); margin-top: 7px;}
.about-intro {font-size: 13px; color: var(--soft-text); line-height: 1.9; max-width: 525px; margin-top: 24px;}
.about-actions {display: flex; gap: 20px; flex-wrap: wrap; margin-top: 29px; align-items: center;}
.about-actions .button {font-size: 12px;}
.about-actions .text-link {font-size: 11px;}
.about-portrait {align-self: end; position: relative; isolation: isolate; height: 550px; display: flex; align-items: flex-end; justify-content: center;}
.about-portrait::before {content: ''; position: absolute; z-index: -2; inset: 40px 0 0; border-radius: 130px 14px 0 0; background: var(--yellow);}
.portrait-wordmark {position: absolute; z-index: -1; top: 44px; left: 30px; font: 800 130px/1 var(--font-heading); letter-spacing: -.06em; color: rgba(59,47,47,.13);}
.about-portrait > img {height: 104%; max-width: 100%; width: auto; object-fit: contain; object-position: bottom;}
.portrait-caption {position: absolute; right: -14px; bottom: 72px; background: var(--goh-brown); border: 1px solid var(--dark-line); padding: 16px 22px 16px 39px; color: var(--yellow); font-size: 8px; font-weight: 600; line-height: 1.85; letter-spacing: .045em;}
.portrait-caption .status-dot {position: absolute; left: 20px; top: 22px; width: 5px; height: 5px;}
.about-hero-foot {border-top: 1px solid var(--dark-line); min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 25px; font-size: 8px; letter-spacing: .1em; color: var(--subtle-text);}
.about-split {display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px;}
.about-split .eyebrow {margin-bottom: 25px;}
.about-prose p {font-size: 14px; color: var(--muted); line-height: 1.95;}
.about-prose p + p {margin-top: 21px;}
.about-prose .text-link {margin-top: 20px; font-size: 12px;}
.about-degree {padding-bottom: 100px;}
.degree-layout {display: grid; grid-template-columns: 1.15fr 1fr; gap: 65px; align-items: center;}
.degree-photo {margin: 0; background: var(--warm-card); border-radius: 12px; overflow: hidden;}
.degree-photo img {width: 100%; height: 380px; object-fit: cover; object-position: center;}
.degree-photo figcaption {padding: 18px 22px; font-size: 10px; color: var(--muted);}
.degree-copy .eyebrow {margin-bottom: 23px; font-size: 9px;}
.degree-copy h2 {font-size: clamp(40px, 3.6vw, 51px);}
.degree-university {font-size: 12px; margin-block: 19px; font-weight: 700;}
.degree-university span {display: block; font-size: 10px; color: var(--muted); font-weight: 500; margin-top: 4px;}
.degree-copy > p:not(.eyebrow):not(.degree-university) {font-size: 13px; color: var(--muted); line-height: 1.9;}
.degree-thesis {padding: 20px 0 0 21px; border-left: 3px solid var(--yellow); margin-top: 25px;}
.degree-thesis > span {font-size: 8px; letter-spacing: .08em; color: var(--muted);}
.degree-thesis h3 {font-size: 24px; margin-block: 7px;}
.degree-thesis p {font-size: 12px; color: var(--muted); line-height: 1.85;}
.about-career {background: var(--warm-card);}
.career-list {margin-top: 60px;}
.career-row {display: grid; grid-template-columns: .48fr 1fr; gap: 70px; padding-block: 40px; border-top: 1px solid var(--line);}
.career-row:first-child {border-top-color: var(--goh-brown);}
.career-row:last-child {padding-bottom: 0;}
.career-number {font: 500 55px/1 var(--font-heading); color: var(--muted); letter-spacing: -.05em;}
.career-period p {font-size: 9px; margin-top: 20px; letter-spacing: .025em;}
.career-current {display: inline-block; padding: 4px 9px; background: var(--goh-yellow); color: var(--goh-brown); font-size: 9px; margin-top: 13px; border-radius: 4px;}
.career-company {font-size: 9px; letter-spacing: .07em; color: var(--muted); margin-bottom: 11px;}
.career-content h3 {font-size: 30px; font-weight: 600; letter-spacing: -.025em;}
.career-content > p:not(.career-company) {font-size: 13px; color: var(--muted); line-height: 1.9; margin-top: 17px;}
.career-content ul {padding-left: 16px; margin-top: 17px; font-size: 12px; line-height: 1.9;}
.career-content li {padding-left: 5px; margin-block: 8px;}
.career-content li::marker {color: var(--muted); font-size: 9px;}
.career-content .text-link {font-size: 12px; margin-top: 12px;}
.about-skills .section-heading h2 span {color: var(--yellow);}
.about-skills .section-heading > p {color: var(--soft-text);}
.skills-grid {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; margin-top: 55px;}
.skills-grid > div {padding-top: 25px; border-top: 1px solid var(--dark-line);}
.skill-group-number {font-size: 8px; color: var(--subtle-text); letter-spacing: .06em;}
.skills-grid h3 {font-size: 22px; font-weight: 500; margin-block: 16px 23px;}
.skill-tags {display: flex; flex-wrap: wrap; gap: 8px; list-style: none;}
.skill-tags li {font-size: 11px; padding: 7px 12px; border: 1px solid var(--dark-line); border-radius: 4px; color: var(--soft-text);}
.people-skills {display: grid; grid-template-columns: 1.2fr 1fr; gap: 100px; margin-top: 63px; padding-top: 34px; border-top: 1px solid var(--dark-line);}
.people-skills h3 {font-size: 28px; font-weight: 500;}
.people-skills > div > p {font-size: 13px; line-height: 1.9; color: var(--soft-text); margin-top: 14px;}
.about-languages > p {display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--dark-line); padding-bottom: 13px;}
.about-languages strong {font-weight: 600; color: var(--light);}
.about-languages p span {font-size: 11px;}
.about-languages small {display: block; font-size: 10px; line-height: 1.9; color: var(--subtle-text); margin-top: 14px;}
.courses-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.course-card {padding: 29px; border: 1px solid var(--line); border-radius: 9px; display: flex; flex-direction: column;}
.course-topline {display: flex; justify-content: space-between; gap: 18px; align-items: center; font-size: 9px; color: var(--muted);}
.course-status {font-size: 8px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px;}
.course-status.is-progress {background: var(--yellow); color: var(--goh-brown); border-color: var(--yellow);}
.course-card h3 {font-size: 25px; font-weight: 600; letter-spacing: -.02em; margin-top: 22px;}
.course-description {font-size: 12px; color: var(--muted); line-height: 1.85; margin-block: 13px 22px;}
.course-bottom {display: flex; gap: 20px; justify-content: space-between; align-items: center; margin-top: auto; border-top: 1px solid var(--line); padding-top: 13px; min-height: 58px;}
.course-date {font-size: 9px; color: var(--muted);}
.course-bottom a {display: inline-flex; align-items: center; min-height: 44px; font-size: 11px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px;}
.about-contact {padding-block: 78px; background: var(--yellow);}
.about-contact-grid {display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center;}
.about-contact .eyebrow {margin-bottom: 23px; font-size: 9px;}
.about-contact h2 {font-size: clamp(39px, 4vw, 58px); line-height: 1.1;}
.about-contact p:last-child {font-size: 13px; margin-top: 22px; max-width: 420px;}
.about-contact-actions {display: flex; flex-direction: column; align-items: flex-start; gap: 11px;}
.about-contact-actions .button {font-size: 12px; gap: 15px;}
.about-contact-actions .text-link {font-size: 11px;}
@media(max-width: 1150px) {
    .about-hero-grid {gap: 35px;}
    .about-hero h1 {font-size: 60px;}
    .about-portrait {height: 530px;}
    .about-name {font-size: 24px;}
    .about-split, .degree-layout {gap: 45px;}
    .career-row {gap: 50px;}
    .people-skills {gap: 60px;}
    .about-contact-grid {gap: 35px;}
}
@media(max-width: 900px) {
    .about-hero-grid {grid-template-columns: 1.15fr 1fr; gap: 28px; padding-top: 40px;}
    .about-hero h1 {font-size: 49px;}
    .about-hero-copy .eyebrow {font-size: 7px;}
    .about-intro {font-size: 12px;}
    .about-portrait {height: 510px;}
    .about-portrait::before {top: 100px; border-top-left-radius: 90px;}
    .portrait-wordmark {font-size: 100px; top: 110px; left: 20px;}
    .portrait-caption {right: -8px; padding: 14px 13px 14px 28px; font-size: 7px;}
    .portrait-caption .status-dot {left: 13px; top: 19px;}
    .about-name {font-size: 21px;}
    .about-role {font-size: 9px;}
    .about-actions {gap: 7px;}
    .about-actions .button {font-size: 11px;}
    .degree-layout {grid-template-columns: 1fr 1fr; gap: 30px;}
    .degree-copy h2 {font-size: 37px;}
    .degree-photo img {height: 400px;}
    .about-split {gap: 35px;}
    .about-split h2 {font-size: 33px;}
    .career-row {grid-template-columns: .4fr 1fr; gap: 35px;}
    .skills-grid {gap: 22px;}
    .skills-grid h3 {font-size: 19px;}
    .skill-tags li {font-size: 10px; padding: 6px 10px;}
    .course-card {padding: 22px;}
    .course-card h3 {font-size: 23px;}
    .about-contact-grid {grid-template-columns: 1.2fr 1fr; gap: 25px;}
    .about-contact-actions .button {font-size: 10px; padding-inline: 16px;}
}
@media(max-width: 650px) {
    .about-hero-grid {grid-template-columns: 1fr; gap: 0; padding-top: 40px;}
    .about-hero-copy {padding-bottom: 27px;}
    .about-hero h1 {font-size: clamp(49px, 9.5vw, 61px);}
    .about-hero-copy .eyebrow {font-size: 8px; margin-bottom: 22px;}
    .about-name {font-size: 24px; margin-top: 25px;}
    .about-role {font-size: 10px;}
    .about-intro {font-size: 13px; margin-top: 20px;}
    .about-actions {gap: 13px; margin-top: 22px;}
    .about-portrait {height: 395px; width: min(100%, 360px); justify-self: center;}
    .about-portrait::before {inset: 40px 12px 0;}
    .portrait-wordmark {left: 42px; top: 60px; font-size: 108px;}
    .portrait-caption {right: 0; font-size: 7px; bottom: 23px;}
    .about-hero-foot {font-size: 6px; gap: 14px; min-height: 62px;}
    .about-split, .degree-layout, .people-skills, .about-contact-grid {grid-template-columns: 1fr; gap: 29px;}
    .about-split h2 {font-size: 37px;}
    .about-prose p {font-size: 13px;}
    .about-degree {padding-bottom: 69px;}
    .degree-photo img {height: auto; aspect-ratio: 1.3; object-fit: cover;}
    .degree-photo figcaption {font-size: 9px; padding: 15px 18px;}
    .degree-copy {padding-top: 7px;}
    .degree-copy h2 {font-size: 43px;}
    .degree-copy .eyebrow {margin-bottom: 20px;}
    .degree-thesis {margin-top: 21px; padding-top: 8px;}
    .career-list {margin-top: 33px;}
    .career-row {grid-template-columns: 1fr; gap: 22px; padding-block: 30px;}
    .career-period {display: flex; gap: 15px; align-items: center; flex-wrap: wrap;}
    .career-number {font-size: 33px;}
    .career-period p {margin-top: 0; font-size: 8px;}
    .career-current {margin-top: 0; font-size: 8px;}
    .career-company {font-size: 8px;}
    .career-content h3 {font-size: 28px;}
    .career-content ul {font-size: 11px;}
    .skills-grid {grid-template-columns: 1fr; gap: 29px; margin-top: 35px;}
    .skills-grid h3 {font-size: 25px; margin-block: 12px 18px;}
    .skill-tags li {font-size: 11px;}
    .people-skills {margin-top: 40px; padding-top: 29px; gap: 17px;}
    .courses-grid {grid-template-columns: 1fr; gap: 16px;}
    .course-card {padding: 23px;}
    .course-card h3 {font-size: 26px;}
    .about-contact {padding-block: 62px;}
    .about-contact h2 {font-size: clamp(35px, 8.7vw, 48px);}
    .about-contact-actions .button {font-size: 12px; padding-inline: 19px;}
    .about-contact-actions {gap: 7px;}
}
@media(max-width: 380px) {
    .about-hero h1 {font-size: 43px;}
    .about-hero-copy .eyebrow {font-size: 7px;}
    .about-name {font-size: 22px;}
    .about-role {font-size: 8px;}
    .about-portrait {height: 365px;}
    .about-hero-foot {font-size: 5px; gap: 10px;}
    .about-split h2 {font-size: 32px;}
    .about-contact-actions .button {font-size: 11px;}
}
@media print {
    .about-hero-grid, .about-split, .degree-layout, .about-contact-grid {display: block;}
    .about-portrait {display: none;}
    .about-intro, .about-role, .people-skills > div > p, .skill-tags li {color: var(--ink);}
    .about-hero-copy {padding-bottom: 20px;}
    .about-degree {padding-bottom: 25px;}
    .degree-photo {max-width: 300px; margin-bottom: 20px;}
    .degree-photo img {height: auto;}
    .career-row, .course-card {break-inside: avoid;}
}