/* ═══════════════════════════════════════════════════════════════
   Allison Carmany × Whispers of Oneness
   Built in the live Soulful language measured off event.soulfulevolution.com:
   Playfair Display 700 ragged left, system sans body, indigo-violet ground,
   magenta / cyan / butter accents inside the headline, lit pills, dark rounded
   cards, a dashed ticket strip. Every block uses both edges.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:        #120726;
  --bg-2:      #170b36;
  --bg-3:      #1f0f47;
  --card:      rgba(38,20,82,.62);
  --card-line: rgba(160,120,255,.22);

  --pink:      #FF6FB5;
  --pink-hot:  #F857A6;
  --cyan:      #6FD9FF;
  --butter:    #FFE066;
  --gold:      #FFC83D;

  --ink:       #F3EEFF;
  --ink-soft:  #C4B6E4;
  --ink-dim:   #9A8AC0;

  --display: 'Playfair Display', Georgia, serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r:  18px;
  --r-lg: 24px;
  --pad: 1.25rem;
  --dock-h: 0px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:1rem; line-height:1.62;
  overflow-x:hidden; padding-bottom:var(--dock-h);
}

.veil{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(38rem 26rem at 88% -4%, rgba(248,87,166,.16), transparent 66%),
    radial-gradient(34rem 26rem at 4% 22%,  rgba(111,217,255,.10), transparent 68%),
    radial-gradient(40rem 32rem at 96% 74%, rgba(120,60,220,.20), transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 42%, var(--bg-2));
}

/* starfield — three parallax layers, the nearest one breathes */
.veil::before,
.veil::after{
  content:""; position:absolute; inset:-10%;
  background-repeat:repeat;
}
.veil::before{
  /* far, dense, still */
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,  rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 68% 8%,   rgba(214,236,255,.75), transparent 60%),
    radial-gradient(1.3px 1.3px at 34% 62%,  rgba(255,255,255,.7),  transparent 60%),
    radial-gradient(1px   1px   at 86% 44%,  rgba(255,214,240,.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 88%,  rgba(255,255,255,.8),  transparent 60%),
    radial-gradient(1px   1px   at 8%  74%,  rgba(190,225,255,.7),  transparent 60%),
    radial-gradient(1.2px 1.2px at 94% 82%,  rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1px   1px   at 44% 34%,  rgba(255,236,250,.6),  transparent 60%);
  background-size:340px 340px;
  opacity:.55;
}
.veil::after{
  /* near, sparse, brighter — slow twinkle */
  background-image:
    radial-gradient(2px 2px at 22% 30%, rgba(255,255,255,.95), transparent 62%),
    radial-gradient(2.2px 2.2px at 78% 66%, rgba(255,224,102,.85), transparent 62%),
    radial-gradient(1.8px 1.8px at 58% 14%, rgba(255,111,181,.8), transparent 62%),
    radial-gradient(2px 2px at 14% 84%, rgba(111,217,255,.85), transparent 62%),
    radial-gradient(1.9px 1.9px at 90% 24%, rgba(255,255,255,.9), transparent 62%);
  background-size:620px 620px;
  opacity:.7;
  animation:twinkle 7s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.42; }
  50%    { opacity:.85; }
}
body > *:not(.veil){ position:relative; z-index:1; }

.skip{ position:absolute; left:-9999px; top:0; background:var(--butter); color:#241a00;
  padding:.7rem 1.1rem; font-weight:700; z-index:99; }
.skip:focus{ left:0; }

h1,h2,h3{ font-family:var(--display); font-weight:700; line-height:1.12;
  letter-spacing:-.015em; margin:0; text-wrap:balance; }
h1{ font-size:clamp(2.05rem, 8.6vw, 3.9rem); }
h2{ font-size:clamp(1.5rem, 5.6vw, 2.5rem); }
h3{ font-size:clamp(1.15rem, 4vw, 1.5rem); }
p{ margin:0 0 1em; }
em{ font-style:normal; }
mark{ background:none; color:var(--butter); font-weight:600; }
.dim{ color:var(--ink-soft); }
.hi-pink{ color:var(--pink); }
.hi-cyan{ color:var(--cyan); }

section{ padding:2.5rem var(--pad); }

