/* ============================================================
   CUVÉE — the welcome offer
   Scoped to .cs-* so it cannot reach anything else. Hidden by
   default at the markup level (the [hidden] attribute), so if the
   script never runs, nobody ever sees it.
   ============================================================ */

.cs-scrim{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;padding:16px;
  background:rgba(59,50,44,.44);
  backdrop-filter:blur(3px);
  opacity:0;transition:opacity .26s ease;
}
.cs-scrim.on{opacity:1}
.cs-scrim[hidden]{display:none}

.cs-card{
  position:relative;width:min(720px,100%);max-height:92svh;overflow:auto;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  background:var(--panel,#FBF9F2);
  border:1px solid var(--sand,#E9DECF);
  border-radius:var(--radius,14px);
  box-shadow:0 40px 90px -40px rgba(59,50,44,.6);
  transform:translateY(14px) scale(.985);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
  font-family:var(--font,'EB Garamond',Georgia,serif);
}
.cs-scrim.on .cs-card{transform:none}

.cs-x{
  position:absolute;top:6px;right:10px;z-index:2;
  background:none;border:0;cursor:pointer;
  font-size:28px;line-height:1;color:var(--muted,#807A72);
  padding:4px 8px;border-radius:8px;
}
.cs-x:hover{color:var(--ink,#3B322C);background:rgba(59,50,44,.06)}

.cs-art{
  display:grid;place-items:center;padding:18px 6px 18px 14px;
  background:linear-gradient(160deg,#F3EADC,#EDE2D0);
  border-right:1px solid var(--sand,#E9DECF);
  border-radius:var(--radius,14px) 0 0 var(--radius,14px);
}
.cs-art img{width:100%;max-width:230px;height:auto;filter:drop-shadow(0 18px 26px rgba(59,50,44,.22))}

.cs-body,.cs-done{padding:clamp(18px,3vw,30px) clamp(18px,3vw,30px) clamp(16px,2.4vw,24px)}
.cs-done[hidden],.cs-body[hidden]{display:none}
.cs-done{grid-column:1 / -1;text-align:center}

.cs-kicker{margin:0 0 6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold,#9D8663)}
.cs-card h2{margin:0 0 8px;font-size:clamp(1.45rem,1.2rem + 1.3vw,2rem);line-height:1.1;color:var(--ink,#3B322C);font-weight:500}
.cs-sub{margin:0 0 14px;color:var(--ink-2,#57504A);font-size:.98rem;line-height:1.46}

.cs-field input{
  width:100%;font-family:inherit;font-size:1rem;
  padding:11px 13px;border-radius:var(--radius-s,9px);
  border:1px solid var(--sand,#E9DECF);background:#FFFDF8;color:var(--ink,#3B322C);
}
.cs-field input:focus{outline:2px solid var(--gold,#9D8663);outline-offset:1px;border-color:transparent}

.cs-age{display:flex;align-items:center;gap:8px;margin:11px 0 14px;font-size:.92rem;color:var(--ink-2,#57504A)}
.cs-age input{width:17px;height:17px;accent-color:var(--wine,#7A2333)}

/* the honeypot: present for a bot, gone for everyone else */
.cs-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cs-go{
  width:100%;font-family:inherit;font-size:1rem;cursor:pointer;
  padding:12px 18px;border:0;border-radius:999px;
  background:var(--wine,#7A2333);color:#FFFDF8;
  transition:background .2s ease;
}
.cs-go:hover{background:var(--wine-2,#8A3B49)}
.cs-go[disabled]{opacity:.6;cursor:default}

.cs-err{margin:10px 0 0;color:var(--wine,#7A2333);font-size:.9rem}
.cs-err[hidden]{display:none}

.cs-no{
  display:block;width:100%;margin-top:12px;
  background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:.86rem;color:var(--muted,#807A72);text-decoration:underline;
}
.cs-no:hover{color:var(--ink-2,#57504A)}

.cs-code b{
  display:inline-block;margin:4px 0 10px;
  font-size:clamp(1.1rem,1rem + .8vw,1.5rem);letter-spacing:.06em;
  background:#FFFDF8;border:1px dashed var(--blush-2,#E5C9CB);color:var(--wine,#7A2333);
  padding:9px 18px;border-radius:var(--radius-s,9px);
}
.cs-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0 0}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- phones: the picture is a header strip, not a column ---------- */
@media (max-width:640px){
  .cs-card{grid-template-columns:1fr;max-height:94svh}
  .cs-art{
    padding:12px;border-right:0;border-bottom:1px solid var(--sand,#E9DECF);
    border-radius:var(--radius,14px) var(--radius,14px) 0 0;
  }
  .cs-art img{max-width:132px}
  .cs-sub{font-size:.93rem}
}

@media (prefers-reduced-motion: reduce){
  .cs-scrim,.cs-card{transition:none}
}