/* ── WELLNESS MEETS MADNESS · save the date ─────────────────────────── */

:root{
  /* No display face here on purpose: every piece of display type on this
     page is the gold artwork (logo, dates, save-the-date). The webfont was
     being downloaded and never drawn. */

  --bg:        #03060a;
  --neon:      #40e3ff;
  --neon-soft: #9df1ff;
  --gold:      #e3c079;
  --ink:       #eaf7fb;

  /* type is tied to the smaller viewport axis so it always sits inside
     the projected front face of the cube */
  --t: min(7.6vh, 8.2vw);
}

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

html,body{
  height:100%;
  background:var(--bg);
  overflow:hidden;
  overscroll-behavior:none;
}

/* a finger on the glass means "turn the room", so the browser mustn't
   claim it for panning or double-tap zoom first */
body{ touch-action:none }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:crosshair;
}

/* ── canvas ────────────────────────────────────────────────────────── */

#scene,#front{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}
#scene{ z-index:0 }

/* the near half of the cube, painted over the copy */
#front{ z-index:3 }

/* the page's one heading, for readers the canvas can't reach */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

/* ── the door ──────────────────────────────────────────────────────── */

:root{
  --halo:
    0 0 1px  rgba(3,6,10,.98),
    0 0 4px  rgba(3,6,10,.95),
    0 0 12px rgba(3,6,10,.9),
    0 0 30px rgba(3,6,10,.8),
    0 1px 2px rgba(0,0,0,.95);
}

.gate{
  position:fixed; z-index:7;
  /* dead centre of the cube's front face, wherever the rig put it */
  left:var(--cube-x,50%); top:var(--cube-y,50%);
  transform:translate(-50%,-50%);
  /* follows the cube, but never narrower than the copy needs */
  width:min(max(var(--cube-w,26rem), 20rem), 90vw);
  display:flex; flex-direction:column; align-items:center; gap:1.15rem;
  text-align:center;
  /* the copy is furniture; only the button takes a click */
  pointer-events:none;
  isolation:isolate;
}
/* a soft well of shadow so the words always have ground under them */
.gate::before{
  content:''; position:absolute; z-index:-1;
  inset:-32% -24%;
  background:radial-gradient(56% 52% at 50% 50%,
    rgba(3,6,10,.94) 0%, rgba(3,6,10,.88) 38%,
    rgba(3,6,10,.6) 62%, rgba(3,6,10,.24) 78%, transparent 92%);
}

.gate-kicker{
  font-size:clamp(.7rem,2.6vw,.76rem); font-weight:300;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); opacity:1;
  text-shadow:var(--halo);
}

.gate-btn{
  pointer-events:auto;
  font:inherit; font-size:clamp(.87rem,3.6vw,.95rem);
  font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:#08111a; background:linear-gradient(180deg,#f6e3ae,#e3c079 62%,#c9a559);
  border:0; border-radius:999px;
  padding:1.15em 2.6em 1.15em 2.9em;   /* the tracking pushes the last letter */
  cursor:pointer; position:relative; isolation:isolate;
  box-shadow:0 0 0 1px rgba(255,236,190,.55), 0 14px 50px rgba(227,192,121,.28);
  transition:transform .3s cubic-bezier(.2,.8,.25,1),
             box-shadow .4s, letter-spacing .4s;
}
/* a slow halo, so the button reads as lit rather than pasted on */
.gate-btn::before{
  content:''; position:absolute; inset:-40% -18%; z-index:-1; border-radius:999px;
  background:radial-gradient(closest-side, rgba(227,192,121,.42), transparent 72%);
  animation:gate-breathe 4.6s ease-in-out infinite;
}
.gate-btn:hover,.gate-btn:focus-visible{
  transform:translateY(-3px); letter-spacing:.36em; outline:none;
  box-shadow:0 0 0 1px rgba(255,240,205,.95), 0 22px 70px rgba(227,192,121,.5);
}
.gate-btn:active{ transform:translateY(-1px) scale(.99) }

@keyframes gate-breathe{
  0%,100%{ opacity:.55; transform:scale(.94) }
  50%    { opacity:1;   transform:scale(1.06) }
}

/* shown instead of the button when the door opens on its own */
.gate-welcome{
  display:none;
  font-size:clamp(.87rem,3.2vw,.93rem); font-weight:300;
  letter-spacing:.06em; color:var(--gold); opacity:.95;
  text-shadow:var(--halo);
}
body.auto-enter .gate-btn,
body.auto-enter .gate-note{ display:none }
body.auto-enter .gate-welcome{ display:block }

