/* Portfolio 2026 — shared system, built from the Figma hi-fi boards.
   Tokens match the Figma file exactly. Hand written, no build step. */

/* Self hosted so the page renders in the right face on the first paint,
   with no third party request. Geist is the variable file, 100 to 900. */
@font-face{font-family:'Geist';src:url('fonts/geist-variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --ink:#141519;
  --ink-2:#383b44;
  --ink-3:#50545e;
  --ink-4:#6f737e;
  --ink-5:#686c77;
  --rule:#e4e4e8; --sep:#dddee2;
  --card:#f7f7f8;
  --band:#fbfbfc;
  --paper:#ffffff;
  --accent:#3346cf;
  --accent-soft:#5c68d8;
  --accent-on-dark:#a9b4f5;
  --foot:#141519;
  --foot-text:#9296a2;
  --hair-faint:#b8bbc4;
  --col:1248px;
  --blur:120px;
  --ease:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--col);margin:0 auto;padding-inline:20px}
@media (min-width:1300px){ .wrap{padding-inline:0} }
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- eyebrow ---------- */
.eyebrow{
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  font-size:10px;font-weight:600;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin:0;
}
.eyebrow--wide{letter-spacing:.08em}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--rule);background:var(--paper)}
.site-head__in{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:14px;font-weight:500;color:var(--ink-3)}
.nav a[aria-current="page"]{font-weight:600;color:var(--accent-soft)}
.nav a.resume-link{font-size:13px}
.lang{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500}
.lang .on{color:var(--accent-soft)}
.lang .off{color:var(--ink-4)}
.lang .sep{color:var(--hair-faint);font-weight:400}
.resume-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--accent-soft)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;margin-right:-10px}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:20px;height:1.5px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media (max-width:860px){ .nav{display:none} .burger{display:flex} .site-head__in{height:64px} }

/* ---------- page head (Work, About) ---------- */
.page-head{padding-block:120px 67px}
.page-head h1{font-size:clamp(30px,4.4vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:24px 0 0;max-width:912px}
.page-head h1 .accent{color:var(--accent)}
.page-head__lede{font-size:18px;color:var(--ink-2);margin:24px 0 0;max-width:720px;line-height:1.6}
.page-head__lede + .page-head__lede{margin-top:29px}
@media (max-width:620px){ .page-head{padding-block:64px 40px} }

/* ---------- covers ----------
   The exported art is exactly the size of the Figma panel, so the image
   sets the height and can never be cropped. The mesh sits behind it. */
.cover{position:relative;overflow:hidden;isolation:isolate;background:var(--c-base)}
.cover .blob{position:absolute;border-radius:50%;opacity:.6;filter:blur(var(--blur));pointer-events:none;z-index:0}
.cover .b1{left:-19.6%;top:-41.2%;width:75.2%;height:123.5%;background:var(--c-1)}
.cover .b2{left:53.9%;top:-35.3%;width:68.6%;height:117.6%;background:var(--c-2)}
.cover .b3{left:-16.3%;top:41.2%;width:71.9%;height:117.6%;background:var(--c-3)}
.cover .b4{left:49.0%;top:38.2%;width:75.2%;height:123.5%;background:var(--c-4)}
.cover__art{position:relative;z-index:1}
.cover__art img{width:100%;height:auto;display:block}
/* fallback height if an image is missing, so the mesh still reads */
.cover--wide{min-height:0}
.cover--w560,.cover--w664,.cover--w480{min-height:0}
@media (max-width:900px){ :root{--blur:70px} }

/* ---------- project card ----------
   Measured off the hi-fi board. A card is a #f7f7f8 tile with a 4px radius,
   the cover flush to its top edge, 24px of padding around the copy, 20px
   between every copy line, and the footer rule pinned to the bottom so the
   two cards in a row rule off at the same height. */
.card{
  background:var(--card);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;
}
.card__body{padding:24px 24px 0;display:flex;flex-direction:column;flex:1 1 auto}
.card__meta-top{margin:0 0 20px;color:var(--ink-4)}
.card h3,.card h2{font-size:clamp(26px,2.6vw,34px);font-weight:700;letter-spacing:0;line-height:1.18;margin:0 0 20px}
.card__desc{font-size:15px;color:var(--ink-3);margin:0 0 20px;line-height:1.6}
.card__facts{font-size:12.5px;color:var(--ink-5);line-height:1.5;margin:0 0 9px}
.card__foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:19px;
  border-top:1px solid var(--rule);margin:0 24px 24px;padding-top:20px;
}
.card__read{font-size:13px;font-weight:500;color:var(--accent);display:inline-flex;gap:6px;align-items:baseline}
.card__tag{font-size:13px;color:var(--ink-5)}

/* wide card: 480 of art, 768 of copy, no gutter between them.
   If the copy runs longer than the art, the mesh fills the rest of the
   column rather than leaving a strip of card colour under the artwork. */
