:root{--body:clamp(18px,1.6vw,20px)}   /* the smallest text on the site; the homepage defines the same */
/* Newsletter sign-up: the homepage pop-up and the /newsletter/ page share this. Same tokens as the site. */
.su{--ink:#0A0A0A;--light:#E0DFDD;--mid:#A3A09D;--pink:#FF2D8F;--pink-deep:#D4156F;color:var(--light);font-family:Jost,system-ui,sans-serif}
.su__in{display:grid;grid-template-columns:1fr;background:var(--ink);border:1px solid rgba(255,45,143,.45);overflow:hidden}
@media(min-width:820px){.su__in{grid-template-columns:.9fr 1.1fr}}
.su__img{position:relative;background:#151413;min-height:180px;max-height:240px;overflow:hidden}
.su__img img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
@media(min-width:820px){.su__img{max-height:none}}
.su__body{position:relative;padding:clamp(26px,4vw,44px)}
.su__kick{margin:0 0 10px;font-size:var(--body);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}
.su__title{margin:0 0 10px;font-weight:300;font-size:clamp(30px,4vw,44px);line-height:1.05;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.su__lede{margin:0 0 22px;font-size:18px;line-height:1.55;color:var(--light)}

/* the pop-up itself: a native <dialog>, so focus, Escape and the backdrop come for free */
dialog.su{padding:0;border:0;background:transparent;width:min(920px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}
dialog.su::backdrop{background:rgba(10,10,10,.82);backdrop-filter:blur(3px)}
dialog.su[open] .su__in{animation:su-in .28s cubic-bezier(.2,.7,.2,1)}
@keyframes su-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.su__x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:none;color:#fff;font:200 30px/1 Jost,sans-serif;cursor:pointer}
.su__x:hover{color:var(--pink)}

/* the form */
.su-form{display:flex;flex-direction:column;gap:14px}
.su-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.su-row:not(.su-row--bday){grid-template-columns:1fr}}
.su-f{display:flex;flex-direction:column;gap:6px;min-width:0;border:0;margin:0;padding:0}
.su-f label,.su-f legend{font-size:var(--body);font-weight:500;letter-spacing:.04em;color:#fff;padding:0;margin-bottom:6px}
.su-f legend span{font-weight:300;color:var(--mid)}
.su-f input,.su-f select{width:100%;min-height:48px;padding:10px 14px;background:#151413;border:1px solid rgba(224,223,221,.22);color:#fff;font:400 var(--body) Jost,system-ui,sans-serif;border-radius:0;appearance:none;-webkit-appearance:none}
.su-f select{background-image:linear-gradient(45deg,transparent 50%,#FF2D8F 50%),linear-gradient(135deg,#FF2D8F 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.su-f input:focus,.su-f select:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,45,143,.22)}
.su-f [aria-invalid="true"]{border-color:#ff6b6b}
.su-hint{margin:6px 0 0;font-size:var(--body);color:var(--mid)}
.su-check{display:flex;gap:12px;align-items:flex-start;font-size:var(--body);line-height:1.5;color:var(--light);cursor:pointer}
.su-check input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:#FF2D8F}
.su-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:0;background:var(--pink);color:var(--ink);
  font:500 var(--body) Jost,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background .2s}
.su-btn:hover{background:#fff}
.su-btn[disabled]{opacity:.6;cursor:default}
.su-small{margin:0;font-size:var(--body);color:var(--mid)}
.su-small a{color:var(--light);text-decoration:underline;text-underline-offset:3px}
.su-msg{margin:0;font-size:var(--body);min-height:0}
.su-msg.is-err{color:#ff8a8a}
.su-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.su-done .su__title{margin-top:6px}
@media(prefers-reduced-motion:reduce){dialog.su[open] .su__in{animation:none}}