/* ── dots & pills ───────────────────────────────────────────── */
.dot{ width:.5rem; height:.5rem; border-radius:50%; flex:none; display:inline-block; }
.dot--live{ background:var(--pink-hot); box-shadow:0 0 0 3px rgba(248,87,166,.22); }
.dot--cyan{ background:var(--cyan); box-shadow:0 0 0 3px rgba(111,217,255,.18); }
.dot--pink{ background:var(--pink); box-shadow:0 0 0 3px rgba(255,111,181,.18); }
.dot--gold{ background:var(--gold); box-shadow:0 0 0 3px rgba(255,200,61,.2); }

.pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.15rem; }
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.7rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:.5rem .85rem; border-radius:999px;
  background:rgba(38,20,82,.72); border:1px solid var(--card-line); color:var(--ink);
}
.pill--soft{ color:var(--ink-soft); }

/* ── bar: logo left, action right ───────────────────────────── */
.bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem var(--pad);
}
.bar__mark{ height:2.15rem; width:auto; }
.bar__pill{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); padding:.6rem 1rem; border-radius:999px;
  background:rgba(26,16,48,.72); border:1px solid var(--card-line);
}

/* ── buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--body); font-size:1rem; font-weight:700; text-decoration:none;
  padding:1.05rem 1.9rem; border-radius:999px; border:1px solid transparent;
  transition:transform .16s ease, box-shadow .24s ease, background-color .2s ease;
}
.btn--primary{
  background:linear-gradient(100deg, var(--pink-hot), #C44BF0 62%, #7B5CFF);
  color:#fff;
  box-shadow:0 10px 28px -10px rgba(248,87,166,.75), 0 2px 6px rgba(0,0,0,.4);
}
.btn--primary:hover{ transform:translateY(-2px);
  box-shadow:0 16px 38px -12px rgba(248,87,166,.9), 0 3px 8px rgba(0,0,0,.45); }
.btn--ghost{ background:rgba(111,217,255,.07); color:var(--cyan);
  border-color:rgba(111,217,255,.34); }
.btn--ghost:hover{ background:rgba(111,217,255,.14); }
.btn--gold{ background:var(--butter); color:#2a1f00; }
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(255,224,102,.6); }
.btn:focus-visible, a:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

/* ── hero ───────────────────────────────────────────────────── */
.hero{ padding-top:.25rem; padding-bottom:1.25rem; }
.hero__title{ margin:0 0 .85rem; }

/* the portrait: hidden on the smallest phones, then a real second column */
.hero__art{ display:none; }
.hero__art img{
  width:100%; height:auto; display:block; position:relative; z-index:1;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.65));
}
.hero__halo{
  position:absolute; inset:6% 2% 12%; z-index:0; border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(248,87,166,.45), transparent 72%),
    radial-gradient(closest-side, rgba(123,92,255,.4), transparent 78%);
  filter:blur(28px);
}
.hero__badge{
  position:absolute; z-index:2; left:0; bottom:8%;
  display:flex; flex-direction:column; line-height:1.15;
  padding:.65rem .95rem; border-radius:var(--r);
  background:rgba(18,7,38,.86); border:1px solid var(--card-line);
  backdrop-filter:blur(8px);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.9);
}
.hero__badge strong{ font-family:var(--display); font-size:1.3rem; color:var(--butter); }
.hero__badge{ font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-dim); }
.rule{
  font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--pink); margin:0 0 1.15rem;
}
.hero__copy{ color:var(--ink-soft); max-width:34rem; margin-bottom:1.5rem; }

.card{
  background:var(--card); border:1px solid var(--card-line);
  border-radius:var(--r-lg); box-shadow:0 18px 40px -22px rgba(0,0,0,.8);
}
.card--host{
  display:flex; align-items:center; gap:.9rem;
  padding:.7rem .95rem; border-radius:999px; margin-bottom:1.4rem;
}
.card--host__face{
  width:2.85rem; height:2.85rem; border-radius:50%; object-fit:cover; object-position:50% 18%;
  flex:none; border:1.5px solid rgba(255,255,255,.22);
}
.card--host__who{ display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.card--host__who strong{ font-size:.94rem; }
.card--host__who span{ font-size:.78rem; color:var(--ink-dim); }

/* label left / value right, two per row on a phone */
.when{
  display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-bottom:1.6rem;
}
.when__cell{
  display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
  padding:.72rem .95rem; border-radius:var(--r);
  background:rgba(26,16,48,.55); border:1px solid rgba(160,120,255,.15);
}
.when__k{ font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-dim); }
.when__v{ font-size:.92rem; font-weight:700; }
.when__v--free{ color:var(--butter); }

