/* ============================================================
   LIVO Experience @ De Club
   ------------------------------------------------------------
   Strictly brandbook (General/design.md):
   - Palette: White #FFFFFF, Black #000000, Stone #8F8B7E,
     Celadon #D1DCBD. No dark green. Night-mode text: cream
     #f5f0e8, muted #b0aba3.
   - Figtree primary, IBM Plex Mono for short Latin all-caps only.
   - Mono floor 0.8rem, UI text floor 0.8rem, errors >= 0.88rem.
   - Pills: border-radius 100px.
   Form follows the Nevo Peretz idiom: body-font labels, radio-mark
   tier rows, segmented choice pills, per-field salmon errors.
   ============================================================ */

:root {
  --black:      #000000;
  --white:      #ffffff;
  --stone:      #8F8B7E;
  --celadon:    #D1DCBD;
  --celadon-hi: #bccaa0;

  --surface:    #1a1a17;
  --cream:      #f5f0e8;
  --muted:      #b0aba3;
  --salmon:     #e8a599;

  --line:        rgba(245, 240, 232, 0.12);
  --line-strong: rgba(245, 240, 232, 0.26);

  --font: 'Figtree', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --r-lg: 32px;
  --r-md: 20px;
  --r-sm: 14px;
  --pill: 100px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--black);
  color: var(--cream);
  font-family: var(--font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Author rules that set `display` beat the UA stylesheet's [hidden] rule, so
   hiding by attribute silently failed on .otp and .otp-row. Guard it once. */
[hidden] { display: none !important; }

img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--celadon); color: var(--black); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─────────── shared type ─────────── */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--celadon);
}
.eyebrow--center { text-align: center; }

.section__title {
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--white);
  margin-top: 18px;
}

.section__note {
  max-width: 46ch;
  margin: 20px auto 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--muted);
}

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 620px; }

.section { padding: clamp(72px, 12vw, 128px) 0; }

/* ═══════════════ HERO ═══════════════ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 168px 24px 88px;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.88;
  filter: brightness(1.02) saturate(0.92) contrast(1.05);
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(110% 80% at 50% 48%, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.42) 55%, rgba(0,0,0,0.8) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.04) 30%, rgba(0,0,0,0.32) 70%, rgba(0,0,0,0.94) 100%);
}

.hero__brand {
  position: absolute;
  top: 36px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  width: 100%;
  padding: 0 24px;
}
.hero__mark { width: 88px; opacity: 0.92; margin: 0 auto; }

.floors {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 24px);
  margin-top: 18px;
}
.floors img { height: 26px; width: auto; opacity: 0.9; }

.hero__inner { position: relative; z-index: 1; max-width: 860px; width: 100%; }

.hero__title {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.8vw, 20px);
}
.hero__word {
  font-size: clamp(52px, 13vw, 118px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--white);
}
.hero__at-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 20px);
  width: 100%;
}
.hero__at {
  flex-shrink: 0;
  font-size: clamp(19px, 3.4vw, 34px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--stone);
  line-height: 1;
}
.hero__logo {
  width: clamp(200px, 44vw, 380px);
  height: auto;
}

.hero__sub {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: clamp(0.8rem, 2.4vw, 0.88rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream);
}
.hero__sub i { color: var(--celadon); font-style: normal; padding: 0 8px; }

/* date block: bold type, no container */
.when { margin-top: 36px; }
.when span { display: block; }
.when__day,
.when__time {
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cream);
  line-height: 1.28;
}
.when__date {
  font-size: clamp(34px, 6.6vw, 58px);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--celadon);
  line-height: 1.1;
  margin: 2px 0 4px;
}

.hero__cta { margin-top: 38px; }

