:root { --ink:#080808; --paper:#fff; --display:'Barlow Condensed',Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif; --body:'DM Sans',Arial,sans-serif; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); }
.site-header { height:130px; padding:0 3.35vw; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #ececec; border-bottom:1px solid #f0f0f0; }
.wordmark { color:var(--ink); text-decoration:none; font:800 32px/.82 var(--display); letter-spacing:-.7px; }
.main-nav { display:flex; gap:45px; }.main-nav a { padding:8px 0; color:var(--ink); text-decoration:none; font-size:16px; }.main-nav .active { border-bottom:1px solid; }.menu-toggle { display:none; }
.page-content { min-height:calc(100vh - 130px); padding:clamp(110px,12vw,200px) 15vw; }.page-content h1 { margin:0 0 22px; font:900 clamp(62px,8vw,124px)/.78 var(--display); letter-spacing:-.02em; text-transform:uppercase; }.about-content, .contact-content { display:grid; grid-template-columns:minmax(390px,.88fr) minmax(440px,1.05fr); gap:10vw; align-items:start; padding:80px 8vw 160px; }.about-text { padding-top:0; }.about-copy { max-width:690px; font-size:18px; line-height:1.62; }.about-copy p { margin:0; }.about-copy p + p { margin-top:28px; }.about-portrait, .contact-portrait { display:block; width:100%; height:min(54vw,930px); object-fit:cover; object-position:center center; }.contact-text { padding-top:0; }.contact-list { font-size:27px; line-height:1.45; }.contact-list p { display:flex; align-items:baseline; gap:10px; margin:0 0 14px; white-space:nowrap; }.contact-list strong { display:inline; min-width:0; }.contact-list a { display:inline-block; padding:6px 0; color:inherit; text-decoration:none; }.contact-form { display:grid; gap:16px; max-width:540px; margin-top:40px; font:600 12px var(--body); letter-spacing:.06em; text-transform:uppercase; }.contact-form label { display:grid; gap:7px; }.contact-form input, .contact-form textarea { width:100%; padding:11px 0; border:0; border-bottom:1px solid #111; border-radius:0; outline:0; background:transparent; color:var(--ink); font:400 16px var(--body); letter-spacing:0; text-transform:none; resize:vertical; }.contact-form input:focus, .contact-form textarea:focus { border-bottom-width:2px; }.contact-form button { justify-self:start; margin-top:8px; padding:0; border:0; border-bottom:1px solid; background:none; color:var(--ink); cursor:pointer; font:700 14px var(--body); letter-spacing:.04em; text-transform:uppercase; }.contact-form button span { margin-left:12px; font-size:18px; }
@media (max-width:850px) { .about-content, .contact-content { grid-template-columns:1fr; gap:55px; }.about-portrait, .contact-portrait { max-width:680px; height:auto; }.about-copy { max-width:650px; }.contact-text { padding-top:0; } }
@media (max-width:650px) { .site-header { height:90px; padding:0 6vw; }.wordmark { font-size:29px; }.menu-toggle { display:block; border:0; background:transparent; font:600 11px var(--body); text-transform:uppercase; }.main-nav { display:none; position:absolute; z-index:2; top:90px; left:0; right:0; justify-content:space-between; padding:22px 6vw; background:#fff; border-top:1px solid #eee; }.page-content { min-height:calc(100vh - 90px); padding:90px 7vw; }.about-content { padding:76px 7vw 110px; }.page-content h1 { margin-bottom:26px; font-size:18vw; }.about-copy { font-size:16px; }.contact-list { font-size:18px; }.contact-list strong { min-width:105px; }.contact-form { margin-top:30px; } }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px 3.35vw; border-top:1px solid #dedede; background:#fff; font:600 13px var(--body); letter-spacing:.04em; text-transform:uppercase; }.site-footer nav { display:flex; gap:28px; }.site-footer a { display:inline-flex; align-items:center; gap:7px; color:#000; text-decoration:none; }.site-footer a::before { display:inline-grid; place-items:center; width:20px; height:20px; color:#000; font-size:19px; font-weight:700; line-height:1; }.site-footer a[href*="instagram"]::before { content:''; width:17px; height:17px; border:2px solid #000; border-radius:5px; background:radial-gradient(circle at center,transparent 0 3px,#000 3.2px 4.5px,transparent 4.7px); }.site-footer a[href*="tiktok"]::before { content:'♪'; }.site-footer a[href*="youtube"]::before { content:'▶'; font-size:15px; }.site-footer a:hover { text-decoration:underline; text-underline-offset:4px; }@media (max-width:650px) { .site-footer { display:block; padding:28px 6vw; }.site-footer nav { margin-top:18px; gap:20px; } }