/* Sky & Harbour. Harbour navy ink on a pale sky ground, one blue for actions, one gold used as a marker. Light only. */
:root{
  --bg:#f4f8fb;--surface:#ffffff;--ink:#0b1f33;--mute:#4a6075;--rule:#d3dfea;--accent:#0b5fdc;--accent-ink:#ffffff;--warm:#f2a93b;--focus:#0b5fdc;
  --hero-bg:url("/contours.svg");
  --display:"Red Hat Display",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --text:"Red Hat Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
main:focus{outline:none}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.65 var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--accent);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:.6rem 1rem;z-index:50}
.skip:focus{left:1rem;top:1rem}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}

.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:.9rem}
.name{font:800 1.1rem var(--display);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.bar nav{display:flex;gap:.2rem;flex-wrap:wrap;justify-content:flex-end}
.bar nav a{color:var(--mute);text-decoration:none;font-weight:500;font-size:.95rem;padding:.35rem .75rem;border-radius:99px}
.bar nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.bar nav a[aria-current="page"]{color:var(--ink);background:color-mix(in srgb,var(--ink) 10%,transparent);font-weight:700}
@media(max-width:700px){.bar .wrap{flex-direction:column;align-items:flex-start;gap:.4rem}.bar nav{justify-content:flex-start;margin-left:-.75rem}}

h1,h2,h3{font-family:var(--display);color:var(--ink);letter-spacing:-.025em;text-wrap:balance;margin:0}
h1{font-weight:800;font-size:clamp(2.6rem,6.5vw,5rem);line-height:1}
h2{font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;margin-bottom:1.2rem}
h3{font-weight:700;font-size:1.2rem;line-height:1.3}
p{margin:0 0 1rem}
.lede{font-size:clamp(1.2rem,2.1vw,1.45rem);line-height:1.5;color:var(--ink);max-width:40rem}
.mute{color:var(--mute)}
mark{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--warm) 70%,transparent) 62%);color:inherit}

.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);padding:.75rem 1.3rem;border-radius:99px;font-weight:700;text-decoration:none;border:2px solid var(--accent)}
.btn:hover{filter:brightness(1.08)}
.btn.alt{background:none;color:var(--ink);border-color:var(--rule)}
.btn.alt:hover{border-color:var(--ink);filter:none}
.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}

/* Home hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero::before{content:"";position:absolute;inset:0;background:var(--hero-bg) center/cover no-repeat;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(2rem,6vw,5rem);align-items:center;padding-block:clamp(3rem,8vw,6.5rem)}
.hero h1{margin-bottom:1.2rem}
.hero .role{font:700 1.15rem var(--display);color:var(--mute);margin-bottom:1.4rem}
.portrait{position:relative;aspect-ratio:4/5;max-width:340px;justify-self:end;width:100%}
.portrait::before{content:"";position:absolute;inset:0;transform:translate(14px,14px);background:var(--warm);border-radius:28px}
.portrait .ph{position:absolute;inset:0;border-radius:28px;background:var(--ink) url("/portrait.jpg") center/cover no-repeat;display:grid;place-items:center;color:var(--bg);font:800 4.5rem var(--display);letter-spacing:-.05em}
@media(max-width:820px){.hero .wrap{grid-template-columns:minmax(0,1fr)}.portrait{justify-self:start;max-width:220px;order:-1}}

/* Sections */
.sec{padding-block:clamp(2.5rem,6vw,4.5rem);border-bottom:1px solid var(--rule)}
.sec:last-of-type{border-bottom:0}
.page-head{padding-block:clamp(3rem,7vw,5.5rem) clamp(1.5rem,3vw,2.5rem)}
.page-head h1{font-size:clamp(2.4rem,5.5vw,4rem);margin-bottom:1rem}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem)}
@media(max-width:760px){.cols{grid-template-columns:minmax(0,1fr)}}
.prose{max-width:40rem}
.prose h2{margin-top:2.2rem}

/* Right now */
.now{list-style:none;margin:0;padding:0;display:grid}
.now li{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1rem;padding:1.1rem 0;border-top:1px solid var(--rule)}
.now li:last-child{border-bottom:1px solid var(--rule)}
.now b{font:700 .95rem var(--display);color:var(--mute)}
@media(max-width:620px){.now li{grid-template-columns:minmax(0,1fr);gap:.1rem}}

/* Feature list (home: selected work) */
.picks{display:grid;gap:0}
.pick{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1rem,4vw,3rem);padding:1.8rem 0;border-top:1px solid var(--rule);align-items:start}
.pick:last-child{border-bottom:1px solid var(--rule)}
.pick h3{font-size:1.5rem}
.pick p{margin:0;color:var(--mute)}
@media(max-width:700px){.pick{grid-template-columns:minmax(0,1fr);gap:.5rem}}
.more{margin-top:1.4rem;font-weight:700}

