:root{
  --bg:#fff;--fg:#111;--sub:#333;--muted:#666;--line:#eee;
  --ph1:#f3f3f3;--ph2:#ebebeb;--ph-tag:#fff;--ph-txt:#777;
  --btn-bg:#111;--btn-fg:#fff;
  --accent-1:#4d8000;--accent-2:#9a8200;
  --alt-1:#b6f23a;--alt-2:#f7e948;
  --grad:linear-gradient(120deg,var(--accent-1),var(--accent-2));
  --grad-alt:linear-gradient(120deg,var(--alt-1),var(--alt-2));
  --foot-bg:#111;--foot-fg:#fff;
  --logo-filter:none;--foot-logo-filter:invert(1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e0e0e;--fg:#f5f5f2;--sub:#b9b9b4;--muted:#8d8d88;--line:#2a2a2a;
    --ph1:#1a1a1a;--ph2:#222;--ph-tag:#0e0e0e;--ph-txt:#999;
    --btn-bg:#f5f5f2;--btn-fg:#0e0e0e;
    --accent-1:#b6f23a;--accent-2:#f7e948;
    --alt-1:#4d8000;--alt-2:#9a8200;
    --foot-bg:#f5f5f2;--foot-fg:#0e0e0e;
    --logo-filter:invert(1);--foot-logo-filter:none;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Raleway,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--fg)}a:hover{color:var(--sub)}
img{display:block}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.wrap{max-width:1320px;margin:0 auto;padding:0 64px}

.shadow{position:relative;display:inline-block}
.shadow::before{content:"";position:absolute;inset:0;background:var(--grad);border-radius:inherit;transform:translate(var(--off,4px),var(--off,4px));transition:transform .15s}
.shadow>*{position:relative}
.btn{font:700 15px Raleway,sans-serif;background:var(--btn-bg);color:var(--btn-fg);border:2px solid var(--btn-bg);border-radius:999px;padding:13px 26px;cursor:pointer;text-decoration:none;display:inline-block}
.shadow.pill{border-radius:999px}
.shadow.pill:hover::before{transform:translate(6px,6px)}
.shadow.pill:active::before{transform:translate(0,0)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

header{border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:28px;padding-bottom:28px}
header img{width:200px;height:auto;filter:var(--logo-filter)}
nav{display:flex;gap:36px;align-items:center;font-size:15px;font-weight:600}
nav a{text-decoration:none}

.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:64px;align-items:end;padding-top:112px;padding-bottom:96px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:28px}
.hero h1{margin:0;font-size:clamp(48px,7vw,84px);font-weight:800;line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.hero p{margin:0 0 28px;font-size:19px;line-height:1.55;color:var(--sub);text-wrap:pretty}
.actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.link{font-size:15px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--fg);padding-bottom:2px}

.work{padding-bottom:112px}
.work-head{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--fg);padding-top:24px;margin-bottom:40px}
.work-head h2{margin:0;font-size:36px;font-weight:700;letter-spacing:-.02em}
.work-head span,.num{font-size:12px;color:var(--sub)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.card{display:flex;flex-direction:column;gap:16px;text-decoration:none}
.card .shadow{display:block;border-radius:12px;--off:8px}
.card:hover .shadow::before{transform:translate(12px,12px)}
.thumb{aspect-ratio:4/3;border:2px solid var(--fg);border-radius:12px;background:repeating-linear-gradient(135deg,var(--ph1) 0 10px,var(--ph2) 10px 20px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb span{font-size:12px;color:var(--ph-txt);background:var(--ph-tag);padding:4px 8px;border-radius:3px}
.card-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-title{font-size:20px;font-weight:700}
.card-url{font-size:12px;align-self:flex-start;border-bottom:1px solid var(--fg)}

footer{background:var(--foot-bg);color:var(--foot-fg)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-top:72px;padding-bottom:72px}
footer .cta{font-size:clamp(32px,4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1}
footer .grad-text{background-image:var(--grad-alt)}
footer img{width:72px;height:72px;filter:var(--foot-logo-filter)}

@media (max-width:900px){
  .wrap{padding:0 24px}
  nav a:not(.btn){display:none}
  .hero{grid-template-columns:1fr;gap:32px;padding-top:64px;padding-bottom:64px}
  .grid{grid-template-columns:1fr}
}