/* Professional narrative, career and résumé. Shares the portfolio theme tokens. */
.expertise-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start; }
.expertise-card { padding:28px; border:1px solid var(--line); background:var(--surface); border-radius:4px 4px 24px 4px; transition:border-color .3s,background .3s; }
.expertise-card:has(details[open]),.expertise-card:hover { border-color:var(--accent); }
.expertise-card-top { display:flex; justify-content:space-between; align-items:center; }
.expertise-number { color:var(--accent); font-size:12px; }
.expertise-mark { width:30px; height:30px; fill:none; stroke:var(--accent); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.expertise-grid h3 { font-size:clamp(27px,2.4vw,39px); font-weight:600; line-height:1.08; letter-spacing:-.055em; margin:36px 0 20px; text-wrap:balance; }
.expertise-body { font-size:15px; line-height:1.75; color:var(--muted); }
.expertise-scope { display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0; margin:24px 0; }
.expertise-scope li { border:1px solid var(--line); padding:6px 9px; border-radius:6px; color:var(--ink); font-size:12px; line-height:1.45; }
.expertise-details { border-top:1px solid var(--line); margin-top:26px; }
.expertise-details summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0 0; min-height:48px; cursor:pointer; font-size:14px; font-weight:600; list-style:none; }
.expertise-details summary::-webkit-details-marker { display:none; }
.expertise-details summary:focus-visible { outline:2px solid var(--accent); outline-offset:5px; border-radius:2px; }
.expertise-details summary svg { width:20px; height:20px; fill:none; stroke:var(--accent); stroke-width:1.4; flex-shrink:0; transition:rotate .35s; }
.expertise-details[open] summary svg { rotate:45deg; }
.expertise-details ul { padding:0; margin:20px 0 0; list-style:none; }
.expertise-details li { padding:13px 0 13px 20px; border-top:1px solid var(--line); font-size:14px; line-height:1.65; color:var(--muted); position:relative; }
.expertise-details li:before { content:''; position:absolute; left:0; top:22px; width:5px; height:5px; background:var(--accent); border-radius:50%; }
.career-proof { margin-top:40px; padding:clamp(25px,3.5vw,60px); background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:4px 4px 32px 4px; }
.proof-topline { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.proof-topline .mono { font-size:11px; color:var(--muted); }
.proof-topline svg { width:24px; height:24px; fill:none; stroke:var(--accent); stroke-width:1.2; }
.proof-overview { display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:end; padding:38px 0 40px; }
.proof-overview:empty { display:none; }
.proof-role { display:block; font-size:13px; line-height:1.5; color:var(--muted); margin-bottom:14px; }
.proof-heading h3 { font-family:Editorial,Georgia,serif; font-size:clamp(34px,3.5vw,58px); font-weight:400; line-height:1.1; letter-spacing:-.025em; color:var(--accent); }
.proof-context .mono { display:block; font-size:11px; color:var(--muted); margin-bottom:16px; }
.proof-context p { font-size:15px; line-height:1.8; max-width:520px; }
.proof-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0; border-top:1px solid var(--line); }
.proof-grid>div { padding:30px 28px 20px; border-left:1px solid var(--line); }
.proof-grid>div:nth-child(3n+1) { border-left:0; padding-left:0; }
.proof-grid>div:nth-child(3n) { padding-right:0; }
.proof-grid>div:nth-child(n+4) { border-top:1px solid var(--line); }
.proof-value { display:block; font-size:clamp(64px,6vw,100px); font-weight:600; line-height:1.04; letter-spacing:-.075em; font-variant-numeric:tabular-nums; color:var(--ink); }
.proof-value small { font-size:.48em; letter-spacing:-.04em; margin-left:.08em; }
.proof-label { display:block; margin-top:12px; font-size:17px; line-height:1.4; font-weight:600; letter-spacing:-.02em; }
.proof-grid dd { margin:12px 0 0; max-width:300px; font-size:14px; line-height:1.65; color:var(--muted); }
.proof-grid dd:empty { display:none; }
.proof-actions { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:25px; padding-top:24px; border-top:1px solid var(--line); }
.proof-actions .text-link { display:inline-flex; margin:0; max-width:100%; white-space:normal; font-family:var(--sans); font-size:14px; line-height:1.5; min-height:44px; align-items:center; gap:8px; }
.proof-actions .text-link>span { margin-left:0; }
.toolkit { margin:60px 0 40px; padding-top:38px; border-top:1px solid var(--line); scroll-margin-top:24px; }
.toolkit-heading { display:grid; grid-template-columns:1.1fr 1fr; align-items:end; gap:50px; margin-bottom:30px; }
.toolkit-heading .mono { color:var(--muted); font-size:11px; }
.toolkit-heading h3 { margin:16px 0 0; font-family:Editorial,Georgia,serif; font-size:clamp(34px,3.8vw,58px); line-height:1.1; font-weight:400; letter-spacing:-.025em; color:var(--accent); white-space:pre-line; }
.toolkit-heading>p { color:var(--muted); font-size:16px; line-height:1.75; max-width:510px; }
.toolkit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.toolkit-grid article { padding:26px; background:var(--surface); border:1px solid var(--line); border-radius:4px 4px 18px 4px; }
.toolkit-number { color:var(--accent); font-size:11px; }
.toolkit-grid h4 { margin:22px 0 12px; font-size:23px; line-height:1.2; letter-spacing:-.035em; font-weight:600; }
.toolkit-grid p { color:var(--muted); font-size:14px; line-height:1.7; }
.toolkit-grid ul { padding:0; margin:22px 0 0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.toolkit-grid li { font-size:14px; line-height:1.4; padding:8px 11px; border:1px solid var(--line); border-radius:6px; }
@media(max-width:1050px) { .toolkit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.hero-portrait:empty { display:none; }
.hero-name-wrap.has-portrait .first-name { justify-content:flex-start; font-size:22vw; padding-left:3%; }
.hero-portrait { position:absolute; width:18%; max-width:270px; top:-2.5vw; right:7%; z-index:1; pointer-events:none; }
.portrait-frame { margin:0; aspect-ratio:2/3; overflow:hidden; border-radius:50% 50% 48% 48% / 32% 32% 32% 32%; background:var(--signal); box-shadow:0 0 0 8px var(--paper); animation:portrait-enter 1s cubic-bezier(.16,1,.3,1) .25s both; }
.portrait-frame img { width:100%; height:100%; object-fit:cover; object-position:50% 20%; transform:scale(1.2); transform-origin:50% 30%; }
@keyframes portrait-enter { from { opacity:0; transform:translateY(35px) rotate(5deg) scale(.9); clip-path:inset(50% 0 50% 0 round 100px); } to { opacity:1; transform:none; clip-path:inset(0 round 100px); } }
.motion-reduced .hero-portrait { opacity:1!important; }
@media(max-width:1050px) {
 .expertise-grid { grid-template-columns:1fr; gap:16px; }
 .expertise-card { display:grid; grid-template-columns:1fr 1.2fr; gap:0 36px; padding:28px; }
 .expertise-card-top,.expertise-grid h3 { grid-column:1; }
 .expertise-grid h3 { margin:22px 0; }
 .expertise-body { grid-column:2; grid-row:1 / span 2; }
 .expertise-scope { grid-column:1; margin:0; }
 .expertise-details { grid-column:2; grid-row:3; margin-top:0; }
 .proof-overview { gap:30px; }
 .proof-grid>div { padding-inline:18px; }
 .proof-value { font-size:64px; }
}
@media(max-width:600px) {
 .positioning-intro>p { font-size:16px!important; line-height:1.75!important; }
 .expertise-card { display:block; padding:24px; }
 .expertise-grid h3 { font-size:32px; margin:25px 0 18px; }
 .expertise-body { font-size:16px; line-height:1.75; }
 .expertise-scope { margin:22px 0; }
 .expertise-scope li { font-size:12px; }
 .expertise-details { margin-top:24px; }
 .expertise-details summary { font-size:15px; }
 .expertise-details li { font-size:15px; }
 .career-proof { padding:26px 22px; margin-top:30px; }
 .proof-topline .mono { font-size:10px; }
 .proof-overview { grid-template-columns:1fr; gap:24px; padding:28px 0; }
 .proof-heading h3 { font-size:37px; }
 .proof-context p { font-size:15px; line-height:1.75; }
 .proof-context .mono { margin-bottom:12px; }
 .proof-grid { grid-template-columns:1fr; }
 .proof-grid>div,.proof-grid>div:first-child,.proof-grid>div:last-child { border-left:0; border-bottom:1px solid var(--line); padding:24px 0; }
 .proof-grid>div:last-child { border-bottom:0; padding-bottom:12px; }
 .proof-grid>div:nth-child(n+4) { border-top:0; }
 .proof-grid dt { display:block; }
 .proof-value { font-size:64px; }
 .proof-label { font-size:17px; margin:10px 0 0; }
 .proof-grid dd { font-size:14px; max-width:none; margin-top:12px; }
 .proof-actions { display:grid; gap:8px; margin-top:20px; padding-top:18px; }
 .proof-actions .text-link { justify-self:start; font-size:14px; }
 .toolkit { margin-top:40px; padding-top:28px; }
 .toolkit-heading { grid-template-columns:1fr; gap:20px; }
 .toolkit-heading h3 { font-size:37px; }
 .toolkit-heading>p { font-size:15px; }
 .toolkit-grid { grid-template-columns:1fr; }
 .toolkit-grid article { padding:24px; }
 .hero-name-wrap.has-portrait .first-name { font-size:24vw; padding-left:2%; }
 .hero-portrait { width:25%; right:3%; top:-10vw; }
 .portrait-frame { box-shadow:0 0 0 5px var(--paper); }
 .hero-caption { display:grid; grid-template-columns:1fr auto; gap:18px; margin-top:30px; }
 .hero-caption>p:first-child { font-size:15px; line-height:1.55; max-width:none!important; }
 .hero-caption>.hero-asterisk { font-size:28px; }
 .hero-caption>p:last-child { grid-column:1/-1; display:flex; justify-content:space-between; gap:18px; text-align:left; max-width:none!important; min-width:0!important; }
 .hero-caption>p:last-child a { font-size:12px!important; }
}
@media(max-width:360px) {
 .expertise-card { padding:20px; }
 .career-proof { padding:24px 18px; }
 .proof-value { font-size:64px; }
 .proof-heading h3 { font-size:33px; }
}
.hero-caption > p:last-child a { display: block; padding: 5px 0; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line); }
.hero-caption > p:last-child a:hover { text-decoration-color: var(--accent); }
.hero-meta { gap: 28px; }
.hero-foot > span { max-width: 55%; }
.positioning { padding: 105px 0 40px; scroll-margin-top: 0; }
.positioning-intro { display: grid; grid-template-columns: 1.25fr .75fr; gap: 70px; align-items: end; margin: 50px 0 56px; }
.positioning h2, .contact-section h2 { font-size: clamp(38px,4.5vw,80px); line-height: 1.06; letter-spacing: -.06em; font-weight: 400; }
.positioning h2 em, .contact-section h2 em { font-family: Editorial, Georgia, serif; font-weight: 400; color: var(--accent); }
.positioning-intro > p { font-size: 16px; line-height: 1.8; color: var(--muted); max-width: 500px; }
.career { scroll-margin-top: 0; padding-bottom: 70px; }
.career .about-grid { margin-bottom: 50px; }
.career h2 { font-size: clamp(42px,5.7vw,98px); }
.resume-block { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 30px 32px; border: 1px solid var(--line); background: var(--surface); }
.resume-block h3 { font-size: 24px; line-height: 1.3; font-weight: 400; letter-spacing: -.04em; }
.resume-block p { color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 10px; }
.resume-actions { display: flex; align-items: center; gap: 25px; flex-shrink: 0; }
.resume-actions .primary-button, .contact-actions .primary-button { margin: 0; }
.resume-actions .text-link, .contact-actions .text-link { margin: 0; }
.career-timeline { padding: 0; margin: 50px 0 0; list-style: none; }
.career-timeline > li { display: grid; grid-template-columns: 175px minmax(0,1fr) 170px; gap: 35px; padding: 32px 0; border-top: 1px solid var(--line); }
.career-date { color: var(--accent); font-size: 10px; padding-top: 6px; }
.career-place { color: var(--muted); font-size: 9px; text-align: right; padding-top: 6px; }
.career-timeline h3 { font-size: clamp(24px,2.3vw,38px); letter-spacing: -.045em; font-weight: 400; line-height: 1.2; }
.career-role { margin-top: 9px; font-size: 14px; line-height: 1.5; }
.career-timeline ul { padding: 0 0 0 17px; margin: 20px 0 0; max-width: 760px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.career-timeline ul > li + li { margin-top: 8px; }
.career-background { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 30px; }
.career-background h3 { color: var(--accent); font-size: 9px; }
.career-background p { color: var(--muted); font-size: 14px; line-height: 1.8; margin-top: 15px; max-width: 500px; }
.contact-section { padding: 70px 0 75px; border-top: 1px solid var(--line); scroll-margin-top: 0; }
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; margin-top: 50px; align-items: center; }
.contact-grid p { font-size: 16px; line-height: 1.8; color: var(--muted); max-width: 480px; }
.contact-actions { display: flex; gap: 25px; align-items: center; margin-top: 30px; flex-wrap: wrap; }
.take-along { margin-top: 20px; }
.project-contribution { border-left: 2px solid var(--accent); padding-left: 15px; margin-top: 25px!important; font-size: 13px!important; }
.project-contribution .mono { display: block; font-size: 8px; color: var(--accent); margin-bottom: 6px; }
.index-dialog .section-index { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 0 0 32px; }
.index-dialog .section-index > a { display: block; font-size: 20px; padding: 17px 0; min-height: 56px; }
.index-dialog #project-index > a { padding: 16px 0; }
.index-dialog #project-index strong { font-size: 24px; }
.index-dialog .index-top { padding-bottom: 28px; }
@media(max-width:1100px) {
  .site-header nav { gap: 18px; }
  .positioning-intro, .contact-grid { gap: 35px; }
  .career-timeline > li { grid-template-columns: 135px minmax(0,1fr) 120px; gap: 25px; }
  .resume-block { align-items: flex-start; gap: 25px; }
  .resume-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media(max-width:900px) {
  .positioning { padding-top: 70px; }
  .positioning-intro { grid-template-columns: 1fr; gap: 25px; margin: 35px 0 40px; }
  .positioning-intro > p { max-width: 650px; font-size: 15px; }
  .career-timeline > li { grid-template-columns: 125px minmax(0,1fr); gap: 15px 25px; }
  .career-place { grid-column: 2; text-align: left; padding: 0; }
  .career .about-grid { gap: 30px; }
  .career h2 { font-size: 7vw; }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .contact-grid p { max-width: 620px; }
}
@media(max-width:600px) {
  .site-header nav { gap: 7px; }
  .hero-meta { gap: 22px; font-size: 9px; line-height: 1.6; }
  .hero-meta > span:first-child { max-width: 185px; }
  .hero-meta > span:last-child { max-width: 110px; }
  .hero-caption > p:last-child { max-width: 155px; min-width: 125px; }
  .hero-caption > p:last-child a { padding: 9px 0; min-height: 44px; font-size: 11px; line-height: 1.5; }
  .hero-foot > span { max-width: 52%; }
  .positioning { padding-top: 60px; scroll-margin-top: 0; }
  .positioning .section-label > span:last-child { max-width: 125px; text-align: right; }
  .positioning h2, .contact-section h2 { font-size: clamp(35px,9.1vw,54px); }
  .positioning-intro > p, .contact-grid p { font-size: 14px; line-height: 1.85; }
  .career { scroll-margin-top: 0; padding-bottom: 50px; }
  .career .about-grid { display: block; }
  .career .about-symbol { display: none; }
  .career h2 { font-size: 11vw; }
  .career .about-grid { margin-bottom: 30px; }
  .career .about-copy p { font-size: 14px; }
  .resume-block { flex-direction: column; gap: 22px; padding: 24px 20px; }
  .resume-block h3 { font-size: 25px; }
  .resume-actions { flex-direction: row; flex-wrap: wrap; gap: 15px 22px; }
  .resume-actions .primary-button { padding: 14px 17px; min-height: 46px; }
  .career-timeline { margin-top: 35px; }
  .career-timeline > li { grid-template-columns: 1fr; gap: 14px; padding: 25px 0; }
  .career-date { padding: 0; }
  .career-timeline h3 { font-size: 28px; }
  .career-role { font-size: 13px; }
  .career-timeline ul { font-size: 13px; margin-top: 16px; }
  .career-place { grid-column: 1; font-size: 9px; }
  .career-background { grid-template-columns: 1fr; gap: 28px; }
  .career-background p { font-size: 13px; }
  .contact-section { padding: 50px 0; scroll-margin-top: 0; }
  .contact-section .section-label > span:last-child { max-width: 120px; text-align: right; }
  .contact-grid { margin-top: 35px; }
  .contact-actions { gap: 20px; }
  .index-dialog .section-index > a { font-size: 20px; }
  .index-dialog #project-index strong { font-size: 21px; }
}
@media(max-width:360px) {
  .site-header nav { gap: 5px; }
  .hero-caption > p:last-child a { font-size: 11px; }
  .hero-caption > p:first-child { max-width: 110px; }
}