:root {
  --paper: #000000;
  --paper-2: #080808;
  --ink: #ffffff;
  --muted: #9c9c9c;
  --soft: #cccccc;
  --line: rgba(255,255,255,.20);
  --accent: #d2d2d2;
  --max: 1380px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
.skip { position:absolute; left:-9999px; top:0; }
.skip:focus { left:1rem; top:1rem; z-index:999; background:#fff; color:#000; padding:.75rem 1rem; }

.nav-shell {
  width: min(calc(100% - 64px), var(--max));
  margin: 0 auto;
  min-height: 92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.monogram {
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border:1px solid var(--ink);
  border-radius:50%;
  text-decoration:none;
  font-size:14px;
  letter-spacing:.06em;
}
nav { display:flex; gap:30px; }
nav a { text-decoration:none; font-size:13px; letter-spacing:.045em; }
nav a:hover { opacity:.55; }

main { width:min(calc(100% - 64px), var(--max)); margin:0 auto; }
.hero {
  min-height:780px;
  display:grid;
  grid-template-columns: 1.14fr .86fr;
  gap: clamp(42px,7vw,110px);
  align-items:center;
  padding:72px 0 78px;
}
h1.hero-name {
  margin:0 0 24px;
  width:min(38vw, 620px);
  line-height:0;
}
.hero-name img { display:block; width:100%; height:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero-role { margin:0; font-size:clamp(20px,2vw,30px); letter-spacing:-.025em; }
.hero-location { margin:10px 0 22px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.hero-intro { max-width:670px; margin:0; color:var(--muted); font-size:18px; line-height:1.6; }
.proof-line { margin:18px 0 0; color:var(--soft); font-size:12px; line-height:1.5; letter-spacing:.015em; }
.hero-actions { display:flex; gap:12px; margin-top:36px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; border:1px solid var(--ink); text-decoration:none; font-size:13px; letter-spacing:.04em; transition:.2s ease; }
.button-dark { background:var(--ink); color:var(--paper); }
.button-dark:hover { background:transparent; color:var(--ink); }
 .button-ghost,
.button-ghost:visited,
.button-ghost:hover,
.button-ghost:active { background:transparent; color:var(--ink); }
.button-ghost:focus-visible { background:transparent; color:var(--ink); outline:2px solid var(--ink); outline-offset:3px; }
.portrait-card { margin:0; position:relative; }
.portrait-card img { display:block; width:100%; height:auto; object-fit:contain; filter:grayscale(1); background:var(--paper-2); }
.portrait-card figcaption { display:flex; justify-content:space-between; gap:10px; padding-top:13px; font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); }

.manifesto { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:62px 0 66px; display:grid; grid-template-columns:1fr 3fr; gap:54px; }
.kicker { margin:0; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.manifesto-copy { margin:0; max-width:980px; font-size:clamp(29px,3.5vw,52px); line-height:1.10; letter-spacing:-.042em; }
.manifesto-copy strong { font-weight:500; }

.work { padding:86px 0 94px; }
.section-head { display:grid; grid-template-columns:2fr 1fr; gap:64px; align-items:end; margin-bottom:44px; }
.section-head h2 { margin:12px 0 0; font-weight:400; font-size:clamp(34px,4vw,56px); line-height:1.04; letter-spacing:-.04em; max-width:760px; }
.section-note { margin:0; color:var(--muted); font-size:13px; line-height:1.65; max-width:360px; justify-self:end; }
.experience { display:grid; grid-template-columns:64px minmax(300px,1.08fr) 1.15fr; gap:34px; padding:31px 0 33px; border-top:1px solid var(--line); align-items:start; }
.experience:last-of-type { border-bottom:1px solid var(--line); }
.experience-index { font-size:13px; color:var(--muted); letter-spacing:.08em; }
.company { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.11em; color:var(--accent); }
.experience h3, .earlier-grid h3, .credential h3 { margin:0; font-weight:500; letter-spacing:-.025em; }
.experience h3 { font-size:24px; }
.meta { margin:9px 0 0; color:var(--muted); font-size:13px; }
.experience-copy { margin:0; color:var(--soft); font-size:15px; line-height:1.6; max-width:560px; }
.earlier-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:50px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.earlier-grid article { padding:38px 42px 40px 0; }
.earlier-grid article + article { border-left:1px solid var(--line); padding-left:42px; }
.earlier-grid h3 { margin-top:14px; font-size:30px; font-weight:400; }
.earlier-grid article > p:last-child { color:var(--muted); line-height:1.6; font-size:14px; max-width:520px; }

.background { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:40px 0 0; }
.background > .kicker { margin-bottom:22px; }
.background-grid { display:grid; grid-template-columns:repeat(2,1fr); }
.credential { padding:0 38px 40px 0; }
.credential + .credential { border-left:1px solid var(--line); padding-left:38px; }
.credential-label { margin:0 0 14px; color:var(--muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.credential h3 { font-size:23px; font-weight:400; line-height:1.15; }
.credential p:last-child { margin:14px 0 0; color:var(--muted); line-height:1.55; font-size:13px; max-width:350px; }

.contact { padding:76px 0 82px; }
.contact h2 { margin:16px 0 20px; max-width:900px; font-size:clamp(42px,5.4vw,72px); font-weight:400; line-height:1.01; letter-spacing:-.047em; }
.contact-copy { max-width:620px; margin:0 0 24px; color:var(--muted); font-size:15px; line-height:1.6; }
.contact-link { display:inline-flex; gap:16px; align-items:center; border-bottom:1px solid var(--ink); padding-bottom:7px; text-decoration:none; font-size:18px; }
.contact-link:hover { opacity:.55; }

footer { width:min(calc(100% - 64px), var(--max)); margin:0 auto; border-top:1px solid var(--line); min-height:100px; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px; }
footer p { margin:0; }

@media (min-width: 901px) {
  .hero { min-height:750px; padding-bottom:62px; }
  .manifesto { grid-template-columns:180px minmax(0,1fr); gap:38px; }
  .section-head { grid-template-columns:minmax(0,760px) minmax(240px,360px); gap:44px; justify-content:start; }
  .section-note { justify-self:start; }
  .experience { grid-template-columns:minmax(300px,450px) minmax(0,560px); gap:52px; justify-content:start; padding:28px 0 30px; }
  .experience-index { display:none; }
  .contact { padding:68px 0 66px; }
}

@media (max-width: 900px) {
  .nav-shell, main, footer { width:min(calc(100% - 36px), var(--max)); }
  nav { gap:18px; }
  .hero { min-height:0; grid-template-columns:1fr; padding:54px 0 50px; gap:34px; }
  .hero-copy { order:1; }
  .portrait-card { order:2; width:min(100%,620px); margin-top:8px; }
  h1.hero-name { width:min(78vw, 540px); }
  .manifesto { grid-template-columns:1fr; gap:22px; padding:48px 0 52px; }
  .manifesto-copy { font-size:clamp(29px,6.4vw,42px); }
  .section-head { grid-template-columns:1fr; gap:18px; }
  .section-note { justify-self:start; }
  .experience { grid-template-columns:42px 1fr; }
  .experience-copy { grid-column:2; }
  .background-grid { grid-template-columns:1fr; }
  .credential { display:grid; grid-template-columns:110px 1fr; gap:24px; padding:26px 0; }
  .credential + .credential { border-left:0; border-top:1px solid var(--line); padding-left:0; }
  .credential-label { margin:4px 0 0; }
}

@media (max-width: 620px) {
  .nav-shell, main, footer { width:calc(100% - 28px); }
  .nav-shell { min-height:74px; }
  nav { gap:18px; }
  nav .nav-profile { display:none; }
  nav a { font-size:12px; }
  .monogram { width:38px; height:38px; }
  .hero { padding-top:42px; padding-bottom:42px; gap:28px; }
  h1.hero-name { margin-top:0; margin-bottom:22px; width:min(79vw, 520px); }
  .hero-role { font-size:18px; }
  .hero-location { margin-top:8px; }
  .hero-intro { font-size:15px; line-height:1.55; }
  .proof-line { margin-top:14px; font-size:11px; }
  .hero-actions { margin-top:30px; }
  .button { min-height:48px; padding:0 20px; }
  .portrait-card figcaption { font-size:9px; padding-top:11px; }
  .manifesto { padding:42px 0 46px; gap:20px; }
  .manifesto-copy { font-size:clamp(28px,7.8vw,36px); line-height:1.13; letter-spacing:-.035em; }
  .work { padding:62px 0 40px; }
  .section-head { margin-bottom:30px; }
  .section-head h2 { font-size:clamp(31px,8.8vw,39px); line-height:1.07; }
  .section-note { font-size:12px; }
  .experience { grid-template-columns:1fr; gap:10px; padding:25px 0 27px; }
  .experience-index { display:none; }
  .experience-copy { grid-column:1; font-size:14px; line-height:1.58; }
  .experience h3 { font-size:21px; line-height:1.12; }
  .meta { font-size:12px; }
  .earlier-grid { grid-template-columns:1fr; margin-top:40px; }
  .earlier-grid article { padding:28px 0 30px; }
  .earlier-grid article + article { border-left:0; border-top:1px solid var(--line); padding-left:0; }
  .earlier-grid h3 { font-size:27px; }
  .background { padding-top:32px; }
  .background > .kicker { margin-bottom:14px; }
  .credential { grid-template-columns:82px 1fr; gap:18px; padding:23px 0; }
  .credential h3 { font-size:20px; }
  .credential p:last-child { margin-top:9px; font-size:12px; }
  .contact { padding:52px 0 56px; }
  .contact h2 { margin-top:14px; font-size:clamp(34px,9.5vw,44px); line-height:1.04; letter-spacing:-.04em; }
  .contact-copy { font-size:14px; margin-bottom:20px; }
  .contact-link { font-size:16px; }
  footer { min-height:78px; align-items:center; justify-content:space-between; padding:24px 0; flex-direction:row; gap:16px; }
  footer p { white-space:nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}