/* ── NUMA events ───────────────────────────────────────────
   Builds on /assets/styles.css (tokens, .btn, .chip, .field) and the waitlist
   palette. Month tabs (#events) and the "what would you come to?" poll (#shape). */

:root{
  --ev-orange:#F4A02E;
  --ev-splash:#CFE0F5;
  --ev-sage:#B7CBA3;
  --ev-dark:
    radial-gradient(70% 70% at 70% 25%, rgba(31,68,89,.95), rgba(31,68,89,0) 70%),
    radial-gradient(60% 60% at 10% 100%, rgba(85,117,114,.4), rgba(85,117,114,0) 70%),
    linear-gradient(180deg, #0E2230, #08151D);
}

.sec-events .sub, .sec-shape .sub{max-width:36rem; margin-inline:auto}

/* ── Month tabs ──────────────────────────────────────────── */
.ev-tabs{
  display:inline-flex; gap:.3rem; margin-top:2.2rem; padding:.32rem;
  background:var(--blue-50); border:1px solid var(--line); border-radius:100px;
}
.ev-tab{
  display:grid; justify-items:center; gap:.18rem; min-width:8.5rem;
  font:inherit; color:var(--ink-2); background:transparent; border:none; border-radius:100px;
  padding:.62rem 1.4rem; cursor:pointer;
  transition:background .25s ease, color .25s ease, box-shadow .25s ease;
}
.ev-tab strong{font-size:.95rem; font-weight:600; letter-spacing:-.02em; line-height:1}
.ev-tab span{font-size:.74rem; color:var(--ink-3); line-height:1; letter-spacing:.02em}
.ev-tab:hover{color:var(--ink)}
.ev-tab[aria-selected="true"]{background:var(--white); color:var(--ink); box-shadow:0 6px 18px -10px rgba(31,68,89,.45)}
.ev-tab[aria-selected="true"] span{color:var(--blue)}
.ev-tab:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

.ev-panel{margin-top:1.5rem; text-align:left; border-radius:28px}
.ev-panel:focus-visible{outline:2px solid var(--blue); outline-offset:4px}
.motion .ev-panel:not([hidden]) .ev-card{animation:ev-in .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes ev-in{from{opacity:0; translate:0 12px}}

/* ── Event card ──────────────────────────────────────────── */
.ev-card{
  display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
  min-height:340px; background:var(--white); color:var(--ink);
  border:1px solid var(--line); border-radius:28px; overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(31,68,89,.4);
}
.ev-art{
  position:relative; overflow:hidden; isolation:isolate; color:#fff;
  background:var(--ev-dark);
}

/* Date block */
.ev-date{display:flex; flex-direction:column; justify-content:center; padding:2rem clamp(1.5rem,3vw,2.4rem)}
.ev-date-wd{font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ev-splash)}
.ev-date-d{font-size:clamp(5rem, 11vw, 8.5rem); font-weight:700; letter-spacing:-.06em; line-height:.9; margin:.35rem 0 .2rem}
.ev-date-m{font-size:clamp(1.3rem, 2.4vw, 1.7rem); font-weight:500; letter-spacing:-.03em; color:rgba(255,255,255,.8)}
.ev-date-wave{
  position:absolute; z-index:-1; right:-22%; bottom:-30%; width:72%; height:auto;
  fill:none; stroke:var(--numa-blue); stroke-width:54; opacity:.3;
}
.motion .ev-date-wave{animation:ev-float 9s ease-in-out infinite alternate}
@keyframes ev-float{to{translate:-4% -5%; rotate:-3deg}}

/* Body */
.ev-body{display:flex; flex-direction:column; gap:.85rem; padding:clamp(1.5rem,4vw,2.6rem)}
.ev-eyebrow{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  font-size:.76rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--blue);
}
.ev-badge{
  font-size:.7rem; letter-spacing:.04em; text-transform:none; font-weight:600;
  padding:.28rem .7rem; border-radius:100px; background:var(--blue-50); color:var(--blue-700);
}
.ev-badge-open{background:rgba(183,203,163,.35); color:#3E5A2C}
.ev-badge-tickets-soon{background:rgba(244,160,46,.16); color:#8A5410}
.ev-badge-soldout, .ev-badge-cancelled, .ev-badge-past{background:#F1F2F4; color:var(--ink-2)}
.ev-title{font-size:clamp(1.6rem, 3.2vw, 2.3rem); font-weight:600; letter-spacing:-.035em; line-height:1.1}
.ev-text{color:var(--ink-2); max-width:30rem}
.ev-note{color:var(--ink-3); font-size:.92rem}

.ev-meta{list-style:none; padding:0; margin:.2rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem}
.ev-meta li{
  display:flex; align-items:baseline; gap:.45rem; font-size:.9rem;
  padding:.45rem .85rem; border:1px solid var(--line); border-radius:100px;
}
.ev-meta span{font-size:.7rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}

.ev-actions{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem; margin-top:auto; padding-top:.6rem}
.ev-actions .lnk{margin-top:0}
.ev-tickets span{transition:translate .25s ease}
.ev-tickets:hover span{translate:2px -2px}
.ev-btn-off{
  background:var(--blue-50); border-color:var(--blue-50); color:var(--ink-2); cursor:default;
}
.ev-btn-off:hover{background:var(--blue-50); border-color:var(--blue-50); transform:none}

.ev-card.is-past .ev-art{filter:saturate(.4)}
.ev-card.is-past .ev-date-d{color:rgba(255,255,255,.55)}

/* Coming soon: the wave sketches itself, over and over, like a plan forming. */
.ev-soon .ev-art{display:grid; place-items:center; min-height:240px}
.ev-soon svg{width:62%; height:auto; overflow:visible}
.ev-wave-ghost{fill:none; stroke:rgba(207,224,245,.18); stroke-width:54; stroke-dasharray:3 46}
.ev-wave-draw{fill:none; stroke:var(--numa-blue); stroke-width:54; stroke-dasharray:1; stroke-dashoffset:.55}
.motion .ev-wave-draw{animation:ev-sketch 4.8s var(--numa-ease) infinite}
@keyframes ev-sketch{
  0%{stroke-dashoffset:1}
  55%,70%{stroke-dashoffset:.35}
  100%{stroke-dashoffset:-.65}
}
.ev-art-label{
  position:absolute; left:1.4rem; bottom:1.2rem; font-size:.78rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ev-splash);
}

/* ── Poll (#shape) ───────────────────────────────────────── */
.sec-shape{
  width:100%; color:#fff; border-radius:28px; background:var(--ev-dark);
  max-width:calc(min(1080px, 100% - 3rem)); padding-inline:clamp(1.25rem,4vw,3rem);
}
.sec-shape .sub{color:rgba(255,255,255,.7)}
.sec-shape .ev-kicker{color:var(--ev-splash)}
.ev-kicker{font-size:.76rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:.8rem}

.sh{
  display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(0, .85fr); gap:clamp(1rem, 3vw, 2.2rem);
  margin-top:2.4rem; text-align:left;
  background:var(--white); color:var(--ink); border-radius:24px;
  padding:clamp(1.25rem,3.5vw,2.4rem);
}
.sh[hidden]{display:none}
.sh-qs{display:grid; gap:1.6rem; min-width:0}
.sh-q{border:none; margin:0; padding:0; min-width:0; display:grid; gap:.55rem}
.sh-legend{display:flex; align-items:center; gap:.7rem; padding:0; font-size:1.15rem; font-weight:600; letter-spacing:-.025em}
.sh-n{
  display:inline-grid; place-items:center; width:2rem; height:2rem; flex:none;
  border-radius:50%; background:var(--blue-50); color:var(--blue); font-size:.72rem; font-weight:600; letter-spacing:0;
}
.sh-hint{font-size:.88rem; color:var(--ink-2); margin-left:2.7rem}
.sh-counter{color:var(--blue); font-weight:500; margin-left:.25rem}
.sh-q .chips{margin-top:.2rem}
.sh-q.is-bad .chip span{border-color:#D8503C}
.sh-idea{margin-top:-.2rem}
/* Optional email: a quiet panel, consent appears once there's an address */
.sh-mail{display:grid; gap:.55rem; padding:1rem 1.1rem 1.1rem; border-radius:16px; background:var(--blue-50)}
.sh-mail .sh-hint{margin-left:0; font-size:.84rem}
.sh-mail .consent[hidden]{display:none}
.motion .sh-mail .consent:not([hidden]){animation:ev-in .4s cubic-bezier(.2,.7,.2,1) both}
.sh-mail .is-bad input{border-color:#D8503C}

/* Price reads as a scale: one joined row instead of loose chips. */
.sh-scale{gap:0; flex-wrap:nowrap}
.sh-scale .chip{flex:1}
.sh-scale .chip span{display:block; text-align:center; border-radius:0; margin-left:-1px; padding-inline:.4rem; white-space:nowrap}
.sh-scale .chip:first-child span{border-radius:100px 0 0 100px; margin-left:0}
.sh-scale .chip:last-child span{border-radius:0 100px 100px 0}
.sh-scale .chip input:checked + span{position:relative; z-index:1}

/* The ticket that fills in as you answer */
.sh-side{display:flex; flex-direction:column; gap:.9rem; align-self:start; position:sticky; top:6.5rem}
.sh-ticket{
  position:relative; color:#fff; background:var(--ev-dark); border-radius:20px;
  padding:1.4rem 1.4rem 0; overflow:hidden;
  box-shadow:0 24px 48px -28px rgba(8,21,29,.8);
}
/* Punched notches either side of the tear line */
.sh-ticket::before, .sh-ticket::after{
  content:""; position:absolute; bottom:4.1rem; width:1.4rem; height:1.4rem; border-radius:50%; background:var(--white);
}
.sh-ticket::before{left:-.7rem}
.sh-ticket::after{right:-.7rem}
.sh-ticket-eyebrow{font-size:.72rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ev-splash)}
.sh-ticket dl{margin:.9rem 0 1.3rem; display:grid; gap:.85rem}
.sh-ticket dl > div{display:grid; gap:.1rem}
.sh-ticket dt{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5)}
.sh-ticket dd{
  margin:0; font-size:1.02rem; font-weight:500; letter-spacing:-.015em; line-height:1.3;
  color:rgba(255,255,255,.55); filter:blur(3px);
  transition:filter .6s ease, color .6s ease;
}
.sh-ticket .is-set dd{filter:none; color:#fff}
.motion .sh-ticket .is-pop dd{animation:sh-pop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes sh-pop{from{transform:scale(.94); opacity:.4}}
.sh-stub{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  height:4.1rem; margin:0 -1.4rem; padding:0 1.4rem;
  border-top:2px dashed rgba(207,224,245,.25);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.sh-stub svg{width:1.7rem; height:auto; fill:none; stroke:var(--numa-blue); stroke-width:70; overflow:visible}

.sh-submit{justify-content:center}
.sh-submit[disabled]{opacity:.6}
.sh-note{font-size:.82rem; color:var(--ink-3); text-align:center}
.sh-msg:empty{display:none}

/* Done */
.sh-done{
  position:relative; margin-top:2.4rem; text-align:left; overflow:hidden;
  background:var(--white); color:var(--ink); border-radius:24px;
  padding:clamp(1.6rem,4vw,2.8rem); display:grid; gap:.7rem; justify-items:start;
}
.sh-done .sh-ticket-eyebrow{color:var(--blue)}
.sh-done h3{font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.035em; outline:none}
.sh-done p{color:var(--ink-2); max-width:32rem}
.sh-done-row{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin-top:.6rem}
.sh-again{font:500 .88rem/1 var(--font); color:var(--ink-3); background:none; border:none; padding:.7rem 0; cursor:pointer}
.sh-again:hover{color:var(--blue)}
.sh-done-wave{
  position:absolute; right:-2rem; top:50%; translate:0 -50%; width:min(34%, 260px); height:auto; z-index:0;
  fill:none; stroke:var(--blue-50); stroke-width:54; stroke-dasharray:1; stroke-dashoffset:0; pointer-events:none;
}
.motion .sh-done-wave{animation:ev-draw 1.6s var(--numa-ease) both}
@keyframes ev-draw{from{stroke-dashoffset:1}}
.sh-done > :not(.sh-done-wave){position:relative; z-index:1}

/* ── Small screens ───────────────────────────────────────── */
@media (max-width:860px){
  .sh{grid-template-columns:1fr}
  .sh-side{position:static}
}
@media (max-width:720px){
  .ev-card{grid-template-columns:1fr; min-height:0}
  .ev-date{flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:.2rem .7rem; padding:1.4rem 1.5rem; min-height:150px; align-content:center}
  .ev-date-wd{flex-basis:100%}
  .ev-date-d{font-size:4.6rem; margin:0}
  .ev-date-wave{width:38%; right:-12%; bottom:-48%}
  .ev-soon .ev-art{min-height:170px}
  .ev-soon svg{width:34%}
}
@media (max-width:620px){
  .ev-tabs{display:flex; width:100%}
  .ev-tab{flex:1; min-width:0; padding-inline:.5rem}
  .ev-actions .btn{width:100%; justify-content:center}
  .sh-hint{margin-left:0}
  .sh-scale{flex-wrap:wrap; gap:.45rem}
  .sh-scale .chip{flex:0 0 auto}
  .sh-scale .chip span, .sh-scale .chip:first-child span, .sh-scale .chip:last-child span{border-radius:100px; margin-left:0}
  .sh-done-wave{opacity:.6}
}