/* Shared components for every host. Colour pairs are checked by tests/contrast.test.mjs. */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:var(--body-size);
  font-weight:var(--body-weight);
  line-height:var(--body-line);
  background:var(--ink);
  color:var(--paper);
  display:flex;
  flex-direction:column;
  min-height:100dvh;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

/* ---------- bands ---------- */
.band-ink{background:var(--ink);color:var(--paper)}
.band-ink-soft{background:var(--ink-soft);color:var(--paper)}
.band-paper{background:var(--paper);color:var(--ink-soft)}

/* ---------- focus ---------- */
:focus-visible{outline:3px solid var(--chartreuse);outline-offset:3px}
.band-paper :focus-visible{outline-color:var(--ink)}
body[data-site="pickleball"] :focus-visible{outline-color:var(--coral-light)}
body[data-site="pickleball"] .band-paper :focus-visible{outline-color:var(--ink)}

/* ---------- accessibility helpers ---------- */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.hp{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;height:1px;
  overflow:hidden;
}
.skip-link{
  position:absolute;
  left:var(--space-md);
  top:-100px;
  z-index:20;
  padding:var(--space-sm) var(--space-md);
  background:var(--accent);
  color:var(--ink);
  font-size:var(--label-size);
  font-weight:var(--label-weight);
  line-height:var(--label-line);
  border-radius:var(--space-sm);
  text-decoration:none;
}
.skip-link:focus{top:var(--space-sm)}

/* ---------- staging banner ---------- */
.staging-banner{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  height:32px;
  padding:0 var(--space-md);
  background:var(--rust);
  color:var(--paper);
  font-size:var(--label-size);
  font-weight:var(--label-weight);
  line-height:var(--label-line);
  text-align:center;
}

/* ---------- header ---------- */
.site-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-md);
  padding:var(--space-md) var(--space-lg);
}
.wordmark{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--heading-size);
  line-height:var(--heading-line);
  letter-spacing:.06em;
  color:var(--paper);
  text-decoration:none;
}
.wordmark span{color:var(--accent-text-on-ink)}

/* ---------- footer ---------- */
.site-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-sm) var(--space-lg);
  padding:var(--space-md) var(--space-lg);
  font-size:var(--label-size);
  font-weight:var(--label-weight);
  line-height:var(--label-line);
  background:var(--ink);
  color:rgba(250,249,245,.55);
  border-top:1px solid rgba(250,249,245,.12);
}
.site-footer a{color:rgba(250,249,245,.75);text-decoration:none}
.site-footer a:hover{color:var(--accent-text-on-ink)}
.site-footer nav ul{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);list-style:none}

/* ---------- type pieces ---------- */
.eyebrow,.kicker{
  display:inline-block;
  font-family:var(--font-hand);
  font-size:var(--body-size);
  font-weight:400;
  line-height:var(--body-line);
  transform:rotate(-1.5deg);
}
.band-ink .eyebrow,.band-ink-soft .eyebrow,.kicker{color:var(--accent-text-on-ink)}
.band-paper .eyebrow{color:var(--charcoal)}

.hl{
  background:var(--accent);
  color:var(--ink);
  padding:0 var(--space-xs);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ---------- buttons ---------- */
.btn-primary,.btn-secondary,.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-sm);
  min-height:48px;
  padding:var(--space-md) var(--space-lg);
  border-radius:999px;
  font-family:var(--font-body);
  font-size:var(--label-size);
  font-weight:var(--label-weight);
  line-height:var(--label-line);
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  width:fit-content;
}
.btn-primary{background:var(--accent);color:var(--ink);border:2px solid var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-secondary{background:transparent;border:2px solid var(--accent-text-on-ink);color:var(--accent-text-on-ink)}
.btn-secondary:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.band-paper .btn-secondary{border-color:var(--ink);color:var(--ink)}
.band-paper .btn-secondary:hover{background:var(--ink);color:var(--paper)}
.btn-primary:disabled,.btn-secondary:disabled{opacity:.6;cursor:not-allowed}
.btn-primary:disabled:hover{background:var(--accent);border-color:var(--accent)}
.arrow{display:inline-block;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.btn-primary:hover .arrow,.btn-secondary:hover .arrow{transform:translateX(4px)}

/* ---------- inputs and the interest form ---------- */
label{
  display:block;
  font-size:var(--label-size);
  font-weight:var(--label-weight);
  line-height:var(--label-line);
  margin-bottom:var(--space-xs);
}
input[type="email"],input[type="text"]{
  width:100%;
  min-height:48px;
  padding:0 var(--space-md);
  font-family:var(--font-body);
  font-size:var(--body-size);
  line-height:var(--body-line);
  background:var(--paper);
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:var(--space-sm);
}
input::placeholder{color:var(--charcoal);opacity:1}
input[aria-invalid="true"]{border-color:var(--rust)}
.band-ink input[aria-invalid="true"],.band-ink-soft input[aria-invalid="true"]{border-color:var(--coral-light)}

#interest-form{display:flex;flex-direction:column;gap:var(--space-md);max-width:520px}
.interest-fields{display:flex;flex-direction:column;gap:var(--space-md)}
.interest-fields[hidden]{display:none}
.interest-fine{font-size:var(--label-size);font-weight:var(--label-weight);line-height:var(--label-line)}
.band-paper .interest-fine{color:var(--charcoal)}
#interest-status{
  font-size:var(--label-size);
  font-weight:var(--label-weight);
  line-height:var(--label-line);
}
#interest-status:empty{display:none}
#interest-status.is-error{color:var(--rust)}
.band-ink #interest-status.is-error,.band-ink-soft #interest-status.is-error{color:var(--coral-light)}
#interest-status.is-success{padding-left:var(--space-md);border-left:4px solid var(--accent)}
@media (min-width:768px){
  .interest-row{display:flex;gap:var(--space-md);align-items:flex-end}
  .interest-row .field{flex:1}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  .arrow,.eyebrow,.kicker{transform:none !important}
}

/* ---------- 404 ---------- */
.not-found{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-md);
  padding:var(--space-3xl) var(--space-lg);
  text-align:center;
}
.not-found h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--display-size);
  line-height:var(--display-line);
  letter-spacing:.01em;
  text-transform:uppercase;
}
.not-found p{max-width:68ch}