:root{
  --page:#FAF9F6; --band:#F1EFEA; --field:#FFFFFF; --ink:#1A1A1A; --text:#222222; --muted:#555555;
  --rule:#E2E0DB; --gold:#8A6D3B; --marker:#B0B0B0;
  --sans:"Inter", "Helvetica Neue", Arial, sans-serif;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --measure:38rem; color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#17181A; --band:#202124; --field:#202124; --ink:#F0EFEC; --text:#DEDDDA; --muted:#A3A29F;
    --rule:#33343A; --gold:#C9A66B; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --page:#17181A; --band:#202124; --field:#202124; --ink:#F0EFEC; --text:#DEDDDA; --muted:#A3A29F;
  --rule:#33343A; --gold:#C9A66B; color-scheme:dark;
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(4.5rem + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--page);color:var(--text);font-family:var(--sans);font-size:1.0625rem;line-height:1.62;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--page)}
a{color:var(--gold);text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img{max-width:100%;display:block}
strong{color:var(--ink);font-weight:600}

/* nav */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--page);border-bottom:1px solid var(--rule)}
.top-inner{max-width:68rem;margin:0 auto;padding:1rem 1.5rem;display:flex;gap:1.5rem;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.name{font-family:var(--serif);font-weight:600;font-size:1.2rem;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.top nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.4rem}
.top nav a{font-size:.92rem;font-weight:500;color:var(--muted);text-decoration:none}
.top nav a:hover{color:var(--ink);text-decoration:underline}

/* layout */
main{max-width:68rem;margin:0 auto;padding:0 1.5rem}
section{padding:4.5rem 0;border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:0}
.row{display:grid;grid-template-columns:12rem 1fr;gap:2rem}
.row > h2{font-family:var(--sans);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin:.45rem 0 0}
@media (max-width:44rem){.row{grid-template-columns:1fr;gap:1rem}}

/* hero */
.hero{display:grid;grid-template-columns:minmax(14rem,22rem) 1fr;gap:3.5rem;align-items:end;padding:4rem 0 4.5rem}
.portrait{margin:0;background:var(--band)}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.06)}
.hero .who{font-size:1rem;color:var(--muted);margin:0 0 1.25rem}
.hero .who strong{font-weight:600}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,4.8vw,3.7rem);line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:0 0 1.5rem;max-width:16ch}
.hero h1 span{display:block}
.hero .support{font-size:1.2rem;font-weight:500;line-height:1.5;color:var(--ink);max-width:30rem;margin:0}
@media (max-width:44rem){
  .hero{grid-template-columns:1fr;gap:2rem;padding-top:2.5rem}
  .portrait{max-width:16rem}
}

/* what I help with */
.helps{display:grid;gap:2.75rem}
.help h3{font-family:var(--serif);font-weight:600;font-size:1.4rem;line-height:1.25;letter-spacing:-.01em;color:var(--ink);margin:0 0 .5rem;max-width:30ch}
.help p{margin:0;max-width:var(--measure)}
em{font-style:italic}

/* honest note */
.note{background:var(--band);border-bottom:0;padding:3.5rem 1.5rem;margin:0 -1.5rem}
.note p{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.45;color:var(--ink);max-width:36rem;margin:0 auto}

/* experience */
.jobs{list-style:none;margin:0;padding:0}
.jobs li{display:grid;grid-template-columns:9rem 1fr;gap:1.5rem;padding:1.4rem 0;border-top:1px solid var(--rule)}
.jobs li:first-child{border-top:0;padding-top:0}
.years{font-size:.95rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;padding-top:.2rem}
.jobs h3{font-family:var(--serif);font-weight:600;font-size:1.25rem;line-height:1.3;color:var(--ink);margin:0}
.jobs p{margin:.35rem 0 0;max-width:var(--measure);color:var(--muted)}
@media (max-width:30rem){.jobs li{grid-template-columns:1fr;gap:.25rem}}

