:root{
  --bg:#f7f6f1; --card:#fffefa; --ink:#27261f; --muted:#72705e; --faint:#8f8d7c;
  --line:#e5e2d5; --accent:#b8551a; --accent-ink:#9a4512; --accent-soft:#f4e6da;
  --deep:#2f5468; --chip:#edeadf; --badge:#eceadd;
  --good:#2f7d4e; --good-soft:#e4f0e6; --bad:#b03a2e; --bad-soft:#f7e5e2;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#161511; --card:#201f19; --ink:#ebe8db; --muted:#a29f8c; --faint:#807d6c;
    --line:#323026; --accent:#e0915a; --accent-ink:#e8a172; --accent-soft:#382517;
    --deep:#93b9cb; --chip:#2a2921; --badge:#2e2c22;
    --good:#7fc79a; --good-soft:#223a2b; --bad:#e2846f; --bad-soft:#3b221d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#161511; --card:#201f19; --ink:#ebe8db; --muted:#a29f8c; --faint:#807d6c;
  --line:#323026; --accent:#e0915a; --accent-ink:#e8a172; --accent-soft:#382517;
  --deep:#93b9cb; --chip:#2a2921; --badge:#2e2c22;
    --good:#7fc79a; --good-soft:#223a2b; --bad:#e2846f; --bad-soft:#3b221d;
  color-scheme: dark;
}
body{background:var(--bg); color:var(--ink);
  font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15.5px; line-height:1.55; padding-inline:20px; margin:0;}
.wrap{max-width:1060px; margin:0 auto;}
a{color:inherit}
::selection{background:var(--accent-soft)}

.topnav{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--bg);
  border-bottom:1px solid var(--line);}
.topnav .in{max-width:1060px; margin:0 auto; display:flex; align-items:center; gap:18px;
  padding-block:13px; flex-wrap:wrap;}
.brand{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:17px;
  letter-spacing:-.01em; text-decoration:none; white-space:nowrap;}
.brand b{color:var(--accent)}
.nl{font-size:13.5px; font-weight:600; text-decoration:none; color:var(--muted);
  white-space:nowrap; padding:4px 2px; border-bottom:2px solid transparent;}
.nl:hover{color:var(--ink)}
.nl.on{color:var(--accent-ink); border-bottom-color:var(--accent);}
.dd{position:relative}
.ddbtn{background:none; border:none; cursor:pointer; font-family:inherit;}
.caret{font-size:10px; opacity:.7; margin-left:2px}
.ddmenu{position:absolute; top:calc(100% + 10px); left:0; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:6px; min-width:250px; display:none; flex-direction:column; gap:1px;
  box-shadow:0 10px 28px rgba(0,0,0,.1); z-index:40}
.dd.open .ddmenu{display:flex}
.ddmenu a{text-decoration:none; font-size:14px; font-weight:500; padding:8px 11px; border-radius:7px;
  display:flex; justify-content:space-between; align-items:baseline; gap:14px; color:var(--ink);
  border-bottom:none; white-space:nowrap}
.ddmenu a:hover{background:var(--chip)}
.ddmenu a.on{color:var(--accent-ink); background:var(--accent-soft)}
.ddmenu .c{color:var(--faint); font-variant-numeric:tabular-nums; font-size:12.5px}
.logo.imgok{color:transparent}
.uxchips{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:2px; padding-bottom:4px}
.uxchips .chip{font-size:13px; font-weight:600; background:var(--chip); color:var(--ink); border:none;
  border-radius:999px; padding:6px 13px; cursor:pointer; text-decoration:none; font-family:inherit}
