:root{
--white:#FAFAF7;--black:#000;--sand:#D9CDB8;--stone:#9E968A;--tobacco:#4E3B2A;--olive:#444634;--mist:#ECEAE4;
--ink:#000;--soft:#3D3A35;--mute:#7D776D;--rule:rgba(0,0,0,.12);
--f:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--white);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.6;font-stretch:100%;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--tobacco);outline-offset:3px}
::selection{background:var(--black);color:var(--white)}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}

/* header */
header.top{position:absolute;inset:0 0 auto 0;z-index:20}
header.top .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:26px;padding-bottom:26px}
.mark{display:inline-flex;align-items:center;gap:12px;font-stretch:125%;font-weight:600;font-size:15px;letter-spacing:.01em}
.mark::before{content:"";width:12px;height:18px;background:var(--black);box-shadow:4px 0 0 var(--sand)}
nav{display:flex;gap:28px}
nav a{font-size:14px;color:var(--soft);padding:4px 0;border-bottom:1px solid transparent;transition:border-color .3s}
nav a:hover,nav a[aria-current]{border-color:var(--ink);color:var(--ink)}

/* type */
h1{font-stretch:125%;font-weight:300;font-size:clamp(40px,6.4vw,92px);line-height:1;letter-spacing:-.025em;max-width:15ch}
h2{font-stretch:118%;font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.02em;margin:0 0 20px;max-width:20ch}
h3{font-stretch:110%;font-weight:600;font-size:18px;margin:0 0 8px}
p{max-width:62ch;color:var(--soft)}
p+p{margin-top:1em}
strong,b{font-weight:600;color:var(--ink)}
.lede{font-size:clamp(19px,1.7vw,22px);line-height:1.5;color:var(--ink);max-width:44ch}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--mute);letter-spacing:0;text-transform:none}
.eyebrow::before{content:"";width:9px;height:13px;background:var(--sand);flex:none}

/* inner pages */
main{padding-top:0}
.hero{padding-top:190px;padding-bottom:110px;position:relative}
.hero::after{content:"";position:absolute;right:32px;top:200px;width:200px;height:280px;background:linear-gradient(90deg,var(--sand) 0 20%,var(--stone) 20% 40%,var(--tobacco) 40% 60%,var(--black) 60% 80%,var(--olive) 80%);box-shadow:0 26px 40px -30px rgba(0,0,0,.5)}
@media (max-width:960px){.hero::after{display:none}}
.hero .eyebrow{margin-bottom:30px}
.hero .lede{margin-top:34px}
section.block{padding:84px 0;border-top:1px solid var(--rule)}
section.block:nth-of-type(even){background:var(--mist);border-top:0}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:32px}
.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}
.num{font-size:14px;color:var(--mute);display:block;margin-bottom:12px}
.list{list-style:none}
.list li{padding:20px 0;border-top:1px solid var(--rule);color:var(--soft);display:grid;grid-template-columns:3em 1fr;gap:12px}
.list li:last-child{border-bottom:1px solid var(--rule)}
.list li>span{font-stretch:125%;font-weight:600;color:var(--tobacco);font-size:15px;padding-top:2px}
.list.plain li{grid-template-columns:1fr}
table{width:100%;border-collapse:collapse;font-size:15.5px;margin-top:12px}
th,td{text-align:left;vertical-align:top;padding:16px 18px 16px 0;border-top:1px solid var(--rule)}
th{font-weight:500;font-size:14px;color:var(--mute)}
td{color:var(--soft)} td:first-child{color:var(--ink);font-weight:600;width:32%}
.tablewrap{overflow-x:auto}
.link,.btn{display:inline-flex;align-items:center;gap:12px;margin-top:28px;font-size:15px;font-weight:500}
.link{border-bottom:1px solid var(--ink);padding-bottom:3px}
.link:hover{color:var(--tobacco);border-color:var(--tobacco)}
.btn{background:var(--black);color:var(--white);padding:17px 28px}
.btn:hover{background:var(--tobacco)}
article.long{max-width:720px}
article.long h2{margin-top:60px;font-size:clamp(23px,2.4vw,30px)}
article.long h3{margin-top:30px}
article.long p,article.long li{font-size:17.5px}
article.long ul,article.long ol{margin:14px 0 0 1.1em;color:var(--soft);max-width:62ch}
article.long li{margin:7px 0}
article.long li::marker{color:var(--stone)}
.meta{font-size:14px;color:var(--mute);margin-top:26px}
.summary{background:var(--sand);padding:28px 30px;margin:10px 0 20px}
.summary p{color:var(--ink);font-size:18px}
.refs{margin-top:64px;padding-top:26px;border-top:1px solid var(--rule)}
.refs li{color:var(--mute);font-size:14px}
.entries a{display:grid;grid-template-columns:14px 1fr auto;gap:24px;padding:30px 0;border-top:1px solid var(--rule);align-items:start}
.entries a:last-child{border-bottom:1px solid var(--rule)}
.entries a::before{content:"";width:14px;height:22px;background:var(--sand);margin-top:6px;transition:background .3s}
.entries a:nth-child(3n+2)::before{background:var(--tobacco)}
.entries a:nth-child(3n)::before{background:var(--olive)}
.entries a:hover::before{background:var(--black)}
.entries h3{font-stretch:115%;font-size:clamp(20px,2vw,25px);font-weight:400;margin:0}
.entries p{font-size:15px;margin-top:8px}
.entries .eyebrow{white-space:nowrap;padding-top:6px}
.entries .eyebrow::before{display:none}
details{border-top:1px solid var(--rule)}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;font-size:19px;font-stretch:108%;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:calc(50% - 7px);width:10px;height:14px;background:var(--sand);transition:background .3s,transform .4s var(--ease)}
details[open] summary::after{background:var(--black);transform:rotate(90deg)}
details .a{padding:0 0 26px}
form{display:grid;gap:26px;max-width:580px;margin-top:10px}
label{font-size:14px;color:var(--mute);display:block;margin-bottom:6px}
input,select,textarea{width:100%;font:inherit;font-size:18px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:9px 0;border-radius:0;outline:0;-webkit-appearance:none;appearance:none}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--tobacco)}
button[type=submit]{justify-self:start;font:inherit;font-size:15px;font-weight:500;background:var(--black);color:var(--white);border:0;padding:17px 30px;cursor:pointer}
button[type=submit]:hover{background:var(--tobacco)}
footer{background:var(--black);color:var(--stone);padding:56px 0 64px;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:var(--white)}
footer a:hover{color:var(--sand)}
footer span:last-child{display:flex;gap:26px}