/* ═══════════════ BUTTONS ═══════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 44px;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .2s;
}
.btn--primary { background: var(--celadon); color: var(--black); }
.btn--primary:hover { background: var(--celadon-hi); }
.btn--ghost { background: transparent; color: var(--celadon); border-color: var(--line-strong); padding: 15px 24px; }
.btn--ghost:hover { border-color: var(--celadon); color: var(--white); }
.btn--full { width: 100%; margin-top: 10px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--celadon); outline-offset: 3px; }

/* ═══════════════ LINE UP ═══════════════ */

.section--lineup {
  border-top: 1px solid var(--line);
  text-align: center;
  padding: clamp(64px, 10vw, 104px) 0;
}

.lineup { list-style: none; margin-top: 30px; }
.lineup li {
  font-size: clamp(32px, 7vw, 66px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.035em;
  color: var(--white);
  transition: color .3s var(--ease);
}
.lineup li:hover { color: var(--celadon); }

.lineup__note {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ═══════════════ SPACES ═══════════════ */

.spaces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 56px;
}

.space {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.space:hover { border-color: var(--line-strong); transform: translateY(-3px); }

.space__art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.space__art img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }

.space__body { padding: 30px 28px 34px; }

.space__no {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone);
}

.space__name {
  margin-top: 12px;
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
}

.space__open {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--celadon);
}

.space__desc { margin-top: 12px; font-size: 1rem; line-height: 1.55; color: var(--muted); max-width: 34ch; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tags li {
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 7px 15px;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ═══════════════ RSVP FORM ═══════════════ */

.section--rsvp { border-top: 1px solid var(--line); }

.card {
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: clamp(24px, 5vw, 40px);
}

.form-block { border: 0; display: flex; flex-direction: column; gap: 30px; }
.form-block + .form-block { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }

.block-label {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--stone);
  padding: 0;
  margin-bottom: 14px;
}

/* labels are content, so body font at a readable size (Nevo idiom) */
.label {
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--cream);
}
.label i { font-style: normal; color: var(--celadon); }

/* 9px inside a field vs 30px between fields: a label reads as belonging
   to the input under it, not the one above. */
/* [data-fields] wraps the six detail fields so a verified member can have the
   whole block hidden at once. It is a plain div, so without this it contributed
   NO spacing and any .field sitting next to a .field-row collided with zero gap,
   which is what made a label look like it belonged to the field above. */
[data-fields], [data-fields-2] { display: flex; flex-direction: column; gap: 30px; }

.field { display: flex; flex-direction: column; gap: 9px; }
.field[hidden] { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 18px; }

.field input,
.field select {
  width: 100%;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--cream);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  padding: 14px 15px;
  outline: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.field select { appearance: none; cursor: pointer; }
.field select option { background: var(--surface); color: var(--cream); }
.field input::placeholder { color: rgba(176,171,163,0.45); }
.field input:focus, .field select:focus {
  border-color: var(--celadon);
  background: rgba(0,0,0,0.62);
  box-shadow: 0 0 0 3px rgba(209,220,189,0.15);
}
.field.invalid input,
.field.invalid select {
  border-color: var(--salmon);
  background: rgba(232,165,153,0.06);
}
.field.invalid input:focus,
.field.invalid select:focus { box-shadow: 0 0 0 3px rgba(232,165,153,0.15); }
.field input.is-code { font-family: var(--mono); letter-spacing: 0.5em; text-align: center; }

.prefixed { display: flex; align-items: stretch; }
.prefixed span {
  display: flex; align-items: center;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: rgba(0,0,0,0.4);
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--stone);
}
.prefixed input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.field.invalid .prefixed span { border-color: rgba(232,165,153,0.55); }

/* errors are content: body font, >= 0.88rem */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--salmon);
}
.field-error::before {
  content: '!';
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--salmon);
  color: var(--black);
  font-size: 0.72rem;
  font-weight: 700;
}
.field-error:empty::before { content: none; }
.field-error:empty { display: none; }
/* The summary sits right above the button, because that is where the eye is
   when submit is pressed. */
