:root {
  color-scheme: dark;
  --bg: #0d0e0d;
  --surface: #191b18;
  --line: #31342e;
  --text: #f4f1e9;
  --muted: #a8aaa0;
  --accent: #f2b84b;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.topbar, main, footer { width: min(100% - 48px, 1100px); margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.signature, .contact, a { color: inherit; text-decoration: none; }
.signature { font: 800 .8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
.contact { color: var(--muted); font-size: .85rem; }
.contact:hover, a:hover { color: var(--accent); }
.intro { padding: clamp(80px, 15vw, 180px) 0 clamp(80px, 12vw, 140px); }
.eyebrow { margin: 0; color: var(--accent); font: 700 .72rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 780px; margin: 18px 0 20px; font-size: clamp(2.8rem, 8vw, 6.7rem); line-height: .98; letter-spacing: -.05em; }
h1 em { color: var(--accent); font-style: normal; }
.lede { margin: 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.25rem); }
.projects { border-top: 1px solid var(--line); padding-bottom: 100px; }
.section-heading { display: flex; justify-content: space-between; padding: 22px 0; }
.count { color: var(--muted); font: .75rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.project-card { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); min-height: 430px; background: var(--surface); border: 1px solid var(--line); }
.project-art { display: grid; place-items: center; padding: 48px; background: #11120f; }
.project-art img { width: min(100%, 390px); aspect-ratio: 1; border-radius: 22%; box-shadow: 0 28px 70px #000a; }
.project-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 68px); }
.project-label { margin: 0 0 10px; color: var(--accent); font: .72rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
h2 { margin: 0 0 18px; font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1; letter-spacing: -.05em; }
.project-copy > p:not(.project-label) { max-width: 36ch; margin: 0; color: var(--muted); font-size: 1.05rem; }
.project-links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 34px; font-size: .86rem; }
.primary-link { color: var(--accent); font-weight: 700; }
.primary-link span { display: inline-block; margin-left: 5px; transition: transform .2s; }
.primary-link:hover span { transform: translate(3px, -3px); }
footer { display: flex; justify-content: space-between; padding: 22px 0 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
@media (max-width: 680px) { .topbar, main, footer { width: min(100% - 28px, 1100px); } .topbar { padding: 22px 0; } .project-card { grid-template-columns: 1fr; } .project-art { padding: 32px; } .project-art img { max-width: 270px; } .intro { padding-top: 84px; } }