/* Shared home/Join roles: scale together at every viewport width. */
:root {
  --site-hero-size: clamp(2.375rem, calc(2.34rem + 1.68vw), 4rem);
  --site-hero-leading: .98;
  --site-copy-width: 38.75rem;
  --site-body-size: clamp(1.125rem, calc(1.06rem + .27vw), 1.3125rem);
  --site-control-size: 3rem;
}
.home-message { width: min(var(--site-copy-width), calc(100% - 2.5rem)); }
.join-layer .journey-messages,
.join-layer .journey-signup .join-copy { width: min(var(--site-copy-width), 100%); max-width: var(--site-copy-width); }
.home-message h1,
.join-layer .journey-messages h1,
.join-layer .journey-signup .join-copy > h1 {
  font-family: var(--serif);
  font-size: var(--site-hero-size);
  font-weight: 400;
  line-height: var(--site-hero-leading);
  letter-spacing: -.035em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.join-layer .journey-messages > p,
.join-layer .journey-signup .join-copy > p:not(.signup-error) {
  font-size: var(--site-body-size);
  line-height: 1.3;
  letter-spacing: 0;
}
.home-message > .eyebrow,
.join-layer .journey-messages > .eyebrow,
.join-layer .journey-signup .join-copy > .eyebrow {
  font: 400 .625rem/1.6 var(--mono);
  letter-spacing: .12em;
  margin-bottom: 1.125rem;
}
/* Moving this control into a dialog must not change its footprint or icon. */
.site-header #menu-toggle,
.join-layer .journey-header #menu-toggle {
  width: var(--site-control-size);
  min-width: var(--site-control-size);
  height: var(--site-control-size);
}
.site-header #menu-toggle svg,
.join-layer .journey-header #menu-toggle svg { width: 1rem; height: 1rem; stroke-width: 3; }
@media (max-width:750px) {
  .join-layer .journey-header { top: max(20px, env(safe-area-inset-top)); }
}
@media (max-height:500px) {
  .join-layer .journey-header { top: max(12px, env(safe-area-inset-top)); }
}