/* Experience / generic dated rows */
.rows{display:grid}
.row{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:1.2rem;padding:1.5rem 0;border-top:1px solid var(--rule)}
.row:last-child{border-bottom:1px solid var(--rule)}
.row .when{font:700 .95rem var(--display);color:var(--mute);padding-top:.2rem}
.row h3{margin-bottom:.15rem}
.row .org{color:var(--mute);margin-bottom:.6rem}
.row ul{margin:.4rem 0 0;padding-left:1.1rem}
.row li{margin-bottom:.35rem}
@media(max-width:700px){.row{grid-template-columns:minmax(0,1fr);gap:.2rem}}

/* Projects */
.proj{padding:2rem 0;border-top:1px solid var(--rule)}
.proj:last-child{border-bottom:1px solid var(--rule)}
.proj .head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}
.proj h2{margin:0;font-size:1.7rem}
.proj .year{font:700 .95rem var(--display);color:var(--mute)}
.proj p{max-width:44rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:.6rem 0 0;padding:0}
.tags li{font:500 .8rem var(--text);border:1px solid var(--rule);border-radius:99px;padding:.15rem .7rem;color:var(--mute)}

/* Recognition table + press list */
.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align:left;padding:1.1rem 1.2rem 1.1rem 0;border-top:1px solid var(--rule);vertical-align:top}
.table tr:last-child>*{border-bottom:1px solid var(--rule)}
.table th{font:700 .95rem var(--display);color:var(--mute);width:9rem;white-space:nowrap}
.table td:nth-child(2){font-weight:700}
.table td:nth-child(3){color:var(--mute)}
@media(max-width:700px){.table,.table tbody,.table tr,.table th,.table td{display:block}.table tr{padding:1rem 0;border-top:1px solid var(--rule)}.table th,.table td{border:0!important;padding:0}.table th{margin-bottom:.15rem}}
.links{list-style:none;margin:0;padding:0}
.links li{border-top:1px solid var(--rule)}
.links li:last-child{border-bottom:1px solid var(--rule)}
.links a{display:flex;justify-content:space-between;gap:1.5rem;padding:1.1rem 0;text-decoration:none;color:var(--ink);font-weight:700}
.links a:hover{color:var(--accent)}
.links span{font-weight:400;color:var(--mute);text-align:right;flex:none;max-width:15rem;font-size:.95rem}
@media(max-width:640px){.links a{flex-direction:column;gap:.2rem}.links span{text-align:left}}

/* Contact */
.contact-list{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;max-width:34rem}
.contact-list li{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-top:1px solid var(--rule)}
.contact-list li:last-child{border-bottom:1px solid var(--rule)}
.contact-list span{color:var(--mute)}
.contact-list a{font-weight:700;overflow-wrap:anywhere}

.band{background:var(--ink);color:var(--bg)}
.band h2{color:var(--bg)}
.band .btn{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.band .btn.alt{background:none;color:var(--bg);border-color:color-mix(in srgb,var(--bg) 40%,transparent)}

.foot{border-top:1px solid var(--rule);padding-block:2rem 2.5rem;font-size:.92rem;color:var(--mute)}
.foot .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot nav{display:flex;gap:1.2rem;flex-wrap:wrap}
.foot a{color:var(--mute)}
.err{padding-block:6rem}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.here{color:var(--ink)}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- v3: story components ---- */
.eyebrow-link{font:700 .95rem var(--display);color:var(--mute);text-decoration:none}
.statement{font:800 clamp(1.8rem,4.2vw,3.2rem)/1.15 var(--display);letter-spacing:-.03em;max-width:56rem;text-wrap:balance}
.statement em{font-style:normal;color:var(--accent)}
.impact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:2.5rem;border-top:2px solid var(--ink)}
.impact div{padding:1.4rem 2rem 1.4rem 0;border-bottom:1px solid var(--rule)}
.impact dt{font:800 clamp(2rem,4vw,3.4rem)/1.05 var(--display);letter-spacing:-.03em}
.impact dd{margin:.4rem 0 0;color:var(--mute);font-size:.98rem}
@media(max-width:760px){.impact{grid-template-columns:minmax(0,1fr)}.impact div{padding:1.1rem 0}.impact div+div{border-top:1px solid var(--rule)}}
.impact{margin-bottom:0}

.feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-block:clamp(1.5rem,3vw,2.5rem)}
.feature.flip{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.feature.flip .shot{order:2}
.feature img,.shot img{display:block;width:100%;height:auto;aspect-ratio:3/2;border-radius:22px;background:var(--ink)}
.feature h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.7rem}
.feature .meta{font:700 .9rem var(--display);color:var(--mute);margin-bottom:.6rem}
.feature p{color:var(--mute)}
.feature .go{font-weight:700;display:inline-block;margin-top:.4rem}
@media(max-width:760px){.feature,.feature.flip{grid-template-columns:minmax(0,1fr)}.feature.flip .shot{order:0}}

*::before,*::after{box-sizing:border-box}
.timeline{list-style:none;margin:1.5rem 0 0;padding:0 0 0 2rem;display:grid}
.timeline li{position:relative;display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;padding:0 0 1.9rem}
.timeline li::before{content:"";position:absolute;z-index:1;left:-2rem;top:.55rem;width:16px;height:16px;border-radius:50%;background:var(--bg);border:4px solid var(--accent)}
.timeline li::after{content:"";position:absolute;left:calc(-2rem + 8px - 1.5px);width:3px;top:calc(.55rem + 8px);bottom:calc(-.55rem - 8px);background:var(--ink)}
.timeline li:last-child::after{display:none}
.timeline li.key::before{background:var(--warm);border-color:var(--ink)}
.timeline .yr{font:800 1.25rem var(--display);letter-spacing:-.02em}
.timeline h3{font-size:1.1rem;margin-bottom:.15rem}
.timeline p{margin:0;color:var(--mute);font-size:1rem}
@media(max-width:620px){.timeline li{grid-template-columns:minmax(0,1fr);gap:.1rem}}

/* case study */
.case-head{padding-block:clamp(3rem,7vw,5rem) 1.5rem}
.crumb{font:700 .95rem var(--display);margin-bottom:1rem;display:block}
.case-head h1{font-size:clamp(2.4rem,5.6vw,4.2rem);margin-bottom:1rem}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;margin:2rem 0 0;padding:1.3rem 0;border-block:1px solid var(--rule)}
.facts dt{font:700 .85rem var(--display);color:var(--mute);margin-bottom:.2rem}
.facts dd{margin:0;font-weight:500;font-size:.98rem}
@media(max-width:760px){.facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.case-shot{padding-bottom:1rem}
.case-shot img{display:block;width:100%;height:auto;aspect-ratio:3/2;border-radius:26px}
.case-body{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:clamp(1rem,4vw,3rem);padding-block:2.2rem;border-top:1px solid var(--rule)}
.case-body h2{font-size:1.15rem;margin:0}
.case-body .t{max-width:42rem}
.case-body ul{margin:0;padding-left:1.15rem}
.case-body li{margin-bottom:.55rem}
@media(max-width:700px){.case-body{grid-template-columns:minmax(0,1fr);gap:.5rem}}
.next{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:2rem;border-top:1px solid var(--rule);font-weight:700}

/* skills + certs */
.skillgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.5rem,5vw,4rem)}
.skillgrid div{padding:1.1rem 0;border-top:1px solid var(--rule)}
.skillgrid dt{font:700 1rem var(--display);margin-bottom:.25rem}
.skillgrid dd{margin:0;color:var(--mute);font-size:.98rem}
@media(max-width:700px){.skillgrid{grid-template-columns:minmax(0,1fr)}}
.quote{font:700 clamp(1.3rem,2.6vw,1.9rem)/1.3 var(--display);letter-spacing:-.02em;max-width:46rem;margin:0}
.quote cite{display:block;margin-top:.8rem;font:500 .95rem var(--text);color:var(--mute);font-style:normal}
.plain{display:flex;justify-content:space-between;gap:1.5rem;padding:1.1rem 0;font-weight:700}
.plain span{font-weight:400;color:var(--mute);flex:none}
@media(max-width:640px){.plain{flex-direction:column;gap:.2rem}}
.page-head .cols{align-items:center}
.page-head .portrait{max-width:260px}

.row h2{font-size:1.2rem;margin:0 0 .15rem}
.feature h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.7rem}
.mission{padding-block:clamp(3rem,7vw,5.5rem)}
.band .statement{color:var(--bg)}
.band .statement em{color:var(--warm)}
.mission-sub{margin:1.5rem 0 0;max-width:42rem;font-size:1.1rem;color:color-mix(in srgb,var(--bg) 82%,var(--ink))}
@media(forced-colors:active){.btn,.btn.alt{border:2px solid ButtonText}.portrait::before{display:none}.timeline li::before{background:Canvas;border-color:Highlight}.timeline li::after{background:CanvasText}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}