/* Crew Page engine styles. Colors and faces come only from tokens defined in
   an event's brand.css, so this file is never edited to skin an event.

   Token contract a brand.css must supply:
     --c-bg --c-bg-deep --c-paper --c-dim --c-line
     --c-accent --c-accent-2 --c-good --c-hot --c-on-accent
     --g-hero --g-board --g-price --g-unlocked --g-close --g-bar
     --f-display --f-label --f-script --f-body
     --r-card --r-pill --shadow-btn                                            */

*{box-sizing:border-box}
/* the hidden attribute must beat any class that sets display */
[hidden]{display:none!important}
body{margin:0;background:var(--c-bg);color:var(--c-paper);font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--c-accent)} a:hover{color:var(--c-accent-2)}
a:focus-visible,button:focus-visible{outline:3px solid var(--c-paper);outline-offset:3px}
img{max-width:100%}
.wrap{max-width:760px;margin:0 auto;padding:0 22px}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:400;letter-spacing:.01em;line-height:.94}
.eyebrow{font-family:var(--f-label);font-size:17px;letter-spacing:.16em;color:var(--c-good)}
.hero .eyebrow{color:var(--c-hero-eyebrow,#FFE3B8);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.body{font-size:18px;line-height:1.6;color:var(--c-dim)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* hero */
.hero{position:relative;padding:34px 0 54px;text-align:center;overflow:hidden;background:var(--g-hero)}
.hero .stripes{position:absolute;left:0;right:0;top:31%;height:44%;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 7px,transparent 7px 30px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 55%,transparent)}
.hero>*{position:relative}
.sun{position:absolute;left:50%;top:20%;width:330px;height:330px;margin-left:-165px;border-radius:50%;
  background:var(--g-sun);opacity:.55;pointer-events:none}
.logo{width:min(340px,74vw);height:auto;display:block;margin:0 auto 26px}
h1{font-size:clamp(34px,8.4vw,62px);text-shadow:0 3px 0 rgba(0,0,0,.42);margin-top:12px}
.ask{margin-top:22px;font-family:var(--f-display);font-weight:400;
  font-size:clamp(34px,8.4vw,62px);line-height:.96;
  color:var(--c-hero-eyebrow,#FFE3B8);text-shadow:0 3px 0 rgba(0,0,0,.42)}
.hero .when{margin-top:4px;font-family:var(--f-label);font-size:clamp(21px,5.1vw,32px);
  letter-spacing:.05em;line-height:1.25;text-shadow:0 2px 0 rgba(0,0,0,.34)}
.note{margin:24px auto 0;max-width:520px;padding:20px 22px;border-radius:var(--r-card);text-align:left;
  background:var(--c-scrim);border:1px solid var(--c-line-strong);font-size:17px;line-height:1.62}
.note .from{display:block;margin-top:12px;font-family:var(--f-label);letter-spacing:.09em;
  color:var(--c-paper);font-size:16px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-block;padding:16px 26px;border-radius:var(--r-pill);font-family:var(--f-label);
  font-size:19px;letter-spacing:.06em;text-decoration:none;border:2px solid transparent;
  min-height:52px;cursor:pointer;text-align:center}
.btn-primary{background:var(--c-paper);color:var(--c-bg)}
.btn-primary:hover{background:#fff;color:var(--c-bg)}
.btn-ghost{background:var(--c-scrim);color:var(--c-paper);border-color:var(--c-line-strong)}
.btn-ghost:hover{background:var(--c-scrim-deep);color:var(--c-paper)}
.btn-hot{background:var(--c-hot);color:var(--c-on-accent)}

/* sections */
section{padding:52px 0;border-top:1px solid var(--c-line)}
section h2{font-size:clamp(28px,6.4vw,42px);margin:8px 0 6px}
.lede{margin-top:14px}

/* crew board */
.board{margin-top:24px;padding:24px 22px;border-radius:var(--r-card);background:var(--g-board);
  border:1px solid var(--c-line)}
.count{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.count .n{font-family:var(--f-display);font-size:58px;line-height:1;color:var(--c-accent);
  font-variant-numeric:tabular-nums}
.count .lbl{font-family:var(--f-label);font-size:17px;letter-spacing:.09em}
.bar{margin:16px 0 20px;height:12px;border-radius:var(--r-pill);background:var(--c-scrim-deep);overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--g-bar);
  transition:width .45s cubic-bezier(.2,.7,.3,1)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.slot{padding:13px 14px;border-radius:10px;font-size:16px;display:flex;align-items:center;gap:9px;min-height:48px}
.slot.filled{background:var(--c-fill);border:1px solid var(--c-line-strong)}
.slot.open{background:transparent;border:1px dashed var(--c-line-dash);color:var(--c-dim)}
.slot .dot{width:9px;height:9px;border-radius:50%;background:var(--c-good);flex:none}
.slot.open .dot{background:transparent;border:1px solid var(--c-line-dash)}
.slot .nm{font-family:var(--f-label);letter-spacing:.05em;font-size:16px}

/* savings block. 'close' escalates: this is where copy flips to what is lost. */
.savings{margin:14px 0 18px;padding:14px 16px;border-radius:12px;border:1px solid var(--c-line-strong);
  background:var(--c-scrim);font-size:17px;line-height:1.55}
.savings .hd{font-family:var(--f-label);font-size:16px;letter-spacing:.07em;color:var(--c-paper);
  display:block;margin-bottom:5px}
.savings .hd em{font-style:normal;color:var(--c-accent)}
.savings.close{background:var(--g-close);border-color:var(--c-hot);border-width:2px}
.savings.close .hd{font-size:19px;color:var(--c-paper)}
.savings.unlocked{background:var(--g-unlocked);border-color:var(--c-line-strong)}
.savings.unlocked .hd em{color:var(--c-paper)}

/* lineup */
.night{padding:20px 0;border-bottom:1px solid var(--c-line)}
.night:last-child{border-bottom:0}
.night .day{font-family:var(--f-script);font-size:27px;color:var(--c-accent);line-height:1}
.night .acts{margin-top:9px;font-family:var(--f-display);font-size:clamp(21px,5vw,30px);line-height:1.16}
.night .acts .sub{font-size:.62em;color:var(--c-dim)}
.night .side{margin-top:8px;font-size:17px;color:var(--c-dim);line-height:1.55}

/* passes */
.pass{margin-top:16px;padding:24px 22px;border-radius:var(--r-card);border:1px solid var(--c-line);
  background:var(--c-scrim)}
.pass.live{background:var(--g-price);border-color:var(--c-line-strong)}
.pass.gone{opacity:.62}
.pass .top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pass .nm{font-family:var(--f-display);font-size:clamp(24px,5.6vw,32px);line-height:1}
.badge{font-family:var(--f-label);font-size:15px;letter-spacing:.1em;padding:6px 11px;
  border-radius:var(--r-pill);white-space:nowrap}
.badge.ok{background:var(--c-paper);color:var(--c-bg)}
.badge.no{background:transparent;color:var(--c-dim);border:1px solid var(--c-line-dash)}
.pass .amt{margin-top:12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pass .amt .big{font-family:var(--f-display);font-size:clamp(40px,10vw,58px);line-height:1}
.pass .amt .per{font-family:var(--f-label);font-size:16px;letter-spacing:.07em}
.pass .was{margin-top:6px;font-size:17px;color:var(--c-dim2)}
.pass .was s{opacity:.75}
.pass .who{margin-top:10px;font-family:var(--f-label);font-size:16px;letter-spacing:.06em;color:var(--c-paper)}
.pass .desc{margin-top:10px;font-size:17px;line-height:1.6;color:var(--c-dim2)}
.pass.gone .desc{color:var(--c-dim)}
.pass .ours{margin-top:14px;display:inline-block;padding:8px 14px;border-radius:var(--r-pill);
  background:var(--c-scrim-deep);border:1px solid var(--c-line-dash);font-family:var(--f-label);
  font-size:14px;letter-spacing:.05em}
.incl{margin-top:22px;padding:20px 22px;border-radius:14px;border:1px dashed var(--c-line-dash)}
.incl .h{font-family:var(--f-label);font-size:17px;letter-spacing:.1em;color:var(--c-good)}

ul.plain{margin:16px 0 0;padding:0;list-style:none}
ul.plain li{padding:11px 0;border-bottom:1px solid var(--c-line);font-size:17px;line-height:1.5;
  color:var(--c-dim);display:flex;gap:12px;align-items:flex-start}
ul.plain li:last-child{border-bottom:0}
ul.plain b{color:var(--c-paper);font-weight:700}
.tick{flex:none;margin-top:3px}
.fine li{font-size:17px}
.air{min-width:62px;font-family:var(--f-label);color:var(--c-paper)}

footer{padding:44px 0 56px;text-align:center;border-top:1px solid var(--c-line);background:var(--c-bg-deep)}
footer .tp{width:150px;height:auto;opacity:.92;margin-bottom:16px}
footer .sm{font-size:16.5px;color:var(--c-dim);line-height:1.7;margin-top:14px}

/* sheets: leader editor and the pass-it-on nudge */
.editbtn{position:fixed;right:14px;bottom:14px;z-index:40;padding:12px 18px;border-radius:var(--r-pill);
  border:0;cursor:pointer;background:var(--c-paper);color:var(--c-bg);font-family:var(--f-label);
  font-size:15px;letter-spacing:.05em;box-shadow:var(--shadow-btn);min-height:44px}
.editbtn[hidden]{display:none}
.sheet{position:fixed;inset:0;z-index:50;background:var(--c-veil);display:none;overflow-y:auto;padding:22px}
.sheet.on{display:block}
.card{max-width:520px;margin:0 auto;background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-card);padding:24px}
.card h3{font-size:26px;margin-bottom:4px}
label{display:block;margin-top:16px;font-family:var(--f-label);font-size:16.5px;letter-spacing:.09em;color:var(--c-good)}
input,textarea{width:100%;margin-top:7px;padding:12px 13px;border-radius:9px;border:1px solid var(--c-line-dash);
  background:var(--c-scrim-deep);color:var(--c-paper);font-family:var(--f-body);font-size:16px;min-height:46px}
textarea{min-height:96px;resize:vertical;line-height:1.5}
.hint{margin-top:6px;font-size:15.5px;color:var(--c-dim);line-height:1.5}
/* The wait after CONFIRM RSVP is the most anxious second on the page.
   Say what is happening at a size that reads like a status, not a footnote. */
.hint.busy{font-family:var(--f-head);font-size:19px;letter-spacing:.04em;text-transform:uppercase;color:var(--c-accent);margin-top:12px}
.row{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.row .btn{font-size:17px;padding:14px 22px}
#copied{margin-top:12px;font-size:16px;color:var(--c-good);min-height:20px;word-break:break-all}

/* pass-it-on: fires after someone taps I'm in, the highest-energy moment */
#pass .card{text-align:left}
#pass .big{font-family:var(--f-display);font-size:clamp(26px,7vw,38px);line-height:1;margin-bottom:10px}
/* The reason sits under the steps. It is the one line on this screen that is
   the page talking rather than the host, so it takes the script face and the
   accent colour: an aside in the margin, not another instruction. */
#pass .why{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--c-line);
  font-family:var(--f-script);font-size:clamp(19px,4.6vw,23px);line-height:1.35;
  color:var(--c-accent)}
/* Two acts, stacked full width, so neither reads as the small one. */
#pass .btn.wide{display:block;width:100%;text-align:center;margin-top:12px}
#pass .linkbtn.wide{display:block;width:100%;text-align:center;margin-top:4px;font-size:13.5px}

/* What happens next. Counter rather than list-style so the numeral can carry
   the display face and sit in the gutter beside the step. */
#pass .steps{counter-reset:step;list-style:none;margin:18px 0 0;padding:0}
#pass .steps li{counter-increment:step;position:relative;padding:0 0 0 42px;margin-top:22px}
#pass .steps li:first-child{margin-top:0}
#pass .steps li::before{content:counter(step);position:absolute;left:0;top:-2px;
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--f-display);font-size:16px;
  background:var(--c-fill);color:var(--c-paper)}
#pass .steps .sh{font-family:var(--f-label);font-size:16.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--c-paper);line-height:1.2}
#pass .steps .sb{margin:6px 0 0;font-size:16px;line-height:1.55;color:var(--c-dim)}
/* Only appears when the clipboard is blocked, so the invite is still gettable.
   Long unbroken URLs must wrap rather than push the card wide. */
#pass .msg{margin-top:12px;padding:12px 14px;border-radius:12px;
  background:var(--c-scrim-deep);border:1px dashed var(--c-line-dash);
  font-size:15px;line-height:1.5;color:var(--c-dim2);
  overflow-wrap:anywhere;word-break:break-word;
  max-height:9.5em;overflow-y:auto;-webkit-user-select:all;user-select:all}
/* The last two steps are permission to stop, not things to do. */
#pass .steps li#s_dream::before,#pass .steps li#s_wait::before{
  background:none;border:1px solid var(--c-line-strong);color:var(--c-dim)}
#pass .row.tertiary{margin-top:14px;gap:0;justify-content:space-between;
  border-top:1px solid var(--c-line);padding-top:6px}
