/* /updates/ email signup. Every rule is scoped to main.up so nothing leaks into the site shell.
   One field to sign up; the interests question comes after, on the thank-you screen, and can be skipped.
   html.tablet is the event tablet (/updates/?tablet): no header, footer or safety bar, bigger type, QR beside the form. */
main.up{padding:clamp(40px,7vw,96px) var(--gutter) clamp(56px,8vw,112px)}
main.up .up-wrap{max-width:40rem;margin:0 auto}
/* the phone header's logo tab hangs below the bar; start the heading under it */
@media (max-width: 760px){ main.up{padding-top:96px} }
main.up .up-logo{display:none}
main.up .up-phone{display:none}
main.up h1{margin-bottom:14px}
main.up .lede{color:var(--mauve-ink);margin-bottom:32px}

main.up .up-form{display:flex;flex-direction:column;gap:10px;background:var(--white);border-radius:var(--radius);padding:clamp(22px,4vw,36px)}
main.up .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
main.up .up-field{font-size:15px;font-weight:600}
main.up .up-line{display:flex;gap:10px;flex-wrap:wrap}
main.up .up-line input{flex:1 1 15rem;min-width:0;font:400 17px var(--sans);border:1px solid var(--mauve);border-radius:12px;padding:14px 15px;background:var(--white);color:var(--night);min-height:52px}
main.up .up-line input[aria-invalid="true"]{border-color:var(--maroon);box-shadow:0 0 0 1px var(--maroon)}
main.up .up-err{font-weight:500;font-size:14px;color:var(--maroon)}
main.up .up-err:empty{display:none}

main.up .up-go{flex:0 0 auto;min-height:52px;padding-inline:30px;font-size:17px;border:0;cursor:pointer}
main.up .up-go[disabled],main.up .up-save[disabled]{opacity:.6;cursor:progress}
main.up .up-status{font-size:15px;color:var(--maroon)}
main.up .up-status:empty{display:none}
main.up .up-safe{font-size:14px;color:var(--mauve-ink);border-top:1px solid var(--linen-2);padding-top:16px;margin-top:12px}
@media (max-width: 480px){ main.up .up-go{flex:1 1 100%} }

/* thank-you screen, with the optional interests question */
main.up .up-done{background:var(--white);border-radius:var(--radius);padding:clamp(28px,5vw,48px);text-align:center}
main.up .up-check{color:var(--eucalyptus);margin:0 auto 16px}
main.up .up-done h2{font-size:clamp(28px,3.4vw,40px);outline:none}
main.up .up-more{margin-top:28px;padding-top:24px;border-top:1px solid var(--linen-2);text-align:left}
main.up .up-picks{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
main.up .up-picks legend{font-size:17px;font-weight:600;padding:0;margin-bottom:12px}
main.up .up-picks label{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 18px 10px 14px;border-radius:999px;
  background:var(--linen);border:1.5px solid transparent;font-size:16px;cursor:pointer;touch-action:manipulation;
  transition:background-color .15s ease,border-color .15s ease}
main.up .up-picks input{width:20px;height:20px;margin:0;accent-color:var(--maroon);flex:none}
main.up .up-picks label:has(input:checked){background:var(--blush-soft);border-color:var(--maroon)}
main.up .up-picks label:focus-within{outline:3px solid var(--blush);outline-offset:2px}
main.up .up-acts{display:flex;align-items:center;gap:8px;margin-top:20px;flex-wrap:wrap}
main.up .up-save{min-height:52px;padding-inline:34px;font-size:17px;border:0;cursor:pointer;flex:0 0 auto}
main.up .up-skip{min-height:48px;min-width:48px;padding:0 16px;background:none;border:0;font:600 16px var(--sans);color:var(--night);
  text-decoration:underline;text-underline-offset:4px;cursor:pointer}
main.up .up-more .up-status{margin-top:10px}
main.up .up-saved{margin-top:20px;font-size:18px;font-weight:600;color:var(--eucalyptus);outline:none}
@media (prefers-reduced-motion: no-preference){
  main.up .up-done:not([hidden]) .up-check path{stroke-dasharray:40;stroke-dashoffset:40;animation:up-draw .5s .1s ease-out forwards}
  @keyframes up-draw{to{stroke-dashoffset:0}}
}

/* ---- the event tablet ---- */
html.tablet .safety-bar,html.tablet .site-header,html.tablet footer,html.tablet .skip{display:none!important}
html.tablet body{background:var(--linen)}
html.tablet main.up{min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding:clamp(20px,3vw,36px) clamp(24px,4vw,56px)}
html.tablet main.up .up-form{gap:12px;padding:32px 36px}
html.tablet main.up .up-wrap{max-width:1180px;width:100%;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
html.tablet main.up .up-logo{display:block;height:52px;width:auto;margin-bottom:16px}
html.tablet main.up h1{font-size:clamp(42px,4.8vw,60px);margin-bottom:8px}
html.tablet main.up .lede{font-size:20px;margin-bottom:22px}
html.tablet main.up .up-field{font-size:18px}
html.tablet main.up .up-line input{font-size:22px;min-height:64px;padding:16px 18px}
html.tablet main.up .up-go{min-height:64px;font-size:21px;padding-inline:40px}
html.tablet main.up .up-safe{font-size:16px;padding-top:14px}
html.tablet main.up .up-done{padding:28px 36px 28px}
html.tablet main.up .up-done h2{font-size:clamp(30px,3.2vw,40px)}
html.tablet main.up .up-check{width:44px;height:44px;margin-bottom:8px}
html.tablet main.up .up-more{margin-top:18px;padding-top:18px}
html.tablet main.up .up-picks legend{font-size:20px}
html.tablet main.up .up-picks label{min-height:56px;font-size:19px;padding:12px 22px 12px 16px}
html.tablet main.up .up-picks input{width:24px;height:24px}
html.tablet main.up .up-save{min-height:60px;font-size:20px;padding-inline:44px}
html.tablet main.up .up-skip{min-height:60px;font-size:19px;padding-inline:22px}
html.tablet main.up .up-saved{font-size:24px}

html.tablet main.up .up-phone{display:block;background:var(--maroon);color:#fff;border-radius:var(--radius);padding:clamp(24px,3vw,40px);text-align:center}
html.tablet main.up .up-phone h2{font-size:clamp(26px,2.6vw,34px);color:#fff}
html.tablet main.up .up-phone p{font-size:18px;margin-top:8px;color:var(--blush-soft)}
html.tablet main.up .up-qr{background:#fff;border-radius:14px;padding:18px;margin:22px auto 14px;max-width:300px}
html.tablet main.up .up-qr svg{display:block;width:100%;height:auto}
html.tablet main.up .up-phone .up-url{font-size:16px;color:#fff;margin:0;word-break:break-word}

/* a tablet held upright: form on top, a smaller phone panel under it */
@media (max-width: 900px){
  html.tablet main.up{align-items:flex-start}
  html.tablet main.up .up-wrap{grid-template-columns:minmax(0,1fr)}
  html.tablet main.up .up-phone{display:grid;grid-template-columns:auto 160px;gap:4px 24px;align-items:center;text-align:left}
  html.tablet main.up .up-phone .up-qr{grid-row:1 / span 3;grid-column:2;margin:0;padding:12px}
}