.hero__cta{ width:100%; }
.hero__fine{ margin:.8rem 0 0; font-size:.8rem; color:var(--ink-dim); }

/* ── knowings ───────────────────────────────────────────────── */
.knowings__head{ margin-bottom:1.5rem; }
.knowings__list{ list-style:none; margin:0 0 1.15rem; padding:0;
  display:flex; flex-direction:column; gap:.55rem; }
.knowings__list li{
  display:flex; align-items:flex-start; gap:.8rem;
  padding:.9rem 1.05rem; border-radius:var(--r);
  background:rgba(31,15,71,.5); border:1px solid rgba(160,120,255,.14);
  font-family:var(--display); font-size:1.02rem; font-style:italic; line-height:1.45;
  color:var(--ink-soft);
  opacity:.34; transform:translateY(6px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1),
             border-color .7s ease, color .7s ease;
}
.knowings__list li .dot{ margin-top:.62em; }
.knowings__list li .say{ font-weight:inherit; color:var(--cyan); }
.knowings__list li.lit{
  opacity:1; transform:none; color:var(--ink);
  border-color:rgba(160,120,255,.34);
  background:rgba(38,20,82,.62);
  box-shadow:0 10px 26px -16px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}
.knowings__turn{ color:var(--ink-soft); max-width:36rem; margin:0; }
.knowings__turn strong{ color:var(--ink); display:block; margin-top:.3em;
  font-family:var(--display); font-size:1.18rem; line-height:1.4; }

/* ── claim ──────────────────────────────────────────────────── */
.claim__art{ margin-bottom:1.5rem; }
.claim__art img{ width:100%; height:auto; display:block; border-radius:var(--r-lg);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); }

.ticket{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--butter);
  padding:.6rem .95rem; margin:0 0 1.1rem;
  border:1px dashed rgba(255,224,102,.45); border-radius:var(--r);
  background:rgba(255,224,102,.05);
}
.claim__panel h2{ margin-bottom:.6rem; }
.claim__lede{ color:var(--ink-soft); margin-bottom:1.4rem; }

.gets{ list-style:none; margin:0 0 1.7rem; padding:0;
  display:flex; flex-direction:column; gap:.7rem; }
.gets li{
  display:flex; align-items:flex-start; gap:.85rem;
  color:var(--ink-soft); font-size:.96rem; line-height:1.55;
}
.gets__n{
  flex:none; width:1.6rem; height:1.6rem; border-radius:50%;
  display:grid; place-items:center; margin-top:.05rem;
  font-size:.76rem; font-weight:800; color:var(--cyan);
  background:rgba(111,217,255,.11); border:1px solid rgba(111,217,255,.32);
}
.claim__panel .btn{ width:100%; }

/* ── summit ─────────────────────────────────────────────────── */
.summit__text h2{ margin-bottom:.7rem; }
.summit__text p{ color:var(--ink-soft); margin-bottom:1.4rem; }
.summit__text .btn{ margin-bottom:1.8rem; }
.summit__art{ margin:0; }
.summit__art img{ width:100%; height:auto; display:block; border-radius:var(--r-lg);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07); }

/* ── after ──────────────────────────────────────────────────── */
.after{ background:linear-gradient(180deg, transparent, rgba(38,20,82,.5) 16%,
        rgba(38,20,82,.5) 84%, transparent); }
.after__head h2{ margin-bottom:1.6rem; }

.card--offer{ padding:1.4rem 1.15rem; }
.offer__top{ display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.offer__top h3{ color:var(--ink); }
.offer__price{ margin:0; font-family:var(--display); line-height:1; white-space:nowrap; }
.offer__price strong{ font-size:2.15rem; color:var(--butter); font-weight:800; }
.offer__price span{ font-size:.85rem; color:var(--ink-dim); font-family:var(--body); }

.offer__list{ list-style:none; margin:0 0 1.1rem; padding:0;
  display:flex; flex-direction:column; gap:.7rem; }
.offer__list li{ position:relative; padding-left:1.35rem; color:var(--ink-soft);
  font-size:.93rem; line-height:1.55; }
.offer__list li::before{ content:""; position:absolute; left:0; top:.62em;
  width:.42rem; height:.42rem; border-radius:50%; background:var(--pink); }

.offer__meta{ display:flex; justify-content:space-between; gap:1rem; margin:0 0 .9rem;
  font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-dim);
  border-top:1px solid rgba(160,120,255,.16); padding-top:.9rem; }