/* case studies */
.cases{display:grid;gap:2.5rem}
.case h3{font-family:var(--serif);font-weight:600;font-size:1.4rem;letter-spacing:-.01em;color:var(--ink);margin:0 0 .4rem}
.case p{margin:0;max-width:var(--measure)}
.case .status{font-size:.9rem;color:var(--muted);margin-top:.5rem}

/* contact */
.cta h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,2.8vw,2.1rem);line-height:1.15;letter-spacing:-.015em;color:var(--ink);margin:0 0 .75rem;max-width:22ch}
.cta > div > p{max-width:var(--measure)}
.cta > div > p:first-of-type{margin:0 0 1.75rem}
.actions{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:center;margin-bottom:3rem}
.btn{display:inline-block;font-weight:600;font-size:.98rem;color:var(--page);background:var(--ink);text-decoration:none;padding:.75rem 1.4rem;border-radius:2px}
.btn:hover{background:var(--gold)}
.plain{font-size:.98rem;font-weight:500}
.form-intro{font-size:.95rem;color:var(--muted);margin:0 0 1rem}
form{max-width:32rem;display:grid;gap:1.1rem}
label{display:block;font-size:.92rem;font-weight:500;color:var(--ink);margin-bottom:.35rem}
input,textarea{width:100%;font:inherit;font-size:1rem;color:var(--text);background:var(--field);border:1px solid #CFCCC6;padding:.7rem .8rem;border-radius:2px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) input,:root:not([data-theme="light"]) textarea{border-color:var(--rule);background:var(--band)}}
textarea{min-height:9rem;resize:vertical}
button{justify-self:start;font:inherit;font-weight:600;font-size:.98rem;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:.7rem 1.4rem;border-radius:2px;cursor:pointer}
button:hover{border-color:var(--gold);color:var(--gold)}
.hidden{position:absolute;left:-9999px}

footer{max-width:68rem;margin:0 auto;padding:2rem 1.5rem 3rem;font-size:.88rem;color:var(--muted)}

/* case study list on home */
.case h3 a{color:inherit;text-decoration:none}
.case h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.case .year{font-size:.9rem;font-weight:600;color:var(--muted);margin:0 0 .5rem}
.case .more{font-size:.95rem;font-weight:500;margin-top:.6rem}

/* case study pages */
.back{display:inline-block;font-size:.92rem;font-weight:500;margin:2.5rem 0 0}
.cs-head{padding:2rem 0 3.5rem;border-bottom:1px solid var(--rule)}
.cs-head .year{font-size:.95rem;font-weight:600;color:var(--muted);margin:0 0 1rem}
.cs-head h1{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin:0;max-width:22ch}
.cs-head .sub{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.35;color:var(--muted);margin:.75rem 0 0;max-width:34ch}
.cs .row{padding:2.75rem 0;border-bottom:1px solid var(--rule)}
.cs .row > div > p{margin:0 0 1rem;max-width:var(--measure)}
.cs .row > div > p:last-child{margin-bottom:0}
.cs .lead p{font-family:var(--serif);font-size:1.3rem;line-height:1.5;color:var(--ink)}
.cs h3{font-family:var(--serif);font-weight:600;font-size:1.25rem;line-height:1.3;color:var(--ink);margin:2rem 0 .5rem;max-width:34ch}
.cs h3:first-child{margin-top:0}
.cs .demo{color:var(--muted)}
.cs-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;padding:2.5rem 0 1rem;font-size:.98rem;font-weight:500}

/* screenshots */
.shots{display:grid;gap:2rem}
.shot{margin:0}
.shot a{display:block;border:1px solid var(--rule);background:var(--field)}
.shot img{width:100%;height:auto}
.shot figcaption{font-size:.9rem;color:var(--muted);margin-top:.6rem}
.shot-label{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin:0 0 .75rem}
.shot-label + .shot{margin-top:0}
.after-group{display:grid;gap:2rem;margin-top:1rem}

footer p{margin:0}
footer .colophon{margin-bottom:.35rem}