/* One invitation and story surface, shared by the site and standalone viewer. */
.join-layer {
  --black: #030303;
  --red100: #e61e22;
  --red60: rgb(230 30 34 / 60%);
  --red20: rgb(230 30 34 / 20%);
  --mono: 'Favorit Mono', monospace;
  --serif: 'GT Sectra', Georgia, serif;
  --label-sm: 10px;
  --button-text-spacing: .035em;
}
#join-page.join-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: auto;
  background: transparent;
  color: var(--red100);
  font-family: var(--serif);
  overscroll-behavior: contain;
}
.join-layer:not([open]) { display: none; }
.join-layer::backdrop { background: rgb(3 3 3 / 85%); backdrop-filter: blur(8px); }
.join-layer, .join-layer * { box-sizing: border-box; }
.join-layer button { cursor: pointer; }
.join-layer .eyebrow { display: block; font: 400 10px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.join-layer .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
.join-layer #journey-atmosphere {
  position: fixed;
  z-index: -1;
  opacity: .5;
  visibility: visible;
  pointer-events: none;
}
.join-layer .journey-stage, .join-layer .journey-signup { position: relative; min-height: 100%; padding: 130px 24px 90px; }
.join-layer .journey-signup .join-copy { max-width: 620px; }
.join-layer .journey-signup .join-copy > h1 { font-size: clamp(38px,4.25vw,58px); line-height: .98; }
.join-layer .journey-signup #join-form { width: min(440px,100%); margin-top: 30px; }
.join-layer .text-button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 8px; background: none; border: 0; color: var(--red60); font: italic 16px/1.3 var(--serif); text-transform: none; }
.join-layer .rose-button { min-height: 48px; padding: 0 26px; border: 0; border-radius: 30px; background: var(--red100); color: #030303; font: italic 16px var(--serif); position: relative; isolation: isolate; overflow: hidden; }
.join-layer .flow-button-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.journey-header { position: fixed; top: 38px; left: 40px; display: flex; gap: 12px; z-index: 5; }
.join-layer .journey-skip { top: 38px; right: 40px; min-height: 48px; }
.join-layer .journey-header button { display: inline-flex; align-items: center; justify-content: center; width: 48px; min-width: 48px; height: 48px; padding: 0; color: var(--red100); border: 1px solid var(--red20); border-radius: 50%; background: #03030380; }
.join-layer .journey-header svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
body.join-open > :is(.site-header, .page-join, main) { visibility: hidden; }
body.join-open #app > :not(canvas) { visibility: hidden; }
.join-layer :is(button,input):focus-visible { outline: 1px solid var(--red100); outline-offset: 5px; }

/* The badge remains in the same place as visitors move between scenes. */
.page-join.join-pill {
  position: fixed;
  z-index: 10;
  box-sizing: border-box;
  left: 50%;
  right: auto;
  bottom: max(24px, env(safe-area-inset-bottom));
  translate: -50% 0;
  text-decoration: none;
}

/* The live site's email control, scoped here for the standalone viewer. */
.join-layer .email-form { display: flex; gap: 7px; max-width: 100%; height: 48px; pointer-events: auto; }
.join-layer .email-form input { padding: 0 20px; font: italic 400 16px var(--serif); text-transform: none; letter-spacing: normal; }
.join-layer .email-form .rose-button { height: 48px; flex-shrink: 0; padding: 0 24px 4px; font: italic 400 14px/1.2 var(--serif); letter-spacing: .035em; text-transform: none; white-space: nowrap; }
@media (max-width:750px) {
  .join-layer .email-form input { padding-left: 16px; }
  .join-layer .email-form .rose-button { padding-inline: 15px; }
}
@media (max-width:750px) {
  .journey-header { top: max(22px,env(safe-area-inset-top)); left: 20px; }
  .join-layer .journey-skip { top: max(22px,env(safe-area-inset-top)); right: 20px; }
  .join-layer .journey-stage, .join-layer .journey-signup { padding: 110px 20px 90px; }
  .page-join.join-pill { bottom: max(20px,env(safe-area-inset-bottom)); }
}
@media (max-height:500px) {
  .journey-header { top: 16px; left: 20px; }
  .join-layer .journey-skip { top: 16px; right: 20px; }
  .join-layer .journey-stage, .join-layer .journey-signup { padding-top: 85px; padding-bottom: 32px; }
  .page-join.join-pill { bottom: 12px; }
  .home-message { top: 45%; }
  .home-message h1 { font-size: 32px; }
}
@media (prefers-reduced-motion:reduce) {
  .page-join.join-pill { transition: none; }
}

/* Reserve the shared bottom-center badge's footprint in the viewer. */
#app[data-entry=share] .navigation-hint { bottom: 98px; }
@media (max-width:750px) and (min-height:501px) {
  #app[data-entry=share] .navigation-hint { bottom: 70px; }
}
@media (max-height:500px) {
  #app[data-entry=share] .navigation-hint { bottom: 68px; left: 120px; right: 20px; max-width: none; text-align: right; }
}