.uxchips .chip:hover{background:var(--accent-soft)}
.uxchips .chip.active{background:var(--ink); color:var(--bg)}
.uxchips .c{opacity:.6; font-weight:400; font-variant-numeric:tabular-nums}
.vsep{width:1px; height:20px; background:var(--line); margin-inline:4px}
.morelink{display:inline-block; margin-top:6px; font-weight:600; color:var(--accent-ink); text-decoration:none; font-size:14.5px}
.morelink:hover{text-decoration:underline}
.herostats{border-left:2px solid var(--accent); padding-left:22px; display:flex; flex-direction:column; gap:20px; justify-content:center}
.herostats .n{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:32px; line-height:1.05; letter-spacing:-.02em}
.herostats .l{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--faint)}
.secttl{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:24px; letter-spacing:-.015em; margin:46px 0 4px}
.sectsub{margin:0 0 18px; color:var(--muted); font-size:14.5px; max-width:70ch}
.probgrid{list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.probcard{background:var(--card); border:1px solid var(--line); border-radius:11px; padding:18px 20px}
.probcard .kick{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-ink); font-weight:700}
.probcard h3{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:17.5px; letter-spacing:-.01em; margin:6px 0 8px; line-height:1.3}
.probcard p{margin:0; font-size:14px; color:var(--muted); line-height:1.5}
.roles{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; max-width:76ch}
.role{border-left:2px solid var(--line); padding-left:16px}
.role .rt{font-weight:700; font-size:15.5px}
.role .rm{font-size:12.5px; color:var(--faint); margin:2px 0 4px}
.role p{margin:0; font-size:14px; color:var(--muted)}
.edu{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14.5px}
.edu b{font-weight:600}
.story{max-width:74ch}
.story p{margin:0 0 15px; line-height:1.65}
.pfloat{float:right; width:240px; margin:4px 0 20px 32px}
.portrait{width:100%; height:auto; border-radius:14px; border:1px solid var(--line); display:block}
.contactgrid{display:grid; grid-template-columns:210px minmax(0,1fr); gap:36px; align-items:start; padding-block:10px}
.clist{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:16px}
.clist .cl{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; margin-bottom:3px}
.clist a{color:var(--deep); font-weight:600; text-decoration:none; font-size:16.5px}
.clist a:hover{color:var(--accent-ink)}
.clist .cv{font-size:16.5px; font-weight:600}
.contactgrid .clist{margin-top:18px}
.cform{display:flex; flex-direction:column; gap:14px; max-width:560px}
.cform label{display:flex; flex-direction:column; gap:6px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700}
.cform input[type=text], .cform input[type=email], .cform textarea{font:inherit; font-size:15.5px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:9px; padding:10px 12px; width:100%; box-sizing:border-box}
.cform input:focus, .cform textarea:focus{outline:none; border-color:var(--accent)}
.cform textarea{resize:vertical; min-height:120px}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.cbtn{font:inherit; font-size:15.5px; font-weight:700; color:#fff; background:var(--accent); border:none; border-radius:9px; padding:12px 22px; cursor:pointer; align-self:flex-start; transition:opacity .12s}
.cbtn:hover{opacity:.88}
.cbtn:disabled{opacity:.55; cursor:default}
.cstatus{margin:0; font-size:14.5px; min-height:1.3em}
.cstatus.ok{color:var(--good); font-weight:600}
.cstatus.err{color:var(--bad); font-weight:600}
@media (max-width:760px){
  .pfloat{float:none; width:100%; max-width:300px; margin:0 0 18px}
  .contactgrid{grid-template-columns:1fr}
  .contactgrid .portrait{max-width:210px}
  .frow{grid-template-columns:1fr}
}
.grid.eq{grid-auto-rows:1fr}
.grid.eq > li{display:flex}
.grid.eq .card{display:flex; flex-direction:column; width:100%}
.grid.eq .card .s{flex:0 0 auto}
.grid.eq .card .m{margin-top:auto; padding-top:7px}

.hero{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:40px;
  padding-block:52px 44px; align-items:start;}
.hero h1{font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:clamp(32px,5vw,50px); line-height:1.05; letter-spacing:-.025em; margin:0 0 18px; text-wrap:balance;}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero p{margin:0 0 14px; max-width:56ch;}
.hero p.dim{color:var(--muted); font-size:14.5px}
.press{border-left:2px solid var(--accent); padding-left:20px}
.press h2{font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); margin:4px 0 12px; font-weight:600}
.press ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.press a{text-decoration:none; display:block}
.press .pt{font-weight:600; font-size:14.5px; line-height:1.35}
.press a:hover .pt{color:var(--accent-ink)}
.press .ps{font-size:12.5px; color:var(--faint)}

.homesearchrow{display:flex; gap:10px; align-items:center; padding-bottom:18px;}
input[type=search]{font:inherit; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:8px; padding:9px 14px; outline:none; width:100%; max-width:430px;}
input[type=search]:focus{border-color:var(--accent)}
#hits{font-size:13px; color:var(--faint); white-space:nowrap; font-variant-numeric:tabular-nums}

.colgrid{list-style:none; margin:0 0 56px; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); grid-auto-rows:1fr;}
.colgrid > li{display:flex}
.colcard{display:flex; flex-direction:column; width:100%; text-decoration:none; background:var(--card); border:1px solid var(--line);
  border-radius:11px; padding:20px 22px; transition:border-color .12s;}
