/* Self-hosted fonts (SIL Open Font License). Latin and Latin Extended subsets cover ʻokina and kahakō. */
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/public-sans-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/public-sans-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/source-serif-4-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/source-serif-4-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/public-sans-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/public-sans-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Layout: survey-sheet page. Single column of map-sheet sections; mono "map margin" labels carry coordinates and section keys. */
:root{
  --paper:#f2f4f1;       /* sheet background, faint green-grey */
  --ink:#16222a;         /* basalt navy text */
  --muted:#55636a;       /* secondary text */
  --rule:#cfd6d2;        /* hairlines, grid */
  --water:#1d6a86;       /* accent: ocean blue, links, CTA */
  --contour:#8f6220;     /* map-margin labels, contour lines */
  --field:#7a8783;       /* form field borders (3:1 on white) */
  --raised:#ffffff;      /* form fields, image mats */
  --f-display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --f-body:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --s1:.25rem;--s2:.5rem;--s3:1rem;--s4:1.5rem;--s5:2.5rem;--s6:4rem;
  --max:68rem;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#11181c;--ink:#e2e8e5;--muted:#9aa7ac;--rule:#2b363b;--water:#62b4cf;--contour:#d4a457;--raised:#182126;--field:#64737a;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#11181c;--ink:#e2e8e5;--muted:#9aa7ac;--rule:#2b363b;--water:#62b4cf;--contour:#d4a457;--raised:#182126;--field:#64737a;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--f-body);margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
a{color:var(--water);text-underline-offset:.18em}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--water);outline-offset:3px}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.15;text-wrap:balance;margin:0}
h2{font-size:clamp(1.6rem,3.2vw,2.2rem)}
h3{font-size:1.2rem}
p{margin:0}
.prose{max-width:65ch}
.key{font:500 .75rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--contour)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-block:.7rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font:600 1.15rem var(--f-display)}
.brand img{width:2rem;height:2rem}
:root[data-theme="dark"] .brand img{filter:invert(1)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand img{filter:invert(1)}}
.nav{display:flex;gap:clamp(.8rem,2.5vw,1.6rem);flex-wrap:wrap;font-size:.95rem}
.nav a{color:var(--ink);text-decoration:none}
.nav a:hover{color:var(--water)}

/* hero */
.hero{padding-block:clamp(2.5rem,6vw,4.5rem) var(--s5);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;position:relative}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);margin-block:var(--s3)}
.hero .lede{font-size:1.15rem;color:var(--muted);max-width:52ch}
.avail{margin-top:var(--s4);display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.btn{display:inline-block;background:var(--water);color:var(--paper);font:600 1rem var(--f-body);padding:.75rem 1.3rem;border-radius:3px;text-decoration:none;border:0;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.avail .note{font-size:.95rem;color:var(--muted)}
.hero figure{margin:0}
.hero img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;display:block}
.hero figcaption{margin-top:.5rem}
.contours{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.contours path{fill:none;stroke:var(--rule);stroke-width:1.2}

/* coordinates strip */
.strip{border-block:1px solid var(--rule)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);padding-block:.8rem;font:400 .82rem var(--f-mono);color:var(--muted)}
.strip b{color:var(--ink);font-weight:500}

/* sections */
section.block{padding-block:clamp(2.5rem,6vw,4rem)}
section.block+section.block{border-top:1px solid var(--rule)}
.head{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
.head p{color:var(--muted);max-width:60ch}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s5)}
.about .prose{display:grid;gap:var(--s3);align-content:start}
.facts{display:grid;gap:var(--s3);align-content:start;margin:0}
.facts div{border-top:1px solid var(--rule);padding-top:.6rem;display:grid;gap:.15rem}
.facts dt{font:500 .75rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--contour)}
.facts dd{margin:0}

/* services */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:var(--s5) var(--s4)}
.svc{display:grid;gap:.5rem;align-content:start;border-top:2px solid var(--ink);padding-top:var(--s3)}
.svc p{color:var(--muted);font-size:.98rem}

/* engagements */
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:var(--s4)}
.mode{display:grid;gap:.35rem;align-content:start}
.mode p{color:var(--muted);font-size:.97rem}

/* portfolio */
.portfolio{display:grid;gap:clamp(2.5rem,5vw,3.5rem)}
.proj{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start}
.proj:nth-child(even) .media{order:2}
.proj .media{display:grid;gap:.6rem}
.proj .media img{width:100%;height:auto;display:block;background:var(--raised);border:1px solid var(--rule)}
.proj .media .pair{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.proj .text{display:grid;gap:.6rem;min-width:0}
.proj .text p{color:var(--muted)}
.proj .text .flag{font:400 .85rem var(--f-mono);color:var(--ink)}
.proj.noimg{grid-template-columns:minmax(0,1fr)}
.proj.noimg .text{max-width:65ch}

.subhead{margin-block:clamp(3rem,6vw,4.5rem) var(--s4);display:grid;gap:var(--s2)}
.ledger{list-style:none;padding:0;margin:0;columns:2 20rem;column-gap:var(--s5)}
.ledger li{break-inside:avoid;padding:.55rem 0;border-top:1px solid var(--rule);font-size:.97rem}

/* writing */
.writing{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:var(--s5) var(--s4)}
.writing article{display:grid;gap:.6rem;align-content:start}
.writing blockquote{margin:0;padding-left:var(--s3);border-left:2px solid var(--contour);font-family:var(--f-display);font-size:1rem;line-height:1.55;color:var(--ink)}
.cites{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;gap:var(--s3)}
.cites li{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:var(--s3);border-top:1px solid var(--rule);padding-top:.7rem}
.cites .yr{font:500 .9rem var(--f-mono);color:var(--contour)}
.cites cite{font-style:normal;font-weight:600}
.cites span{color:var(--muted);font-size:.95rem;display:block}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s5)}
.contact .side{display:grid;gap:var(--s4);align-content:start}
.contact .side ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
form{display:grid;gap:var(--s3)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
label{display:grid;gap:.35rem;font-size:.92rem;font-weight:600}
label span.opt{font-weight:400;color:var(--muted)}
input,textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--raised);border:1px solid var(--field);border-radius:3px;padding:.65rem .75rem;width:100%}
textarea{min-height:9rem;resize:vertical}
.hp{position:absolute;left:-9999px}
.status{font-size:.95rem;min-height:1.5em}
.status.ok{color:var(--water)}
.status.err{color:var(--contour)}

