/* ============================================================
   TYPE
   ============================================================ */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(3rem,7.6vw,6.4rem);line-height:.96}
h2{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.06}
h3{font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.2}
.em{font-style:italic;color:var(--turq-deep)}
.on-color .em{color:#fff}
.panel .em,.on-color .panel .em{color:var(--turq-deep)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong{font-weight:500;color:var(--tx)}

/* the swash — the flourish from under the logo */
.swash{position:relative;display:inline-block}
.swash svg{position:absolute;left:-2%;bottom:-.2em;width:106%;height:.44em;overflow:visible}
.swash path{fill:none;stroke:var(--pink);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.3s var(--ease) .35s}
.in .swash path,.ready .swash path{stroke-dashoffset:0}

.eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--tx-muted);margin:0 0 1.4rem;display:flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--turq)}
.on-color .eyebrow{color:rgba(20,32,30,.7)}
.on-color .eyebrow::before{background:var(--ink)}
.lead{font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.62}
.muted{color:var(--tx-muted)}
.on-color .muted{color:rgba(20,32,30,.72)}