html { scroll-behavior:smooth; }
html, body, #root { margin:0; min-height:100%; }
body { background:#fff; color:#232324; }
.personal-site { --blue:#234fc3; --red:#e64d2e; font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing:-.018em; max-width:1100px; margin:auto; }
.personal-site * { box-sizing:border-box; }
.personal-site a { color:inherit; }
.masthead { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #dedbd5; padding:12px 0 22px; gap:24px; }
.masthead .mark { font-weight:650; font-size:15px; text-decoration:none; white-space:nowrap; }
.mark-dot,.period { color:var(--red); }
.masthead nav { display:flex; flex-wrap:wrap; gap:22px; }
.masthead nav a { font-size:13px; color:#555459; text-decoration:none; }
.masthead a:hover,.personal-site a:focus-visible { color:var(--blue); }
.hero { min-height:430px; border-bottom:1px solid #dedbd5; }
.hero-copy { display:flex; flex-direction:column; justify-content:center; padding:55px 0 65px; min-height:430px; }
.eyebrow,.section-index,.section-aside,.education,.hero-bottom,.ordinal { font-size:12px; letter-spacing:.075em; }
.eyebrow { display:flex; align-items:center; gap:13px; margin:0; color:#5e5b5b; }
.tiny-square { display:inline-block; width:7px; height:7px; background:var(--red); transform:rotate(16deg); }
.hero h1 { font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-.065em; font-size:clamp(76px,10.5vw,152px); line-height:.96; margin:35px 0 0; }
.hero-bottom { display:flex; align-items:center; justify-content:space-between; color:#525153; }
.down-arrow { font-size:27px; color:var(--blue); line-height:1; }
.hero-art { overflow:hidden; background:#f6f1e8; }
.hero-art img { display:block; width:100%; height:100%; object-fit:cover; }
.intro-section,.connect-section { display:grid; grid-template-columns:28% 72%; padding:108px 0; border-bottom:1px solid #dedbd5; }
.section-index { color:var(--blue); font-weight:650; margin:0; }
h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(35px,4.4vw,55px); letter-spacing:-.045em; line-height:1.1; margin:0 0 29px; }
.intro-section .lead { font-family:Georgia,'Times New Roman',serif; font-size:clamp(21px,2.2vw,29px); line-height:1.48; max-width:710px; margin:0; letter-spacing:-.025em; }
.education { margin:38px 0 0; color:#6b6765; }
.work-section,.conversations-section { padding:108px 0; border-bottom:1px solid #dedbd5; }
.section-head { display:flex; justify-content:space-between; padding-bottom:38px; }
.section-aside { margin:0; color:#84817e; }
.work-list { border-top:1px solid #dedbd5; }
.work-item { display:grid; grid-template-columns:14% 40% 46%; align-items:baseline; border-bottom:1px solid #dedbd5; padding:25px 0; gap:0; }
.work-item .ordinal { color:var(--red); font-weight:650; }
.work-item h3 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(24px,2.7vw,33px); line-height:1.17; letter-spacing:-.035em; margin:0; font-weight:400; }
.work-item p { margin:0; color:#625e5b; font-size:15px; line-height:1.55; max-width:370px; }
.conversations-section h2 { margin-top:29px; }
.conversation-list { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.conversation-list a { min-height:165px; border:1px solid #dfdcd6; padding:25px; display:flex; justify-content:space-between; text-decoration:none; transition:background .2s,border-color .2s; }
.conversation-list a:hover { background:#f7f4ed; border-color:var(--blue); }
.conversation-list strong { display:block; font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:25px; letter-spacing:-.035em; line-height:1.2; }
.conversation-list small { display:block; color:#706d69; font-size:12px; letter-spacing:.02em; margin-top:20px; }
.external { color:var(--blue); font-size:23px; }
.connect-section { border-bottom:0; }
.connect-section a { color:var(--blue); text-decoration:none; border-bottom:1px solid var(--blue); font-size:17px; padding-bottom:5px; }
footer { border-top:1px solid #dedbd5; padding:25px 0 8px; display:flex; justify-content:space-between; color:#726f6d; font-size:12px; }
@media (max-width:1148px) { .personal-site { padding-inline:24px; } }
@media (max-width:750px) {
 .personal-site { padding-inline:20px; }
 .masthead { align-items:flex-start; flex-direction:column; gap:9px; }
 .masthead nav { gap:15px; }
 .masthead nav a { display:inline-flex; align-items:center; min-height:35px; }
 .hero { min-height:0; }
 .hero-copy { min-height:300px; padding:38px 0 48px; }
 .hero h1 { font-size:clamp(65px,13vw,90px); margin:35px 0 0; }
 .hero-art { height:230px; }
 .hero-art img { object-position:center 39%; }
 .intro-section,.connect-section { display:block; padding:70px 0; }
 .intro-section .section-index,.connect-section .section-index { margin-bottom:30px; }
 .work-section,.conversations-section { padding:70px 0; }
 .section-head { padding-bottom:25px; }
 .section-aside { display:none; }
 .work-item { grid-template-columns:37px 1fr; gap:0 4px; padding:23px 0; }
 .work-item .ordinal { grid-row:span 2; padding-top:7px; }
 .work-item p { grid-column:2; padding-top:8px; }
 .conversation-list { grid-template-columns:1fr; gap:10px; }
 .conversation-list a { min-height:135px; }
}
@media (max-width:370px) { .hero h1 { font-size:61px; } .masthead nav { gap:11px; } }

.contact-links { display:flex; flex-wrap:wrap; align-items:center; column-gap:32px; row-gap:22px; }
.contact-links a { white-space:nowrap; }
@media (max-width:750px) { .contact-links { align-items:flex-start; flex-direction:column; } .contact-links a { font-size:16px; } }

.education-section { display:grid; grid-template-columns:28% 72%; padding:94px 0 100px; border-bottom:1px solid #dedbd5; }
.education-list { display:grid; gap:24px; }
.education-list > div { border-bottom:1px solid #dedbd5; padding:0 0 26px; }
.education-list > div:last-child { border-bottom:0; padding-bottom:0; }
.education-list h2 { font-size:clamp(23px,2.7vw,33px); margin:0 0 9px; }
.education-list p { margin:0; color:#625e5b; font-size:15px; line-height:1.5; }
@media(max-width:750px) { .education-section {display:block; padding:70px 0;} .education-section .section-index {margin-bottom:30px;} }
