@font-face{font-family:Inter;src:url(inter.f416e898a4fd.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Mono;src:url(mono.a48c35872f90.woff2) format('woff2');font-weight:100 800;font-display:swap}
:root{--paper:#0a0a09;--ink:#ecebe6;--muted:#8b8c86;--line:#262624;--rule:#4a4a47;--frame:#2b2b29;--screen:#141413;--green:#7bb38a}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:4px}
img{display:block;max-width:100%}
.mono,.eyebrow{font-family:Mono,monospace;font-size:11px;letter-spacing:.02em}
.shell{width:min(1360px,calc(100% - 64px));margin-inline:auto}
.skip{position:fixed;top:-80px;left:16px;z-index:100;padding:14px;background:var(--ink);color:var(--paper)}
.skip:focus{top:10px}

.header{display:flex;justify-content:space-between;align-items:center;padding:28px 0}
.brand{display:flex;align-items:center;gap:5px;text-decoration:none}
.brand img{width:92px;height:auto}
.brand span{font-size:23px;letter-spacing:-1.2px;padding-top:2px}
.header-mail{font-size:14px;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.header-mail:hover{border-color:var(--ink)}

.top{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:72px 0 28px;border-bottom:1px solid var(--rule)}
.top h1{grid-column:1/6;margin:0;font-size:15px;font-weight:400;line-height:1.55;color:var(--muted)}
.top h1 strong{color:var(--ink);font-weight:500}
.top .count{grid-column:10/13;text-align:right;align-self:end;color:var(--muted)}

.work{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.list{grid-column:1/9;list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:44px 56px 1fr auto;gap:0 20px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}
.row .n{color:var(--muted);align-self:start;padding-top:14px}
.row .icon{width:56px;height:56px;border-radius:13px;align-self:start;margin-top:4px}
.row h2{margin:0;font-size:clamp(34px,4.6vw,68px);font-weight:600;letter-spacing:-.045em;line-height:1;transition:color .15s}
.row .kind{display:block;margin-top:12px;color:var(--muted)}
.kind b{font-weight:500;margin-left:10px;padding:3px 7px;border:1px solid var(--line);border-radius:99px;color:var(--muted);white-space:nowrap}
.kind b.live{border-color:var(--green);color:var(--green)}
.row p{margin:10px 0 0;max-width:520px;font-size:15px;line-height:1.55;color:var(--muted)}
.row .site{align-self:start;padding-top:14px;font-size:14px;text-decoration:none;white-space:nowrap}
.row .site:hover{text-decoration:underline}
.row .thumb{display:none}
.list:hover .row h2{color:var(--rule)}
.list:hover .row:hover h2,.row.on h2{color:var(--ink)}

.preview{grid-column:9/13}
.preview-inner{position:sticky;top:24px;padding:26px 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.phone{box-sizing:content-box;width:min(calc(100% - 14px),266px);aspect-ratio:300/640;border:7px solid var(--frame);border-radius:38px;overflow:hidden;background:var(--screen);position:relative}
.phone img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .2s}
.phone img.on{opacity:1}
.preview .cap{color:var(--muted);text-align:center;min-height:1.4em}

.about{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:120px 0 40px}
.about h2,.contact h2{grid-column:1/4;margin:0;font-weight:500;font-size:15px}
.about div{grid-column:5/11;font-size:clamp(20px,2vw,26px);line-height:1.4;letter-spacing:-.015em}
.about div p{margin:0 0 .8em}
.about div p.small{font-size:15px;line-height:1.6;color:var(--muted);letter-spacing:0}
.contact{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:40px 0 120px}
.contact a{grid-column:5/13;font-size:clamp(36px,6vw,92px);font-weight:600;letter-spacing:-.05em;text-decoration:none;line-height:1;overflow-wrap:anywhere}
.contact a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}

.footer{border-top:1px solid var(--rule);padding:22px 0 40px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:13px;line-height:1.6}
.footer nav{display:flex;gap:22px;flex-wrap:wrap}
.footer nav a{text-decoration:none}
.footer nav a:hover,.footer nav button:hover{color:var(--ink)}

dialog{padding:0;border:1px solid var(--line);border-radius:14px;background:#161615;color:var(--ink);width:min(730px,calc(100% - 32px));max-height:90dvh}
dialog::backdrop{background:#000000c4}
.dialog-close{position:absolute;right:14px;top:14px;width:38px;height:38px;border:1px solid var(--rule);border-radius:50%;font-size:24px;line-height:1}
.privacy-copy{padding:55px}
.privacy-copy .eyebrow{color:var(--muted);margin:0 0 18px}
.privacy-copy h2{font-size:32px;letter-spacing:-.04em;margin:0 0 20px}
.privacy-copy p{font-size:14px;line-height:1.8;color:#b9b9b3}
.privacy-copy p.mono{color:var(--muted);font-size:11px}

.policy-page{max-width:800px;padding-bottom:90px}
.policy-page .eyebrow{color:var(--muted);margin:48px 0 18px}
.policy-page h1{font-size:clamp(36px,7vw,58px);font-weight:600;letter-spacing:-.045em;line-height:1.1;margin:0}
.policy-page h2{font-size:24px;font-weight:600;margin:38px 0 12px;letter-spacing:-.03em}
.policy-page p{font-size:16px;line-height:1.8;margin:14px 0;color:#b9b9b3}
.policy-page a{text-decoration:underline;overflow-wrap:anywhere}
.policy-page .policy-date{font-size:12px;margin:22px 0 28px;color:var(--muted)}

@media (max-width:900px){
 .shell{width:calc(100% - 32px)}
 .top{display:block;padding-top:40px}
 .top .count{display:block;text-align:left;margin-top:18px}
 .work{display:block}
 .preview{display:none}
 .row{grid-template-columns:44px 1fr;gap:0 14px}
 .row .n{display:none}
 .row .icon{width:44px;height:44px;border-radius:10px;grid-row:1}
 .row .body{grid-column:2}
 .row .site{grid-column:2;padding-top:12px;white-space:normal;overflow-wrap:anywhere}
 .row .thumb{display:block;grid-column:1/3;margin-top:20px;width:150px;border:5px solid var(--frame);border-radius:22px;overflow:hidden;background:var(--screen)}
 .row .thumb img{width:100%;height:auto}
 .list:hover .row h2{color:var(--ink)}
 .about,.contact{display:block}
 .about{padding-top:80px}
 .about h2,.contact h2{margin-bottom:16px}
 .contact{padding-bottom:80px}
 .privacy-copy{padding:55px 25px 25px}
 .privacy-copy h2{font-size:28px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}