.field-error--form {
  margin-top: 20px;
  justify-content: center;
  padding: 14px 16px;
  border: 1px solid rgba(232,165,153,0.4);
  border-radius: var(--r-sm);
  background: rgba(232,165,153,0.08);
}
.field-error.is-ok { color: var(--celadon); }

/* OTP progress line: neutral by default, red only for a real error. */
.otp-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
}
.otp-note:empty { display: none; }
.otp-note.is-ok { color: var(--celadon); }
.otp-note.is-error { color: var(--salmon); }
.otp-note.is-error::before {
  content: '!';
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--salmon);
  color: var(--black);
  font-size: 0.72rem;
  font-weight: 700;
}

.form-footnote {
  font-family: var(--font);
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--stone);
}
.form-footnote--center { text-align: center; margin-top: 16px; }

/* a section reveals itself once the step above it is answered */
.form-block:not([hidden]),
[data-finish]:not([hidden]) { animation: reveal .35s var(--ease) both; }

@keyframes reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ── verified member panel ── */

.known {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--celadon);
  border-radius: var(--r-md);
  background: rgba(209,220,189,0.07);
}
.known__tick {
  flex-shrink: 0;
  position: relative;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--celadon);
}
.known__tick::after {
  content: '';
  position: absolute;
  top: 6px; left: 8px;
  width: 5px; height: 10px;
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: rotate(45deg);
}
.known__title { font-size: 1rem; font-weight: 600; color: var(--white); }
.known__sub { margin-top: 5px; font-size: 0.9rem; color: var(--muted); line-height: 1.6; }

/* ── tier rows ── */

.tier-chooser { display: flex; flex-direction: column; gap: 12px; }

.tier-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(0,0,0,0.35);
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.tier-option:hover { border-color: var(--line-strong); }
.tier-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.tier-mark {
  flex-shrink: 0;
  position: relative;
  width: 18px; height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: border-color .25s var(--ease);
}
.tier-option input:checked ~ .tier-mark { border-color: var(--celadon); }
.tier-option input:checked ~ .tier-mark::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--celadon);
}
.tier-option:has(input:checked) { border-color: var(--celadon); background: rgba(209,220,189,0.07); }
.tier-option:has(input:checked) .tier-label { color: var(--celadon); }
.tier-option input:focus-visible ~ .tier-mark { box-shadow: 0 0 0 3px rgba(209,220,189,0.2); }

.tier-body { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.tier-label { font-size: 1.02rem; font-weight: 600; color: var(--white); letter-spacing: -0.01em; }
.tier-note { font-size: 0.88rem; color: var(--muted); line-height: 1.5; }

.tier-price {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--celadon);
  white-space: nowrap;
}
.tier-price s { text-decoration: none; color: var(--stone); padding: 0 2px; }
.tier-price.is-free { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82rem; }

/* ── segmented choices ── */

.choices { display: flex; gap: 10px; }
.choice { flex: 1; position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.choice:hover span { border-color: var(--line-strong); }
.choice input:checked + span { background: var(--celadon); color: var(--black); border-color: var(--celadon); }
.choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(209,220,189,0.2); }

/* ── otp ── */

.otp { display: flex; flex-direction: column; gap: 14px; }
.otp-row { display: flex; align-items: flex-end; gap: 10px; }
.otp-row .field { flex: 1; }
.otp-row .btn { flex-shrink: 0; }

/* ── consent checkbox ── */

.consent { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }

.check { display: flex; align-items: flex-start; gap: 13px; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex-shrink: 0;
  position: relative;
  width: 21px; height: 21px;
  margin-top: 1px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(0,0,0,0.4);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.check input:checked + .check__box { background: var(--celadon); border-color: var(--celadon); }
.check input:checked + .check__box::after {
  content: "";
  position: absolute;
  top: 4px; left: 7px;
  width: 5px; height: 10px;
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: rotate(45deg);
}
.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px rgba(209,220,189,0.2); }
.check__text { font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.check__text i { font-style: normal; color: var(--celadon); }
.consent.invalid .check__box { border-color: rgba(232,165,153,0.7); }

/* ── confirmation ── */

/* ── payment (PayPlus iframe) ── */

.card--payment { padding: 28px 20px; }

.payment__title {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
}
.payment__sub { margin-top: 8px; font-size: 0.9rem; color: var(--muted); line-height: 1.6; }

.payment__frame-wrap {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff; /* PayPlus renders on white; avoids a dark flash while it loads */
}
.payment__frame {
  display: block;
  width: 100%;
  height: min(760px, 80vh);
  border: 0;
}

.payment__back {
  margin-top: 16px;
  background: none;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.payment__back:hover { color: var(--celadon); }

.card--confirm { text-align: center; padding: 48px 32px; }

.confirm__mark {
  display: block;
  width: 52px; height: 52px;
  margin: 0 auto 24px;
  border-radius: 50%;
  border: 1px solid var(--celadon);
  position: relative;
}
.confirm__mark::after {
  content: '';
  position: absolute;
  top: 46%; left: 50%;
  width: 15px; height: 8px;
  border-left: 1.5px solid var(--celadon);
  border-bottom: 1.5px solid var(--celadon);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.confirm__title {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
}
.confirm__sub { margin-top: 14px; font-size: 0.95rem; color: var(--muted); line-height: 1.7; }
.confirm__when {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--celadon);
}

/* ═══════════════ FOOTER ═══════════════ */

.footer {
  padding: 56px 24px 64px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.footer__logo { width: 72px; margin: 0 auto 20px; opacity: 0.6; }

.footer__address {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}

.socials { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 24px 0 26px; }
.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--stone);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.socials a:hover { color: var(--celadon); border-color: var(--celadon); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }
.socials a:focus-visible { outline: 2px solid var(--celadon); outline-offset: 3px; }

.footer__legal {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--stone);
  line-height: 2.1;
}
.footer .sep { color: var(--celadon); padding: 0 9px; }
.footer a { text-decoration: none; transition: color .25s; }
.footer a:hover { color: var(--celadon); }
.footer__legal a[hreflang], .footer__legal a:last-child { font-family: var(--font); font-size: 0.88rem; letter-spacing: 0; }

/* Knightica credit */
.credit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 4px 0;
  text-decoration: none;
}
.credit:focus-visible { outline: 2px solid var(--celadon); outline-offset: 3px; }

.credit__label {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}
.credit__name {
  position: relative;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cream);
  transition: color .3s var(--ease);
}
.credit__name::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--celadon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.credit:hover .credit__name { color: var(--celadon); }
.credit:hover .credit__name::after { transform: scaleX(1); }