#pass .row.tertiary .linkbtn{font-size:14.5px;padding:10px 4px}
#pass .hint.leave{margin-top:12px;font-size:14.5px;color:var(--c-dim);line-height:1.5}

@media(max-width:520px){ .cta{flex-direction:column} .cta .btn{width:100%} }
@media(prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ---------- live roster additions ---------- */
.slot.paid .dot{background:var(--c-accent)}
.slot .pd{margin-left:auto;font-family:var(--f-label);font-size:12.5px;letter-spacing:.1em;
  padding:3px 8px;border-radius:var(--r-pill);background:var(--c-accent);color:var(--c-on-accent)}
.linkbtn{background:none;border:0;color:var(--c-dim);font-family:var(--f-label);
  font-size:16px;letter-spacing:.06em;cursor:pointer;padding:12px;min-height:44px}
.linkbtn:hover{color:var(--c-paper)}

/* host roster controls, inside the editor sheet */
.hrhd{margin:24px 0 10px;font-family:var(--f-label);font-size:16px;letter-spacing:.1em;
  color:var(--c-good);padding-top:20px;border-top:1px solid var(--c-line)}
.hr{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--c-line)}
.hr:last-child{border-bottom:0}
.hn{flex:1;font-family:var(--f-label);font-size:16px;letter-spacing:.04em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs{font-family:var(--f-label);font-size:12.5px;letter-spacing:.1em;padding:3px 7px;
  border-radius:var(--r-pill);border:1px solid var(--c-line-dash);color:var(--c-dim)}
.hs.paid{background:var(--c-accent);color:var(--c-on-accent);border-color:transparent}
.hb{font-family:var(--f-label);font-size:13px;letter-spacing:.07em;padding:8px 10px;
  border-radius:var(--r-pill);border:1px solid var(--c-line-dash);background:transparent;
  color:var(--c-paper);cursor:pointer;min-height:36px}
.hb:hover{background:var(--c-scrim-deep)}
.hb.del:hover{background:var(--c-hot);border-color:var(--c-hot)}
.hb[disabled]{opacity:.5;cursor:default}
.savings.target{background:var(--g-unlocked);border-color:var(--c-line-strong)}
.stay{margin-top:14px;padding:16px 18px;border-radius:12px;background:var(--c-scrim);
  border:1px solid var(--c-line-strong);font-size:17.5px;line-height:1.5;color:var(--c-dim2)}
.stay[hidden]{display:none}
.stay .lb{display:block;font-family:var(--f-label);font-size:15px;letter-spacing:.11em;
  color:var(--c-good);margin-bottom:6px}
.slot .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.slot{gap:8px}
.crewby{margin:8px 0 0;font-family:var(--f-label);font-size:16.5px;letter-spacing:.06em;
  color:var(--c-good)}

/* ---------- lineup: a band, not another paragraph ----------
   The heading was set in the same display face as the act names, so it read
   as one more act. Give the whole section its own ground and let the heading
   sit apart from the names underneath it. */
#lineup{background:var(--g-lineup,var(--c-scrim));
  border-top:2px solid var(--c-accent);border-bottom:1px solid var(--c-line);
  padding:44px 0 46px}
