:root{
  --ink:#0a0a0a; --paper:#f2efea; --mute:#acaaa5; --rule:rgba(242,241,238,.16);
  --serif:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(20px,4.5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--paper);font:400 14px/1.6 var(--mono);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--paper);outline-offset:4px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:var(--gut);top:12px;background:var(--paper);color:var(--ink);padding:6px 10px;z-index:10}

.top{position:absolute;inset:0 0 auto;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:28px var(--gut);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase}
.mark{font-weight:500}
.mark span{color:var(--mute);letter-spacing:.05em}
.top-link{color:#c4c2bd;font-weight:500;transition:color .3s}
.top-link:hover{color:var(--paper)}

.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-img,.hero-img img{position:absolute;inset:0;width:100%;height:100%}
.hero-img img{object-fit:cover;object-position:70% 30%}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.4) 36%,rgba(10,10,10,0) 58%),linear-gradient(0deg,rgba(10,10,10,.78) 0%,rgba(10,10,10,0) 30%),linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,0) 14%)}
.hero-copy{position:relative;z-index:2;padding:0 var(--gut) clamp(48px,9vh,96px);max-width:min(46rem,52vw)}
h1{font:560 clamp(34px,4.3vw,64px)/1.08 var(--serif);letter-spacing:-.005em;color:#f2efea;font-optical-sizing:auto;font-variation-settings:"opsz" 96}
.byline{margin-top:36px;display:flex;gap:28px;font-size:12.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.byline span+span{color:#c4c2bd}

.work{padding:clamp(96px,16vh,180px) var(--gut) clamp(80px,12vh,140px)}
.work-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:20px;border-bottom:1px solid var(--paper)}
.work-head h2{font-size:12.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.work-head p{color:var(--mute);font-size:13.5px}
.spec{list-style:none}
.spec li{display:grid;grid-template-columns:4rem minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,1fr) 9rem;gap:24px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--rule);transition:background .4s}
.spec li:hover{background:rgba(242,241,238,.025)}
.n{color:var(--mute);font-size:13.5px}
.spec h3{font:500 clamp(24px,2.2vw,32px)/1.15 var(--serif)}
.what{color:#c9c8c4;max-width:38ch}
.spec dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:12.5px;letter-spacing:.06em}
.spec dt{color:var(--mute);text-transform:uppercase;letter-spacing:.18em}
.go{justify-self:end;font-size:12.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--rule);padding-bottom:4px;transition:border-color .3s}
.go:hover{border-color:var(--paper)}
.go.is-off{color:var(--mute);pointer-events:none;border-color:transparent}

.foot{padding:clamp(72px,12vh,120px) var(--gut) 40px;border-top:1px solid var(--rule)}
.foot-lede{font:500 clamp(22px,2.4vw,34px)/1.25 var(--serif);max-width:24ch;margin-bottom:64px}
.foot-spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;font-size:13.5px;border-top:1px solid var(--rule);padding-top:20px}
.foot-spec dt{color:var(--mute);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px}
.foot-spec a{border-bottom:1px solid var(--rule);transition:border-color .3s}
.foot-spec a:hover{border-color:var(--paper)}

@media (min-width:761px){
  .hero{align-items:flex-start}
  .hero-copy{padding:clamp(150px,25vh,360px) var(--gut) 0 clamp(var(--gut),8.6vw,230px);max-width:min(50rem,55vw)}
  .hero-img::after{background:radial-gradient(ellipse 52% 60% at 22% 32%,rgba(10,10,10,.55) 0%,rgba(10,10,10,0) 100%),linear-gradient(90deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.4) 36%,rgba(10,10,10,0) 56%),linear-gradient(0deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,0) 22%),linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,0) 14%)}
}
@media (prefers-reduced-motion:no-preference){
  .hero-copy{animation:rise 1.4s cubic-bezier(.2,.7,.2,1) .2s both}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}}
}

@media (max-width:1100px){
  .spec li{grid-template-columns:3rem minmax(0,1fr) minmax(0,1fr);row-gap:14px}
  .spec h3{grid-column:2/4}
  .what{grid-column:2/4}
  .spec dl{grid-column:2/3}
  .go{grid-column:3/4;align-self:end}
}
@media (max-width:760px){
  .hero{min-height:auto;height:100vh;height:100svh;display:flex;flex-direction:column}
  .hero-img{position:relative;display:block;flex:1 1 auto;min-height:0;margin-bottom:-2px}
  .hero-img img{object-position:62% 26%}
  .hero-img::after{bottom:-2px;background:linear-gradient(0deg,rgba(10,10,10,1) 0%,rgba(10,10,10,1) 2px,rgba(10,10,10,0) 18%),linear-gradient(180deg,rgba(10,10,10,.45) 0%,rgba(10,10,10,0) 16%)}
  .hero-copy{flex:0 0 auto;max-width:none;padding:8px var(--gut) calc(28px + env(safe-area-inset-bottom))}
  @media (max-height:700px){.hero-img img{object-position:62% 34%}.hero-img::after{background:linear-gradient(0deg,rgba(10,10,10,1) 0%,rgba(10,10,10,1) 2px,rgba(10,10,10,0) 11%),linear-gradient(180deg,rgba(10,10,10,.45) 0%,rgba(10,10,10,0) 16%)}}
  .byline{flex-direction:column;gap:2px;margin-top:18px}
  .work-head{flex-direction:column;gap:6px}
  .spec li{grid-template-columns:2.25rem minmax(0,1fr);padding:28px 0}
  .spec h3,.what,.spec dl,.go{grid-column:2/3}
  .go{justify-self:start}
  .foot-spec{grid-template-columns:1fr 1fr}
}