.gate-note{
  font-size:clamp(.87rem,3.2vw,.93rem); font-weight:300; line-height:1.7;
  letter-spacing:0; color:var(--ink); opacity:.95;
  text-shadow:var(--halo);
  max-width:27rem; text-wrap:balance;
}

/* a phone holds the cube small and the copy is what matters there */
@media (max-width:560px){
  .gate{ gap:1rem; width:min(92vw,25rem) }
  .gate::before{ inset:-26% -16% }
  .gate-btn{ padding:1.1em 2.2em 1.1em 2.45em }
  /* the kicker runs the full width of a phone at this tracking */
  .gate-kicker{ font-size:.66rem; letter-spacing:.16em }
}

/* ── entering: the room comes at you and the white takes the page ──── */

.flash{
  /* over everything, the floating language pill included: for the second
     the gold owns the screen, nothing else should be on top of it */
  position:fixed; inset:0; z-index:61; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 46%, #fff7e2, #f0d79a 45%, #e3c079 70%, #b98a35);
  opacity:0;
}
body.entering .flash{ animation:gate-flash 1.15s cubic-bezier(.7,0,.9,.6) forwards }
body.entering .gate{ animation:gate-leave .5s cubic-bezier(.6,0,.9,.4) forwards }
body.entering{ cursor:progress }

@keyframes gate-flash{
  0%   { opacity:0 }
  55%  { opacity:.28 }
  100% { opacity:1 }
}
@keyframes gate-leave{
  0%   { opacity:1; transform:translate(-50%,-50%) scale(1) }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.35) }
}

@media (prefers-reduced-motion:reduce){
  .gate-btn::before{ animation:none; opacity:.7 }
  /* no dolly, no bloom, no scaling — but still a transition */
  body.entering .flash{ animation:none; opacity:1; transition:opacity .65s linear }
  body.entering .gate{ animation:none; opacity:0; transition:opacity .4s linear }
}
/* the layer has to start from something for the transition to have a run */
.flash{ opacity:0 }

/* the card waits behind the gold, then comes up out of it */
body.rc-waiting .rc{ opacity:0 }
body.rc-arrived .flash{ animation:rc-clear 1.15s cubic-bezier(.22,.61,.36,1) forwards }
body.rc-arrived .rc{ animation:rc-rise 1s cubic-bezier(.2,.75,.3,1) both }
@keyframes rc-clear{
  0%   { opacity:1; transform:scale(1);    filter:blur(0) }
  100% { opacity:0; transform:scale(1.25); filter:blur(16px) }
}
@keyframes rc-rise{
  0%   { opacity:0; transform:translateY(16px) scale(.985) }
  45%  { opacity:.4 }
  100% { opacity:1; transform:none }
}
/* The rise has fill-mode `both`, so when it ends .rc keeps the animated
   transform for good — and a transformed ancestor becomes the backdrop root,
   which leaves the panel's backdrop-filter with an empty backdrop and no blur
   at all. Once the card has landed we drop the animation and the room behind
   it comes back into the blur. */
body.rc-settled .rc{ animation:none; opacity:1 }

@media (prefers-reduced-motion:reduce){
  body.rc-arrived .flash{
    animation:none; opacity:0; transition:opacity .7s linear;
  }
  body.rc-arrived .rc{ animation:none; opacity:1; transition:opacity .6s linear }
  body.rc-waiting .rc{ transition:none }
}

/* ── the waiting list ──────────────────────────────────────────────────
   Same room, different furniture: the cube keeps playing behind a card of
   glass. The page scrolls, unlike the front one, so the body's overflow
   lock is lifted for it.
   ------------------------------------------------------------------- */

body.recruit{ overflow-y:auto; cursor:auto; touch-action:auto }
body.recruit #scene,body.recruit #front{ position:fixed }

.rc{
  position:relative; z-index:7;
  max-width:34rem; margin:0 auto;
  padding:clamp(2rem,7vh,4.5rem) clamp(1.1rem,5vw,2rem) 14vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
}
.rc-mark{ display:block; width:min(100%,17rem); height:auto; margin:0 auto 2.2rem }

.rc h1{
  font-size:clamp(1.7rem,6.5vw,2.3rem); font-weight:600; letter-spacing:-.02em;
  line-height:1.1; color:var(--ink);
}
.rc-lede{
  margin:0 0 1rem; font-size:clamp(.9rem,3vw,.98rem); line-height:1.7;
  color:hsl(60 4% 76%); text-wrap:pretty;
}
/* the last paragraph of the intro keeps the form at arm's length */
.rc-lede:last-of-type{ margin-bottom:2rem }

#rcForm,#tjForm,.rc-done{
  /* deep frosted glass: the rig behind is thin bright neon, and at this
     radius its edges stop being lines through the copy and become the glow
     the card is lit by. See `body.rc-settled` for why it works at all. */
  background:rgba(18,20,27,.76);
  -webkit-backdrop-filter:blur(48px) saturate(1.3);
  backdrop-filter:blur(48px) saturate(1.3);
  border:1.5px solid hsl(233 8% 26%); border-radius:16px;
  padding:clamp(1.4rem,5vw,2.2rem);
}

.rc h1{ margin-bottom:.7rem }
.rc-two{ display:flex; gap:.9rem }
.rc-two .rc-field{ flex:1 1 0; min-width:0 }
.rc-realname{
  font-size:.8rem; line-height:1.6; color:hsl(50 3% 56%);
  margin:-.6rem 0 1.5rem;
}
@media (max-width:460px){ .rc-two{ display:block } }

.rc-field{ display:block; margin-bottom:1.4rem }
.rc-field > span{
  display:block; font-size:.88rem; color:var(--ink); margin-bottom:.5rem;
}
.rc-field input,.rc-field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  background:rgba(36,37,45,.6);
  border:1.5px solid hsl(233 8% 26%); border-radius:9px;
  padding:.85rem 1rem;
}
.rc-field textarea{ min-height:8.5rem; line-height:1.55; resize:vertical }
/* the one field that argues for them, given the weight of one: set apart
   from the paperwork above it, and roomy enough to look like it wants more */
.rc-about{ margin-top:2.1rem; padding-top:1.7rem; border-top:1.5px solid hsl(233 8% 26%) }
.rc-about > span{ font-size:1.02rem; color:var(--gold) }
.rc-about textarea{ min-height:12rem }
/* counts up rather than down: 800 is an invitation, not a ceiling */
.rc-count{
  display:block; text-align:right; margin-top:.35rem;
  font-size:.76rem; letter-spacing:.04em; font-variant-numeric:tabular-nums;
  color:hsl(50 3% 46%); transition:color .25s;
}
.rc-count.ok{ color:var(--gold) }
.rc-field input:focus,.rc-field textarea:focus{ outline:none; border-color:hsl(233 8% 44%) }
/* the one-question version of the form, reached from the mail */
.rc-about-only .rc-two,.rc-about-only .rc-realname,.rc-about-only .rc-chips,
.rc-about-only .rc-lede + .rc-lede,
.rc-about-only .rc-field:not(.rc-about){ display:none }
/* alone on the card it has nothing to be set apart from */
.rc-about-only .rc-about{ margin-top:0; padding-top:0; border-top:0 }
.rc-field small{
  display:block; font-size:.8rem; color:hsl(50 3% 56%); margin-top:.45rem;
}

.rc-chips{ border:0; padding:0; margin:0 0 1.5rem }
.rc-chips legend{ font-size:.88rem; color:var(--ink); margin-bottom:.6rem }
.rc-chips small{
  display:block; font-size:.8rem; color:hsl(50 3% 56%); margin-top:.6rem;
}
#rcLangs,.rc-hosts{ display:flex; flex-wrap:wrap; gap:.5rem }
/* the field under the hosts: quiet until "somebody else" makes it the answer */
.rc-via{ margin-top:-.4rem }
.rc-via-needed > span{ color:var(--gold) }
.rc-via-needed input{ border-color:var(--gold) }

.rc-chip,.rc-host{ cursor:pointer; -webkit-tap-highlight-color:transparent }
.rc-chip input,.rc-host input{ position:absolute; opacity:0; pointer-events:none }
.rc-chip span,.rc-host span{
  display:inline-block; padding:.5rem 1.05rem; border-radius:999px;
  font-size:.86rem; color:hsl(60 4% 76%);
  border:1.5px solid hsl(233 8% 38%);
  transition:color .2s, border-color .2s, background-color .2s;
}
.rc-chip:hover span,.rc-host:hover span{ color:var(--ink); border-color:var(--ink) }
.rc-chip input:checked + span,.rc-host input:checked + span{
  background:var(--ink); border-color:var(--ink); color:#12141b;
}
.rc-chip input:focus-visible + span,.rc-host input:focus-visible + span{
  outline:2px solid hsl(60 4% 76%); outline-offset:2px;
}
.rc-host span{ padding:.6rem 1.6rem; font-size:.95rem }