.credit__arrow {
  width: 13px; height: 13px;
  color: var(--stone);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.credit:hover .credit__arrow { color: var(--celadon); transform: translate(2px, -2px); }

@media (max-width: 480px) {
  .credit { flex-direction: column; gap: 6px; padding: 14px 22px; }
  .credit__arrow { display: none; }
}

/* ═══════════════ RESPONSIVE ═══════════════ */

@media (max-width: 780px) {
  .spaces { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hero { padding-top: 176px; }
  .floors img { height: 22px; }
  .field-row { grid-template-columns: 1fr; }
  .choices { flex-direction: column; }
  .choices--gender { flex-direction: row; }
  .otp-row { flex-direction: column; align-items: stretch; }
  .otp-row .btn { width: 100%; }
  .tier-option { align-items: flex-start; gap: 13px; padding: 16px; }
  .tier-price { padding-top: 2px; }
  .footer .sep { padding: 0 6px; }
  .socials { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ═══════════════ ACCESSIBILITY WIDGET ═══════════════
   Ported from the Knightica site widget, repainted in the De Club
   brandbook: celadon launcher on black, cream panel, black header.
   Effect classes on <html> are identical to the Knightica build. */

.dc-a11y-btn {
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 9997;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--celadon);
  color: var(--black);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.dc-a11y-btn:hover { transform: translateY(-2px); background: var(--celadon-hi); box-shadow: 0 14px 32px rgba(0,0,0,0.5); }
.dc-a11y-btn:focus-visible { outline: 2px solid var(--celadon); outline-offset: 3px; }
.dc-a11y-btn svg { width: 26px; height: 26px; }

.dc-a11y-panel {
  position: fixed;
  left: 20px; bottom: 82px;
  z-index: 9997;
  width: min(300px, calc(100vw - 40px));
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  background: var(--cream);
  color: var(--black);
  border-radius: var(--r-md);
  box-shadow: 0 20px 54px rgba(0,0,0,0.55);
  font-family: var(--font);
  opacity: 0;
  transform: translateY(12px) scale(.97);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.dc-a11y-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.dc-a11y-head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 17px;
  background: var(--black);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.dc-a11y-close {
  background: none; border: none; color: inherit;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}

.dc-a11y-body { padding: 14px 17px 17px; display: flex; flex-direction: column; gap: 2px; }

.dc-a11y-textsize {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.88rem;
  padding: 9px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.dc-a11y-textsize-btns { display: flex; gap: 6px; }
.dc-a11y-textsize-btns button {
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(0,0,0,0.16);
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.82rem; font-weight: 700;
  color: var(--black);
}
.dc-a11y-textsize-btns button:hover { background: rgba(0,0,0,0.06); }

.dc-a11y-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: none; border: none;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  font-family: var(--font);
  font-size: 0.88rem;
  color: var(--black);
  cursor: pointer;
  text-align: inherit;
}
.dc-a11y-switch {
  width: 38px; height: 21px;
  border-radius: var(--pill);
  background: rgba(0,0,0,0.16);
  position: relative; flex-shrink: 0;
  transition: background .2s;
}
.dc-a11y-switch::before {
  content: "";
  position: absolute; top: 2px; inset-inline-start: 2px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #fff;
  transition: inset-inline-start .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.dc-a11y-toggle[aria-pressed="true"] .dc-a11y-switch { background: var(--black); }
.dc-a11y-toggle[aria-pressed="true"] .dc-a11y-switch::before { inset-inline-start: 19px; }

.dc-a11y-reset {
  margin-top: 10px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: var(--pill);
  padding: 10px 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--black);
}
.dc-a11y-reset:hover { background: rgba(0,0,0,0.05); }

.dc-a11y-statement {
  margin-top: 12px;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(0,0,0,0.62);
  text-decoration: underline;
}
.dc-a11y-statement:hover { color: var(--black); }

/* ---------- effect classes on <html> ---------- */
html.a11y-contrast { filter: contrast(1.35) saturate(1.15); }
html.a11y-grayscale { filter: grayscale(1); }
html.a11y-contrast.a11y-grayscale { filter: grayscale(1) contrast(1.35); }
html.a11y-underline-links a { text-decoration: underline !important; }
html.a11y-stop-motion * { animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-readable-font, html.a11y-readable-font body, html.a11y-readable-font * { font-family: Arial, Helvetica, sans-serif !important; }

@media (max-width: 560px) {
  .dc-a11y-btn { left: 14px; bottom: 14px; width: 48px; height: 48px; }
  .dc-a11y-panel { left: 14px; bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-a11y-panel, .dc-a11y-btn { transition: none; }
}

/* Sold out: the tier stays visible so the reason is legible, but it cannot be
   chosen. Hiding it entirely just makes people think the page is broken. */
.tier-option.is-soldout { opacity: 0.55; cursor: not-allowed; }
.tier-option.is-soldout .tier-mark { border-color: var(--line); }
.tier-option.is-soldout .tier-label { color: var(--muted); }
.tier-option.is-soldout .tier-price { color: var(--stone); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82rem; }

/* Quiet secondary action. Appears only after a code has been requested, so it
   never competes with the primary path. */
.linkbtn {
  align-self: flex-start;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(209, 220, 189, 0.35);
  border-radius: 0;
  font-family: var(--font);
  font-size: 0.88rem;
  color: var(--celadon);
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.linkbtn:hover { border-bottom-color: var(--celadon); color: var(--white); }
.linkbtn:disabled { opacity: 0.5; cursor: default; }
.linkbtn:focus-visible { outline: 2px solid var(--celadon); outline-offset: 3px; }

/* ── second ticket: add / remove ── */
.add-partner { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.add-partner .form-footnote { margin-top: 10px; }
.partner-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.partner-head .form-footnote { margin: 0; }
.btn--small { padding: 9px 16px; font-size: 0.72rem; }

/* ═══════════════ THE LIVO EXPERIENCE (2026-10) ═══════════════
   Added for the LIVO Experience page on top of the Autumn base: the hero's
   "The", the rituals grid, the facts strip, the health declaration block
   (questions, declaration text, signature pad), the private CTA and the
   closing line. Same tokens, same floors (mono 0.8rem, errors 0.88rem). */

.hero__word--the {
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1;
  color: var(--stone);
}
.hero__word + .hero__word { margin-top: 6px; }
.when i { color: var(--celadon); font-style: normal; padding: 0 10px; }
.when__time i { padding: 0 8px; }

.section--intro { text-align: center; }
.section--intro .section__note + .section__note { margin-top: 18px; }

.section--rituals { border-top: 1px solid var(--line); text-align: center; padding-bottom: 0; }
/* scroll-driven carousel (Yuval, 18.10): the cards pin on screen and the
   page scroll slides them sideways; the page moves on after the last card.
   The wrapper's height is set by script (viewport + the track's overflow).
   Reduced motion gets a plain scroll-snap track instead (.is-static). */
.scrolly { position: relative; margin-top: 12px; text-align: left; }
.scrolly__pin {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-x: clip;
  padding: 24px 0;
}
.carousel__track {
  display: flex;
  gap: 18px;
  margin: 0 -24px;
  padding: 4px 24px 8px;
  will-change: transform;
}
.scrolly.is-static .carousel__track {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-padding-left: 24px;
}
.scrolly.is-static .carousel__track::-webkit-scrollbar { display: none; }
.carousel__nav { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.carousel__btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--cream);
  font-family: var(--font);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.carousel__btn:hover { border-color: var(--celadon); color: var(--celadon); }
.carousel__btn:disabled { opacity: 0.3; cursor: default; border-color: var(--line); color: var(--cream); }
.carousel__btn:focus-visible { outline: 2px solid var(--celadon); outline-offset: 3px; }
.ritual {
  flex: 0 0 min(380px, 82vw);
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.ritual:hover { border-color: var(--line-strong); }
.ritual__art { aspect-ratio: 4 / 3; overflow: hidden; }
.ritual__art img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.ritual__body { padding: 26px 26px 30px; display: flex; flex-direction: column; justify-content: center; flex: 1; }
.ritual__no {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.26em;
  color: var(--celadon);
}
.ritual__no--second { margin-top: 26px; }
.ritual__name {
  margin-top: 10px;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1.15;
}
.ritual__desc { margin-top: 10px; font-size: 1rem; line-height: 1.55; color: var(--muted); max-width: 38ch; }
.ritual--text .ritual__body { padding: 34px 30px; }

.section--quiet { border-top: 1px solid var(--line); text-align: center; }
.section--quiet .section__title { font-size: clamp(26px, 3.6vw, 40px); }
.verse { margin-top: 30px; }
.verse p {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--cream);
}
.verse p + p { margin-top: 6px; }
.section--quiet .section__note { margin-top: 28px; }

.section--facts { border-top: 1px solid var(--line); text-align: center; }
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
  text-align: left;
}
.fact {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fact__label {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--stone);
}
.fact__value { font-size: 1.05rem; font-weight: 500; line-height: 1.45; color: var(--cream); }
.fact__value small { display: block; margin-top: 4px; font-size: 0.88rem; font-weight: 300; color: var(--muted); }
.section__note--tight { margin-top: 30px; }

/* health declaration */
.questions { display: flex; flex-direction: column; gap: 26px; }
.question { display: flex; flex-direction: column; gap: 12px; }
.question__text { font-size: 0.95rem; font-weight: 400; line-height: 1.55; color: var(--cream); }
.question__text i { font-style: normal; color: var(--celadon); }
.choices--yn { max-width: 280px; }
.choices--gender .choice span { padding: 13px 14px; }
.question.invalid .choice span { border-color: var(--salmon); }

.field textarea {
  width: 100%;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--cream);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 14px 15px;
  outline: none;
  resize: vertical;
  min-height: 96px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.field textarea::placeholder { color: rgba(176,171,163,0.45); }
.field textarea:focus {
  border-color: var(--celadon);
  background: rgba(0,0,0,0.62);
  box-shadow: 0 0 0 3px rgba(209,220,189,0.15);
}
.field.invalid textarea { border-color: var(--salmon); background: rgba(232,165,153,0.06); }

.declaration {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,0.35);
  padding: 20px 20px 18px;
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.declaration__title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 12px;
}
.declaration__list { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.declaration__list li { font-size: 0.9rem; line-height: 1.6; color: var(--muted); }

.signature__pad-wrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--cream);
  overflow: hidden;
}
.signature__pad {
  display: block;
  width: 100%;
  height: 180px;
  touch-action: none;
  cursor: crosshair;
}
.signature__hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--stone);
}
.signature__actions { display: flex; justify-content: flex-end; }
.signature.invalid .signature__pad-wrap { border-color: var(--salmon); box-shadow: 0 0 0 3px rgba(232,165,153,0.15); }

/* private experience CTA + closing */
.section--private { border-top: 1px solid var(--line); text-align: center; }
.btn--wa { margin-top: 30px; display: inline-flex; align-items: center; gap: 12px; }
.btn--wa svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

.section--closing { border-top: 1px solid var(--line); text-align: center; padding: clamp(64px, 10vw, 104px) 0; }
.closing__line {
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--cream);
}
.closing__brand {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--celadon);
  white-space: nowrap;
}
@media (max-width: 520px) {
  .closing__brand { white-space: normal; letter-spacing: 0.16em; }
}
.closing__brand i { font-style: normal; padding: 0 8px; color: var(--stone); }

@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
  .when i { padding: 0 6px; }
  .when__date { font-size: clamp(28px, 8.2vw, 36px); }
  .when__pair { display: block; }
  .when__sep { display: none; }
  .choices--yn { max-width: none; }
  .btn--wa { width: 100%; justify-content: center; text-align: left; }
}

/* three-step wizard: details, health declaration, payment (Yuval, 18.10) */
.steps {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 9px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.step__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--stone);
}
.step.is-current { border-color: var(--celadon); color: var(--white); }
.step.is-current .step__no { background: var(--celadon); border-color: var(--celadon); color: var(--black); }
.step.is-done { color: var(--cream); }
.step.is-done .step__no { border-color: var(--celadon); color: var(--celadon); }

.actions { display: flex; gap: 12px; margin-top: 10px; }
.actions .btn { margin-top: 0; }
.btn--back { flex-shrink: 0; }
.btn--grow { flex: 1; }
[data-step] { display: flex; flex-direction: column; gap: 30px; }
[data-step] .form-block + .form-block { margin-top: 2px; }

@media (max-width: 560px) {
  .steps { gap: 6px; margin-top: 30px; }
  .step { padding: 7px 10px 7px 7px; gap: 7px; font-size: 0.8rem; }
  .step:not(.is-current) .step__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .step:not(.is-current) { padding-right: 7px; }
  .actions { flex-direction: column; }
}