:root { --ink:#142638; --paper:#f4f0e8; --paper-2:#ebe5da; --copper:#a6532e; --muted:#5c6871; --rule:rgba(20,38,56,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; font-size:clamp(1rem,.96rem + .2vw,1.125rem); line-height:1.65; }
a { color:inherit; text-underline-offset:.25em; }
a:focus-visible { outline:3px solid var(--copper); outline-offset:5px; border-radius:2px; }
.skip-link { position:fixed; z-index:20; top:1rem; left:1rem; padding:.65rem 1rem; background:var(--ink); color:white; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.site-header,main,footer { width:min(1180px,calc(100% - 3rem)); margin-inline:auto; }
.site-header { min-height:96px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--rule); }
.wordmark { display:grid; place-items:center; min-height:44px; padding:.55rem .8rem; background:var(--ink); color:var(--paper); font-family:Georgia,serif; font-size:.9rem; letter-spacing:.025em; text-decoration:none; }
nav { display:flex; gap:clamp(1.1rem,4vw,3rem); font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; }
nav a { text-decoration:none; }
nav a:hover { color:var(--copper); }
.hero { min-height:calc(100vh - 96px); display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,8vw,7rem); align-items:center; padding:5rem 0 6rem; }
.eyebrow { margin:0 0 1.2rem; color:var(--copper); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; font-weight:400; line-height:.95; letter-spacing:-.045em; }
h1 { margin:0; font-size:clamp(4.3rem,10vw,8.8rem); }
h2 { margin:0 0 2rem; font-size:clamp(2.6rem,5vw,4.75rem); }
.roles { display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; margin:2rem 0; padding:1.4rem 0; border-block:1px solid var(--rule); list-style:none; color:var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.11em; }
.roles li:not(:last-child)::after { content:"·"; margin-left:1.5rem; color:var(--copper); }
.intro { max-width:34rem; font-family:Georgia,serif; font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.45; }
.text-link { display:inline-block; margin-top:1rem; color:var(--ink); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.11em; text-decoration-color:var(--copper); }
.text-link span[aria-hidden] { color:var(--copper); margin-left:.35rem; }
.portrait-wrap { margin:0; }
.portrait-frame { position:relative; background:var(--paper-2); padding:1rem; }
.portrait-frame::before { content:""; position:absolute; inset:-1.25rem 1.25rem 1.25rem -1.25rem; border:1px solid var(--copper); z-index:-1; }
.portrait-frame img { display:block; width:100%; height:auto; filter:grayscale(16%) contrast(1.03); }
figcaption { margin-top:1rem; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.13em; }
.section-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(3rem,8vw,8rem); padding:clamp(5rem,10vw,9rem) 0; border-top:1px solid var(--rule); }
.prose { max-width:46rem; }
.prose p { margin:0 0 1.5rem; }
.prose .lead { font-family:Georgia,serif; font-size:clamp(1.45rem,2.8vw,2.2rem); line-height:1.38; }
.work { grid-template-columns:1fr 1fr; }
.work-card { padding-right:clamp(1rem,5vw,4rem); }
.work-card + .work-card { padding-left:clamp(1rem,5vw,4rem); border-left:1px solid var(--rule); }
.work-card p { max-width:28rem; color:var(--muted); }
footer { display:flex; justify-content:space-between; padding:2.5rem 0 3.5rem; border-top:1px solid var(--rule); color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; }
.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; }
@media (max-width:760px) {
  .site-header,main,footer { width:min(100% - 2rem,1180px); }
  .site-header { min-height:76px; }
  nav { gap:1rem; font-size:.68rem; }
  .hero { min-height:auto; grid-template-columns:1fr; padding:4rem 0 5rem; }
  .hero-copy { display:contents; }
  .eyebrow,h1,.roles,.intro,.hero .text-link { grid-column:1; }
  .portrait-wrap { grid-row:5; }
  h1 { font-size:clamp(3.8rem,22vw,6rem); }
  .roles li::after { display:none; }
  .section-grid,.work { grid-template-columns:1fr; gap:1.5rem; }
  .work-card + .work-card { margin-top:3rem; padding:3rem 0 0; border-left:0; border-top:1px solid var(--rule); }
  footer { gap:1rem; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }