/* Hallmark · route: custom (bespoke) · structure: portrait-centered personal calling card
 * paper: oklch(20% .023 190) · accent: oklch(82% .065 180) · display: Cormorant Garamond · body: Manrope
 * axes: dark / roman-serif / teal · idea: the person leads, the name reads as a signature */
:root { color-scheme:dark; --paper:oklch(20% .023 190); --panel:oklch(24% .023 190); --ink:oklch(94% .01 190); --muted:oklch(76% .016 190); --rule:oklch(38% .02 190); --accent:oklch(82% .065 180); --display:"Cormorant Garamond",Georgia,serif; --body:"Manrope",sans-serif; --weight:400; --page-gutter:clamp(24px,5vw,72px); }
.personal-nav { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); padding:var(--space-6) var(--page-gutter); }
.name-mark { font:500 1.125rem/1.3 var(--body); text-decoration:none; letter-spacing:-.03em; }
.name-mark span { display:block; margin-top:var(--space-2); font:400 .6875rem/1.5 var(--body); color:var(--muted); letter-spacing:0; }
.personal-nav nav { display:flex; gap:var(--space-8); }
.personal-nav nav a { display:inline-flex; min-height:44px; align-items:center; font-size:.8125rem; text-decoration:none; }
.personal-nav nav a:last-child { text-decoration:underline; }
.profile-cover { max-width:1320px; margin:auto; padding:var(--space-3) var(--page-gutter) var(--space-12); }
.profile-topline,.profile-bottomline { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); }
.profile-topline { border-top:1px solid var(--rule); padding-top:var(--space-4); color:var(--muted); font-size:.6875rem; }
.profile-topline p { margin:0; }
.portrait { width:280px; height:280px; margin:var(--space-6) auto 0; border-radius:50%; overflow:hidden; }
.portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 44%; filter:contrast(.92); }
.personal-intro h1 { text-align:center; font:400 clamp(4rem,8vw,7.5rem)/.95 var(--display); letter-spacing:-.055em; margin-top:var(--space-5); }
.personal-role { text-align:center; font-size:.875rem; line-height:1.65; color:var(--muted); margin:var(--space-5) auto 0; }
.profile-bottomline { margin-top:var(--space-4); }
.profile-bottomline > a { display:inline-flex; align-items:center; gap:var(--space-10); min-height:44px; font-size:.75rem; }
.profile-bottomline > p { font-size:.625rem; color:var(--muted); }
.personal-story { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); border-top:1px solid var(--rule); padding:var(--space-20) var(--page-gutter); max-width:1320px; margin:auto; }
.personal-story h2 { font:400 clamp(2.5rem,4vw,4rem)/1.05 var(--display); }
.personal-story p { color:var(--muted); font-size:1rem; line-height:1.8; margin:0 0 var(--space-5); }
.personal-story .personal-demo-note { font-size:.75rem; }
.personal-contact { padding:var(--space-16) var(--page-gutter) var(--space-20); background:var(--panel); }
.personal-contact > p:first-child { color:var(--muted); font-size:.75rem; margin:0 0 var(--space-6); }
.personal-contact h2 { font:400 clamp(3rem,6vw,5.5rem)/1 var(--display); }
.personal-contact > a { display:inline-flex; min-height:44px; align-items:center; gap:var(--space-12); margin-top:var(--space-6); font-size:.875rem; }
.personal-contact-note { font-size:.75rem; color:var(--muted); margin-top:var(--space-8); }
.personal-kicker { font:500 .75rem/1.5 var(--body); color:var(--muted); margin:0 0 var(--space-6); }
.personal-focus { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-16); padding:var(--space-16) var(--page-gutter); background:var(--panel); }
.personal-focus h2,.personal-process > h2,.personal-notebook h2 { font:400 clamp(2.5rem,4.5vw,4.5rem)/1.05 var(--display); }
.personal-focus article { display:grid; grid-template-columns:32px minmax(0,1fr); gap:var(--space-6); padding:var(--space-6) 0; border-top:1px solid var(--rule); }
.personal-focus article > span { padding-top:var(--space-2); font-size:.75rem; color:var(--muted); }
.personal-focus h3 { font:400 2rem/1.15 var(--display); }
.personal-focus article p { margin:var(--space-4) 0 0; font-size:.9375rem; line-height:1.8; color:var(--muted); }
.personal-process { max-width:1320px; margin:auto; padding:var(--space-20) var(--page-gutter); }
.personal-process ol { list-style:none; margin:var(--space-10) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-10); }
.personal-process li { border-top:1px solid var(--rule); padding-top:var(--space-6); }
.personal-process h3 { font:400 1.75rem/1.2 var(--display); }
.personal-process li p { color:var(--muted); font-size:.9375rem; line-height:1.8; }
.personal-notebook { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-16); max-width:1320px; margin:auto; border-top:1px solid var(--rule); padding:var(--space-16) var(--page-gutter) var(--space-20); }
.personal-notebook > div > p:not(.personal-kicker) { color:var(--muted); font-size:1rem; line-height:1.8; margin:0 0 var(--space-5); }
.personal-notebook ul { list-style:none; padding:0; margin:var(--space-8) 0; }
.personal-notebook li { padding:var(--space-3) 0; border-bottom:1px solid var(--rule); font:400 1.625rem/1.3 var(--display); }
.personal-notebook > div > p.personal-small-note { font-size:.75rem; }
@media(max-width:48rem) { .personal-focus,.personal-notebook { grid-template-columns:1fr; gap:var(--space-8); padding-block:var(--space-12); } .personal-process { padding-block:var(--space-12); } .personal-process ol { grid-template-columns:1fr; gap:var(--space-5); } .personal-process h3 { font-size:2rem; } }
@media(max-width:40rem) { .personal-nav { align-items:start; gap:var(--space-4); } .name-mark { font-size:1rem; } .name-mark span { max-width:20ch; font-size:.625rem; } .personal-nav nav { gap:var(--space-4); } .personal-nav nav a { font-size:.6875rem; }
 .profile-topline { display:block; } .profile-topline p:last-child { display:none; } .portrait { width:228px; height:228px; margin-top:var(--space-8); } .personal-intro h1 { font-size:4.75rem; } .personal-role { font-size:.8125rem; }
 .profile-bottomline { align-items:start; flex-direction:column; gap:0; margin-top:var(--space-6); } .profile-bottomline > p { margin:var(--space-2) 0 0; }
 .personal-story { grid-template-columns:1fr; gap:var(--space-8); padding-block:var(--space-12); } .personal-contact { padding-block:var(--space-12); } .personal-contact > a { gap:var(--space-4); font-size:.8125rem; }
}