@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-italic.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-sans-400.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/instrument-sans-500.woff2) format("woff2")}

:root{--ink:#0b0d0f;--ink-2:#13171a;--bone:#e9e3d6;--dim:#9a9a92;--tungsten:#e0a24a;--rule:#272c30;--serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--cover:url("/assets/img/hero.jpg")}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem;scrollbar-gutter:stable}
body{background:var(--ink);color:var(--bone);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;min-height:100svh}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--tungsten);outline-offset:4px}
.wrap{width:min(1100px,100% - 3rem);margin-inline:auto}

/* Persistent background: whole photo, never cropped, fades into the page */
.bgimg{position:fixed;top:0;left:0;width:100%;aspect-ratio:4080/1724;z-index:0;transition:opacity .5s;
  background:linear-gradient(to bottom,rgba(11,13,15,.75) 0,rgba(11,13,15,0) 26%),linear-gradient(to right,rgba(11,13,15,.65) 0,rgba(11,13,15,0) 62%),url("/assets/img/hero.jpg") center/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 100%);mask-image:linear-gradient(to bottom,#000 50%,transparent 100%)}
body.pg-sub .bgimg{opacity:.3}
.grain{position:fixed;inset:0;z-index:1;opacity:.06;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
main{position:relative;z-index:2}
[hidden]{display:none!important}

/* Header */
header{position:fixed;inset:0 0 auto 0;z-index:50;padding:1.5rem 0;border-bottom:1px solid transparent;transition:background .3s,padding .3s,border-color .3s}
header.scrolled{padding:.85rem 0;background:rgba(11,13,15,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--rule)}
header .wrap{display:flex;justify-content:space-between;align-items:center}
.mark{font:500 1rem/1 var(--serif);letter-spacing:.04em;text-decoration:none;color:#f3eee3;text-shadow:0 1px 8px rgba(0,0,0,.6)}
nav{display:flex;align-items:center;gap:.5rem;font-size:.95rem}
nav a{text-decoration:none;color:#f3eee3;text-shadow:0 1px 8px rgba(0,0,0,.6);padding:.5rem 1.1rem;transition:color .2s,background .2s}
nav a:hover{color:var(--tungsten)}
nav a.on{background:var(--tungsten);color:var(--ink);text-shadow:none;font-weight:500}
nav a.on:hover{background:var(--bone);color:var(--ink)}

/* Buttons */
.btn{display:inline-block;padding:.85rem 1.6rem;border:1px solid var(--bone);background:transparent;color:var(--bone);font:500 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--bone);color:var(--ink)}
.btn.solid{background:var(--tungsten);border-color:var(--tungsten);color:var(--ink)}
.btn.solid:hover{background:var(--bone);border-color:var(--bone)}

/* Home: one screen, no scrolling */
.home-in{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding:max(6rem,14vw) 0 3rem}
h1{font:300 clamp(2.4rem,6.5vw,6rem)/1 var(--serif);letter-spacing:-.02em;text-wrap:balance}
h1 strong{font-weight:600}
h1 span{display:block;font-size:.4em;font-style:italic;letter-spacing:0;line-height:1.2;margin-top:.7rem;color:#f3eee3}
h1 em{font-style:italic}
.sub{margin-top:1.5rem;max-width:40rem;color:#f3eee3;font-size:1.15rem;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.steps{margin-top:1.5rem;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:#f3eee3;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.steps i{font-style:normal;color:var(--tungsten);margin:0 .6em}
.cta{margin-top:1.75rem;display:flex;gap:1.25rem;flex-wrap:wrap}

/* Sub pages */
.page{padding:8rem 0 5rem}
h2{font:300 clamp(1.9rem,4vw,3rem)/1.1 var(--serif);letter-spacing:-.01em;margin-bottom:1.5rem}
.subtitle{font:italic 300 1.4rem/1.3 var(--serif);color:var(--tungsten);margin:-.5rem 0 1.25rem}
.lede{color:#d9d3c6;max-width:34rem;font-size:1.15rem}
.about{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem}
.about h2{margin-bottom:0}
.about>div:last-child{position:sticky;top:6.5rem;align-self:start}
.bio+p{margin-top:1.25rem}
.about blockquote+p{margin-top:2rem}
.about p{max-width:36rem}
.role{font:italic 300 1.4rem/1.3 var(--serif);color:var(--tungsten);margin:.4rem 0 2rem}
.bio{display:flex;gap:1.5rem;align-items:flex-start}
.portrait{flex:none;width:210px;height:210px;object-fit:cover;border:1px solid var(--rule);filter:grayscale(1) contrast(1.05);margin-top:.3rem}
.lead{font-family:var(--serif);font-weight:500;font-size:1.1em}
@media (min-width:761px){.role.two{min-height:calc(2*1.4rem*1.3)}}
.about blockquote{clear:both;margin:2rem 0 0}
.about p+p{margin-top:1.25rem}
blockquote{font:italic 300 clamp(1.4rem,2.6vw,1.9rem)/1.3 var(--serif);border-left:2px solid var(--tungsten);padding-left:1.5rem;margin:0 0 2rem;max-width:30rem}
.paths{list-style:none;margin-bottom:2rem}
.paths li:first-child{padding-top:0}
.paths li{padding:1.4rem 0;border-bottom:1px solid var(--rule)}
.paths h3{font:500 1.5rem/1.1 var(--serif);margin-bottom:.3rem}
.paths p{color:#cfc9bc}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2rem;margin-top:3rem}
.proj{display:block;text-decoration:none}
.cover{display:block;width:100%;height:auto;aspect-ratio:1600/2560;object-fit:cover;border:1px solid var(--rule);background:var(--ink-2)}
.proj .cover{transition:transform .3s,border-color .3s}
.proj:hover .cover{transform:translateY(-4px);border-color:var(--tungsten)}
.proj h3{font:500 1.5rem/1.1 var(--serif);margin-top:1rem}
.proj p{color:var(--dim);font-size:.95rem;margin-top:.25rem}
.lang{display:inline-block;margin-left:.5rem;padding:0 .4rem;border:1px solid var(--tungsten);color:var(--tungsten);font-size:.75rem;letter-spacing:.08em;line-height:1.5}
.pj .alt-label{margin-top:2rem;color:var(--dim);font-size:.9rem}
.pj .alt{color:#cfc9bc}
.pj .alt-label+.alt{margin-top:.5rem}
h2.sect{font-size:clamp(1.6rem,3vw,2.2rem);margin:4.5rem 0 .4rem}
.sect-lede{color:#d9d3c6;margin-bottom:0}
.sect-lede+.grid{margin-top:2rem}
.lede+.ai-note{margin-top:.9rem;max-width:46rem;color:#cfc9bc}
.ai-note{margin-top:2.5rem;font-size:.85rem;color:var(--dim)}
.back{display:inline-block;margin-bottom:2.5rem;color:var(--dim);text-decoration:none;transition:color .2s}
.back:hover{color:var(--bone)}
.title{display:grid;grid-template-columns:minmax(240px,380px) 1fr;gap:4rem;align-items:start}
.pj h1{font:300 clamp(3rem,7vw,5.5rem)/.95 var(--serif);max-width:none}
.pj .tag{font:italic 300 1.5rem/1.2 var(--serif);color:var(--tungsten);margin:1rem 0 2rem}
.pj p{max-width:38rem}
.pj p+p{margin-top:1.25rem}
.pj .log{font-size:1.2rem}
.pj dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.5rem;margin:2rem 0;padding-top:1.5rem;border-top:1px solid var(--rule);max-width:38rem}
.pj dt{color:var(--dim)}

/* Contact form */
form{max-width:38rem;margin-top:2.5rem;display:grid;gap:1.5rem}
label{display:grid;gap:.4rem;color:#d9d3c6;font-size:.95rem}
input,select,textarea{font:400 1.0625rem/1.5 var(--sans);color:var(--bone);background:rgba(19,23,26,.7);border:0;border-bottom:1px solid var(--rule);padding:.7rem .8rem;border-radius:0;width:100%}
select option{background:var(--ink-2);color:var(--bone)}
textarea{min-height:9rem;resize:vertical}
::placeholder{color:#8f8f88}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--tungsten);outline:none}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{color:#f0c27a;min-height:0}
.status a{color:var(--bone)}
.status:empty{display:none}
.thx{font:300 2rem/1.1 var(--serif);margin:2.5rem 0 1rem}
#thanks p{max-width:34rem;color:#d9d3c6}
.legal-link{margin-top:3rem;font-size:.8rem}
.legal-link a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule);transition:color .2s}
.legal-link a:hover{color:var(--bone)}
.legal h3{font:500 1.25rem/1.2 var(--serif);margin:2rem 0 .5rem}
.legal p{max-width:44rem;color:#d9d3c6}
.legal p+p{margin-top:.9rem}
.legal .meta{color:var(--dim)}
.legal a{color:var(--bone)}
.note{color:#d9d3c6;font-size:.9rem}
.note a{color:var(--bone)}
footer{padding:2rem 0;color:var(--dim);font-size:.9rem;position:relative;z-index:2}
body.pg-home footer{display:none}
@media (max-width:760px){
  nav{gap:.1rem}
  nav a{padding:.45rem .65rem}
  .role{font-size:1.15rem}
  .home-in{padding-top:calc(42.25vw + 1.5rem)}
  .steps{font-size:.76rem;letter-spacing:.1em}
  .about,.row{grid-template-columns:1fr;gap:2.5rem}
  .row{gap:1.5rem}
  .title{grid-template-columns:1fr;gap:2rem}
  .bio{flex-direction:column;gap:1.25rem}
  .grid{grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem}
  .proj h3{font-size:1.1rem}
  .proj p{font-size:.85rem}
  .about>div:last-child{position:static}
  .portrait{width:170px;height:170px}
  .title .cover{max-width:320px}
  .page{padding-top:6.5rem}
}

.slate-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"title ." "sub side" "lede side";column-gap:4rem;align-items:start}
.slate-head h2{grid-area:title}
.slate-head .subtitle{grid-area:sub;margin:0 0 1rem}
.slate-head .lede{grid-area:lede;max-width:none;margin:0}
.slate-info{grid-area:side;padding-top:.1rem}
.slate-info .req-line{margin-top:0}
.slate-info .ai-note{margin-top:.7rem;max-width:none}
.slate-head h2{margin-bottom:.4rem}
.req-line{margin-top:.9rem;color:#f3eee3;font-weight:500}
.req-line a{color:var(--tungsten);text-decoration:none;border-bottom:1px solid var(--tungsten);transition:color .2s}
.req-line a:hover{color:var(--bone);border-bottom-color:var(--bone)}
.proj h3 .lang{font:500 .68rem/1.5 var(--sans);letter-spacing:.08em;vertical-align:.3em;margin-left:.55rem}
@media (max-width:760px){.slate-head{grid-template-columns:1fr;grid-template-areas:"title" "sub" "lede" "side";row-gap:0}.slate-head .subtitle{margin-bottom:1rem}.slate-info{margin-top:1.1rem;padding-top:0}}

/* Card titles scale with the card so the longest title stays on one line */
.proj{container-type:inline-size}
.proj h3{font-size:clamp(1.05rem,calc(96cqw / 10.71),1.5rem)}
@media (max-width:760px){.proj h3{font-size:1.1rem}}

.pj .lbl{font:500 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tungsten);margin-right:.5rem;vertical-align:.12em}
.pj .comment{font-style:italic;color:#cfc9bc}
.pj .alt.en{margin-top:2rem}

/* Slate header v3: yellow request line on the right, aligned with the left column */
.slate-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"title ." "sub req" "lede ai";column-gap:4rem;align-items:start}
.slate-head .req-line{grid-area:req;font:italic 300 1.4rem/1.3 var(--serif);color:var(--tungsten);margin:0 0 1rem}
.slate-head .req-line a{color:#f3eee3;text-decoration:none;border-bottom:1px solid #f3eee3;font-weight:400}
.slate-head .req-line a:hover{color:var(--tungsten);border-bottom-color:var(--tungsten)}
.slate-head .ai-note{grid-area:ai;font-size:1.15rem;line-height:1.65;color:#b3afa4;margin:0;max-width:none}
.slate-head .ai-label{color:#cfc9bc}
@media (max-width:760px){.slate-head{grid-template-columns:1fr;grid-template-areas:"title" "sub" "lede" "req" "ai"}.slate-head .lede{margin-bottom:1.1rem}.slate-head .req-line{margin-bottom:.7rem}}
h1 span .ft{color:var(--tungsten)}
.slate-head .ai-note,.slate-head .ai-label{color:#d9d3c6}
@media (max-width:760px){.sub br.d{display:none}}