#lineup h2{font-size:clamp(34px,9vw,56px);line-height:.94;margin-bottom:0}
#lineup .eyebrow{color:var(--c-accent)}
#lineup .nights{margin-top:26px;padding-top:6px;border-top:1px solid var(--c-line-strong)}
#lineup .night{padding:22px 0}
#lineup .night .day{font-size:22px;letter-spacing:.02em;color:var(--c-good)}
#lineup .night .acts{margin-top:7px;font-size:clamp(23px,5.6vw,32px);line-height:1.12}
.grouprate{margin-top:10px;font-size:17.5px;line-height:1.5;color:var(--c-paper)}
.badge.buy{text-decoration:none;cursor:pointer}
.badge.buy:hover{background:#fff;color:var(--c-bg)}

/* ---------- the band's own words ---------- */
/* A flyer stapled to the page, not a blockquote. Tilted, hard offset shadow,
   no soft blur: the vocabulary of a gig poster. The words stay at reading
   size and the signature is what goes big, the way a poster credits a band. */
#say{padding:44px 0 56px;background:var(--c-scrim);border-top:1px solid var(--c-line);
  overflow:hidden}
#say .pull{margin:6px 4px 0;position:relative;padding:30px 22px 22px;
  background:var(--c-bg-deep);border:2px solid var(--c-paper);
  border-radius:4px;box-shadow:9px 9px 0 var(--c-hot);
  transform:rotate(-1.1deg)}