footer{border-top:1px solid var(--rule);padding-block:var(--s4) var(--s5);font-size:.9rem;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}

@media (max-width:760px){
  .hero .wrap,.about,.contact,.proj{grid-template-columns:minmax(0,1fr)}
  .proj:nth-child(even) .media{order:0}
  .row{grid-template-columns:1fr}
  .hero figure{order:-1}
}

/* project pages */
.crumbs{font:400 .82rem var(--f-mono);color:var(--muted);padding-top:var(--s4)}
.crumbs a{color:var(--muted)}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:"/";margin-right:.4rem}
.casehead{padding-block:var(--s4) var(--s5);display:grid;gap:var(--s3)}
.casehead h1{font-size:clamp(2rem,4.4vw,3rem);max-width:24ch}
.casehead .lede{font-size:1.15rem;color:var(--muted);max-width:60ch}
.case{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s5);padding-bottom:var(--s6)}
.case .body{display:grid;gap:var(--s4);align-content:start}
.case .body p{max-width:65ch}
.case .body h2{font-size:1.5rem;margin-top:var(--s3)}
.case figure{margin:0;display:grid;gap:.5rem}
.case figure img{width:100%;height:auto;display:block;border:1px solid var(--rule);background:var(--raised)}
.case figcaption{font-size:.9rem;color:var(--muted)}
.case aside{display:grid;gap:var(--s4);align-content:start}
.case aside .btn{justify-self:start}
.more{margin-top:.2rem;font-weight:600}
@media (max-width:760px){.case{grid-template-columns:minmax(0,1fr)}}

/* contact form */
select{font:inherit;font-weight:400;color:var(--ink);background:var(--raised);border:1px solid var(--field);border-radius:3px;padding:.65rem .75rem;width:100%}
.submitrow{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.fine{font-size:.88rem;color:var(--muted)}
.sent{display:grid;gap:.6rem;align-content:start;border-top:2px solid var(--water);padding-top:var(--s3)}
.sent:focus{outline:none}
.btn.ghost{background:transparent;color:var(--water);border:1px solid var(--water);justify-self:start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}
.avail-note{margin-top:.8rem;font-size:.95rem;color:var(--muted)}

/* skip link */
.skip{position:absolute;left:var(--s3);top:-4rem;z-index:20;background:var(--water);color:var(--paper);padding:.6rem 1rem;border-radius:3px;font-weight:600;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + .5rem)}
/* about portrait */
.aboutside{display:grid;gap:var(--s4);align-content:start}
.portrait{width:9rem;height:9rem;border-radius:50%;object-fit:cover;border:1px solid var(--rule)}
/* FAQ */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:var(--s4) var(--s5);margin:0}
.faq div{border-top:1px solid var(--rule);padding-top:.8rem;display:grid;gap:.35rem}
.faq dt{font:600 1.08rem/1.35 var(--f-display)}
.faq dd{margin:0;color:var(--muted)}
/* related projects */
.related{border-top:1px solid var(--rule);padding-block:var(--s5) var(--s6)}
.related h2{font-size:1.4rem;margin-bottom:var(--s3)}
.related ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--s3) var(--s4)}
.related li{display:grid;gap:.25rem;border-top:2px solid var(--ink);padding-top:.6rem}
.related a{font:600 1.02rem/1.35 var(--f-display)}
.related span{font:400 .78rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---- V4 additions ---- */
.muted{color:var(--muted)}
.nav a[aria-current="page"]{color:var(--water)}
.head h1{font-size:clamp(1.9rem,4vw,2.6rem)}

/* home: selected work as a short list */
.list{list-style:none;padding:0;margin:0;border-bottom:1px solid var(--rule)}
.list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:.5rem var(--s5);border-top:1px solid var(--rule);padding-block:var(--s3)}
.list h3 a{text-decoration:none}
.list h3 a:hover{text-decoration:underline}
.list .key{margin-top:.4rem}
.list li>p{color:var(--muted)}
.more-link{margin-top:var(--s4)}

/* home: credentials paired with contact */
.credcta{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.cta{border-top:2px solid var(--water);padding-top:var(--s3);display:grid;gap:var(--s3);align-content:start}
.cta p{color:var(--muted)}
.cta .btn{justify-self:start}
@media (min-width:761px){.cta{position:sticky;top:6rem;margin-top:5.25rem}}

/* portfolio card titles are h2 for structure, sized like the old h3 */
.proj h2.card-title{font-size:1.2rem}

@media (max-width:760px){
  .list li,.credcta{grid-template-columns:minmax(0,1fr)}
  .hero figure{order:0}          /* phones: headline first, photo after */
}