@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --ink:#14352b; --paper:#f4f0e8; --clay:#d66f4c; --line:rgba(20,53,43,.22); --muted:#5e6b63; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',Arial,sans-serif; font-size:16px; line-height:1.55; } a { color:inherit; } .skip { position:absolute; left:-999px; } .skip:focus { left:1rem; top:1rem; z-index:10; background:#fff; padding:.5rem; }
.nav { height:76px; padding:0 clamp(1.3rem,5vw,5.5rem); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); } .wordmark { text-decoration:none; letter-spacing:.1em; font-weight:700; font-size:1.05rem; } .wordmark span { color:var(--clay); } nav { display:flex; gap:clamp(.8rem,2.8vw,2.2rem); } nav a { text-decoration:none; font-family:'DM Mono',monospace; text-transform:uppercase; font-size:.68rem; letter-spacing:.08em; }
.hero { min-height:calc(100vh - 76px); padding:clamp(3rem,9vw,9rem) clamp(1.3rem,8vw,9rem) 3rem; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; } .eyebrow,.kicker { font: .7rem 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); } .hero h1 { font:500 clamp(4.7rem,13vw,12.5rem)/.79 'Playfair Display',serif; letter-spacing:-.075em; margin:2.4rem 0; position:relative; z-index:1; } .hero h1 em { color:var(--clay); font-weight:500; } .hero-bottom { display:flex; gap:2rem; align-items:end; justify-content:space-between; max-width:57rem; position:relative; z-index:1; } .intro { max-width:27rem; font-size:1.17rem; margin:0; } .text-link { white-space:nowrap; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:.15rem; } .orb { width:min(31vw,430px); aspect-ratio:1; padding:10px; border-radius:50%; position:absolute; right:9%; top:25%; overflow:hidden; background:radial-gradient(circle at 31% 22%,#ffd8a1 0 3%,#eb9466 22%,#d66f4c 62%,#a8423a 100%); box-shadow:0 20px 45px rgba(20,53,43,.19), inset 0 0 0 1px rgba(255,255,255,.33); } .orb img { width:100%; height:100%; display:block; border-radius:50%; object-fit:cover; object-position:50% 42%; }
.section { padding:clamp(4.5rem,10vw,10rem) clamp(1.3rem,8vw,9rem); border-top:1px solid var(--line); } .two-col { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2.5rem,9vw,10rem); margin-top:3.5rem; } h2 { margin:0; font:500 clamp(2.6rem,5vw,5.4rem)/.98 'Playfair Display',serif; letter-spacing:-.055em; } p { margin:0 0 1.35rem; } .large-copy { font-size:1.35rem; line-height:1.48; } strong { font-weight:500; background:linear-gradient(transparent 68%,#e6c76f 0); } .ink { background:var(--ink); color:var(--paper); } .ink .kicker { color:#b9c9be; } .work h2 { margin-top:3.5rem; } .work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:4rem; border-top:1px solid rgba(244,240,232,.3); } .work-grid article { padding:1.5rem 2rem 1.4rem 0; margin-right:2rem; min-height:260px; border-right:1px solid rgba(244,240,232,.3); display:flex; flex-direction:column; } .work-grid article:last-child { border:0; } .number { font: .7rem 'DM Mono',monospace; color:#b9c9be; } h3 { font:500 1.65rem/1.1 'Playfair Display',serif; margin:.9rem 0; } .work-grid article > a { margin-top:auto; font: .7rem 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; text-decoration:none; color:#f0bc80; } .work-grid article p a { color:inherit; text-underline-offset:.18em; }
dl { margin:2.5rem 0 0; } dl div { display:grid; grid-template-columns:8rem 1fr; gap:1rem; padding:1rem 0; border-top:1px solid var(--line); } dt { font:.7rem 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); } dd { margin:0; } .notes { background:#e8d9bc; } blockquote { max-width:58rem; margin:3.5rem 0 1.8rem; font:500 clamp(2.25rem,4.5vw,4.5rem)/1.05 'Playfair Display',serif; letter-spacing:-.045em; } .note-caption { color:var(--muted); max-width:35rem; } .connect { background:var(--clay); } .connect h2 { margin:3.5rem 0 1.6rem; max-width:55rem; } .connect > p { font-size:1.25rem; max-width:38rem; } .connect > p a { text-underline-offset:.2em; } .socials { display:flex; gap:1.8rem; margin-top:3.6rem; font:.72rem 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; } footer { padding:1.5rem clamp(1.3rem,8vw,9rem); display:flex; justify-content:space-between; gap:1rem; font:.65rem 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:700px) { .nav { height:auto; padding-block:1.15rem; } nav { gap:.8rem; } nav a { font-size:.6rem; } .hero { min-height:630px; } .orb { width:270px; right:-50px; top:21%; } .hero h1 { font-size:5.5rem; } .hero-bottom,.two-col { display:block; } .hero-bottom .text-link { display:inline-block; margin-top:1rem; } .two-col { margin-top:2.2rem; } .two-col > div { margin-top:2rem; } .work-grid { grid-template-columns:1fr; margin-top:2.5rem; } .work-grid article { border-right:0; border-bottom:1px solid rgba(244,240,232,.3); margin:0; padding:1.7rem 0; min-height:210px; } dl div { grid-template-columns:1fr; gap:.25rem; } footer { flex-direction:column; } }