:root { --ink:#183d32; --paper:#f7f6ed; --sage:#e5ebd6; --rule:#b9c4b5; }
* { box-sizing:border-box }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.6 'DM Sans',Arial,sans-serif }
.wrap { width:min(1160px,90%); margin-inline:auto }
header,nav,.brand,footer { display:flex; align-items:center }
header,footer { justify-content:space-between }
header { padding:21px 0; border-bottom:1px solid var(--rule) }
.brand { gap:10px; font-weight:bold }
nav { gap:24px }
a { color:inherit; text-underline-offset:5px }
header a,.button { text-decoration:none }
a:hover,summary:hover { text-decoration:underline }
:focus-visible { outline:3px solid #ac6321; outline-offset:4px }
.skip { position:absolute; clip-path:inset(50%); width:1px; height:1px; overflow:hidden }
.skip:focus { clip-path:none; width:auto; height:auto; background:white; padding:8px; z-index:2 }
.hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:7%; padding-block:clamp(40px,6vw,85px) }
h1,h2,h3 { font:normal 48px/1.04 Georgia,serif; letter-spacing:-.05em; margin:0 }
h1 { font-size:clamp(70px,8vw,112px); line-height:.92; margin:20px 0 }
h3 { font-size:36px }
.label { font:12px/1.5 'Courier Prime','Courier New',monospace; letter-spacing:.06em }
.label { text-transform:uppercase; margin:0 0 12px }
.intro,.contact p { max-width:43ch }
.button { display:inline-block; background:var(--ink); color:white; padding:10px 18px; border-radius:5px }
.art { background:#193f36; aspect-ratio:1.16; overflow:hidden; border-radius:46% 46% 3px 3px }
.art canvas { width:100%; height:100%; display:block }
.band { background:var(--sage); padding:50px 0 58px; border-radius:50% 3% 0 0 / 15px 8px 0 0 }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:20px; margin-top:26px }
article { background:var(--paper); border:1px solid var(--rule); padding:clamp(22px,3vw,40px); border-radius:8px; }
article p { max-width:50ch } summary { cursor:pointer; text-decoration:underline; text-underline-offset:5px }
.split { display:grid; grid-template-columns:1fr 1.12fr; gap:7%; padding-block:70px }
.split p:first-child { margin-top:0 }
.contact { background:var(--ink); color:var(--paper); padding:clamp(26px,5vw,65px); border-radius:8px }
.contact .button { color:var(--ink); background:var(--sage) }
footer { margin-top:40px; padding-block:18px; border-top:1px solid var(--rule); font-size:14px }
@media(max-width:720px) {
  .hero,.cards,.split { grid-template-columns:1fr }
  .hero { gap:30px } .split { gap:20px; padding-block:44px }
  nav { gap:12px } header { font-size:14px } .brand { gap:6px }
  h2 { font-size:38px } .art { aspect-ratio:1.65 }
}

.career { padding-bottom:70px; scroll-margin-top:24px }
.career-heading { display:grid; grid-template-columns:1fr 1.12fr; gap:7%; border-top:1px solid var(--rule); padding-top:40px; margin-bottom:30px }
.career-heading p { margin:0; max-width:55ch }
.career-role { display:grid; grid-template-columns:1fr 2fr; gap:7%; padding:30px 0; border-top:1px solid var(--rule) }
.career-meta p { margin:0 0 8px }
.career-meta p + p { font-size:14px }
.career-role h3 { font-size:32px }
.employer { margin:8px 0 18px; font-weight:600 }
.career-work { padding-left:20px; margin:0 }
.career-work li { margin-bottom:12px; max-width:65ch }
.career-role > div > p:last-child { margin-bottom:0; max-width:65ch }
.career-details { margin-top:18px }
.career-details[open] summary { margin-bottom:18px }
.career-skills { border-top:1px solid var(--rule); padding-top:30px }
.career-skills p { max-width:85ch }
@media(max-width:720px) {
  header { flex-wrap:wrap; gap:16px }
  nav { flex-wrap:wrap }
  .career-heading,.career-role { grid-template-columns:1fr; gap:18px }
  .career { padding-bottom:44px }
}