:root{
  --ink:#6B2D5C; --bg:#FFFFFF;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --gutter:clamp(16px,11vw,180px);
  --rule:3px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
hr{border:0;border-top:var(--rule) solid var(--ink);margin:0}
.wrap{width:min(1500px,100% - 2*var(--gutter));margin-inline:auto}

/* Top nav */
.top{padding-top:44px}
.nav{display:flex;justify-content:space-between;align-items:flex-start;padding-top:18px;font-size:clamp(24px,4.2vw,46px);line-height:1.2;letter-spacing:.01em}
.nav .work{text-align:right}
.nav .work span{display:block}
.nav a:hover,.list a:hover h3,.list a:hover .t{opacity:.65}

/* Giant name */
.name{font-size:clamp(68px,17vw,270px);font-weight:400;line-height:.9;letter-spacing:-.02em;margin:clamp(40px,6vw,72px) 0 0 -.04em}
.name a{display:block}

/* Home intro */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);margin-top:clamp(80px,12vw,150px);font-weight:700;font-size:clamp(17px,2.7vw,32px);line-height:1.3}
.intro .places{text-transform:uppercase}
.intro p{margin:0 0 1.2em;max-width:22ch}
.intro p:last-child{margin-bottom:0}

/* About page */
.prose{margin-top:clamp(40px,6vw,64px);font-size:clamp(20px,3.5vw,38px);line-height:1.3;max-width:30ch}
.prose p{margin:0 0 1.1em}
.prose b{font-weight:700}

/* Section lists (Work, Projects) */
.block{margin-top:clamp(96px,14vw,170px)}
.block > h2{font-size:clamp(40px,7.7vw,108px);font-weight:700;line-height:1;margin:0 0 14px;text-transform:uppercase}
.list{list-style:none;margin:0;padding:0}
.list li{border-top:var(--rule) solid var(--ink)}
.list li:last-child{border-bottom:var(--rule) solid var(--ink)}
.list .big{font-size:clamp(34px,7.7vw,100px);line-height:1;padding:16px 0 18px;font-weight:400;letter-spacing:-.005em}
.list .big .indent{display:block;text-indent:40%}
.list .small{font-size:clamp(20px,4.2vw,46px);line-height:1.2;padding:14px 0}
.list a,.list .row{display:block}
.arrow{font-weight:300}
.proj h3{font-size:clamp(34px,7.7vw,100px);line-height:1;font-weight:400;margin:0;padding-top:14px;letter-spacing:-.005em}
.proj .sub{font-size:clamp(18px,4.2vw,42px);line-height:1.2;margin:2px 0 0;padding-bottom:16px}

/* Detail pages (work + project) */
.detail-head{margin-top:clamp(60px,9vw,110px)}
.detail-head .when{font-size:clamp(18px,4.2vw,42px);margin:0}
.detail-head h1{font-size:min(17vw,240px,calc(min(1500px,100vw - 2*var(--gutter)) / (var(--len,6) * .84)));font-weight:400;line-height:.98;text-transform:uppercase;margin:.08em 0 .18em -.03em;letter-spacing:-.01em;overflow-wrap:anywhere}
.detail-head .role{font-size:clamp(18px,4.2vw,42px);line-height:1.2;margin:0}
.detail-head hr{margin-top:clamp(36px,6vw,64px)}
.sections{margin-top:clamp(28px,4vw,40px);font-family:var(--serif);font-size:clamp(18px,3.4vw,34px);line-height:1.3}
.sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(20px,4vw,48px);margin-bottom:clamp(56px,8vw,96px)}
.sec .label b{display:block;font-weight:700;text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere}
.sec .label i{display:block;margin-top:1.2em}
.sec ul{margin:0;padding-left:1.1em}
.sec li{margin:0 0 .15em}
.sec li::marker{font-size:.8em}
.sec p{margin:0 0 .8em}
.project .sec{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sec .k{font-family:var(--sans);font-size:.62em;font-weight:700;text-transform:uppercase;letter-spacing:.04em;display:block;margin-top:.6em}

/* Footer */
footer{margin-top:clamp(110px,16vw,190px);padding-bottom:44px}
footer .row{display:flex;justify-content:space-between;align-items:center;font-size:clamp(24px,4.2vw,46px);padding-bottom:10px}
footer .icons{display:flex;gap:10px}
footer .icons svg{width:clamp(26px,3.6vw,36px);height:clamp(26px,3.6vw,36px);display:block;fill:var(--ink)}

@media (max-width:560px){
  .intro{grid-template-columns:1fr}
  .intro p{max-width:none}
  .list .big .indent{text-indent:20%}
  .sec,.project .sec{grid-template-columns:1fr;gap:14px}
}
@media (prefers-reduced-motion:no-preference){
  .name,.detail-head h1{animation:rise .7s ease-out both}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* Display face for the big type */
.nav,.name,.list .big,.list .small,.proj h3,.proj .sub,.detail-head,.prose,footer .row{font-family:var(--display);font-variation-settings:"SOFT" 50}
.name,.detail-head h1{font-weight:350;font-optical-sizing:auto}
.prose b{font-weight:600}