.offer__deadline{ font-size:.88rem; color:var(--ink-soft); margin-bottom:1.3rem; }
.offer__deadline strong{ color:var(--butter); }
.card--offer .btn{ width:100%; }

/* ── close ──────────────────────────────────────────────────── */
.close{ padding:2.5rem var(--pad) 3rem; }
.close__row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.15rem; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--card-line); margin-bottom:2rem;
}
.close__when{ font-family:var(--display); font-size:1.05rem; font-weight:700; margin:0; }
.close__free{ margin:0; font-size:.8rem; color:var(--ink-dim); }
.close__et{ color:var(--cyan); }
.close__foot{ display:flex; align-items:flex-start; gap:1rem; }
.close__foot img{ height:1.9rem; width:auto; opacity:.55; flex:none; }
.close__foot p{ margin:0; font-size:.74rem; color:var(--ink-dim); line-height:1.65; }

/* ── dock ───────────────────────────────────────────────────── */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(18,7,38,.9); backdrop-filter:blur(14px);
  border-top:1px solid var(--card-line);
  transform:translateY(115%); transition:transform .42s cubic-bezier(.16,1,.3,1);
}
.dock.up{ transform:none; }
.dock__when{ display:flex; flex-direction:column; line-height:1.3; }
.dock__when strong{ font-size:.86rem; }
.dock__when span{ font-size:.72rem; color:var(--butter); }
.dock__cta{ padding:.8rem 1.35rem; font-size:.9rem; white-space:nowrap; }

/* ── wider ──────────────────────────────────────────────────── */
@media (min-width:40rem){
  :root{ --pad:2rem; }
  .hero__cta, .claim__panel .btn, .card--offer .btn{ width:auto; }
}

@media (min-width:56rem){
  :root{ --pad:2.5rem; }
  section{ padding-block:3.25rem; }
  .hero, .knowings, .claim, .summit, .after, .close{ max-width:70rem; margin-inline:auto; }

  /* text left, portrait right — no dead half */
  .hero{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,21rem);
    gap:3rem; align-items:center;
    padding-top:.5rem; padding-bottom:2rem;
  }
  .hero__art{ display:block; position:relative; }
  .hero__title{ max-width:14ch; }
  .hero__copy{ font-size:1.08rem; }
  .card--host, .when{ max-width:36rem; }
  .when__v{ white-space:nowrap; }

  .knowings{ display:grid; grid-template-columns:minmax(0,23rem) minmax(0,1fr);
    column-gap:3.5rem; row-gap:1.25rem; align-items:start; }
  .knowings__head{ margin:0; position:sticky; top:3rem; grid-row:1 / span 2;
    font-size:clamp(1.5rem,2.4vw,2.1rem); }
  .knowings__turn{ grid-column:2; margin-top:.25rem; }

  .claim{ display:grid; grid-template-columns:minmax(0,26rem) minmax(0,1fr);
    gap:3.5rem; align-items:center; }
  .claim__art{ margin:0; }

  .summit{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,26rem);
    gap:3.5rem; align-items:center; }

  /* head left, offer right — same rule as the hero, no stranded heading */
  .after{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,30rem);
    gap:3.5rem; align-items:center;
  }
  .after__head{ max-width:30rem; }
  .after__head h2{ margin-bottom:0; }
  .card--offer{ padding:2rem 1.9rem; }

  /* close: the two ends actually sit at the two ends */
  .close__row{ padding:1.6rem 2rem; }
  .close__foot{ align-items:center; justify-content:space-between; }
  .close__foot p{ text-align:right; }
}

@media (min-width:82rem){
  .when{ grid-template-columns:repeat(4,1fr); }
  .card--host, .when{ max-width:44rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .knowings__list li{ opacity:1; transform:none; transition:none; }
  .dock,.btn{ transition:none; }
  .veil::after{ animation:none; opacity:.7; }
}