/* Layout: one long reading column with a left index rail on wide screens; builds first, research underneath as the foundation */
:root{
  --paper:#f6f6f3; --ink:#1d1c3a; --muted:#5d5c73; --rule:#dddde2; --card:#ffffff;
  --indigo:#2f2d8f; --mint:#62d69a; --mint-soft:#e3f6ec;
  --display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --body:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#15141f; --ink:#ecebf4; --muted:#a4a3b8; --rule:#2e2d3d; --card:#1d1c2a;
  --indigo:#a9a7ff; --mint:#6fe0a6; --mint-soft:#1d3329; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#15141f; --ink:#ecebf4; --muted:#a4a3b8; --rule:#2e2d3d; --card:#1d1c2a;
  --indigo:#a9a7ff; --mint:#6fe0a6; --mint-soft:#1d3329; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:400 1rem/1.65 var(--body);padding-inline:20px;padding-block:0}
a{color:var(--indigo);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:2px}
.wrap{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:180px minmax(0,1fr);gap:56px}
nav{position:sticky;top:env(safe-area-inset-top,0px);align-self:start;padding-top:64px;display:flex;flex-direction:column;gap:8px;font:500 .78rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
nav a{color:var(--muted);text-decoration:none}
nav a:hover{color:var(--ink)}
nav .name{font:400 1.35rem/1.1 var(--display);text-transform:none;letter-spacing:0;color:var(--ink);margin-bottom:18px}
main{min-width:0;padding-block:64px 40px}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0}
h1{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.01em}
h1 em{font-style:italic;color:var(--indigo)}
h2{font-size:clamp(2rem,4vw,2.7rem);line-height:1.1}
h3{font-size:1.55rem;line-height:1.2}
p{margin:0;max-width:65ch}
.eyebrow{font:500 .75rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lede{font-size:1.2rem;line-height:1.6;color:var(--ink)}
.stack{display:flex;flex-direction:column;gap:18px}
section{border-top:1px solid var(--rule);padding-block:56px;display:flex;flex-direction:column;gap:28px;scroll-margin-top:16px}
.hero{display:flex;flex-direction:column;gap:26px;padding-bottom:56px}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;font:400 .85rem/1.4 var(--mono);color:var(--muted)}
.facts b{color:var(--ink);font-weight:500}
/* Workerbird */
.wb{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:32px;display:flex;flex-direction:column;gap:28px}
.wb-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start}
.pill{display:inline-block;background:var(--mint-soft);color:var(--ink);font:500 .72rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:999px}
.phones{display:grid;grid-template-columns:repeat(3,minmax(0,160px));gap:16px}
.phones figure{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.phones img{width:100%;height:auto;aspect-ratio:2 / 3;object-fit:cover;border-radius:14px;border:1px solid var(--rule);display:block}
.phones figcaption{font:400 .75rem/1.35 var(--mono);color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;border-block:1px solid var(--rule);padding-block:18px}
.stat{display:flex;flex-direction:column;gap:4px}
.stat .n{font:400 2rem/1 var(--display);font-variant-numeric:tabular-nums}
.stat .l{font-size:.82rem;color:var(--muted);line-height:1.35}
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.proj{display:flex;flex-direction:column;gap:10px;min-width:0}
.proj .meta{font:400 .74rem/1.4 var(--mono);color:var(--muted)}
.proj p{font-size:.94rem}
.shot{width:100%;max-width:220px;border:1px solid var(--rule);border-radius:12px;display:block;background:#fff}
.logo{height:64px;width:auto;max-width:100%;display:block}
.builds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.build{display:flex;flex-direction:column;gap:10px;min-width:0}
.quote{border-left:3px solid var(--mint);padding-left:18px}
/* tables & lists */
.table{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:520px}
td,th{text-align:left;padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
th{font:500 .72rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
td.amt{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.pubs{display:flex;flex-direction:column;gap:26px}
.pubs h3{font-size:1.2rem}
.pubs ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.pubs li{font-size:.93rem;max-width:75ch;padding-left:16px;text-indent:-16px}
.pubs .yr{font-family:var(--mono);font-size:.8rem;color:var(--muted);margin-right:8px}
details summary{cursor:pointer;font:500 .8rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--indigo)}
.draft{background:var(--mint-soft);border-radius:10px;padding:18px 20px;font-size:.9rem}
footer{border-top:1px solid var(--rule);padding-block:28px;font:400 .8rem/1.5 var(--mono);color:var(--muted)}
@media (max-width:860px){
  .wrap{grid-template-columns:minmax(0,1fr);gap:0}
  nav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px 16px;padding-top:28px}
  nav .name{width:100%;margin-bottom:4px}
  main{padding-top:36px}
  .projects,.builds{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb{padding:20px}
  .wb-head{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
html{scroll-behavior:smooth}

.rows{display:flex;flex-direction:column;gap:40px}
.row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start}
.row .shot{max-width:200px}
.row .txt{display:flex;flex-direction:column;gap:10px;min-width:0}
.more{display:inline-flex;align-items:center;gap:8px;font:500 .85rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:12px 16px;border:1px solid var(--indigo);border-radius:8px;text-decoration:none;align-self:flex-start}
.more:hover{background:var(--mint-soft)}
.summary{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.summary li{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:.92rem}
.summary b{font-family:var(--display);font-weight:400;font-size:1.25rem}
@media (max-width:860px){
  .row{grid-template-columns:84px minmax(0,1fr);gap:10px 16px;align-items:center}
  .row .shot{width:84px;max-width:84px;aspect-ratio:4 / 5;height:auto;object-fit:cover;object-position:center 65%;border-radius:8px;grid-row:1 / span 2}
  .row .txt{display:contents}
  .row .txt .meta{grid-column:2;align-self:end}
  .row .txt h3{grid-column:2;align-self:start}
  .row .txt p,.row .txt > a{grid-column:1 / -1;margin-top:6px}
  .wb{padding:18px 16px}
  body{padding-inline:16px}
  .summary{grid-template-columns:minmax(0,1fr)}
  .phones{gap:10px}
  .phones figcaption{font-size:.68rem}
  .logo{height:48px}
}

.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tri{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:.92rem}
.tri img{width:100%;max-width:240px;aspect-ratio:2 / 3;height:auto;object-fit:cover;border-radius:14px;border:1px solid var(--rule);display:block;margin-bottom:8px}
.tri b{font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.2}
@media (max-width:860px){
  .trio{gap:12px}
  .tri img{border-radius:10px;margin-bottom:4px}
  .tri b{font-size:1.02rem}
  .tri span{font-size:.8rem;line-height:1.4}
}

.sel{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;max-width:70ch}

.fig{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.fig img{width:100%;height:auto;display:block;border:1px solid var(--rule);border-radius:10px;background:#fff}
.fig figcaption{font:400 .8rem/1.45 var(--mono);color:var(--muted);max-width:70ch}
.figrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.side{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
ul.plain{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:10px;max-width:70ch}
.bigstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;border-block:1px solid var(--rule);padding-block:22px}
.bigstats div{display:flex;flex-direction:column;gap:6px}
.bigstats .n{font:400 3rem/1 var(--display);color:var(--indigo);font-variant-numeric:tabular-nums}
.bigstats .l{font-size:.88rem;color:var(--muted);line-height:1.4}
@media (max-width:860px){
  .figrow,.side{grid-template-columns:minmax(0,1fr)}
  .bigstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bigstats .n{font-size:2.3rem}
}

.figrow.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.figrow.three{grid-template-columns:minmax(0,1fr)}}

.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
.principles div{display:flex;flex-direction:column;gap:6px;border-top:2px solid var(--mint);padding-top:12px;min-width:0}
.principles b{font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.25}
@media (max-width:860px){.principles{grid-template-columns:minmax(0,1fr)}}

.gate-sum{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:center}
.gate-sum > img{width:100%;height:auto;display:block}
.gate-art{width:100%;max-width:560px;height:auto;display:block;margin-inline:auto}
@media (max-width:860px){.gate-sum{grid-template-columns:minmax(0,1fr)}.gate-sum > img{max-width:220px}}

.subhead{margin-top:28px}


/* --- clickable project cards on the home page --- */
a.tri{text-decoration:none;color:inherit}
a.tri img{transition:border-color .15s ease}
a.tri:hover img,a.tri:focus-visible img{border-color:var(--indigo)}
a.tri:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.tri em{font-style:normal;font:500 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);margin-top:2px}

/* role line on case studies */
.role{font:500 .95rem/1.6 var(--body);color:var(--ink);border-left:3px solid var(--mint);padding-left:14px;max-width:65ch}

/* contact line */
.contactline{font:400 1rem/1.7 var(--body)}

/* grants table: stack on narrow screens so the amounts are never cut off */
@media (max-width:620px){
  .table{overflow-x:visible}
  .table table{min-width:0}
  .table table,.table thead,.table tbody,.table tr,.table th,.table td{display:block;width:100%}
  .table thead{display:none}
  .table tr{border-bottom:1px solid var(--rule);padding-block:14px}
  .table td{padding:2px 0;border:0}
  .table td[data-l]::before{content:attr(data-l);display:block;font:500 .7rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .table td.amt{font-weight:500}
}

/* project thumbnails: stack beside their text on phones instead of three tiny columns */
@media (max-width:620px){
  .trio{grid-template-columns:1fr;gap:26px}
  .tri{display:grid;grid-template-columns:96px minmax(0,1fr);gap:2px 16px;align-items:start}
  .tri img{grid-row:1 / span 3;width:96px;max-width:96px;margin-bottom:0}
  .tri b{font-size:1.15rem}
  .tri span{font-size:.85rem}
}

/* personal project thumbnails */
.thumb{margin:0 0 6px;display:flex;flex-direction:column;gap:6px}
.thumb img{width:100%;aspect-ratio:16 / 9;height:auto;object-fit:contain;background:#fff;border:1px solid var(--rule);border-radius:10px;display:block;padding:0}
.thumb figcaption{font:400 .72rem/1.4 var(--mono);color:var(--muted)}

/* playtest note */
.playtest{font:500 .82rem/1.5 var(--mono);letter-spacing:.03em;color:var(--indigo);background:var(--mint-soft);border-radius:8px;padding:10px 14px;align-self:flex-start}
.playtest b{font-weight:500}

/* research project card */
.proj-card{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start}
.proj-card .cover{display:block;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 1px 0 var(--rule)}
.proj-card .cover img{width:100%;height:auto;display:block}
.proj-card .cover:hover{border-color:var(--indigo)}
.proj-card ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;max-width:65ch}
@media (max-width:620px){.proj-card{grid-template-columns:minmax(0,1fr);gap:20px}.proj-card .cover{max-width:180px}}

/* zoomable figures */
a.zoom{display:block;position:relative;cursor:zoom-in}
a.zoom:hover img{border-color:var(--indigo)}
.zoomlink{font:500 .75rem/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.quote .who{display:block;margin-top:6px;font:400 .78rem/1.4 var(--mono);color:var(--muted)}
.bigstats.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.bigstats.five .n{font-size:2.5rem}
@media (max-width:1000px){.bigstats.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.bigstats.five{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* phone mockups: no card frame, the device is the frame */
.shot.phone,.fig.phone img{border:0;border-radius:0;background:none}
.fig.phone{align-items:center}
.fig.phone img{max-width:260px}
.phone-side{grid-template-columns:minmax(0,1fr) 260px;align-items:center}
.phone-side ul.plain{align-self:center}
.hero-shot img{border-radius:12px}
@media (max-width:860px){.fig.phone img{max-width:200px}.row .shot.phone{aspect-ratio:auto;object-fit:contain}}
.shot.phone{height:auto}

/* Workerbird app device screenshots: one consistent frame */
img.device{display:block;width:100%;height:auto;aspect-ratio:400 / 840;object-fit:cover;border:6px solid #1b1b1b;border-radius:30px;background:#1b1b1b;box-shadow:0 8px 22px rgba(29,28,58,.12)}
.shot.phone.device{border-radius:26px;border-width:5px}
.devices{display:grid;gap:20px}
.devices figure{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.devices figcaption{font:400 .75rem/1.35 var(--mono);color:var(--muted);text-align:center}
.devices.four{grid-template-columns:repeat(4,minmax(0,170px))}
.devices.six{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.caption{font:400 .8rem/1.45 var(--mono);color:var(--muted)}
.fig.phone img.device{max-width:240px}
@media (max-width:860px){
  .devices.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .devices.six{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  img.device{border-width:4px;border-radius:18px}
  .row .shot.phone.device{border-radius:12px;border-width:3px}
}
.phone-side.top{align-items:start}
.devices.six{grid-template-columns:repeat(3,minmax(0,220px));gap:28px 32px}
@media (max-width:860px){.devices.six{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
.fig.phone img.device{border:6px solid #1b1b1b;border-radius:30px;background:#1b1b1b}
@media (max-width:860px){.fig.phone img.device{border-width:4px;border-radius:18px}}
.shot.phone.device{border:5px solid #1b1b1b;border-radius:26px;background:#1b1b1b}
@media (max-width:860px){.row .shot.phone.device{border-width:3px;border-radius:12px}}

/* bigger Workerbird logo, bird illustration */
.wb .logo{height:96px}
.wb-bird{display:block;width:100%;max-width:420px;height:auto;margin:4px auto}
@media (max-width:860px){.wb .logo{height:68px}.wb-bird{max-width:280px}}
.wb .logo{align-self:flex-start}
.wb-head .pill{justify-self:start;align-self:start}
.bird-row{display:flex;align-items:flex-end;justify-content:center;gap:56px;padding-block:8px}
.bird-row img{display:block;width:auto}
.bird-row .b-sing{height:120px}
.bird-row .b-fly{height:66px;align-self:center}
.bird-row .b-laptop{height:86px}
@media (max-width:620px){.bird-row{gap:22px}.bird-row .b-sing{height:72px}.bird-row .b-fly{height:40px}.bird-row .b-laptop{height:52px}}

/* Career Mapper: consistent screens */
.browser img{border:1px solid var(--rule);border-top:26px solid #ecebf0;border-radius:10px;box-shadow:0 10px 28px rgba(29,28,58,.10)}
.screens{display:grid;gap:22px}
.screens.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.screens.three{grid-template-columns:repeat(3,minmax(0,200px))}
.screens.one{grid-template-columns:minmax(0,220px)}
.screens figure{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.screens img{display:block;width:100%;height:auto;aspect-ratio:640 / 1240;object-fit:cover;object-position:top;background:#fff;border:1px solid var(--rule);border-radius:16px;box-shadow:0 8px 22px rgba(29,28,58,.09)}
.screens figcaption{font:400 .76rem/1.4 var(--mono);color:var(--muted)}
.screen-side{grid-template-columns:minmax(0,1fr) 220px;align-items:start}
.boards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:start}
.b-side{display:flex;flex-direction:column;gap:22px}
main.cs h3{margin-top:8px}
@media (max-width:860px){
  .screens.four,.screens.three{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .boards{grid-template-columns:minmax(0,1fr)}
  .screen-side{grid-template-columns:minmax(0,1fr)}
  .screens.one{grid-template-columns:minmax(0,200px)}
  .browser img{border-top-width:16px}
}
.bigstats.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.report{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:22px;align-items:start}
.report img{box-shadow:0 8px 22px rgba(29,28,58,.10);border-radius:4px}
@media (max-width:620px){.report{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bigstats.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
.headline-result{font:500 1.02rem/1.55 var(--body);background:var(--mint-soft);border-radius:10px;padding:14px 18px;max-width:65ch}