:root { --ink:#20201e; --paper:#f7f6f2; --line:#d9d7cf; --accent:#20201e; --muted:#6b6a64; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; font-size:16px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.site-header, main, footer { max-width:1240px; margin:auto; padding-left:32px; padding-right:32px; }
.site-header { height:86px; display:flex; align-items:center; justify-content:space-between; }
.wordmark { font-size:22px; font-weight:600; letter-spacing:-1.4px; }
.wordmark span { color:inherit; }.wordmark i { color:inherit; font-style:normal; font-size:13px; margin-left:2px; vertical-align:top; }
nav { display:flex; gap:28px; font-size:14px; color:var(--muted); } nav a:hover, footer a:hover { color:var(--ink); }
.header-email { font-size:14px; border-bottom:1px solid var(--ink); padding-bottom:2px; }.header-email span,.arrow { color:var(--accent); }
.intro { min-height:calc(100vh - 86px); display:flex; flex-direction:column; justify-content:center; padding:92px 0 110px; }
.eyebrow { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0; }.eyebrow span { margin:0 7px; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-weight:500; letter-spacing:-.055em; }
h1 { font-size:clamp(58px,9vw,135px); line-height:.91; margin:31px 0 64px; max-width:900px; } em { font-family:"Instrument Serif",serif; font-weight:400; letter-spacing:-.04em; }
.intro-bottom { width:100%; display:flex; justify-content:space-between; align-items:end; gap:32px; }.intro-bottom p { max-width:420px; margin:0; font-size:18px; line-height:1.5; }.text-link { border-bottom:1px solid var(--ink); font-size:14px; padding-bottom:5px; white-space:nowrap; }.text-link span { margin-left:8px; }
.section { padding:116px 0; border-top:1px solid var(--line); }.section-heading { display:grid; grid-template-columns:1fr 3fr; gap:32px; margin-bottom:50px; }.section-heading h2 { margin:0; font-size:clamp(38px,5vw,66px); line-height:.98; }
.work-list { border-top:1px solid var(--line); }.work-item { display:grid; grid-template-columns:1fr 3fr auto; gap:32px; padding:30px 0; border-bottom:1px solid var(--line); transition:padding .25s ease,color .25s ease; }.work-item:hover { padding-left:14px; color:var(--ink); }.item-number,.item-kicker { font-family:"DM Mono",monospace; font-size:11px; text-transform:uppercase; color:var(--muted); }.item-kicker { margin-bottom:8px; }.work-item h3 { font-size:37px; margin:0 0 8px; line-height:1; }.work-item div > p:last-child { color:var(--muted); max-width:550px; margin:0; }.arrow { font-size:22px; }
.about { background:#ebe9e2; box-shadow:0 0 0 100vmax #ebe9e2; clip-path:inset(0 -100vmax); }.about-grid { display:grid; grid-template-columns:3fr 1fr; gap:78px; padding:28px 0 74px; }.about h2 { font-size:clamp(42px,5.5vw,78px); line-height:.98; margin:0; }.about-copy { color:var(--muted); padding-top:9px; }.about-copy p { margin-bottom:22px; }.credentials { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; list-style:none; margin:0; padding:25px 0 0; border-top:1px solid #cfcdc6; }.credentials li { display:flex; flex-direction:column; gap:8px; }.credentials span { font-family:"DM Mono",monospace; text-transform:uppercase; font-size:10px; color:var(--muted); }.credentials strong { font-size:14px; font-weight:500; }
.collaboration-intro { margin:-12px 0 42px 25%; max-width:510px; color:var(--muted); font-size:18px; }.brand-list { display:grid; grid-template-columns:repeat(3,1fr); list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }.brand-list li { padding:26px 0; border-bottom:1px solid var(--line); font-family:"Instrument Serif",serif; font-size:30px; letter-spacing:-.03em; }.brand-list li:nth-child(3n+2) { padding-left:28px; border-left:1px solid var(--line); border-right:1px solid var(--line); }.brand-list li:nth-child(3n+3) { padding-left:28px; }
.link-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }.link-grid a { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px; padding:23px 0; border-bottom:1px solid var(--line); font-size:20px; }.link-grid a:nth-child(odd) { padding-right:28px; border-right:1px solid var(--line); }.link-grid a:nth-child(even) { padding-left:28px; }.link-grid a:hover { color:var(--accent); }.link-grid small { font-size:13px; color:var(--muted); }.link-grid b { font-weight:400; color:var(--accent); }
.contact { border-top:1px solid var(--line); padding:116px 0 132px; }.contact h2 { font-size:clamp(52px,7.5vw,105px); line-height:.92; margin:28px 0 52px; }.email-link { font-size:clamp(19px,2.3vw,30px); border-bottom:1px solid var(--ink); padding-bottom:7px; }.email-link span { color:var(--accent); }
footer { border-top:1px solid var(--line); min-height:94px; display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted); } footer .wordmark { color:var(--ink); } footer p { margin:0; }
@media (max-width:700px) { .site-header,main,footer { padding-left:20px; padding-right:20px; }.site-header { height:72px; } nav { display:none; }.intro { min-height:calc(100vh - 72px); padding:70px 0; }.intro-bottom { display:block; }.intro-bottom p { font-size:16px; margin-bottom:30px; }.section { padding:78px 0; }.section-heading { display:block; margin-bottom:37px; }.section-heading .eyebrow { margin-bottom:20px; }.work-item { grid-template-columns:36px 1fr auto; gap:10px; }.work-item h3 { font-size:30px; }.work-item div > p:last-child { font-size:14px; }.about-grid { display:block; padding:22px 0 48px; }.about-copy { padding-top:28px; }.credentials { grid-template-columns:repeat(2,1fr); row-gap:26px; }.collaboration-intro { margin:-10px 0 32px; font-size:16px; }.brand-list { grid-template-columns:repeat(2,1fr); }.brand-list li { padding:19px 0; font-size:25px; }.brand-list li:nth-child(n) { padding-left:0; border-left:0; border-right:0; }.brand-list li:nth-child(even) { padding-left:18px; border-left:1px solid var(--line); }.link-grid { display:block; }.link-grid a:nth-child(n) { padding:20px 0; border-right:0; }.contact { padding:78px 0 92px; } footer { min-height:122px; flex-wrap:wrap; gap:10px; padding-top:25px; padding-bottom:25px; } footer p { order:3; width:100%; } }