.colcard:hover{border-color:var(--accent)}
.colcard h3{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:19px;
  letter-spacing:-.01em; margin:0 0 6px; display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.colcard .n{color:var(--faint); font-weight:400; font-size:14px; font-variant-numeric:tabular-nums;}
.colcard p{margin:0; color:var(--muted); font-size:14px;}
.colcard .subs{margin-top:auto; padding-top:10px; font-size:12.5px; color:var(--faint);}

.pagehead{padding-block:40px 6px;}
.crumb{font-size:12.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.07em;}
.crumb a{color:var(--faint); text-decoration:none}
.crumb a:hover{color:var(--accent-ink)}
.pagehead h1{font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:clamp(28px,4.5vw,42px); letter-spacing:-.02em; margin:6px 0 6px;}
.pagehead h1 .cnt{color:var(--faint); font-weight:400; font-size:.55em; margin-left:10px; font-variant-numeric:tabular-nums}
.pagehead p{margin:0 0 18px; color:var(--muted); max-width:70ch;}

.sub{margin-top:24px}
.sub h3{font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-ink);
  font-weight:700; margin:0 0 12px; display:flex; align-items:center; gap:10px}
.sub h3::after{content:""; flex:1; height:1px; background:var(--line)}
.grid{list-style:none; margin:0; padding:0; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.card{display:block; text-decoration:none; background:var(--card); border:1px solid var(--line);
  border-radius:9px; padding:12px 14px; transition:border-color .12s}
.card:hover{border-color:var(--accent)}
.card:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.card .t{font-weight:600; font-size:14.5px; line-height:1.35; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card .s{font-size:12.5px; color:var(--muted); line-height:1.45; margin-top:4px; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card .m{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:7px; font-size:12px; color:var(--faint)}
.card .dom{color:var(--deep); font-weight:500; overflow:hidden; text-overflow:ellipsis; max-width:22ch; white-space:nowrap}
.badge{background:var(--badge); border-radius:4px; padding:1px 6px; font-size:11px; font-weight:600;
  letter-spacing:.03em; color:var(--muted)}
.tag{color:var(--faint)}
.tag::before{content:"#"; opacity:.6}
.colbadge{background:var(--chip); border-radius:4px; padding:1px 6px; font-size:11px; font-weight:600; color:var(--muted)}

.uxgroup{margin-top:34px}
.uxhead{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.logo{position:relative; width:38px; height:38px; border-radius:9px; background:var(--chip); display:grid;
  place-items:center; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:17px;
  overflow:hidden; flex:0 0 auto; color:var(--accent-ink)}
.logo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--card)}
.logo.wide{width:150px; background:#fff; border:1px solid var(--line)}
.logo.wide img{object-fit:contain; padding:8px 10px; box-sizing:border-box; background:#fff}
.uxco{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:19px; letter-spacing:-.01em}
.uxctx{font-size:13px; color:var(--faint)}
.uxmeta{font-size:12.5px; color:var(--faint); margin-top:2px}
.uxmeta a{color:var(--deep); text-decoration:none; font-weight:600}
.uxmeta a:hover{color:var(--accent-ink)}
.exhibit{margin:0 0 16px; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:var(--card)}
.exhibit img{display:block; width:100%; height:auto}
.exhibit figcaption{font-size:12px; color:var(--faint); padding:8px 14px; border-top:1px solid var(--line)}
.uxcase{background:var(--card); border:1px solid var(--line); border-left-width:3px; border-radius:10px;
  padding:16px 18px; margin-bottom:12px}
.uxcase.bad{border-left-color:var(--bad)}
.uxcase.good{border-left-color:var(--good)}
.uxtop{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
.verdict{font-size:12px; font-weight:700; letter-spacing:.04em; border-radius:999px; padding:3px 10px}
.vbad{background:var(--bad-soft); color:var(--bad)}
.vgood{background:var(--good-soft); color:var(--good)}
.pattern{font-size:12px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em}
.uxcase h3{margin:0 0 6px; font-size:16.5px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; letter-spacing:-.01em}
.uxbody{margin:0 0 10px; font-size:14.5px; max-width:75ch}
.principle{margin:0; font-size:13.5px; color:var(--muted); background:var(--accent-soft); border-radius:8px; padding:9px 12px; max-width:75ch}
.principle strong{color:var(--accent-ink)}

#empty{display:none; padding:50px 0; text-align:center; color:var(--muted)}
#empty.show{display:block}
.pager{display:flex; justify-content:space-between; gap:14px; margin-top:44px; padding-top:20px; border-top:1px solid var(--line);}
.pager a{text-decoration:none; font-weight:600; font-size:14px; color:var(--deep);}
.pager a:hover{color:var(--accent-ink)}
footer{border-top:1px solid var(--line); padding-block:26px 40px; margin-top:48px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--faint)}
main{min-height:60vh; padding-bottom:10px}
@media (max-width:760px){
  .hero{grid-template-columns:1fr; gap:30px; padding-block:36px 30px}
  .press{border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:22px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }