
:root{--red:#E1251B;--ink:#000;--mut:#767676;--line:#000;--f:'Inter',Helvetica,Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f);font-size:15px;line-height:1.45;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;padding:0 28px}
.c1{grid-column:span 1}.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}
.s2{grid-column-start:2}.s4{grid-column-start:4}.s5{grid-column-start:5}.s7{grid-column-start:7}.s9{grid-column-start:9}
.mut{color:var(--mut)}
.red{color:var(--red)}
h1{font-size:clamp(56px,9.4vw,168px);font-weight:700;line-height:.88;letter-spacing:-.055em}
h2{font-size:clamp(36px,4.4vw,72px);font-weight:700;line-height:.95;letter-spacing:-.045em}
h3{font-size:22px;font-weight:500;letter-spacing:-.02em}
.lab{font-size:12px;font-weight:500;color:var(--mut)}
.rule{border-top:1px solid var(--line)}
/* header */
.hd{position:sticky;top:0;background:#fff;z-index:50;border-bottom:1px solid var(--line)}
.hd .g{align-items:start;padding-top:16px;padding-bottom:16px}
.logo{grid-column:span 3;display:flex;gap:12px;align-items:flex-start;font-weight:700;font-size:15px;line-height:1.1}
.logo .mark{width:30px;height:30px;flex:none}
.nav{grid-column:5/11;display:flex;gap:28px;font-weight:500}
.nav a:hover{color:var(--red)}
.lang{grid-column:11/13;text-align:right;color:var(--mut)}
.burger{display:none;background:none;border:0;font:500 15px var(--f);text-align:right;cursor:pointer}
/* hero */
.hero{padding-top:28px}
.hero h1{grid-column:1/13;margin-bottom:40px}
.hero .meta{grid-column:span 3;padding-top:12px;border-top:1px solid var(--line)}
.hero-ph{grid-column:1/13;aspect-ratio:2.2/1;margin-top:28px}
.cap{display:flex;justify-content:space-between;padding:10px 0 0;font-size:13px}
section{padding-top:120px}
.sec-h{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;border-top:1px solid var(--line);padding-top:12px;margin-bottom:36px}
.sec-h .n{grid-column:span 3;font-weight:500}
.sec-h h2{grid-column:4/13}
/* works grid */
.works{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;row-gap:70px}
.w{display:block}
.w .ph{overflow:hidden;background:#eee}
.w .ph img{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s;filter:grayscale(1)}
.w:hover .ph img{transform:scale(1.03);filter:none}
.w .t{display:grid;grid-template-columns:40px 1fr auto;gap:10px;padding-top:12px;font-size:15px}
.w .t b{font-weight:500}
.w .t span:last-child{color:var(--mut)}
.w1{grid-column:1/8}.w1 .ph{aspect-ratio:4/3}
.w2{grid-column:9/13;margin-top:180px}.w2 .ph{aspect-ratio:3/4}
.w3{grid-column:2/6}.w3 .ph{aspect-ratio:4/5}
.w4{grid-column:7/13;margin-top:90px}.w4 .ph{aspect-ratio:3/2}
.w5{grid-column:1/5}.w5 .ph{aspect-ratio:1}
.w6{grid-column:6/12;margin-top:120px}.w6 .ph{aspect-ratio:16/10}
/* statement */
.state{grid-column:4/13;font-size:clamp(28px,3vw,48px);font-weight:500;line-height:1.08;letter-spacing:-.035em}
.state em{font-style:normal;color:var(--red)}
.facts{grid-column:4/13;display:grid;grid-template-columns:repeat(3,1fr);column-gap:20px;margin-top:60px}
.facts div{border-top:1px solid var(--line);padding-top:10px}
.facts b{display:block;font-size:clamp(48px,5vw,88px);font-weight:700;letter-spacing:-.05em;line-height:1}
/* index list */
.list{grid-column:1/13}
.list a{display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;padding:14px 0;border-top:1px solid var(--line);position:relative}
.list a:last-child{border-bottom:1px solid var(--line)}
.list a:hover{color:var(--red)}
.list .yr{grid-column:span 1}.list .nm{grid-column:span 4;font-weight:500}.list .lo{grid-column:span 3}.list .ty{grid-column:span 2}.list .ar{grid-column:span 2;text-align:right}
.list .pv{position:absolute;right:16%;top:50%;width:220px;aspect-ratio:4/3;transform:translateY(-50%);opacity:0;pointer-events:none;transition:.25s;z-index:5}
.list a:hover .pv{opacity:1}
/* footer */
.ft{margin-top:160px;border-top:1px solid var(--line);padding:16px 0 28px;font-size:14px}
.ft .credit{margin-top:60px;color:var(--mut);font-size:12px}.ft .credit a{text-decoration:underline}
/* project page */
.p-head{padding-top:28px}
.p-head h1{grid-column:1/13}
.p-meta{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;margin-top:40px}
.p-meta div{grid-column:span 2;border-top:1px solid var(--line);padding-top:10px}
.p-meta div b{display:block;font-weight:500}
.full{grid-column:1/13;margin-top:28px;aspect-ratio:16/8}
.p-text{grid-column:5/11;font-size:20px;line-height:1.4;letter-spacing:-.015em}
.p-text p+p{margin-top:18px}
.p-side{grid-column:1/4;font-size:14px}
.p-side dl{display:grid;grid-template-columns:1fr;row-gap:12px}
.p-side dt{color:var(--mut)}
.pair{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;margin-top:20px}
.pair .a{grid-column:1/8;aspect-ratio:4/3}
.pair .b{grid-column:8/13;aspect-ratio:3/4}
.single{grid-column:3/11;aspect-ratio:3/2;margin-top:120px}
.drawing{grid-column:1/13;aspect-ratio:2.6/1;border:1px solid var(--line);margin-top:120px;position:relative;background:#fff}
.drawing svg{width:100%;height:100%}
.nextp{grid-column:1/13;display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--line);padding-top:12px;margin-top:120px}
.nextp h2:hover{color:var(--red)}
/* studio/contact */
.people{grid-column:1/13;display:grid;grid-template-columns:repeat(4,1fr);column-gap:20px;row-gap:40px}
.people div .ph{aspect-ratio:3/4;background:#f1f1f1;margin-bottom:10px;display:grid;place-items:center;font-size:64px;font-weight:700;letter-spacing:-.05em;color:#ddd}
.services{grid-column:4/13;display:grid;grid-template-columns:repeat(3,1fr);column-gap:20px}
.services div{border-top:1px solid var(--line);padding:10px 0 40px}
.services h3{margin-bottom:8px}
.form{grid-column:4/13}
.fld{display:grid;grid-template-columns:repeat(9,1fr);column-gap:20px;border-top:1px solid var(--line);padding:12px 0}
.fld label{grid-column:span 3;font-weight:500}
.fld input,.fld select,.fld textarea{grid-column:span 6;border:0;font:inherit;font-size:20px;letter-spacing:-.02em;outline:0;background:none;padding:0;color:var(--ink)}
.fld input::placeholder,.fld textarea::placeholder{color:#bbb}
.radios{grid-column:span 6;display:flex;flex-wrap:wrap;gap:8px}
.radios label{grid-column:auto;font-weight:400}
.radios input{position:absolute;opacity:0}
.radios span{display:inline-block;border:1px solid var(--line);padding:8px 14px;cursor:pointer;font-size:15px}
.radios input:checked+span{background:var(--ink);color:#fff}
.send{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin-top:0}
.send button{background:var(--red);color:#fff;border:0;font:700 20px var(--f);padding:16px 30px;cursor:pointer;letter-spacing:-.02em}
.send button:hover{background:var(--ink)}
.form-ok{padding:14px 0;color:var(--red);font-weight:500}
/* brand */
.swatches{grid-column:1/13;display:grid;grid-template-columns:2fr 2fr 1fr;column-gap:20px}
.sw{aspect-ratio:1.2;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;font-size:13px;border:1px solid var(--line)}
.sw b{font-size:28px;letter-spacing:-.03em}
.rv{opacity:0;transition:opacity .8s}.rv.in{opacity:1}
@media(max-width:900px){
 .g{padding:0 16px;column-gap:12px}
 .nav,.lang{display:none}.burger{display:block;grid-column:10/13}.logo{grid-column:1/10}
 .nav-open .nav{display:flex;flex-direction:column;grid-column:1/13;padding-top:20px;font-size:24px;gap:10px}
 .hero .meta{grid-column:span 6;margin-bottom:12px}.hero-ph{aspect-ratio:4/3}
 .works .w{grid-column:1/13!important;margin-top:0!important}
 .sec-h .n{grid-column:1/13}.sec-h h2{grid-column:1/13;margin-top:8px}
 .state,.facts,.services,.form,.p-text{grid-column:1/13}.facts,.services{grid-template-columns:1fr}
 .list .lo,.list .ty,.list .pv{display:none}.list .yr{grid-column:span 2}.list .nm{grid-column:span 6}.list .ar{grid-column:span 4}
 .ft .c4,.ft .c3,.ft .c2{grid-column:span 6;margin-bottom:16px}
 .p-meta div{grid-column:span 6;margin-bottom:12px}.p-side{grid-column:1/13;margin-bottom:30px}
 .pair .a,.pair .b,.single{grid-column:1/13;margin-top:20px}.full{aspect-ratio:4/3}
 .people{grid-template-columns:1fr 1fr}.fld{grid-template-columns:1fr}.fld label,.fld input,.fld select,.fld textarea,.radios{grid-column:1/-1}
 .swatches{grid-template-columns:1fr}
}

html,body{overflow-x:clip}

.lang-sw{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-decoration:none;color:inherit;padding:7px 10px;border:1px solid currentColor;border-radius:999px;opacity:.75;line-height:1;white-space:nowrap;margin:0 10px;flex:0 0 auto;justify-self:end;align-self:center;width:auto}.cart{white-space:nowrap}.logo-cell{display:flex;align-items:center;justify-content:space-between}.g>.lang-sw{grid-column:12/13}@media(max-width:900px){.g>.logo{grid-column:1/8!important}.g>.lang-sw{grid-column:8/10}}@media(max-width:700px){.lang-sw{margin:0 6px;padding:6px 8px}}.lang-sw:hover{opacity:1}
