/* RECESS · the intro: a quiet grey spec sheet in a tight grotesque, like a collector's archive page */
.rx{position:relative;min-height:100vh;min-height:100svh;box-sizing:border-box;background:#ebebe8;color:#2b2b2b;overflow:hidden;
  display:flex;flex-direction:column;padding:calc(var(--hh,53px) + clamp(22px,4vh,44px)) clamp(16px,3vw,44px) clamp(20px,3.5vh,36px);
  --ind:clamp(64px,17vw,250px);font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;font-stretch:100%}
.rx::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.rx>*{position:relative}
.rx i{font-style:italic}
.rx-h{margin:0;font-weight:500;font-size:clamp(30px,5vw,66px);line-height:1.02;letter-spacing:-.035em;text-transform:none}
.rx-mid{display:grid;grid-template-columns:var(--ind) minmax(0,620px);margin-top:clamp(10px,1.6vh,18px);align-items:start}
.rx-mark{display:block;width:88%;max-width:150px;height:auto;margin-top:.35em;color:#2b2b2b}
.rx-spec{margin:0;font-size:clamp(13px,1.15vw,16px);line-height:1.18;letter-spacing:-.01em}
.rx-row{display:flex;justify-content:space-between;gap:16px}
.rx-row dt,.rx-row dd{margin:0}
.rx-gap{margin-top:.9em}
.rx-lab{display:flex;gap:clamp(24px,4vw,56px);margin:auto 0 6px var(--ind);padding-top:clamp(40px,10vh,140px);font-size:clamp(13px,1.15vw,16px)}
.rx-big{margin:0;font-size:clamp(23px,3.5vw,48px);line-height:1.03;letter-spacing:-.03em;max-width:24em}
.rx-small{margin:clamp(10px,1.6vh,16px) 0 0;padding-left:var(--ind);text-indent:0;font-size:clamp(14px,1.45vw,20px);line-height:1.16;letter-spacing:-.015em;max-width:calc(var(--ind) + 40em)}
.rx-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 24px;margin:clamp(22px,4vh,40px) 0 0;font-size:clamp(13px,1.15vw,16px);letter-spacing:-.01em}
/* arriving: the lines settle in one after another */
.rx>*{opacity:0;transform:translateY(10px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.rx.in>*{opacity:1;transform:none}
.rx.in .rx-mid{transition-delay:.12s}.rx.in .rx-lab{transition-delay:.22s}.rx.in .rx-big{transition-delay:.3s}.rx.in .rx-small{transition-delay:.4s}.rx.in .rx-foot{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){.rx>*{opacity:1;transform:none;transition:none}}