.card--split{display:grid;grid-template-columns:480fr 768fr;column-gap:0}
.card--split .card__col{display:flex;flex-direction:column}
.card--split > a,.card--split > .cover{height:100%}
.card--split .cover{display:flex;flex-direction:column;justify-content:center}

/* ---------- grids ---------- */
.row-2{display:grid;gap:24px;margin-top:24px;align-items:stretch}
.row-2.a{grid-template-columns:560fr 664fr}
.row-2.b{grid-template-columns:664fr 560fr}
.row-2.even{grid-template-columns:1fr 1fr}
@media (max-width:900px){
  .row-2,.row-2.a,.row-2.b,.row-2.even{grid-template-columns:1fr;margin-top:24px}
  .card--split{grid-template-columns:1fr}
}

/* ---------- the tinted gallery band ---------- */
.band{background:var(--band);padding-block:96px 120px}
.band .group{padding-block:96px}
.group-intro{display:flex;flex-direction:column;gap:24px}
.group-intro__copy{display:flex;flex-direction:column;gap:14px;max-width:720px}
.group-intro p.lede{font-size:18px;color:var(--ink-2);line-height:1.6;margin:0}
.group-intro hr{border:0;border-top:1px solid var(--rule);margin:0;width:100%}
.group-intro + .row-2{margin-top:64px}

/* ---------- contact ---------- */
.contact{padding-block:112px}
.contact::before{content:'';display:block;height:1px;background:var(--rule)}
.contact h2{font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.008em;line-height:1.3;margin:48px 0 0;max-width:912px}
.contact p{font-size:16px;color:var(--ink-3);line-height:1.6;margin:24px 0 0}
.contact a.mail{display:inline-block;font-size:18px;font-weight:500;line-height:1.5;color:var(--accent);margin-top:14px}
@media (max-width:620px){ .contact{padding-block:72px} .contact h2{margin-top:36px} }

/* ---------- footer ---------- */
.site-foot{background:var(--foot);color:var(--foot-text)}
.site-foot__in{padding-block:64px}
.foot-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:12px}
/* the case boards put the call to action in the footer's first column */
.foot-cta{display:flex;flex-direction:column;gap:12px;max-width:420px}
.foot-cta h2{font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.31;margin:0;color:var(--paper)}
.foot-cta p{font-size:16px;line-height:1.6;margin:0;color:var(--foot-text)}
.foot-cta a{font-size:13px;font-weight:600;line-height:1.3;color:var(--paper)}
.foot-cta a:hover{color:var(--accent-on-dark)}
@media (max-width:860px){ .foot-cta{max-width:none} }
.back-top{font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1.3;color:var(--foot-text)}
.colophon{font-size:13px;line-height:1.3;margin:0;color:var(--foot-text)}
.colophon .wordmark{color:#e7e9ef;font-weight:600}
.social{display:flex;gap:32px;font-size:13px;line-height:1.5}
.site-foot a:hover{color:var(--accent-on-dark)}
@media (max-width:620px){ .foot-row{flex-direction:column;align-items:flex-start;gap:28px} }

/* ---------- mobile menu ---------- */
.scrim{
  position:fixed;inset:0;background:rgba(13,15,20,.26);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility 0s linear .28s;z-index:60;
}
.panel{
  position:fixed;top:0;right:0;bottom:0;width:min(322px,86vw);background:#fff;z-index:61;
  transform:translateX(100%);visibility:hidden;
  transition:transform .34s var(--ease),visibility 0s linear .34s;
  box-shadow:-24px 0 64px -24px rgba(20,21,25,.3);
  padding:14px 24px 27px;display:flex;flex-direction:column;overflow-y:auto;
  padding-top:calc(14px + env(safe-area-inset-top,0px));
}
body.menu-open .scrim{opacity:1;visibility:visible;transition:opacity .28s var(--ease),visibility 0s}
body.menu-open .panel{transform:translateX(0);visibility:visible;transition:transform .34s var(--ease),visibility 0s}
body.menu-open{overflow:hidden}
.panel__head{display:flex;align-items:center;justify-content:space-between;height:56px}
.panel__close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:18px;margin-right:-12px}
.panel hr{border:0;border-top:1px solid var(--rule);margin:15px 0 14px}
.panel .primary a{display:flex;align-items:center;height:44px;font-size:23px;font-weight:700;letter-spacing:-.025em;color:var(--ink-3)}
.panel .primary a[aria-current="page"]{color:var(--ink)}
.panel .cases a{display:flex;align-items:center;height:44px;font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--ink-2)}
.panel .util{display:flex;flex-direction:column}
.panel .util > *{display:flex;align-items:center;height:40px}
.panel .social-links a{display:flex;align-items:center;height:40px;font-size:15px;font-weight:500;color:var(--ink-3)}
.panel .spacer{flex:1 1 auto;min-height:1px}
@media (prefers-reduced-motion:reduce){ .panel,.scrim{transition:none} }