/* the honeypot: off-screen rather than display:none, which some bots skip */
.rc-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.rc-send{
  width:100%; font:inherit; font-size:.78rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:#08111a; background:linear-gradient(180deg,#f6e3ae,#e3c079 62%,#c9a559);
  border:0; border-radius:999px; padding:1.1em 2em; cursor:pointer;
  box-shadow:0 10px 34px rgba(227,192,121,.22);
  transition:transform .25s, box-shadow .3s, opacity .2s;
}
.rc-send:hover:not(:disabled){ transform:translateY(-2px);
  box-shadow:0 16px 48px rgba(227,192,121,.4) }
.rc-send:disabled{ opacity:.5; cursor:default }

.rc-status{ margin-top:1rem; font-size:.86rem; color:hsl(60 4% 76%); min-height:1.2em }
.rc-status.bad{ color:#e0705f }

.rc-done h2{ font-size:1.5rem; font-weight:600; color:var(--ink); margin-bottom:.7rem }
.rc-done p{ font-size:.95rem; line-height:1.7; color:hsl(60 4% 76%) }
/* the footnote for somebody who had already applied: quieter, in the
   name note's grey, because most people reading it wrote only once */
.rc-done .rc-again{ margin-top:1rem; font-size:.82rem; line-height:1.6; color:hsl(50 3% 56%) }

.rc-back{
  display:block; text-align:center; margin-top:2rem;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:hsl(50 3% 56%); text-decoration:none; text-shadow:var(--halo);
}
.rc-back:hover{ color:var(--ink) }

/* the front page's way through to here */
.gate-more{
  font-size:clamp(.72rem,2.6vw,.78rem); letter-spacing:.12em;
  text-transform:uppercase; text-shadow:var(--halo);
}
.gate-more a{
  pointer-events:auto; color:var(--gold); text-decoration:none;
  border-bottom:1px solid rgba(227,192,121,.45); padding-bottom:2px;
}
.gate-more a:hover{ color:#fbeec2; border-bottom-color:#fbeec2 }
body.auto-enter .gate-more{ display:none }
/* walked in from the invitation: the door opens on its own in two seconds,
   and the room it opens onto has the same pill — nothing to choose here.
   The six-second rescue takes the class off and brings it back. */
body.auto-enter .wmm-lang{ display:none }

/* the way in for a browser that runs no script */
.noscript-gate{
  position:fixed; z-index:9; inset:auto 0 12vh 0; text-align:center;
  font-size:.9rem; line-height:1.7; color:var(--ink);
  text-shadow:var(--halo); padding:0 1.5rem;
}
.noscript-gate a{
  display:inline-block; margin-top:1rem; padding:1em 2.4em;
  background:#e3c079; color:#08111a; border-radius:999px;
  text-decoration:none; letter-spacing:.2em; text-transform:uppercase;
  font-size:.8rem; font-weight:500;
}

/* ── overlays ──────────────────────────────────────────────────────── */

.vignette{
  position:fixed; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 44%, transparent 34%, rgba(0,0,0,.55) 76%, #000 100%);
}

.scan{
  position:fixed; inset:0; z-index:5; pointer-events:none;
  opacity:.035;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.9) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}

.grain{
  position:fixed; inset:-60%; z-index:6; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(8) infinite;
  will-change:transform;
}
@keyframes grain{
  0%   { transform:translate(0,0) }
  12%  { transform:translate(-3%,-4%) }
  25%  { transform:translate(4%,-2%) }
  37%  { transform:translate(-2%,3%) }
  50%  { transform:translate(3%,4%) }
  62%  { transform:translate(-4%,1%) }
  75%  { transform:translate(2%,-3%) }
  87%  { transform:translate(-1%,2%) }
  100% { transform:translate(0,0) }
}

/* touch devices: no hover, no crosshair, and a 1px scanline grid is
   invisible on a 3× screen while costing a full-page composite */
@media (pointer:coarse){
  body{ cursor:auto }
  .scan{ display:none }
  .grain{ opacity:.038 }
}


/* ── reduced motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  .grain{ animation:none }
}