/* The mark hangs off the corner like it was printed past the trim. */
#say .pull::before{content:"\201C";position:absolute;top:-26px;left:10px;
  font-family:var(--f-display);font-size:92px;line-height:1;color:var(--c-accent);
  text-shadow:3px 3px 0 var(--c-bg-deep);opacity:1}
#say .pull p{margin:0;font-size:17.5px;line-height:1.62;color:var(--c-paper)}
/* The signature, sized like a headliner on the bill. */
#say .by{display:block;margin-top:16px;text-align:right;font-style:normal;
  font-family:var(--f-display);font-size:clamp(30px,8vw,44px);line-height:.9;
  letter-spacing:0;color:var(--c-accent);transform:rotate(.8deg)}
@media(prefers-reduced-motion:reduce){
  #say .pull,#say .by{transform:none}
}

/* The commit button carries the moment. The way out stays available but quiet. */
.rsvpact{display:block;margin-top:24px}
.rsvpact .btn-primary{display:block;width:100%;text-align:center;font-size:22px;
  padding:19px 24px;min-height:60px}
.rsvpact .linkbtn{display:block;width:100%;text-align:center;margin-top:8px;padding:10px}

/* The link that must never be pasted into a group chat should not look
   like the one that must be. */
.lk.private{border-style:solid;border-color:var(--c-hot);background:var(--c-scrim-deep)}
.lk.private .lb{color:var(--c-hot)}

