@layer layout{
.wrap{width:min(1240px,100% - 2rem);margin-inline:auto}
section{padding-block:clamp(4rem,9vw,8rem)}
.light{background:var(--cream);color:var(--ink)}
.eyebrow{display:inline-flex;gap:.5rem;align-items:center;font:500 .74rem var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--o);margin-bottom:1rem}
.eyebrow::before{content:"";width:2rem;height:2px;background:currentColor}
h2.big{font-size:clamp(3rem,10vw,8rem);margin-bottom:1rem}h2.big .serif{color:var(--o)}
.lede{max-width:56ch;color:#d9cbbd;font-size:1.15rem;margin-bottom:2.5rem}.light .lede{color:var(--mut)}
/* nav */
.nav{position:fixed;inset:1rem 0 auto;z-index:50;display:flex;justify-content:center;pointer-events:none}
.nav nav{pointer-events:auto;display:flex;align-items:center;gap:.3rem;padding:.4rem .4rem .4rem .5rem;border-radius:99px;background:color-mix(in oklab,#0F0D0B 70%,transparent);backdrop-filter:blur(18px) saturate(1.6);border:1px solid #ffffff22;box-shadow:0 10px 40px #0006}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font:800 1rem var(--d);letter-spacing:-.03em;padding-right:.7rem}
.bm{display:grid;place-items:center;width:2.2rem;aspect-ratio:1;background:var(--o);color:var(--k);border-radius:.55rem;font:800 1.4rem var(--d)}
.nav a.l{font:500 .72rem var(--m);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;padding:.65rem .85rem;border-radius:99px;opacity:.8}.nav a.l:hover{background:#ffffff1a;opacity:1}
.nav a.cta{background:var(--o);color:var(--k);opacity:1;font-weight:500}
@media(max-width:820px){.nav a.l:not(.cta){display:none}}
}