:root{
  --ink:#161a1d; --ink-soft:#5b6469; --line:#dfe3e6;
  --paper:#fbfbf9; --panel:#ffffff; --accent:#2f4b7c; --measure:70ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif;}
img,video{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:min(1080px,92vw);margin-inline:auto}
.site-head{border-bottom:1px solid var(--line);background:var(--panel)}
.site-head .wrap{display:flex;align-items:baseline;gap:2rem;padding:1.1rem 0;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:-.02em;font-size:1.05rem;color:var(--ink)}
.brand span{color:var(--ink-soft);font-weight:400}
.nav{margin-left:auto;display:flex;gap:1.4rem;font-size:.93rem}
.nav a{color:var(--ink-soft)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.lede{padding:4.5rem 0 3rem;border-bottom:1px solid var(--line)}
.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 1rem}
.lede h1{font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.12;letter-spacing:-.03em;
  margin:0 0 1rem;max-width:18ch;font-weight:700}
.lede p{margin:0;max-width:52ch;color:var(--ink-soft)}
.grid{display:grid;gap:2.5rem 2rem;padding:3rem 0;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.work{background:var(--panel);border:1px solid var(--line);border-radius:4px;
  overflow:hidden;display:flex;flex-direction:column}
.work video{width:100%;aspect-ratio:16/9;background:#0d0f10;object-fit:cover}
.work-body{padding:1.15rem 1.25rem 1.4rem}
.work-body h2{font-size:1.08rem;margin:0 0 .2rem;letter-spacing:-.01em}
.meta{font-size:.78rem;color:var(--ink-soft);margin:0 0 .7rem}
.work-body p{margin:0;font-size:.93rem;color:var(--ink-soft)}
.prose{padding:3.5rem 0;max-width:var(--measure)}
.prose h1{font-size:2rem;letter-spacing:-.025em;margin:0 0 1.2rem}
.prose h2{font-size:1.15rem;margin:2.2rem 0 .6rem}
.prose dl{display:grid;grid-template-columns:9rem 1fr;gap:.5rem 1rem;margin:1.5rem 0}
.prose dt{color:var(--ink-soft);font-size:.9rem}
.prose dd{margin:0}
.site-foot{border-top:1px solid var(--line);margin-top:2rem;padding:2.2rem 0 3rem;
  font-size:.85rem;color:var(--ink-soft)}
.site-foot p{margin:.25rem 0}
@media (prefers-reduced-motion:no-preference){
  .work{transition:border-color .2s ease}
  .work:hover{border-color:#b9c2c8}
}
@media (max-width:520px){
  .site-head .wrap{gap:.8rem}
  .nav{width:100%;margin-left:0;gap:1.1rem}
  .lede{padding:3rem 0 2.2rem}
}