:root{
  --ink:#0c0a09; --ink-2:#151210; --line:#2a2421; --text:#e9e3dc; --muted:#a39a91;
  --ember:#ff6a2b; --ember-soft:#ffb38a; --ash:#6d655e;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:17px/1.65 var(--sans)}
a{color:inherit}
a:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}

/* smoke: one slow, quiet layer behind the masthead */
.mast{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.mast::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:140%;
  background:radial-gradient(60% 50% at 18% 70%,rgba(255,106,43,.16),transparent 70%),
             radial-gradient(40% 40% at 70% 30%,rgba(255,179,138,.07),transparent 70%);
  filter:blur(8px);animation:drift 26s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{to{transform:translate3d(4%,-6%,0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.mast::before{animation:none}}

nav{display:flex;justify-content:space-between;align-items:center;padding:22px 0;position:relative;font:13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
nav .mark{display:flex;gap:10px;align-items:center;color:var(--text);text-decoration:none}
nav .mark svg,nav .mark img{width:22px;height:22px}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
nav ul a{text-decoration:none}
nav ul a:hover{color:var(--ember-soft)}

.hero{position:relative;padding:96px 0 88px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:56px;align-items:end}
h1{font:400 clamp(44px,6.6vw,84px)/.98 var(--serif);letter-spacing:-.02em;margin:0}
h1 em{font-style:italic;color:var(--ember)}
.lede{font-size:19px;color:var(--muted);margin:0;max-width:34ch;text-wrap:pretty}
.lede strong{color:var(--text);font-weight:500}

section{padding:72px 0;border-bottom:1px solid var(--line)}
.label{font:12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin:0 0 28px}

/* the works: an index, not a card grid */
.works{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.works li{border-bottom:1px solid var(--line)}
.works a,.works .row{display:grid;grid-template-columns:3.2rem minmax(0,1.1fr) minmax(0,2fr) auto;gap:24px;align-items:baseline;padding:26px 4px;text-decoration:none;transition:background .25s}
.works a:hover{background:var(--ink-2)}
.works a:hover .name{color:var(--ember-soft)}
.works a:hover .go{transform:translateX(4px);color:var(--ember)}
.n{font:13px var(--mono);color:var(--ash)}
.name{font:400 28px/1.15 var(--serif);transition:color .25s}
.desc{color:var(--muted);text-wrap:pretty}
.desc .kind{display:block;font:12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ash);margin-bottom:6px}
.go{font:14px var(--mono);color:var(--muted);transition:transform .25s,color .25s;white-space:nowrap}

.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
.two h2{font:400 34px/1.15 var(--serif);margin:0 0 18px}
.two p{color:var(--muted);margin:0 0 14px;text-wrap:pretty}
.two p strong{color:var(--text);font-weight:500}
code{font:15px var(--mono);color:var(--ember-soft)}

footer{padding:40px 0 56px;color:var(--ash);font:13px/1.6 var(--mono);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer a{text-decoration:none}
footer a:hover{color:var(--ember-soft)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:28px;padding:64px 0 56px}
  .two{grid-template-columns:1fr;gap:40px}
  .works a,.works .row{grid-template-columns:2.2rem minmax(0,1fr) auto;gap:6px 16px}
  .works .desc{grid-column:2 / 4}
  .works .go{grid-row:1;grid-column:3}
  nav ul{gap:14px}
}
@media (max-width:480px){nav ul li:not(:first-child):not(:last-child){display:none}.wrap{padding:0 20px}}