/* Someone joined recently. Says this is live, not a record. */
.fresh{margin:0 0 16px;font-family:var(--f-label);font-size:14px;letter-spacing:.06em;
  color:var(--c-good)}
.fresh[hidden]{display:none!important}
/* Someone joined recently. Says this is live, not a record. */
.fresh{margin:0 0 16px;font-family:var(--f-label);font-size:14px;letter-spacing:.06em;
  color:var(--c-good)}

/* ---------- section photos ---------- */
/* Full-bleed inside the wrap, closing the section it belongs to. Aspect ratio
   is reserved up front so the page does not jump when a photo lands late. */
.shot{margin:28px 0 0;padding:0;border-radius:var(--r-card);overflow:hidden;
  position:relative;background:var(--c-scrim-deep);border:1px solid var(--c-line)}
.shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.shot.tall img{aspect-ratio:4/3}
/* The page is dark. A bright photo butting against it reads as a hole, so the
   bottom edge is faded back into the section. */
.shot::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(to bottom,transparent,var(--c-bg));
  pointer-events:none;opacity:.55}
.shot figcaption{position:absolute;left:14px;bottom:10px;z-index:1;
  font-family:var(--f-label);font-size:13.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-paper);opacity:.8}
@media(max-width:520px){ .shot img{aspect-ratio:3/2} }

/* The group rate mentioned in passing, on a board the host set below the
   threshold. Quiet on purpose: it is information, not the argument. */
.savings .nt{display:block;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--c-line);font-size:15px;color:var(--c-dim)}

/* Aiming at the host's own number is a positive, reachable ask. Teal reads
   that way here, and keeps orange for the count and red for the loss framing. */
.savings.goal .hd{color:var(--c-good)}