/* home */
.h-hero{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px;padding-top:130px;padding-bottom:80px}
.h-hero h1{max-width:16ch;font-size:clamp(40px,4.9vw,72px)}
.h-hero .lede{margin-top:30px}
.spec{margin-top:44px;max-width:400px;min-height:132px;border-top:1px solid var(--ink);padding-top:18px}
.spec .code{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.spec h3{font-stretch:125%;font-weight:500;font-size:22px;margin:4px 0 8px}
.spec p{font-size:16px}
.fan{position:relative;height:470px;justify-self:center;width:100%;max-width:560px}
.chip{--w:150px;--h:330px;position:absolute;left:calc(50% - var(--w)/2);bottom:40px;width:var(--w);height:var(--h);
 transform-origin:50% 94%;transform:rotate(0deg);transition:transform 1.1s var(--ease);
 border:0;padding:0;background:#fff;cursor:pointer;display:flex;flex-direction:column-reverse;text-align:left;font:inherit;color:var(--ink);
 box-shadow:0 0 0 1px rgba(0,0,0,.06),0 22px 40px -26px rgba(0,0,0,.45)}
.chip i{flex:1;background:var(--c)}
.chip span{display:block;padding:10px 12px 12px;font-size:12px;line-height:1.35}
.chip span b{display:block;font-stretch:118%;font-size:13px;font-weight:600}
.chip span em{font-style:normal;color:var(--mute);font-variant-numeric:tabular-nums}
.fan.open .chip{transform:rotate(var(--r))}
.fan.open .chip[aria-pressed=true]{transform:rotate(var(--r)) translateY(-46px)}
.fan .chip:nth-child(1){transition-delay:.06s}.fan .chip:nth-child(2){transition-delay:.04s}.fan .chip:nth-child(3){transition-delay:.02s}
.hint{position:absolute;right:0;bottom:0;font-size:13px;color:var(--mute)}

.say{padding:140px 0;background:var(--white)}
.say p.big{font-stretch:112%;font-weight:300;font-size:clamp(28px,3.6vw,50px);line-height:1.16;letter-spacing:-.018em;color:var(--ink);max-width:24ch}
.say .after{margin-top:40px;font-size:19px;max-width:48ch}

.dial{background:var(--black);color:var(--white);padding:130px 0}
.dial .grid{align-items:center}
.dial h2{color:var(--white);max-width:13ch}
.dial p{color:var(--stone)}
.dial .lvl{margin-top:44px}
.dial .lvl strong{color:var(--white);display:block;font-stretch:125%;font-weight:500;font-size:28px;margin-bottom:8px}
.range{margin-top:40px;max-width:440px}
.range input{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;border:0;padding:0;cursor:pointer}
.range input::-webkit-slider-runnable-track{height:2px;background:var(--stone)}
.range input::-moz-range-track{height:2px;background:var(--stone)}
.range input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:28px;margin-top:-13px;background:var(--sand);border:0;border-radius:0}
.range input::-moz-range-thumb{width:18px;height:28px;background:var(--sand);border:0;border-radius:0}
.range .ticks{display:flex;justify-content:space-between;font-size:13px;color:var(--stone);margin-top:10px}
.range .ticks button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:4px 0}
.range .ticks button[aria-current=true]{color:var(--white)}
.stage{display:flex;justify-content:center;align-items:center;min-height:520px;perspective:1200px}
.bill{width:300px;min-height:400px;padding:30px 28px;transition:all .7s var(--ease);font-size:13px;line-height:1.55;position:relative}
.bill .row{display:flex;justify-content:space-between;gap:16px}
.bill .head{margin-bottom:22px}
.bill .foot{margin-top:24px}
.bill hr{border:0;border-top:1px dashed currentColor;opacity:.35;margin:14px 0}
.bill.l0{background:#F3F3F1;color:#2b2b2b;font-family:"Courier New",Courier,monospace;font-size:12px;transform:rotate(-3deg);box-shadow:0 30px 50px -30px rgba(0,0,0,.8);clip-path:polygon(0 0,100% 0,100% 97%,92% 100%,84% 97%,76% 100%,68% 97%,60% 100%,52% 97%,44% 100%,36% 97%,28% 100%,20% 97%,12% 100%,4% 97%,0 100%)}
.bill.l1{background:#fff;color:#222;transform:rotate(0);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.bill.l2{background:var(--sand);color:var(--black);font-stretch:105%;box-shadow:0 34px 60px -30px rgba(0,0,0,.8)}
.bill.l2 .head b{font-stretch:125%;font-size:18px;font-weight:500}
.bill.l3{background:var(--black);color:var(--sand);font-stretch:108%;outline:14px solid var(--tobacco);outline-offset:0;box-shadow:0 40px 70px -30px rgba(0,0,0,.9),inset 0 0 0 1px rgba(217,205,184,.25)}
.bill.l3 .head b{font-stretch:125%;font-size:18px;font-weight:400;letter-spacing:.04em}
.bill.l3 hr{border-top-style:solid;opacity:.2}

.who{background:var(--sand);padding:130px 0}
.who h2{max-width:18ch}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.sw{background:#fff;display:flex;flex-direction:column;min-height:420px;box-shadow:0 26px 40px -30px rgba(0,0,0,.45)}
.sw i{height:58%;background:var(--c)}
.sw div{padding:18px 18px 22px}
.sw b{display:block;font-stretch:118%;font-size:17px;margin-bottom:6px}
.sw p{font-size:14.5px;line-height:1.5}
.sw em{display:block;font-style:normal;font-size:12px;color:var(--mute);margin-bottom:10px;font-variant-numeric:tabular-nums}

.work{padding:130px 0}
.work .three{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:50px}
.work .three div{border-top:2px solid var(--ink);padding-top:22px}
.work .three h3{font-stretch:125%;font-weight:500;font-size:22px}
.close{background:var(--mist);padding:130px 0}
.close p.big{font-stretch:118%;font-weight:300;font-size:clamp(30px,4.2vw,58px);line-height:1.08;letter-spacing:-.02em;color:var(--ink);max-width:18ch}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:960px){
 .grid{grid-template-columns:1fr}.grid>*{grid-column:1/-1!important}
 .h-hero{grid-template-columns:1fr;align-items:start;padding-top:140px;min-height:0}
 .swatches{grid-template-columns:repeat(4,72%);overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-32px;padding-right:32px;padding-bottom:30px}
 .sw{scroll-snap-align:start;min-height:360px}
 .work .three{grid-template-columns:1fr}
 .stage{min-height:480px;margin-top:30px}
}
@media (max-width:640px){
 body{font-size:16px}
 .wrap{padding:0 18px}
 header.top .wrap{flex-direction:column;align-items:flex-start;gap:14px;padding-top:20px}
 nav{gap:18px;flex-wrap:wrap}nav a{font-size:13.5px}
 .hero{padding-top:170px;padding-bottom:80px}
 .h-hero{padding-top:150px;gap:10px}
 .fan{height:330px;margin-top:10px}
 .chip{--w:104px;--h:240px}
 .chip span{padding:8px 9px;font-size:10.5px}.chip span b{font-size:11px}
 .hint{right:auto;left:0;bottom:0}
 .swatches{margin-right:-18px;padding-right:18px}
 .bill{width:270px}
 .say,.dial,.who,.work,.close{padding:96px 0}
 footer span:last-child{flex-wrap:wrap;gap:16px}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.bill b{color:inherit}

@media (min-width:961px){.hero>h1{padding-right:250px;max-width:none}}
footer .wrap{flex-wrap:wrap}
.who h2{max-width:22ch}
.swatches{grid-template-columns:repeat(4,1fr)}
.sw{color:inherit;min-height:380px}
.sw i{flex:none;height:210px}
.sw:hover b{text-decoration:underline}
@media (max-width:960px){.swatches{grid-template-columns:repeat(8,72%)}}