/* ============ THE SIGNUP PASS (2026-09-19) ============
   One open sign-up at a time, shown on the front page between "Next up" and
   the albums: the visitor has just read what is coming, and this is the one
   coming thing that needs them to DO something before the day arrives.
   Direction: a camp pass lying on the oak. The stub on the left carries the
   dates in the display face and is the module's only loud thing; the facts,
   the button and the fine print stay as quiet as the rest of the page.
   Its own small sheet for the reason member-fun.css gives: styles.css is
   shared by every youth page and a rule added there costs a ?v= bump on all
   of them. Every value below is a styles.css token. */

.signup-band { padding: clamp(28px, 3vw + 14px, 56px) 0 clamp(40px, 4vw + 18px, 72px); }
.signup-band[hidden] { display: none; }
.signup-band .eyebrow { margin-bottom: 6px; }
.signup-head { margin-bottom: 18px; }
.signup-head h2 {
  font-size: clamp(26px, 1.625rem - 26px + 3.4vi, 42px);
  font-weight: 700;
  letter-spacing: -0.024em;
  margin: 0;
}

.signup-pass {
  display: grid;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* THE STUB. On a phone it is the top strip of the pass, torn off along a
   dashed line underneath; from 760px it stands on the left and the tear runs
   down its right edge. The two notches are the section's own background
   showing through, which is what makes it read as a punched ticket. */
.signup-stub {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 20px clamp(20px, 2vw + 12px, 32px) 18px;
  background: var(--bone);
  border-bottom: 1px dashed var(--gold-ring);
}
.signup-stub::before,
.signup-stub::after {
  content: "";
  position: absolute;
  bottom: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
}
.signup-stub::before { left: -10px; }
.signup-stub::after { right: -10px; }
.signup-month,
.signup-span {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.signup-span { color: var(--steel); margin-inline-start: auto; }
.signup-days {
  font-family: var(--font-display);
  font-size: clamp(40px, 2.5rem - 8px + 3vi, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.signup-body {
  display: grid;
  gap: 16px;
  justify-items: start;
  align-content: center;
  padding: 20px clamp(20px, 2vw + 12px, 32px) 14px;
}
/* Each price is one unbreakable piece, so a narrow phone wraps BETWEEN tiers.
   A label class on purpose: three prices are a label row, not body copy. */
.signup-tiers { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 15px; color: var(--graphite); }
.signup-tiers > span { white-space: nowrap; }
.signup-tiers strong { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.signup-body .btn { min-height: 48px; }

.signup-more { width: 100%; border-top: 1px solid var(--line); }
.signup-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.signup-more summary::-webkit-details-marker { display: none; }
.signup-more summary::after { content: "+"; font-size: 18px; letter-spacing: 0; line-height: 1; }
.signup-more[open] summary::after { content: "\2212"; }
.signup-more summary:focus-visible { outline: 2px solid var(--gold-ring); outline-offset: 2px; border-radius: var(--radius-input); }
.signup-more ul { margin: 0 0 10px; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 16px; line-height: 1.5; color: var(--graphite); }

@media (max-width: 479px) {
  .signup-body .btn { width: 100%; justify-content: center; }
}

@media (min-width: 760px) {
  .signup-pass { grid-template-columns: minmax(200px, 280px) 1fr; }
  .signup-stub {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 32px clamp(24px, 2.4vw, 40px);
    border-bottom: 0;
    border-right: 1px dashed var(--gold-ring);
  }
  .signup-stub::before,
  .signup-stub::after { bottom: auto; left: auto; right: -10px; }
  .signup-stub::before { top: -10px; }
  .signup-stub::after { bottom: -10px; }
  .signup-span { margin-inline-start: 0; }
}