:root { --ink:#202219; --paper:#e9e5da; --line:rgba(32,34,25,.28); --acid:#c8ff32; --blue:#7fa5ff; --pink:#ffa7bd; --mono:'DM Mono', monospace; --sans:'DM Sans', sans-serif; --display:'Instrument Serif', Georgia, serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); } a { color:inherit; } .grain { position:fixed; inset:0; opacity:.32; pointer-events:none; z-index:4; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.site-header { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 3.5vw; border-bottom:1px solid var(--line); position:relative; z-index:5; } .wordmark { font-family:var(--mono); font-weight:500; text-decoration:none; letter-spacing:-.08em; font-size:1.45rem; } .wordmark span { font-size:.45em; vertical-align:top; margin-left:3px; } nav { display:flex; gap:2rem; } nav a, .email-link { font: .7rem var(--mono); letter-spacing:.04em; text-decoration:none; text-transform:uppercase; } nav a:hover, .email-link:hover { text-decoration:underline; text-underline-offset:4px; } .email-link span { font-size:1.1rem; }
.hero { min-height:calc(100vh - 72px); padding:4.5vw 3.5vw 2.3vw; display:flex; flex-direction:column; justify-content:space-between; } .eyebrow, .section-number, .project-label, .project-index, .project-meta, .hero-foot, time { font: .67rem/1.4 var(--mono); letter-spacing:.055em; } .eyebrow span { color:#dd250f; font-size:.8rem; margin:0 .4rem; } .hero-copy { display:grid; grid-template-columns:minmax(0, 1fr) 255px; align-items:end; margin:5vh 0; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(5rem, 14.6vw, 15rem); font-weight:500; line-height:.76; letter-spacing:-.09em; margin:0; } em { font-family:var(--display); font-weight:400; letter-spacing:-.06em; } .hero-side { padding-bottom:.6rem; } .hero-side p { font-size:1.1rem; line-height:1.25; max-width:180px; } .circle-link { display:grid; place-items:center; width:52px; height:52px; border:1px solid var(--ink); border-radius:50%; text-decoration:none; font-size:1.4rem; transition:.2s ease; } .circle-link:hover { background:var(--ink); color:var(--paper); transform:rotate(-45deg); } .hero-foot { border-top:1px solid var(--line); padding-top:12px; display:flex; justify-content:space-between; } .blink { animation:blink 1.35s step-end infinite; } @keyframes blink { 50% { opacity:.25; } }
.marquee { overflow:hidden; background:var(--ink); color:var(--paper); padding:.8rem 0; white-space:nowrap; font:1rem var(--mono); letter-spacing:.02em; } .marquee div { animation:slide 26s linear infinite; width:max-content; } .marquee i { font-style:normal; color:var(--acid); margin:0 .7rem; } @keyframes slide { to { transform:translateX(-33.33%); } }
.section { padding:8.5rem 3.5vw; border-bottom:1px solid var(--line); } .section-intro { display:grid; grid-template-columns:25% 1fr; align-items:start; margin-bottom:5rem; } h2 { font-size:clamp(3.2rem, 7.4vw, 8rem); line-height:.84; letter-spacing:-.075em; font-weight:500; margin:0; } .project-list { display:grid; gap:1rem; } .project { min-height:355px; padding:1.25rem; display:grid; grid-template-columns:8% 39% 1fr; grid-template-rows:auto 1fr auto; position:relative; overflow:hidden; } .project::after { content:'↗'; position:absolute; right:1.2rem; top:.45rem; font:2rem var(--display); transition:transform .2s; } .project:hover::after { transform:translate(3px,-3px); } .project-lime { background:var(--acid); } .project-orange { background:#ff8b45; } .project-blue { background:var(--blue); } .project-pink { background:var(--pink); } .project-name { grid-column:2; } .project-name h3 { font-size:clamp(3rem, 6.3vw, 6.7rem); line-height:.72; letter-spacing:-.08em; font-weight:500; margin:1.1rem 0 0; } .project-description { grid-column:3; grid-row:1; max-width:270px; font-size:1.05rem; line-height:1.28; margin-right:2rem; } .project-meta { grid-column:2; grid-row:3; align-self:end; display:flex; flex-wrap:wrap; gap:.65rem; } .project-action { grid-column:3; grid-row:3; align-self:end; display:flex; gap:1rem; flex-wrap:wrap; } .project-action a, .project-action span { font:.68rem var(--mono); text-transform:uppercase; text-underline-offset:4px; }
.archive { margin-top:1rem; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); } .archive summary { cursor:pointer; padding:1.1rem 0; display:flex; justify-content:space-between; font: .75rem var(--mono); text-transform:uppercase; list-style:none; } .archive summary::-webkit-details-marker { display:none; } .archive[open] summary span:last-child { transform:rotate(45deg); } .archive-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); } .archive-grid p { margin:0; padding:1.1rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; gap:.4rem; } .archive-grid p:nth-child(2n) { border-right:0; } .archive-grid b { font-size:1.1rem; } .archive-grid span { font-size:.83rem; line-height:1.3; } .archive-grid small { font: .62rem var(--mono); }
.story { background:#272922; color:#f0eddf; } .timeline { max-width:920px; margin-left:auto; } .timeline article { display:grid; grid-template-columns:150px 1fr; gap:2rem; padding:1.8rem 0; border-top:1px solid rgba(240,237,223,.3); } .timeline article:last-child { border-bottom:1px solid rgba(240,237,223,.3); } .timeline h3 { font-size:clamp(1.55rem, 3vw, 3rem); letter-spacing:-.06em; margin-bottom:.55rem; } .timeline h3 span { font-family:var(--display); font-weight:400; } .timeline p { max-width:480px; line-height:1.45; color:#c8c7bd; margin:0; }
.credentials { background:#d1d0ff; } .credentials-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--ink); border-left:1px solid var(--ink); } .credentials-grid article { min-height:215px; padding:1.2rem; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); display:flex; flex-direction:column; } .credential-type { font:.65rem var(--mono); letter-spacing:.05em; margin-bottom:auto; } .credentials-grid h3 { font-size:clamp(1.5rem,3vw,3rem); letter-spacing:-.065em; margin:2.8rem 0 .55rem; line-height:.9; } .credentials-grid article > p:last-child { font-size:.85rem; line-height:1.35; margin:0; }
.notes { background:#e4e0d5; } .notes-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:5rem; } .notes-heading h2 { text-align:right; } .love-grid { border-top:1px solid var(--ink); display:grid; grid-template-columns:repeat(4,1fr); } .love-grid article { padding:1.2rem; min-height:250px; border-right:1px solid var(--ink); display:flex; flex-direction:column; } .love-grid article:last-child { border-right:0; } .love-grid span { font-size:2.25rem; } .love-grid h3 { font-size:1.55rem; letter-spacing:-.06em; margin:2.8rem 0 .5rem; } .love-grid p { font-size:.9rem; line-height:1.35; margin-bottom:0; } .writing-link { background:var(--ink); color:var(--paper); margin-top:5rem; padding:1.4rem; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; text-decoration:none; font:.75rem var(--mono); text-transform:uppercase; transition:background .2s,color .2s; } .writing-link b,.writing-link small { display:block; } .writing-link b { font-size:clamp(1rem,2vw,1.65rem); letter-spacing:-.05em; text-transform:none; } .writing-link small { color:#c4c0b5; font:.62rem/1.45 var(--mono); margin-top:.4rem; max-width:390px; } .writing-link:hover { background:#f0d94d; color:var(--ink); } .writing-link:hover small { color:var(--ink); } .writing-link:hover > span:last-child { text-decoration:underline; }
footer { background:#dcf04b; padding:5vw 3.5vw 1.8rem; min-height:54vh; display:flex; flex-direction:column; justify-content:space-between; } footer > p { font-size:clamp(4.2rem, 11vw, 12rem); line-height:.78; letter-spacing:-.09em; margin:0; } footer div { border-top:1px solid var(--ink); padding-top:1rem; display:flex; gap:1rem; justify-content:space-between; font:.68rem var(--mono); } footer a { text-decoration:none; } footer a:hover { text-decoration:underline; text-underline-offset:4px; }
@media (max-width:700px) { .site-header { height:60px; padding:0 1.25rem; } nav { display:none; } .hero { min-height:calc(100svh - 60px); padding:2rem 1.25rem 1.2rem; } .hero-copy { grid-template-columns:1fr; gap:3rem; margin:6vh 0; } h1 { font-size:22vw; } .hero-side { display:flex; justify-content:space-between; align-items:end; } .hero-side p { margin:0; max-width:190px; } .hero-foot { gap:1rem; font-size:.56rem; } .section { padding:5rem 1.25rem; } .section-intro { display:block; margin-bottom:3rem; } .section-number { margin-bottom:1rem; } .project { min-height:430px; grid-template-columns:1fr; grid-template-rows:auto auto 1fr auto auto; } .project-index { grid-column:1; } .project-name { grid-column:1; grid-row:2; margin-top:2.3rem; } .project-name h3 { font-size:18vw; } .project-description { grid-column:1; grid-row:3; align-self:end; font-size:1rem; margin-bottom:2rem; } .project-meta { grid-column:1; grid-row:4; } .project-action { grid-column:1; grid-row:5; margin-top:.8rem; } .archive-grid { grid-template-columns:1fr; } .archive-grid p { border-right:0; } .proof { grid-template-columns:1fr; } .proof-label { padding:4rem 1.25rem; min-height:400px; border-right:0; border-bottom:1px solid rgba(255,248,237,.5); } .proof-stats article { padding:1.5rem 1.25rem; } .proof-stats strong { font-size:16vw; } .timeline { margin:0; } .timeline article { grid-template-columns:1fr; gap:.6rem; } .credentials-grid { grid-template-columns:1fr; } .credentials-grid article { min-height:190px; } .notes-heading { display:block; } .notes-heading h2 { text-align:left; } .love-grid { grid-template-columns:repeat(2,1fr); } .love-grid article { min-height:210px; border-bottom:1px solid var(--ink); } .love-grid article:nth-child(2n) { border-right:0; } .love-grid h3 { margin-top:1.5rem; } footer { min-height:48svh; padding:3.5rem 1.25rem 1.2rem; } footer > p { font-size:16vw; } footer div { flex-wrap:wrap; gap:.7rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }

.project-detail { grid-column:3; grid-row:2; align-self:end; border-top:1px solid currentColor; padding-top:.55rem; font:.65rem var(--mono); }
.project-detail summary { cursor:pointer; display:flex; justify-content:space-between; list-style:none; }
.project-detail summary::-webkit-details-marker { display:none; }
.project-detail[open] summary span { transform:rotate(45deg); }
.project-detail div { display:grid; grid-template-columns:repeat(3, 1fr); gap:.6rem; padding-top:.7rem; }
.project-detail p { margin:0; line-height:1.3; }
.project-detail b { display:block; font-size:1.2rem; letter-spacing:-.06em; }
.origin-note { margin:1rem 0 0; background:#25271f; color:var(--paper); padding:1.2rem; display:flex; align-items:baseline; gap:1.25rem; }
.origin-note span { color:var(--acid); font:.67rem var(--mono); letter-spacing:.05em; white-space:nowrap; }
.origin-note strong { font-size:clamp(1.05rem, 2.2vw, 1.7rem); font-weight:500; line-height:1.05; letter-spacing:-.055em; }
@media (max-width:700px) { .project-detail { grid-column:1; grid-row:3; align-self:end; margin-bottom:5.5rem; } .project-detail div { grid-template-columns:repeat(3, 1fr); } .origin-note { align-items:flex-start; flex-direction:column; gap:.55rem; } }

.archive-grid a { width:max-content; font:.62rem var(--mono); text-underline-offset:3px; }

.hero-highlights { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4, 1fr); }
.hero-highlight { min-height:102px; padding:1rem 1.15rem 1rem 0; border-right:1px solid var(--line); display:grid; grid-template-columns:1fr auto; align-content:space-between; gap:.8rem; text-decoration:none; transition:background .2s, padding .2s; }
.hero-highlight:nth-child(n+2) { padding-left:1.15rem; }
.hero-highlight:last-child { border-right:0; }
.hero-highlight:hover { background:rgba(32,34,25,.08); }
.hero-highlight span { grid-column:1 / -1; font:.62rem var(--mono); letter-spacing:.06em; }
.hero-highlight strong { font-size:clamp(.95rem, 1.45vw, 1.3rem); line-height:1; letter-spacing:-.055em; font-weight:500; }
.hero-highlight i { align-self:end; font:1.25rem var(--display); font-style:normal; }
@media (max-width:700px) { .hero { min-height:auto; } .hero-highlights { grid-template-columns:1fr; } .hero-highlight, .hero-highlight:nth-child(n+2) { min-height:78px; padding:1rem 0; border-right:0; border-bottom:1px solid var(--line); } .hero-highlight:last-child { border-bottom:0; } .hero-highlight span { grid-column:auto; } }