:root { --ink:#1c1c1c; --paper:#f5f2ec; --orange:#ff6534; --muted:#706d67; --line:#d8d2c8; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } a { color:inherit; text-decoration:none; } .site-header,.site-footer,.section-shell { width:min(1120px,calc(100% - 48px)); margin:auto; } .site-header { display:flex; align-items:center; justify-content:space-between; padding:28px 0; border-bottom:1px solid var(--line); } .brand { font-weight:900; letter-spacing:-.06em; font-size:1.2rem; } .brand span { color:var(--orange); } nav { display:flex; gap:28px; font-size:.9rem; color:var(--muted); } nav a:hover,.text-link:hover { color:var(--orange); } .header-link { border-bottom:1px solid var(--ink); font-size:.9rem; padding-bottom:3px; } .hero { padding:clamp(90px,15vw,180px) 0 110px; } .eyebrow { color:var(--orange); font-size:.72rem; font-weight:800; letter-spacing:.16em; margin:0 0 24px; } .hero h1 { font-size:clamp(4rem,10vw,8.8rem); line-height:.88; letter-spacing:-.09em; margin:0; max-width:900px; } .hero h1 em,.about-section h2 em { color:var(--orange); font-style:normal; } .hero-copy { font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.7; max-width:570px; color:#504d47; margin:42px 0 28px; } .hero-actions { display:flex; align-items:center; gap:25px; } .button { display:inline-flex; gap:18px; align-items:center; padding:15px 20px; font-weight:700; border-radius:999px; } .button-dark { color:var(--paper); background:var(--ink); } .button-orange { color:var(--paper); background:var(--orange); } .text-link { font-weight:700; border-bottom:1px solid currentColor; padding-bottom:4px; } .hero-note { margin-top:84px; font-size:.82rem; color:var(--muted); } .status-dot { display:inline-block; width:8px; height:8px; background:#3cb878; border-radius:50%; margin-right:7px; } .work-section { padding:80px 0; } .section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:28px; } .section-heading h2 { margin:0; font-size:clamp(2rem,4vw,3.5rem); letter-spacing:-.07em; } .project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .project-card { min-height:350px; padding:28px; display:flex; flex-direction:column; border-radius:3px; } .project-card h3 { font-size:2rem; line-height:1; letter-spacing:-.06em; margin:35px 0 14px; } .project-card p:not(.card-index) { line-height:1.6; color:#d0cbc1; } .project-card a { margin-top:auto; font-weight:700; } .card-index { font-size:.7rem; letter-spacing:.12em; font-weight:800; } .project-card-dark { background:var(--ink); color:var(--paper); } .project-card-orange { background:var(--orange); color:var(--paper); } .project-card-orange p:not(.card-index) { color:#ffe3d9; } .project-card-light { background:#e2ddd3; } .notes-section { padding:120px 0; } .note-list { border-top:1px solid var(--line); } .note-row { display:grid; grid-template-columns:60px 1fr 80px; gap:20px; align-items:center; padding:24px 0; border-bottom:1px solid var(--line); } .note-row span,.note-row time { color:var(--muted); font-size:.8rem; } .note-row strong { font-size:clamp(1.1rem,2vw,1.6rem); letter-spacing:-.04em; } .note-row:hover strong { color:var(--orange); } .about-section { border-top:1px solid var(--line); padding:110px 0; display:grid; grid-template-columns:1.1fr .9fr; gap:90px; } .about-section h2 { font-size:clamp(2.8rem,6vw,5.8rem); line-height:.9; letter-spacing:-.08em; margin:0; } .about-copy { max-width:430px; color:#504d47; line-height:1.75; } .about-copy .button { margin-top:18px; } .site-footer { border-top:1px solid var(--line); padding:24px 0 34px; display:flex; justify-content:space-between; color:var(--muted); font-size:.75rem; } @media (max-width:720px) { .site-header nav { display:none; } .site-header,.site-footer,.section-shell { width:min(100% - 32px,1120px); } .hero { padding-top:90px; } .project-grid,.about-section { grid-template-columns:1fr; } .project-card { min-height:270px; } .section-heading { display:block; } .section-heading h2 { margin-top:12px; } .note-row { grid-template-columns:35px 1fr; } .note-row time { grid-column:2; } .site-footer { display:block; } .site-footer span { display:block; margin:5px 0; } }