/* Published warm recruiter-focused direction, transferred from the approved canvas mockup. */
/* Playful direction: bright editorial field-notes — warm paper, punchy persimmon,
   and inky type. The motion stays small, tactile, and optional. */
:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"]{
  color-scheme:light;
  --bg:#fff9ed;
  --surface:#fffefa;
  --ink:#202b32;
  --muted:#4c5b60;
  --line:#d9ded4;
  --accent:#a9361d;
  --accent-soft:#ffdf9c;
  --cover-a:#d9ece2;
  --cover-b:#cfe8eb;
  --cover-c:#f9dfbe;
  --cover-d:#dce5d2;
  --shadow:0 18px 40px -25px rgba(32,43,50,.34);
}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{
  background:
    radial-gradient(ellipse at 93% 4%,rgba(255,218,139,.3),transparent 27rem),
    var(--bg);
  color:var(--ink);
  padding-block:0 4rem;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:10;
  pointer-events:none;
  opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid #176b70;
  outline-offset:4px;
  border-radius:5px;
}
.wrap{max-width:74rem}
.nav{
  position:sticky;
  top:0;
  z-index:8;
  margin-inline:calc(clamp(16px,5vw,48px) * -1);
  padding:1rem clamp(16px,5vw,48px);
  background:rgba(255,249,237,.92);
  border-bottom:1px solid rgba(217,222,212,.88);
  backdrop-filter:blur(14px);
}
.nav .name{font-size:1.28rem}
.nav .name::before{
  content:"";
  display:inline-block;
  width:.7rem;height:.7rem;
  margin-right:.55rem;
  border-radius:2px 70% 50% 70%;
  background:#d94d2b;
  transform:rotate(-35deg);
}
.nav ul{gap:clamp(.85rem,2vw,1.65rem)}
.nav ul a{color:var(--ink)}
.nav ul a:not(.btn){text-decoration-thickness:1px;text-underline-offset:5px}
.nav ul a:not(.btn):hover{color:var(--accent);text-decoration:underline}
.btn{
  border:1px solid #c6cfc7;
  border-radius:12px;
  padding:.72rem 1.1rem;
  box-shadow:0 2px 0 rgba(32,43,50,.06);
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 5px 0 rgba(32,43,50,.08)}
.btn.primary{background:#a9361d;border-color:#a9361d;color:#fff9ed}
.btn.primary:hover{background:#842c19;border-color:#842c19}
.nav-cta{border-radius:999px}
.hero{
  position:relative;
  isolation:isolate;
  padding-block:clamp(3rem,7vw,6rem) clamp(4rem,8vw,6.5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(15rem,.75fr);
  gap:clamp(2.5rem,7vw,7rem);
}
.hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-4.5vw;right:-4.5vw;top:1.5rem;bottom:2rem;
  border-radius:3rem 1rem 3rem 1rem;
  background:#fff0c8;
  transform:rotate(-.7deg);
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:5.5rem;height:5.5rem;
  top:2.6rem;left:48%;
  border:2px solid #cf5938;
  border-radius:50%;
  opacity:.75;
}
.hero-text{gap:1.45rem}
.hero .eyebrow{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  gap:.55rem;
  padding:.4rem .75rem;
  color:#71311f;
  background:#ffdf9c;
  border-radius:999px;
  font-size:.74rem;
  letter-spacing:.075em;
}
.hero .eyebrow::before{content:"";width:.45rem;height:.45rem;background:#a9361d;border-radius:50%}
.hero h1{max-width:16ch;font-size:clamp(2.9rem,5vw,4.5rem);letter-spacing:-.045em;line-height:1.03}
.hero h1 em{color:#a9361d;text-decoration:underline;text-decoration-color:#efa24b;text-decoration-thickness:.11em;text-underline-offset:.08em}
.hero .lede{color:#405156;max-width:39rem}
.hero .lede strong{color:#202b32}
.portrait{max-width:20rem;transform:rotate(2.2deg)}
.portrait::before{
  inset:.85rem -1rem -1rem .85rem;
  border-radius:48% 42% 18px 18px;
  background:#d0e7df;
  transform:rotate(-4deg);
}
.portrait img{
  border:7px solid var(--surface);
  border-radius:48% 42% 18px 18px;
  box-shadow:0 15px 34px -21px rgba(32,43,50,.5);
}
.glance{gap:.65rem 1.4rem;color:#405156}
.glance span{padding:.25rem .65rem .25rem 0}
.glance span::before{background:#197174}
.section{padding-block:clamp(3.5rem,7vw,6rem);border-top:1px solid #cfd7cd}
.section-head{margin-bottom:2rem}
.section-head .eyebrow,.bio > .eyebrow,.contact > .eyebrow{color:#a9361d}
.section-head h2,.about .bio h2,.contact h2{letter-spacing:-.035em}
.projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.35rem}
.project{
  position:relative;
  border:1px solid #d4dbd2;
  border-radius:20px 20px 20px 7px;
  box-shadow:0 4px 0 rgba(32,43,50,.04);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.project:hover,.project:focus-visible{
  transform:translateY(-5px) rotate(-.25deg);
  border-color:#c5a27a;
  box-shadow:0 14px 25px -18px rgba(32,43,50,.48);
}
.project:nth-child(2n):hover,.project:nth-child(2n):focus-visible{transform:translateY(-5px) rotate(.25deg)}
.cover{height:17.5rem}
.cover.a{background:#d9ece2}
.cover.b{background:#cfe8eb}
.cover.c{background:#f9dfbe}
.cover.d{background:#dce5d2}
.cover img{transition:transform .35s ease}
.project:hover .cover img:nth-child(1){transform:translateY(-4px) rotate(-1deg)}
.project:hover .cover img:nth-child(2){transform:translateY(-8px)}
.project:hover .cover img:nth-child(3){transform:translateY(-3px) rotate(1deg)}
.project .info{padding:1.45rem 1.55rem 1.6rem;gap:.7rem}
.project h3{font-size:1.85rem;letter-spacing:-.025em}
.project .meta{color:#526267}
.results{gap:.45rem}
.results span{background:#fff0c8;border:1px solid #f1d896;border-radius:7px;color:#3a4140}
.more{display:flex;align-items:center;gap:.35rem}
.more::after{content:"";display:inline-block;width:1.1rem;height:1px;background:currentColor;transition:width .18s ease}
.project:hover .more::after{width:1.7rem}
.more-work{margin-top:3rem;padding:1.4rem 0 0;border-top:1px dashed #cfd7cd}
.mw-title{font-size:1.8rem}
.mini,.skill,.decision,.by-card,.ticket,.note,.next{
  border-color:#d4dbd2;
  box-shadow:0 3px 0 rgba(32,43,50,.035);
}
.mini{border-radius:8px 20px 20px 20px}
.mini h4{font-size:1.55rem}
details summary{color:#8f321d;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}
details[open] summary{margin-bottom:.8rem}
.tags-table{background:#fffefa}
.tags-table div:nth-child(odd){background:#fff8e9}
.about{gap:clamp(2rem,6vw,6rem)}
.about .bio{padding:1.2rem 0}
.timeline{position:relative;gap:1.35rem;padding-left:1.25rem}
.timeline::before{
  content:"";
  position:absolute;left:.3rem;top:.65rem;bottom:.75rem;
  width:2px;background:#d6a858;
}
.role{position:relative;grid-template-columns:6.5rem minmax(0,1fr);gap:.8rem}
.role::before{
  content:"";
  position:absolute;left:-1.25rem;top:.55rem;
  width:.62rem;height:.62rem;border:2px solid var(--bg);
  border-radius:50%;background:#a9361d;box-shadow:0 0 0 1px #a9361d;
}
.role .when{color:#a9361d}
.role h3{letter-spacing:-.02em}
.skills{gap:.8rem}
.skill{border-radius:8px 16px 16px 16px;position:relative;padding:1.15rem 1.2rem 1.15rem 1.45rem}
.skill::before{content:"";position:absolute;left:0;top:1rem;bottom:1rem;width:4px;border-radius:0 4px 4px 0;background:#e2a843}
.skill:nth-child(2)::before{background:#3e9290}
.skill:nth-child(3)::before{background:#bd6442}
.skill:nth-child(4)::before{background:#768e65}
.beyond{position:relative}
.beyond::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:1rem -4.5vw 1rem;
  border-radius:1rem 3rem 1rem 3rem;
  background:#f8e7d2;
  transform:rotate(.5deg);
}
.by-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.by-card{
  min-height:12rem;
  border-radius:18px 18px 18px 6px;
  background:#fffaf1;
  padding:1.2rem;
  transition:transform .2s ease,background-color .2s ease;
}
.by-card:nth-child(2n){transform:translateY(.55rem)}
.by-card:hover{transform:translateY(-3px) rotate(-.5deg);background:#fffefa}
.by-card:nth-child(2n):hover{transform:translateY(-3px) rotate(.5deg)}
.by-card b{font-size:1.15rem}
.by-note{color:#435257}
#contact{border-top:0;padding-top:4rem}
.contact{
  position:relative;
  max-width:none;
  padding:clamp(2rem,5vw,4rem);
  border-radius:2rem 2rem 2rem .5rem;
  background:#d7e9df;
  overflow:hidden;
}
.contact::after{
  content:"";
  position:absolute;
  width:14rem;height:14rem;right:-3rem;bottom:-8rem;
  border:1px solid rgba(32,43,50,.18);border-radius:50%;
  box-shadow:0 0 0 1.5rem rgba(255,255,255,.12),0 0 0 3rem rgba(255,255,255,.12);
  pointer-events:none;
}
.contact h2{max-width:17ch}
.contact .ctas{position:relative;z-index:1}
.contact .btn{background:#fffefa}
.contact .btn:hover{background:#fff0c8}
footer{border-color:#cfd7cd}
.case{padding-block:1.5rem 2rem}
.back{padding:.4rem .7rem;border:1px solid transparent;border-radius:999px;background:#fff0c8;color:#74351f}
.back:hover{color:#202b32;border-color:#e4c990}
.case-head{padding-block:2.7rem 2rem}
.case-head .eyebrow{width:max-content;padding:.35rem .7rem;border-radius:999px;background:#ffdf9c;color:#71311f}
.case-head h1{letter-spacing:-.035em}
.facts{border-color:#cfd7cd}
.facts small{color:#536267}
.chapter + .chapter{border-color:#cfd7cd}
.chapter > .eyebrow{color:#a9361d}
.pull mark{background:#ffdf9c}
blockquote{border-color:#a9361d;color:#435257}
.stat b,.impact b{color:#a9361d}
.decision{border-radius:8px 16px 16px 16px}
.decision .trade .yes{background:#ffedc4}
.loop span{background:#ffedc4}
.gallery{scroll-snap-type:x proximity}
.gallery li{scroll-snap-align:start}
.gallery figure{border-radius:8px 18px 18px 18px}
.gallery::-webkit-scrollbar{height:8px}
.gallery::-webkit-scrollbar-thumb{background:#b6c5ba;border-radius:99px}
.next{border-radius:8px 20px 20px 20px;transition:transform .18s ease,box-shadow .18s ease}
.next:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.shot{background:#202b32}
.soon,.upcoming{border-color:#c5a27a}
@media (max-width:900px){
  .by-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  html{scroll-padding-top:7rem}
  .nav{align-items:flex-start}
  .nav ul{width:100%;justify-content:space-between;gap:.65rem}
  .nav ul a{font-size:.88rem}
  .nav-cta{padding:.4rem .75rem}
  .hero{grid-template-columns:1fr;gap:2rem;padding-block:2.5rem 3rem}
  .hero::before{left:-3vw;right:-3vw;top:1rem;bottom:1.5rem;border-radius:2rem .7rem 2rem .7rem}
  .hero::after{width:3.5rem;height:3.5rem;top:1.3rem;left:auto;right:2rem}
  .hero-text{position:relative;z-index:1}
  .hero h1{font-size:clamp(2.8rem,11vw,4.2rem)}
  .portrait{order:-1;justify-self:start;max-width:9rem}
  .portrait::before{inset:.45rem -.45rem -.45rem .45rem;border-radius:48% 42% 14px 14px}
  .portrait img{border-width:4px;border-radius:48% 42% 14px 14px}
  .projects{grid-template-columns:1fr;gap:1.1rem}
  .cover{height:15rem}
  .project .info{padding:1.2rem 1.25rem 1.35rem}
  .about{grid-template-columns:1fr;gap:1.2rem}
  .about .bio{padding:0}
  .timeline{gap:1.2rem}
  .role{grid-template-columns:6.5rem minmax(0,1fr)}
  .chapter{grid-template-columns:1fr;padding-block:2rem}
  .chapter > .eyebrow{padding-top:0}
  .contact{padding:2rem 1.4rem}
  .contact .ctas{align-items:stretch}
  .contact .ctas .btn{overflow-wrap:anywhere}
}
@media (max-width:420px){
  body{padding-inline:14px}
  .nav{margin-inline:-14px;padding-inline:14px}
  .nav ul{gap:.35rem}
  .nav ul a{font-size:.82rem}
  .nav-cta{font-size:.8rem!important}
  .by-grid{grid-template-columns:1fr}
  .by-card,.by-card:nth-child(2n){min-height:0;transform:none}
  .role{grid-template-columns:1fr;gap:.15rem}
  .tags-table div{grid-template-columns:minmax(0,1fr);gap:.1rem}
  .facts{grid-template-columns:1fr 1fr;gap:1rem}
  .contact .ctas{display:grid;width:100%}
  .contact .ctas .btn{width:100%;justify-content:center}
}
@media (hover:none){
  .project:hover,.project:nth-child(2n):hover,.by-card:hover,.by-card:nth-child(2n):hover,.next:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .project:hover,.project:nth-child(2n):hover,.by-card:hover,.by-card:nth-child(2n):hover,.next:hover{transform:none}
}

/* Recruiter-focused refinement: warm editorial restraint, with impact and work
   arriving before the decorative details. */
:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"]{
  color-scheme:light;
  --bg:#f5f4ef;
  --surface:#fffefa;
  --ink:#273537;
  --muted:#586767;
  --line:#d9dfd9;
  --accent:#92533d;
  --accent-soft:#efe5dc;
  --cover-a:#e4ece7;
  --cover-b:#e3ebec;
  --cover-c:#eee9df;
  --cover-d:#e8ecdf;
  --shadow:0 12px 28px -22px rgba(39,53,55,.28);
}
html{scroll-padding-top:5rem}
body{
  padding-block:0 3rem;
  background:var(--bg);
}
body::before{display:none}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid #55756e;
  outline-offset:3px;
  border-radius:4px;
}
.wrap{max-width:72rem}
.nav{
  padding-block:.8rem;
  background:rgba(245,244,239,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.nav .name{font-size:1.16rem}
.nav .name::before{display:none}
.nav ul a{color:var(--muted)}
.nav ul a:not(.btn){text-decoration:none}
.nav ul a:not(.btn):hover{color:var(--accent);text-decoration:underline}
.btn{
  border:1px solid #cbd4ce;
  border-radius:9px;
  padding:.66rem 1rem;
  box-shadow:none;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-1px);border-color:#8c9b94;box-shadow:none}
.btn.primary{background:#304846;border-color:#304846;color:#fffefa}
.btn.primary:hover{background:#263c3a;border-color:#263c3a}
.nav-cta{border-radius:8px}
.hero{
  isolation:isolate;
  padding-block:clamp(2.25rem,5vw,4rem) clamp(2.5rem,5vw,4rem);
  grid-template-columns:minmax(0,1.2fr) minmax(13rem,17rem);
  gap:clamp(2rem,6vw,5.5rem);
}
.hero::before{
  left:-1.4rem;right:-1.4rem;top:.8rem;bottom:.8rem;
  border:1px solid #e2e5dc;
  border-radius:18px;
  background:#eff1eb;
  transform:none;
}
.hero::after{display:none}
.hero-text{gap:1.15rem}
.hero .eyebrow{
  display:block;
  width:auto;
  padding:0;
  color:var(--accent);
  background:transparent;
  border-radius:0;
  font-size:.76rem;
  letter-spacing:.09em;
}
.hero .eyebrow::before{display:none}
.hero h1{
  max-width:17ch;
  font-size:clamp(2.7rem,5.2vw,4.25rem);
  letter-spacing:-.035em;
  line-height:1.08;
}
.hero h1 em{color:#92533d;text-decoration:none}
.hero .lede{color:#4f6060;max-width:41rem;font-size:clamp(1.05rem,1.45vw,1.2rem)}
.hero .lede strong{color:var(--ink)}
.portrait{max-width:17rem;transform:none}
.portrait::before{
  inset:.55rem -.55rem -.55rem .55rem;
  border:1px solid #cedbd2;
  border-radius:16px;
  background:#dce8e0;
  transform:none;
}
.portrait img{
  border:5px solid var(--surface);
  border-radius:16px;
  box-shadow:0 10px 24px -18px rgba(39,53,55,.4);
}
.glance{gap:.45rem 1.25rem;padding-top:.15rem;color:#536361;font-size:.9rem}
.glance span{padding:0}
.glance span::before{width:.35rem;height:.35rem;background:#68857a;margin-right:.5rem}
.section{padding-block:clamp(2.8rem,5vw,4.5rem);border-top-color:var(--line)}
.section-head{gap:.45rem;margin-bottom:1.5rem}
.section-head .eyebrow,.bio > .eyebrow,.contact > .eyebrow{color:var(--accent)}
.section-head h2,.about .bio h2,.contact h2{letter-spacing:-.025em}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.55rem)}
.projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
.project{
  border:1px solid #d8dfd9;
  border-radius:12px;
  box-shadow:0 2px 0 rgba(39,53,55,.025);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.project:hover,.project:focus-visible,
.project:nth-child(2n):hover,.project:nth-child(2n):focus-visible{
  transform:translateY(-2px);
  border-color:#b7c7bd;
  box-shadow:var(--shadow);
}
.cover{height:13rem}
.cover.a,.cover.b,.cover.c,.cover.d{background:var(--cover-a)}
.cover.b{background:var(--cover-b)}
.cover.c{background:var(--cover-c)}
.cover.d{background:var(--cover-d)}
.cover img{transition:none;border-radius:7px 7px 0 0}
.project:hover .cover img:nth-child(1),
.project:hover .cover img:nth-child(2),
.project:hover .cover img:nth-child(3){transform:none}
.project .info{padding:1.2rem 1.35rem 1.35rem;gap:.55rem}
.project h3{font-size:1.65rem;letter-spacing:-.02em}
.project .meta,.mini .meta{color:#687674}
.results{gap:.35rem}
.results span{
  padding:.25rem .55rem;
  border:1px solid #e4e5dc;
  border-radius:5px;
  background:#f3f2eb;
  color:#455453;
  font-size:.78rem;
}
.more{color:#7d4938;margin-top:.2rem}
.more::after{transition:none}
.project:hover .more::after{width:1.1rem}
.more-work{margin-top:2.5rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.mw-title{font-size:1.6rem}
.mini,.skill,.decision,.by-card,.ticket,.note,.next{
  border-color:var(--line);
  box-shadow:none;
}
.mini{border-radius:12px}
.mini h4{font-size:1.35rem}
details summary{color:var(--accent);text-decoration:none}
.tags-table{background:var(--surface)}
.tags-table div:nth-child(odd){background:#f7f6f0}
.about{gap:clamp(2rem,5vw,4.5rem)}
.about .bio{padding:.35rem 0}
.timeline{gap:1.3rem;padding-left:1rem}
.timeline::before{left:.25rem;top:.55rem;bottom:.65rem;width:1px;background:#cbd5cd}
.role{grid-template-columns:6.5rem minmax(0,1fr);gap:.8rem}
.role::before{
  left:-1rem;top:.58rem;width:.5rem;height:.5rem;
  border:1px solid var(--bg);background:#71877c;box-shadow:0 0 0 1px #71877c;
}
.role .when{color:#80513f}
.role h3{letter-spacing:0}
.skills{gap:.75rem}
.skill{border-radius:10px;padding:1.1rem 1.2rem}
.skill::before,.skill:nth-child(2)::before,.skill:nth-child(3)::before,.skill:nth-child(4)::before{display:none}
.beyond::before{display:none}
.by-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.by-card,.by-card:nth-child(2n){
  min-height:10.5rem;
  border-radius:12px;
  background:var(--surface);
  padding:1.1rem;
  transform:none;
  transition:transform .18s ease,border-color .18s ease;
}
.by-card:hover,.by-card:nth-child(2n):hover{
  transform:translateY(-2px);
  border-color:#bdcbc1;
  background:var(--surface);
}
.by-card b{font-size:1.1rem}
.by-note{color:var(--muted)}
#contact{border-top:1px solid var(--line);padding-top:3rem}
.contact{
  max-width:54rem;
  padding:clamp(1.7rem,4vw,3rem);
  border:1px solid #d8e1d9;
  border-radius:14px;
  background:#eaf0e9;
}
.contact::after{display:none}
.contact h2{max-width:19ch}
.contact .btn{background:var(--surface)}
.contact .btn:hover{background:#f5f2e9}
.contact .btn.primary,.contact .btn.primary:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--bg);
}
footer{border-color:var(--line)}
.case{padding-block:1rem 2rem}
.back{
  padding:.35rem .6rem;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface);
  color:var(--muted);
}
.back:hover{color:var(--ink);border-color:#aebdb3}
.case-head{padding-block:2rem 1.6rem}
.case-head .eyebrow{
  padding:0;
  border-radius:0;
  background:transparent;
  color:var(--accent);
}
.case-head h1{letter-spacing:-.03em}
.facts{border-color:var(--line)}
.facts small{color:#687674}
.chapter + .chapter{border-color:var(--line)}
.chapter > .eyebrow{color:var(--accent)}
.pull mark{background:#efe5dc}
blockquote{border-color:#9b6a52;color:var(--muted)}
.stat b,.impact b{color:var(--accent)}
.decision{border-radius:11px}
.decision .trade .yes,.loop span{background:#efe9df}
.gallery figure{border-radius:10px}
.next{
  border-radius:12px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.next:hover{transform:translateY(-2px);border-color:#bdcbc1;box-shadow:var(--shadow)}
.soon,.upcoming{border-color:#cbd4ce}
.upcoming{border-radius:12px}
.capmini,.kpi-main,.kpi-row div{box-shadow:none;border:1px solid #e0e4de}
.capmini,.kpi-main,.kpi-row div{border-radius:9px}
.chip.agent{background:#496a60;color:#fffefa}
.chip.skill{background:#e8eee8;color:#334a44}
.chip.none{border-color:#aebbb2}
.impact{border-radius:11px}
.impact div{padding:1.15rem 1.25rem}
.offclock{border-radius:11px;background:#f0eee5}
.by-grid{align-items:stretch}
.gallery::-webkit-scrollbar-thumb{background:#bbc8bf}
@media (max-width:900px){
  .by-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  html{scroll-padding-top:7rem}
  .nav{align-items:flex-start}
  .nav ul{width:100%;justify-content:space-between;gap:.65rem}
  .nav ul a{font-size:.88rem}
  .nav-cta{padding:.4rem .75rem}
  .hero{
    grid-template-columns:1fr;
    gap:1.35rem;
    padding-block:1.75rem 2.4rem;
  }
  .hero::before{left:-.55rem;right:-.55rem;top:.5rem;bottom:.5rem;border-radius:14px}
  .hero-text{position:relative;z-index:1;gap:1rem}
  .hero h1{font-size:clamp(2.5rem,9.5vw,3.8rem)}
  .portrait{order:0;justify-self:start;max-width:7.5rem}
  .portrait::before{inset:.35rem -.35rem -.35rem .35rem;border-radius:12px}
  .portrait img{border-width:4px;border-radius:12px}
  .projects{grid-template-columns:1fr;gap:1rem}
  .cover{height:14rem}
  .project .info{padding:1.1rem 1.2rem 1.25rem}
  .about{grid-template-columns:1fr;gap:1.2rem}
  .about .bio{padding:0}
  .timeline{gap:1.2rem}
  .role{grid-template-columns:6.5rem minmax(0,1fr)}
  .chapter{grid-template-columns:1fr;padding-block:2rem}
  .chapter > .eyebrow{padding-top:0}
  .contact{padding:1.7rem 1.3rem}
  .contact .ctas{align-items:stretch}
  .contact .ctas .btn{overflow-wrap:anywhere}
}
@media (max-width:420px){
  body{padding-inline:14px}
  .nav{margin-inline:-14px;padding-inline:14px}
  .nav ul{gap:.35rem}
  .nav ul a{font-size:.82rem}
  .nav-cta{font-size:.8rem!important}
  .by-grid{grid-template-columns:1fr}
  .by-card,.by-card:nth-child(2n){min-height:0;transform:none}
  .role{grid-template-columns:1fr;gap:.15rem}
  .tags-table div{grid-template-columns:minmax(0,1fr);gap:.1rem}
  .facts{grid-template-columns:1fr 1fr;gap:1rem}
  .contact .ctas{display:grid;width:100%}
  .contact .ctas .btn{width:100%;justify-content:center}
}
@media (hover:none){
  .project:hover,.project:nth-child(2n):hover,.by-card:hover,.by-card:nth-child(2n):hover,.next:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .project:hover,.project:nth-child(2n):hover,.by-card:hover,.by-card:nth-child(2n):hover,.next:hover{transform:none}
}

/* Pass 1 — add a little more warmth and personal character. */
:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"]{
  --bg:#f6f3ec;
  --surface:#fffdf8;
  --ink:#2c3837;
  --muted:#5c6966;
  --line:#e0ddd3;
  --accent:#96583e;
  --accent-soft:#f0e6d9;
  --shadow:0 12px 28px -22px rgba(44,56,55,.28);
}
.nav{background:rgba(246,243,236,.96)}
.nav .name{letter-spacing:-.018em}
.hero::before{background:#f2efe6;border-color:#e6dfd2}
.hero .eyebrow{display:flex;align-items:center;gap:.5rem;font-weight:700}
.hero .eyebrow::before{
  display:inline-block;
  width:1.15rem;height:1px;
  border-radius:0;
  background:#b47a5b;
}
.hero h1 em{
  color:#92533d;
  text-decoration:underline;
  text-decoration-color:#d0a585;
  text-decoration-thickness:.055em;
  text-underline-offset:.12em;
}
.portrait::before{background:#e1e9df;border-color:#d4dfd4}
.portrait img{border-radius:22px 22px 8px 22px}
.contact{background:#edf0e8;border-color:#dce3d8}

/* Pass 2 — make the role, impact, and route into the work faster to scan. */
.hero{
  padding-block:2rem 2.65rem;
  grid-template-columns:minmax(0,1.25fr) minmax(12rem,16rem);
  gap:clamp(2rem,5vw,4.25rem);
}
.hero-text{gap:.95rem}
.hero .eyebrow{font-size:.75rem}
.hero h1{
  max-width:20ch;
  font-size:clamp(2.85rem,4.65vw,4rem);
  line-height:1.055;
  letter-spacing:-.04em;
}
.hero .lede{
  max-width:44rem;
  color:#465957;
  font-size:clamp(1.07rem,1.4vw,1.16rem);
  line-height:1.58;
}
.hero .lede strong{
  color:#304b45;
  font-weight:700;
  box-shadow:inset 0 -.2em 0 #e1e9df;
}
.hero .ctas{gap:.6rem}
.hero .glance{gap:.35rem 1.1rem;padding-top:.05rem;font-size:.88rem}
.hero .glance span::before{background:#92533d}
#work.section{padding-top:2.35rem}
#work .section-head{margin-bottom:1.2rem}

/* Pass 3 — give each existing case study a quiet, distinct comparison cue. */
.project:nth-child(1){
  --project-accent:#557564;
  --project-tint:#edf2ed;
  --project-line:#dbe6dc;
  border-top:3px solid var(--project-accent);
}
.project:nth-child(2){
  --project-accent:#58747a;
  --project-tint:#edf2f2;
  --project-line:#dce7e8;
  border-top:3px solid var(--project-accent);
}
.project:nth-child(3){
  --project-accent:#946448;
  --project-tint:#f4eee6;
  --project-line:#e9ded1;
  border-top:3px solid var(--project-accent);
}
.project:nth-child(4){
  --project-accent:#7b754d;
  --project-tint:#f1f0e7;
  --project-line:#e4e2d2;
  border-top:3px solid var(--project-accent);
}
.project:nth-child(1) .cover{background:#e5ede6}
.project:nth-child(2) .cover{background:#e3ebec}
.project:nth-child(3) .cover{background:#eee8de}
.project:nth-child(4) .cover{background:#e6ebdf}
.project .meta{
  min-height:2.65em;
  display:flex;
  align-items:flex-start;
  color:var(--project-accent);
  font-weight:600;
  line-height:1.4;
}
.project h3{min-height:2.15em}
.project .results{margin-top:auto;padding-top:.25rem}
.project .results span{
  border-color:var(--project-line);
  background:var(--project-tint);
  color:#3f504d;
}
.project .more{color:var(--project-accent)}
.project .kpi-main,.project .kpi-row div{border-color:var(--project-line)}
.project .chip.agent{background:var(--project-accent)}
.project .chip.skill{background:var(--project-tint);color:#3f504d}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-block:1.5rem 1.8rem;gap:1.1rem}
  .hero-text{gap:.8rem}
  .hero h1{max-width:20ch;font-size:clamp(2.35rem,9vw,3.35rem)}
  .hero .lede{font-size:1.04rem}
  .portrait{order:0;max-width:6.25rem}
  .portrait img{border-radius:12px}
  #work.section{padding-top:2.1rem}
  .project .meta{min-height:0}
  .project h3{min-height:0}
}

/* Portrait refinement: a considered vertical crop, sized as supporting context. */
.portrait{
  width:min(100%,13.25rem);
  max-width:13.25rem;
}
.portrait::before{
  inset:.65rem -.65rem -.65rem .65rem;
  border-radius:18px;
  background:#e1e9df;
}
.portrait img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:50% 34%;
  border:5px solid var(--surface);
  border-radius:16px;
  box-shadow:0 12px 25px -19px rgba(39,53,55,.42);
}

/* Case-study cards: align the existing artwork and outcomes on a shared rhythm. */
.cover{
  height:14rem;
  gap:.75rem;
  padding:1.25rem .9rem 0;
}
.cover img{
  width:8rem;
  max-width:30%;
  height:12rem;
  border-radius:8px 8px 0 0;
  box-shadow:0 8px 16px -12px rgba(39,53,55,.4);
  object-fit:cover;
  object-position:top;
}
.cover img:nth-child(2){height:12.75rem}
.project .info{align-content:start}
.project .meta{font-size:.78rem;line-height:1.4}
.project h3{min-height:2.3em;line-height:1.15}
.project .results span{font-variant-numeric:tabular-nums}
.kpis{gap:.55rem}
.kpi-main,.kpi-row div{border:1px solid var(--project-line)}
.capmini{border:1px solid var(--project-line)}
@media (max-width:760px){
  .portrait{
    order:1;
    justify-self:start;
    width:min(44vw,9rem);
    max-width:9rem;
  }
  .portrait::before{inset:.4rem -.4rem -.4rem .4rem;border-radius:13px}
  .portrait img{border-width:4px;border-radius:12px}
  .cover{height:14rem;padding-inline:.75rem}
  .cover img{width:7.5rem;height:12rem}
  .cover img:nth-child(2){height:12.6rem}
  .project h3{min-height:0}
}

/* Portrait and project-image refinements from the approved mockup frame. */
.hero {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, clamp(12rem, 29vw, 23rem));
  }

  .portrait {
    width: 100%;
    max-width: 23rem;
  }

  .portrait::before {
    border-radius: 50%;
  }

  .portrait img {
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .cover {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: .7rem;
    height: auto;
    min-height: 17rem;
    padding: 1.25rem;
    overflow: hidden;
  }

  .cover img {
    display: block;
    width: 100%;
    max-width: 8.5rem;
    height: 14rem;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
  }

  .cover img:nth-child(2) {
    height: 14rem;
  }

  .cover > :not(img) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 22rem);
  }

  @media (max-width: 760px) {
    .hero {
      grid-template-columns: 1fr;
    }

    .portrait {
      width: 12rem;
      max-width: 12rem;
    }

    .cover {
      min-height: 15rem;
      gap: .45rem;
      padding: 1rem .75rem;
    }

    .cover img,
    .cover img:nth-child(2) {
      height: 12rem;
      max-width: 100%;
    }
  }

.beyond-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:1rem;
  align-items:start;
}
.beyond-photos{
  display:grid;
  grid-template-columns:1fr;
  gap:.75rem;
}
.beyond-photo{
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:12px;
}
.beyond-layout .by-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:760px){
  .beyond-layout{grid-template-columns:1fr}
  .beyond-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .beyond-layout .by-grid{grid-template-columns:1fr}
}

/* Deep, distinct cover colours and a high-contrast contact band. */
.project:nth-child(1) .cover{background:#4b3a8c}
.project:nth-child(2) .cover{background:#1f3a5f}
.project:nth-child(3) .cover{background:#1e4d45}
.project:nth-child(4) .cover{background:#26292e}

#contact.section{
  background:var(--ink);
  border-top-color:var(--ink);
}
#contact .contact{
  color:#fffdf8;
  background:var(--ink);
  border-color:transparent;
}
#contact .contact > .eyebrow,
#contact .contact h2,
#contact .contact .muted{
  color:#fffdf8;
}
#contact .contact .muted a{
  color:#fffdf8;
  text-decoration:underline;
  text-underline-offset:3px;
}
#contact .contact .btn.primary,
#contact .contact .btn.primary:hover{
  color:var(--ink);
  background:#fffdf8;
  border-color:#fffdf8;
}

@media (prefers-color-scheme: dark){
  .project:nth-child(1) .cover{background:#5b4a9a}
  .project:nth-child(2) .cover{background:#36547a}
  .project:nth-child(3) .cover{background:#2c6459}
  .project:nth-child(4) .cover{background:#424850}
  #contact.section,
  #contact .contact{
    background:#4a5d58;
  }
  #contact.section{border-top-color:#4a5d58}
  #contact .contact .btn.primary,
  #contact .contact .btn.primary:hover{
    color:#273537;
    border-color:#fffdf8;
  }
}

:root[data-theme="dark"] .project:nth-child(1) .cover{background:#5b4a9a}
:root[data-theme="dark"] .project:nth-child(2) .cover{background:#36547a}
:root[data-theme="dark"] .project:nth-child(3) .cover{background:#2c6459}
:root[data-theme="dark"] .project:nth-child(4) .cover{background:#424850}
:root[data-theme="dark"] #contact.section,
:root[data-theme="dark"] #contact .contact{background:#4a5d58}
:root[data-theme="dark"] #contact.section{border-top-color:#4a5d58}
:root[data-theme="dark"] #contact .contact .btn.primary,
:root[data-theme="dark"] #contact .contact .btn.primary:hover{
  color:#273537;
  border-color:#fffdf8;
}

/* Cool neutral surface palette; the terracotta accent, ink and feature
   colours (including the Work covers and Contact band) remain distinct. */
:root,
:root:not([data-theme="light"]),
:root[data-theme="dark"]{
  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --ink:#2c3837;
  --muted:#5B6270;
  --line:#E3E6EB;
  --accent:#96583e;
  --accent-soft:#EEF1F5;
  --shadow:0 12px 28px -22px rgba(32,40,52,.18);
}

html{background:var(--bg)}
body{background:var(--bg)}
.nav{background:var(--bg);border-bottom-color:var(--line)}
#top.hero::before{background:#FFFFFF;border-color:var(--line)}
.portrait::before{background:#EEF1F5;border-color:var(--line)}
.section{border-top-color:var(--line)}
.project,.mini,.skill,.by-card,.note,.ticket,.decision,.next,
.table-wrap,.gallery figure,.capmini,.kpi-main,.kpi-row div,.facts{
  background:var(--surface);
  border-color:var(--line);
}
.project .info{background:var(--surface)}
.skill,.by-card,.mini,.decision,.note,.ticket,.next{box-shadow:none}
.project .meta,.mini .meta,.hero .lede,.glance,.by-note,
.role p,.role li,.facts small,.chapter .muted,
.decision p,.ticket .hdr,.gallery figcaption,.proof figcaption,
.soon p,.upcoming p,.by-card span{
  color:var(--muted);
}
.role .when,.chapter > .eyebrow{color:var(--muted)}
.case-head .eyebrow{color:var(--muted)}
.back{color:var(--muted)}
.soon,.upcoming{border-color:var(--line)}
.next:hover{border-color:var(--line)}
.gallery::-webkit-scrollbar-thumb{background:#CBD2DC}
.btn:hover{background:#EEF1F5}
.project .results span{
  background:#EEF1F5;
  border-color:var(--line);
  color:var(--ink);
}
.project .chip.skill{
  background:#EEF1F5;
  color:var(--ink);
}
.tags-table{background:var(--surface)}
.tags-table div:nth-child(odd){background:#FFFFFF}
.back{
  background:#EEF1F5;
  color:var(--accent);
  border-color:var(--line);
}
.back:hover{color:var(--ink);border-color:var(--line)}
.case-head .eyebrow{
  background:#EEF1F5;
  color:var(--accent);
}
.facts{
  border-color:var(--line);
}
.chapter + .chapter{border-color:var(--line)}
.pull mark,.decision .trade .yes,.loop span,.offclock{
  background:#EEF1F5;
}
blockquote{color:var(--muted)}
.more-work{border-top-color:var(--line)}
.timeline::before{background:var(--line)}
.role::before{border-color:var(--bg)}
.contact{background:var(--ink)}
footer{border-top-color:var(--line);color:var(--muted)}

/* Extend the About colour behind the existing content without resizing it. */
#about.section{
  position:relative;
  isolation:isolate;
  background:transparent;
}
#about.section::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 auto 0 50%;
  width:100vw;
  transform:translateX(-50%);
  background:#EEF1F5;
  pointer-events:none;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]),
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#121417;
    --surface:#1B1E23;
    --ink:#E7E9ED;
    --muted:#9AA1AD;
    --line:#2A2F36;
    --accent:#96583e;
    --accent-soft:#252A32;
    --shadow:0 12px 28px -22px rgba(0,0,0,.55);
  }
  html,body{background:var(--bg)}
  #top.hero::before{background:var(--surface);border-color:var(--line)}
  .portrait::before{background:#252A32;border-color:var(--line)}
  .project,.mini,.skill,.by-card,.note,.ticket,.decision,.next,
  .table-wrap,.gallery figure,.capmini,.kpi-main,.kpi-row div,.facts{
    background:var(--surface);
    border-color:var(--line);
  }
  .project .info{background:var(--surface)}
  .project .results span,.project .chip.skill,
  .back,.case-head .eyebrow,.pull mark,.decision .trade .yes,
  .loop span,.offclock,.tags-table div:nth-child(odd){
    background:#252A32;
    border-color:var(--line);
  }
  .project .results span,.project .chip.skill{color:var(--ink)}
  .back{color:var(--accent)}
  .case-head .eyebrow{color:var(--accent)}
  .timeline::before{background:var(--line)}
  .role::before{border-color:var(--bg)}
  .hero .eyebrow,.section-head .eyebrow,.bio > .eyebrow,
  .chapter > .eyebrow,.case-head .eyebrow,.role .when,.back{
    color:var(--muted);
  }
  .gallery::-webkit-scrollbar-thumb{background:#4B525C}
  .contact{background:#4a5d58}
  #contact.section{background:#4a5d58;border-top-color:#4a5d58}
  #contact .contact{background:#4a5d58}
  footer{border-top-color:var(--line)}
  #about.section::before{background:var(--surface)}
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121417;
  --surface:#1B1E23;
  --ink:#E7E9ED;
  --muted:#9AA1AD;
  --line:#2A2F36;
  --accent:#96583e;
  --accent-soft:#252A32;
  --shadow:0 12px 28px -22px rgba(0,0,0,.55);
}
:root[data-theme="dark"] html,
:root[data-theme="dark"] body{background:var(--bg)}
:root[data-theme="dark"] #top.hero::before{background:var(--surface);border-color:var(--line)}
:root[data-theme="dark"] .portrait::before{background:#252A32;border-color:var(--line)}
:root[data-theme="dark"] .project,
:root[data-theme="dark"] .mini,
:root[data-theme="dark"] .skill,
:root[data-theme="dark"] .by-card,
:root[data-theme="dark"] .note,
:root[data-theme="dark"] .ticket,
:root[data-theme="dark"] .decision,
:root[data-theme="dark"] .next,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .gallery figure,
:root[data-theme="dark"] .capmini,
:root[data-theme="dark"] .kpi-main,
:root[data-theme="dark"] .kpi-row div,
:root[data-theme="dark"] .facts{
  background:var(--surface);
  border-color:var(--line);
}
:root[data-theme="dark"] .project .info{background:var(--surface)}
:root[data-theme="dark"] .project .results span,
:root[data-theme="dark"] .project .chip.skill,
:root[data-theme="dark"] .back,
:root[data-theme="dark"] .case-head .eyebrow,
:root[data-theme="dark"] .pull mark,
:root[data-theme="dark"] .decision .trade .yes,
:root[data-theme="dark"] .loop span,
:root[data-theme="dark"] .offclock,
:root[data-theme="dark"] .tags-table div:nth-child(odd){
  background:#252A32;
  border-color:var(--line);
}
:root[data-theme="dark"] .project .results span,
:root[data-theme="dark"] .project .chip.skill{color:var(--ink)}
:root[data-theme="dark"] .back,
:root[data-theme="dark"] .case-head .eyebrow{color:var(--accent)}
:root[data-theme="dark"] .hero .eyebrow,
:root[data-theme="dark"] .section-head .eyebrow,
:root[data-theme="dark"] .bio > .eyebrow,
:root[data-theme="dark"] .chapter > .eyebrow,
:root[data-theme="dark"] .case-head .eyebrow,
:root[data-theme="dark"] .role .when,
:root[data-theme="dark"] .back{color:var(--muted)}
:root[data-theme="dark"] .contact,
:root[data-theme="dark"] #contact.section,
:root[data-theme="dark"] #contact .contact{background:#4a5d58}
:root[data-theme="dark"] #contact.section{border-top-color:#4a5d58}
:root[data-theme="dark"] #about.section::before{background:var(--surface)}