/* ============================================================ tokens */
:root{
  --pine:#0B1E14;        /* the ground */
  --pine2:#122A1C;       /* raised on dark */
  --pine3:#1B3A28;       /* borders on dark */
  --bone:#F5F1E8;        /* the ground, light bands */
  --bone2:#EBE5D8;       /* raised on light */
  --bone3:#DCD4C2;       /* borders on light */
  --gold:#D4AF37;        /* accent on dark */
  --goldDeep:#8A6A16;    /* accent on light */
  --ink:#101410;         /* text on light */
  --inkSoft:#3D4A3F;     /* secondary on light — green-biased, never grey */
  --inkFaint:#6B776C;
  --cream:#F2EEE4;       /* text on dark */
  --creamSoft:#B9C4B8;
  --creamFaint:#8A968A;
  --red:#B3402E;

  --wrap:1160px;
  --gut:clamp(20px,5vw,40px);
  --ease:cubic-bezier(.16,.84,.44,1);

  --f-display:'Libre Caslon Display',Georgia,'Times New Roman',serif;
  --f-body:Archivo,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Third voice, used only on The Drop: the raffle is the one part of this brand
     that is meant to feel like a fairground, and neither Caslon nor Archivo can
     do that without being asked to be something they are not. */
  --f-drop:'Bricolage Grotesque',Archivo,-apple-system,'Segoe UI',sans-serif;
  --pp:#E0793F;          /* the ball orange, sampled off the video */
  --ppLit:#FFC79A;
  --ppDark:#8E3F14;
}

/* ============================================================ reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--pine); color:var(--cream);
  font-family:var(--f-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{max-width:100%; display:block}
button{font:inherit; color:inherit}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:400; text-wrap:balance; line-height:1.04}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

/* ============================================================ type scale */
.d1{font-family:var(--f-display); font-size:clamp(2.9rem,9vw,6rem); letter-spacing:-.015em}
.d2{font-family:var(--f-display); font-size:clamp(2.1rem,6vw,3.6rem); letter-spacing:-.01em}
.d3{font-family:var(--f-display); font-size:clamp(1.5rem,3.4vw,2.2rem)}
.lede{font-size:clamp(1.02rem,1.9vw,1.22rem); line-height:1.62; color:var(--creamSoft); max-width:46ch}
.light .lede{color:var(--inkSoft)}
em{font-style:italic; color:var(--gold)}
.light em{color:var(--goldDeep)}
.eyebrow{display:block; font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); font-weight:600}
.light .eyebrow{color:var(--goldDeep)}
.num{font-variant-numeric:tabular-nums}

/* ============================================================ shell */
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}
.band{padding-block:clamp(56px,9vw,120px)}
.band--light{background:var(--bone); color:var(--ink)}
.band--tight{padding-block:clamp(40px,6vw,72px)}
.light h1,.light h2,.light h3,.light h4{color:var(--ink)}

/* ============================================================ header */
.hdr{position:sticky; top:0; z-index:60; background:rgba(11,30,20,.86);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease)}
.hdr.on{border-bottom-color:var(--pine3)}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:64px; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{height:22px; width:auto}
.brand b{font-family:var(--f-display); font-weight:400; font-size:1.02rem; letter-spacing:.04em}
@media(max-width:420px){ .hdr .brand b{display:none} }
.foot .brand{margin-bottom:12px}

/* ============================================================ buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 26px; border:0; border-radius:2px; cursor:pointer;
  background:var(--gold); color:#17130A; text-decoration:none;
  font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  transition:transform .18s var(--ease), filter .18s var(--ease)}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55; pointer-events:none}
.btn--sm{min-height:42px; padding:0 18px; font-size:.7rem}
.btn--line{background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px var(--pine3)}
.btn--line:hover{background:var(--pine2); filter:none}
.light .btn--line{color:var(--ink); box-shadow:inset 0 0 0 1px var(--bone3)}
.light .btn--line:hover{background:var(--bone2)}
.btn--wide{width:100%}
.acts{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* ============================================================ hero */
.hero{position:relative; min-height:clamp(520px,80svh,820px); display:flex; align-items:flex-end;
  overflow:hidden}
.hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero__sc{position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(11,30,20,.34) 0%,rgba(11,30,20,.06) 26%,
                    rgba(11,30,20,.42) 58%,rgba(11,30,20,.90) 88%,rgba(11,30,20,.97) 100%),
    linear-gradient(90deg,rgba(11,30,20,.42) 0%,rgba(11,30,20,0) 62%)}
.hero__in{position:relative; width:100%; padding-block:clamp(40px,7vw,80px)}
/* The photograph is now bright enough to fight small type, so the type carries its
   own contrast instead of the whole image being dimmed to suit it. */
.hero .eyebrow,.hero h1,.hero .lede,.hero .tag{
  text-shadow:0 1px 2px rgba(6,18,12,.55), 0 2px 18px rgba(6,18,12,.85)}
/* Gold on a sunlit mountain is a losing fight at 11px, so the eyebrow carries its
   own ground. Reads as a badge, which suits "open now" anyway. */
.hero .eyebrow{display:inline-block; background:rgba(6,18,12,.6); padding:7px 12px;
  border:1px solid rgba(240,216,121,.32); border-radius:2px; color:#F0D879;
  text-shadow:none; backdrop-filter:blur(3px)}
.hero h1{margin-top:14px}
.hero .lede{margin-top:20px; color:var(--cream)}
.hero .acts{margin-top:clamp(26px,4vw,36px)}

/* the price, stated in the hero so nobody has to hunt for it */
.tag{display:inline-flex; align-items:baseline; gap:8px; margin-top:18px;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--creamSoft)}
.tag b{font-family:var(--f-display); font-size:1.5rem; letter-spacing:0; color:var(--gold)}

/* ============================================================ the receipt
   The spine of the page. Three line items, each priced against what the same
   thing costs elsewhere, a rule, a total, then the price underneath it. The
   layout is the argument — it is not decoration, it is the answer to "what do
   I get for $200". */
.rcpt{margin-top:clamp(30px,4.5vw,52px); border-top:2px solid var(--ink);
  max-width:860px}   /* a measure, not the container: at full width the value
                        ends up a hand's width from the thing it prices and the
                        eye stops connecting the two */
.rcpt__r{display:grid; grid-template-columns:1fr auto; gap:10px 28px;
  padding-block:clamp(22px,3vw,30px); border-bottom:1px solid var(--bone3)}
.rcpt__r > *{min-width:0}
.rcpt__h{font-family:var(--f-display); font-size:clamp(1.35rem,3.2vw,1.9rem); line-height:1.1}
.rcpt__p{margin-top:8px; font-size:.95rem; color:var(--inkSoft); max-width:52ch}
.rcpt__v{text-align:right; font-family:var(--f-display); font-size:clamp(1.15rem,2.4vw,1.5rem);
  color:var(--goldDeep); white-space:nowrap; font-variant-numeric:tabular-nums}
.rcpt__v s{display:block; font-family:var(--f-body); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--inkFaint); text-decoration:none; margin-top:6px}
.rcpt__sum{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:baseline;
  padding-block:22px; border-bottom:2px solid var(--ink)}
.rcpt__sum span{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--inkFaint)}
.rcpt__sum b{font-family:var(--f-display); font-size:clamp(1.3rem,3vw,1.8rem); font-weight:400;
  font-variant-numeric:tabular-nums}
.rcpt__you{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:baseline;
  padding-top:24px}
.rcpt__you span{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink);
  font-weight:600}
.rcpt__you b{font-family:var(--f-display); font-size:clamp(2.6rem,7vw,4rem); font-weight:400;
  color:var(--goldDeep); line-height:1; font-variant-numeric:tabular-nums}
.rcpt__you i{display:block; font-style:normal; font-family:var(--f-body); font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--inkFaint); text-align:right; margin-top:8px}
/* The saving is the punchline of the whole ledger, so it gets its own rule above
   it and the only filled ground in the block. */
.rcpt__save{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:baseline;
  margin-top:22px; padding:18px 20px; border-radius:2px; background:var(--bone2)}
.rcpt__save span{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); font-weight:600}
.rcpt__save b{font-family:var(--f-display); font-size:clamp(1.8rem,4.4vw,2.6rem); font-weight:400;
  color:var(--goldDeep); line-height:1; font-variant-numeric:tabular-nums}
.rcpt__save i{display:block; font-style:normal; font-family:var(--f-body); font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--inkFaint); text-align:right;
  margin-top:8px}
@media(max-width:560px){
  .rcpt__r{grid-template-columns:1fr; gap:6px}
  .rcpt__v{text-align:left}
  .rcpt__v s{margin-top:2px}
  .rcpt__sum,.rcpt__you,.rcpt__save{grid-template-columns:1fr; gap:6px}
  .rcpt__you i,.rcpt__save i{text-align:left}
}

/* ============================================================ proof band */
.proof{display:grid; grid-template-columns:minmax(0,320px) 1fr; gap:clamp(26px,5vw,60px);
  align-items:center}
.proof__img{border-radius:2px; overflow:hidden; background:var(--pine2)}
.proof__img img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5}
.creds{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.creds li{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--creamSoft);
  border:1px solid var(--pine3); border-radius:2px; padding:8px 12px}
@media(max-width:720px){
  .proof{grid-template-columns:1fr}
  .proof__img{max-width:260px}
  .proof__img img{aspect-ratio:1/1}
}

/* ============================================================ the next event */
.ev{display:grid; grid-template-columns:1fr auto; gap:clamp(20px,4vw,48px); align-items:center;
  background:var(--pine2); border:1px solid var(--pine3); border-radius:2px;
  padding:clamp(24px,4vw,38px)}
.ev__d{font-family:var(--f-display); font-size:clamp(1.1rem,2.2vw,1.35rem); color:var(--gold);
  font-variant-numeric:tabular-nums}
.ev__facts{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:16px}
@media(max-width:640px){ .ev__facts{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px} }
.ev__facts li{font-size:.86rem; color:var(--creamSoft)}
.ev__facts b{color:var(--cream); font-family:var(--f-display); font-size:1.02rem;
  font-variant-numeric:tabular-nums}
.ev__seats{text-align:right; white-space:nowrap}
.ev__seats b{display:block; font-family:var(--f-display); font-size:clamp(2rem,5vw,3rem);
  color:var(--gold); line-height:1; font-variant-numeric:tabular-nums}
.ev__seats span{display:block; margin-top:8px; font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--creamFaint)}
@media(max-width:640px){ .ev{grid-template-columns:1fr} .ev__seats{text-align:left} }
/* The event sits on a light band so the page keeps alternating rather than running
   three dark sections together. */
.light .ev{background:#fff; border-color:var(--bone3)}
.light .ev__d{color:var(--goldDeep)}
.light .ev__facts li{color:var(--inkSoft)}
.light .ev__facts b{color:var(--ink)}
.light .ev__seats b{color:var(--goldDeep)}
.light .ev__seats span{color:var(--inkFaint)}

/* ============================================================ the schedule
   One row per stop, picture on the side. The rows carry real photographs when
   licensed ones of those exact holes exist; until then each draws a hole plate,
   which is a designed object in its own right rather than a grey box saying
   "image", so the page is finished either way. */
.sched{display:grid; gap:clamp(16px,2.4vw,22px); margin-top:clamp(24px,3.4vw,34px)}
.sched__row{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr) auto;
  gap:clamp(18px,3vw,34px); align-items:center;
  background:var(--pine2); border:1px solid var(--pine3); border-radius:2px;
  padding:clamp(18px,2.6vw,26px)}
.light .sched__row{background:#fff; border-color:var(--bone3)}

.sched__art{position:relative; border-radius:2px; overflow:hidden; aspect-ratio:4/3;
  background:var(--pine); border:1px solid var(--pine3)}
.light .sched__art{background:var(--bone2); border-color:var(--bone3)}
.sched__art img{width:100%; height:100%; object-fit:cover}

/* the stand-in: a hole plate, set like a tee marker */
.plate{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; text-align:center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(212,175,55,.12) 0%, rgba(212,175,55,0) 62%),
    linear-gradient(160deg,#16341F 0%,#0E2416 100%)}
.light .plate{background:
    radial-gradient(120% 120% at 50% 0%, rgba(138,106,22,.1) 0%, rgba(138,106,22,0) 62%),
    linear-gradient(160deg,var(--bone2) 0%,var(--bone) 100%)}
.plate__k,.plate__c{font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--creamFaint)}
.light .plate__k,.light .plate__c{color:var(--inkFaint)}
.plate__n{font-family:var(--f-display); font-weight:400; line-height:.9;
  font-size:clamp(3.6rem,9vw,5.6rem); color:var(--gold); margin-block:6px}
.light .plate__n{color:var(--goldDeep)}
/* An inset hairline turns the panel from an empty box into a plate with an edge,
   which is what stops it reading as a picture that failed to load. */
.plate::after{content:""; position:absolute; inset:10px; border-radius:1px;
  border:1px solid rgba(240,216,121,.16); pointer-events:none}
.light .plate::after{border-color:rgba(138,106,22,.22)}
.plate__k,.plate__n,.plate__c{position:relative; z-index:1}

.sched__top{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.sched__badge{font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--creamFaint); border:1px solid var(--pine3);
  border-radius:2px; padding:4px 8px; white-space:nowrap}
.light .sched__badge{color:var(--inkFaint); border-color:var(--bone3)}
.sched__badge--on{color:var(--gold); border-color:rgba(212,175,55,.5)}
.light .sched__badge--on{color:var(--goldDeep); border-color:rgba(138,106,22,.45)}
.sched__date{font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.02rem,2vw,1.2rem); color:var(--gold); font-variant-numeric:tabular-nums}
.light .sched__date{color:var(--goldDeep)}
.sched__venue{margin-top:10px; font-family:var(--f-display);
  font-size:clamp(1.35rem,3vw,1.9rem); line-height:1.06}
.sched__where{margin-top:6px; font-size:.86rem; color:var(--creamSoft)}
.light .sched__where{color:var(--inkSoft)}

.sched__seats{text-align:right; white-space:nowrap}
.sched__seats b{display:block; font-family:var(--f-display);
  font-size:clamp(2rem,5vw,3rem); color:var(--gold); line-height:1;
  font-variant-numeric:tabular-nums}
.light .sched__seats b{color:var(--goldDeep)}
.sched__seats span{display:block; margin-top:8px; font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--creamFaint)}
.light .sched__seats span{color:var(--inkFaint)}

/* The picture goes over the text before the row gets narrow enough to squeeze
   either of them, and the places counter drops under the copy rather than
   fighting it for the last of the width. */
@media(max-width:900px){
  .sched__row{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
  .sched__seats{grid-column:1/-1; text-align:left}
}
@media(max-width:620px){
  .sched__row{grid-template-columns:1fr}
  .sched__art{aspect-ratio:16/9; max-height:200px}
  .sched__seats{grid-column:auto}
}

/* ============================================================ steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px);
  margin-top:clamp(28px,4vw,44px); counter-reset:s}
.steps li{counter-increment:s; padding-top:20px; border-top:1px solid var(--bone3)}
.steps li::before{content:counter(s,decimal-leading-zero); display:block; margin-bottom:10px;
  font-family:var(--f-display); font-size:.9rem; color:var(--goldDeep);
  font-variant-numeric:tabular-nums}
.steps b{display:block; font-family:var(--f-display); font-weight:400; font-size:1.15rem; margin-bottom:6px}
.steps p{font-size:.92rem; color:var(--inkSoft)}
@media(max-width:700px){ .steps{grid-template-columns:1fr; gap:0}
  .steps li{padding-block:18px} }
/* .steps was authored for a light band; the portal uses it on the dark one. */
[data-page="portal"] .steps li{border-top-color:var(--pine3)}
[data-page="portal"] .steps li::before{color:var(--gold)}
[data-page="portal"] .steps p{color:var(--creamSoft)}

/* ============================================================ price close */
.price{text-align:center; max-width:640px; margin-inline:auto}
.price__n{font-family:var(--f-display); font-size:clamp(4rem,15vw,7rem); line-height:.9;
  color:var(--gold); font-variant-numeric:tabular-nums}
.price__n sup{font-size:.3em; vertical-align:baseline; position:relative; top:-1.5em;
  margin-right:.02em; letter-spacing:0}
.price__u{display:block; margin-top:10px; font-size:.74rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--creamFaint)}
.price .acts{justify-content:center; margin-top:clamp(26px,4vw,36px)}
.price__f{margin-top:18px; font-size:.84rem; color:var(--creamFaint)}

/* ============================================================ forms */
.form{display:grid; gap:16px; max-width:440px}
.field{display:grid; gap:7px}
.field label{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--creamSoft)}
.light .field label{color:var(--inkSoft)}
.fld{width:100%; min-height:52px; padding:0 14px; border-radius:2px;
  background:var(--pine2); border:1px solid var(--pine3); color:var(--cream); font:inherit}
.light .fld{background:#fff; border-color:var(--bone3); color:var(--ink)}
.fld:focus{outline:none; border-color:var(--gold)}
.fld.bad{border-color:var(--red)}
.err{display:none; font-size:.8rem; color:var(--red)}
.err.on{display:block}
.hint{font-size:.84rem; color:var(--creamFaint)}
.light .hint{color:var(--inkFaint)}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:520px){ .f2{grid-template-columns:1fr} }

/* ============================================================ cards / notes */
.note{border-left:2px solid var(--gold); padding:2px 0 2px 18px}
.light .note{border-left-color:var(--goldDeep)}
.note h3,.note h4{font-family:var(--f-body); font-weight:600; font-size:.95rem; margin-bottom:6px}
.note p{font-size:.92rem; color:var(--creamSoft)}
.light .note p{color:var(--inkSoft)}
.card{background:var(--pine2); border:1px solid var(--pine3); border-radius:2px;
  padding:clamp(20px,3vw,28px)}
.light .card{background:#fff; border-color:var(--bone3)}

/* ============================================================ portal */
.tabs{display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--pine3);
  margin-bottom:clamp(24px,4vw,40px); scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none; border:0; cursor:pointer; white-space:nowrap;
  padding:14px 16px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--creamFaint); border-bottom:2px solid transparent}
.tabs button.on{color:var(--gold); border-bottom-color:var(--gold)}
/* A fourth tab pushed the strip past the width of a phone. Tightening the
   letter-spacing buys most of it back; the fade below covers the rest, because
   a tab a member cannot see is a tab that does not exist — and the one hiding
   off the right edge is the one holding "cancel". */
@media(max-width:600px){
  .tabs button{padding:13px 9px; font-size:.66rem; letter-spacing:.07em}
}
@media(max-width:400px){
  .tabs button{padding:13px 6px; font-size:.62rem; letter-spacing:.03em}
}
.tabs{position:relative}
.tabs.more{-webkit-mask-image:linear-gradient(90deg,#000 82%,rgba(0,0,0,.15));
                   mask-image:linear-gradient(90deg,#000 82%,rgba(0,0,0,.15))}
.ball{font-family:var(--f-display); font-size:clamp(3rem,10vw,5rem); color:var(--gold);
  line-height:1; font-variant-numeric:tabular-nums; letter-spacing:.04em}

/* ============================================================ footer */
.foot{border-top:1px solid var(--pine3); padding-block:clamp(36px,5vw,56px); font-size:.86rem}
.foot__in{display:flex; flex-wrap:wrap; gap:22px 40px; justify-content:space-between}
.foot a{color:var(--creamSoft); text-decoration:none}
.foot a:hover{color:var(--gold)}
.foot ul{display:flex; flex-wrap:wrap; gap:8px 20px}
.foot small{display:block; margin-top:24px; color:var(--creamFaint); font-size:.78rem; max-width:70ch}

/* ============================================================ toast */
.toast{position:fixed; left:50%; bottom:22px; z-index:200; transform:translate(-50%,140%);
  background:var(--pine2); border:1px solid var(--gold); color:var(--cream);
  padding:14px 20px; border-radius:2px; font-size:.9rem; max-width:min(92vw,460px);
  transition:transform .34s var(--ease)}
.toast.on{transform:translate(-50%,0)}

/* ============================================================ sticky join (phones)
   The page is one scroll and the button lives at the bottom of it. On a phone
   that is a long way from the top, so the bar follows once the hero is gone —
   and hides again whenever a real join button is on screen, so there are never
   two of the same call to action competing. */
.sticky{position:fixed; left:0; right:0; bottom:0; z-index:70; padding:10px var(--gut)
  calc(10px + env(safe-area-inset-bottom)); background:rgba(11,30,20,.94);
  backdrop-filter:blur(12px); border-top:1px solid var(--pine3);
  transform:translateY(120%); transition:transform .3s var(--ease)}
.sticky.on{transform:none}
@media(min-width:760px){ .sticky{display:none} }

/* ============================================================ reveal */
.rv{opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} }

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ============================================================ legal pages */
.doc{max-width:74ch}
.doc h2{font-family:var(--f-display); font-size:clamp(1.22rem,2.4vw,1.5rem); margin:34px 0 10px}
.doc h3{font-family:var(--f-body); font-weight:600; font-size:1rem; margin:24px 0 8px}
.doc p,.doc li{color:var(--creamSoft); margin-bottom:12px}
.doc ul{list-style:disc; padding-left:20px}
.doc li{margin-bottom:8px}
.doc b{color:var(--cream)}

/* ============================================================ the day
   The format is the story here: round one is a number every player in the
   field can hit, and it only moves back. So the ladder is the layout — five
   rounds, three stations, the yardage getting bigger and the field getting
   smaller. It carries information, it is not decoration. */
.ladder{display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:clamp(30px,4.5vw,48px); border-top:2px solid var(--gold)}
.rung{position:relative; padding:clamp(22px,3vw,30px) clamp(18px,2.4vw,26px) clamp(24px,3vw,32px);
  border-right:1px solid var(--pine3)}
.light .rung{border-right-color:var(--bone3)}
.rung:last-child{border-right:0}
.rung__r{display:block; font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); font-weight:600}
.light .rung__r{color:var(--goldDeep)}
.rung__y{display:flex; align-items:baseline; gap:10px; margin-top:12px}
.rung__y b{font-family:var(--f-display); font-size:clamp(2.5rem,6.5vw,3.6rem); line-height:.9;
  color:var(--gold); font-variant-numeric:tabular-nums}
.light .rung__y b{color:var(--goldDeep)}
.rung__y span{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--creamFaint)}
.light .rung__y span{color:var(--inkFaint)}
.rung__w{margin-top:8px; font-size:.86rem; color:var(--creamSoft); font-variant-numeric:tabular-nums}
.light .rung__w{color:var(--inkSoft)}
.rung__w b{color:var(--cream); font-weight:600}
.light .rung__w b{color:var(--ink)}
.rung__n{margin-top:14px; font-size:.92rem; line-height:1.55; color:var(--creamSoft); max-width:34ch}
.light .rung__n{color:var(--inkSoft)}
@media(max-width:760px){
  .ladder{grid-template-columns:1fr}
  .rung{border-right:0; border-bottom:1px solid var(--pine3)}
  .light .rung{border-bottom-color:var(--bone3)}
  .rung:last-child{border-bottom:0}
}

/* what the day is, beyond the golf */
.perks{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,28px);
  margin-top:clamp(30px,4vw,44px)}
.perk{padding-top:18px; border-top:1px solid var(--pine3)}
.light .perk{border-top-color:var(--bone3)}
.perk b{display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.15rem,2.2vw,1.42rem); margin-bottom:7px}
.perk p{font-size:.9rem; color:var(--creamSoft); line-height:1.55}
.light .perk p{color:var(--inkSoft)}
@media(max-width:900px){ .perks{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .perks{grid-template-columns:1fr; gap:0}
  .perk{padding-block:16px} }

/* the line that reframes the whole thing */
.kicker{margin-top:clamp(34px,5vw,56px); padding:clamp(24px,3.4vw,36px) clamp(22px,3vw,34px);
  background:var(--pine2); border-left:3px solid var(--gold); border-radius:2px}
.light .kicker{background:var(--bone2); border-left-color:var(--goldDeep)}
.kicker p{font-family:var(--f-display); font-size:clamp(1.4rem,3.2vw,2rem); line-height:1.28;
  max-width:32ch}
.kicker em{font-style:italic; color:var(--gold)}
.light .kicker em{color:var(--goldDeep)}
.kicker small{display:block; margin-top:14px; font-family:var(--f-body); font-size:.9rem;
  color:var(--creamSoft); max-width:56ch; line-height:1.6}
.light .kicker small{color:var(--inkSoft)}

/* ============================================================ the member card
   Signing in has one job: show the member their number. So it is a card, not a
   line of text — something that reads like an object you own. */
.mcard{position:relative; max-width:520px; border:1px solid var(--pine3); border-radius:4px;
  padding:clamp(20px,3.4vw,28px); overflow:hidden;
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(212,175,55,.13) 0%, rgba(212,175,55,0) 58%),
    linear-gradient(160deg,#16341F 0%,#0E2416 62%,#0B1E14 100%)}
.mcard::after{content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(240,216,121,.16); border-radius:4px}
.mcard__top{display:flex; align-items:center; justify-content:space-between; gap:16px}
.mcard__brand{display:flex; align-items:center; gap:9px; font-family:var(--f-display);
  font-size:.94rem; letter-spacing:.05em; color:var(--cream)}
.mcard__brand img{height:17px; width:auto}
.mcard__tier{font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:600; white-space:nowrap}
.mcard__num{margin-top:clamp(20px,3vw,30px); font-family:var(--f-display);
  font-size:clamp(3.4rem,13vw,5.2rem); line-height:.92; letter-spacing:.1em;
  color:var(--gold)}
.mcard__lab{display:block; margin-top:6px; font-size:.62rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--creamFaint)}
.mcard__foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 16px; margin-top:clamp(22px,3vw,30px); padding-top:16px;
  border-top:1px solid rgba(255,255,255,.09); font-size:.88rem; color:var(--cream)}
.mcard__pill{display:inline-flex; align-items:center; gap:7px; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--creamSoft)}
.mcard__pill i{width:6px; height:6px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.2)}
.mcard__wait{margin-top:14px; font-size:.82rem; color:var(--creamFaint); max-width:46ch}

/* ============================================================ the bracket
   Bar length is players remaining over the full field, so the funnel is the
   data — 50 down to 1 — not a decoration. It grows in on scroll, which is the
   one place on this site where motion actually says something. */
.brk{margin-top:clamp(28px,4vw,44px); border-top:2px solid var(--gold)}
.light .brk{border-top-color:var(--goldDeep)}
.brkr{padding:clamp(18px,2.6vw,26px) 0; border-bottom:1px solid var(--pine3)}
.light .brkr{border-bottom-color:var(--bone3)}
.brkr__top{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:6px 18px}
.brkr__r{font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  font-weight:600}
.light .brkr__r{color:var(--goldDeep)}
.brkr__fmt{font-size:.82rem; color:var(--creamSoft); font-variant-numeric:tabular-nums}
.light .brkr__fmt{color:var(--inkSoft)}
.brkr__fmt b{color:var(--cream); font-weight:600}
.light .brkr__fmt b{color:var(--ink)}
.brkr__mid{display:flex; align-items:center; gap:clamp(12px,2vw,20px); margin-top:12px}
.brkr__n{flex:none; min-width:3.4ch; font-family:var(--f-display);
  font-size:clamp(1.9rem,4.6vw,2.7rem); line-height:1; color:var(--gold);
  font-variant-numeric:tabular-nums; text-align:right}
.light .brkr__n{color:var(--goldDeep)}
.brkr__unit{flex:none; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--creamFaint); margin-left:-6px}
.light .brkr__unit{color:var(--inkFaint)}
.brkr__track{position:relative; flex:1 1 auto; height:12px; border-radius:2px;
  background:rgba(255,255,255,.07); overflow:hidden}
.light .brkr__track{background:rgba(16,20,16,.09)}
.brkr__fill{display:block; height:100%; width:0; border-radius:2px;
  background:linear-gradient(90deg,#8A6A16,#D4AF37 60%,#F0D879);
  transition:width 1.1s cubic-bezier(.16,.84,.44,1)}
.rv.in .brkr__fill{width:var(--w)}
@media(prefers-reduced-motion:reduce){ .brkr__fill{transition:none; width:var(--w)} }
.brkr__cut{margin-top:10px; font-size:.82rem; color:var(--creamFaint)}
.light .brkr__cut{color:var(--inkFaint)}
.brkr__cut b{color:var(--cream); font-weight:600}
.light .brkr__cut b{color:var(--ink)}
/* the last row is the win, so it stops being a step and becomes the point */
.brkr--win{border-bottom:0}
.brkr--win .brkr__n{font-size:clamp(2.4rem,6vw,3.4rem)}
.brkr--win .brkr__cut b{color:var(--gold)}
.light .brkr--win .brkr__cut b{color:var(--goldDeep)}
@media(max-width:520px){
  .brkr__mid{flex-wrap:wrap}
  .brkr__track{flex:1 1 100%; order:3; margin-top:4px}
}

/* ---------------- the payout */
.pay{display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:clamp(26px,3.4vw,38px); border-top:1px solid var(--pine3)}
.light .pay{border-top-color:var(--bone3)}
.payr{padding:18px clamp(14px,2vw,22px) 20px 0; border-right:1px solid var(--pine3)}
.light .payr{border-right-color:var(--bone3)}
.payr:last-child{border-right:0}
.payr span{display:block; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--creamFaint)}
.light .payr span{color:var(--inkFaint)}
.payr b{display:block; margin-top:9px; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.3rem,3vw,1.9rem); color:var(--gold); font-variant-numeric:tabular-nums}
.light .payr b{color:var(--goldDeep)}
.payr i{display:block; margin-top:6px; font-style:normal; font-size:.84rem;
  color:var(--creamSoft)}
.light .payr i{color:var(--inkSoft)}
.paytot{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:8px 20px; margin-top:18px; padding-top:16px; border-top:2px solid var(--gold)}
.light .paytot{border-top-color:var(--goldDeep)}
.paytot span{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--creamFaint)}
.light .paytot span{color:var(--inkFaint)}
.paytot b{font-family:var(--f-display); font-size:clamp(1.5rem,3.4vw,2.1rem); font-weight:400;
  font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .pay{grid-template-columns:1fr}
  .payr{border-right:0; border-bottom:1px solid var(--pine3); padding-right:0}
  .light .payr{border-bottom-color:var(--bone3)}
  .payr:last-child{border-bottom:0}
}

/* ============================================================ the drop
   The hopper is a real object in Chris's house and the ball really does get a
   number written on it, so this block is built to look like both: the machine
   running on the left, the member's own ball on the right. The ball is drawn in
   CSS rather than shipped as an image so the number can be live text — it is
   the one number on the site that belongs to the person reading it. */
.drop{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(20px,3.4vw,36px); align-items:stretch; margin-top:clamp(22px,3.4vw,32px)}

.drop__vid{position:relative; border-radius:6px; overflow:hidden; background:#0E2416;
  border:1px solid var(--pine3); aspect-ratio:2/3}
.drop__vid video{width:100%; height:100%; object-fit:cover; display:block}
/* The machine is warm and bright and the page is not, so it is banded top and
   bottom into the page ground instead of sitting on it as a bright rectangle. */
.drop__vid::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,30,20,.55) 0%,rgba(11,30,20,0) 26%,
    rgba(11,30,20,0) 62%,rgba(11,30,20,.78) 100%);
  box-shadow:inset 0 0 0 1px rgba(240,216,121,.12)}
.drop__cap{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:14px 16px; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--creamSoft)}
.drop__cap b{display:block; margin-bottom:5px; letter-spacing:.18em; color:var(--gold);
  font-weight:600}

.drop__body{display:flex; flex-direction:column; justify-content:center;
  gap:clamp(16px,2.4vw,22px)}
.drop__head{font-family:var(--f-drop); font-weight:800;
  font-variation-settings:'opsz' 96;
  font-size:clamp(1.72rem,4.4vw,2.9rem); line-height:.98; letter-spacing:-.02em;
  text-wrap:balance}
.drop__head em{font-style:normal; color:var(--pp)}
.drop__sub{color:var(--creamSoft); max-width:44ch; font-size:1.02rem; line-height:1.6}

/* ---- the ball itself */
.ball{position:relative; width:clamp(150px,26vw,196px); aspect-ratio:1; flex:none;
  border-radius:50%; display:grid; place-items:center; isolation:isolate;
  background:
    radial-gradient(circle at 33% 27%, #FFD9B5 0%, #F09A60 20%, var(--pp) 50%,
      #B85A22 82%, var(--ppDark) 100%);
  box-shadow:0 24px 44px -18px rgba(0,0,0,.8)}
/* seam: a real ball has one, and it is the detail that stops this reading as a
   flat circle with a number in it */
/* Three overlays, because one gradient makes a peach and not a sphere: a tight
   specular where the light is, a bounce off the surface below on the far side,
   and a terminator that darkens everything away from the highlight. */
.ball::before{content:""; position:absolute; inset:0; border-radius:50%; z-index:2;
  pointer-events:none;
  background:
    radial-gradient(ellipse 22% 15% at 31% 23%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 72%),
    radial-gradient(circle at 80% 86%, rgba(255,197,150,.34) 0%, rgba(255,197,150,0) 38%),
    radial-gradient(circle at 28% 23%, rgba(94,32,6,0) 44%, rgba(94,32,6,.46) 100%)}
.ball::after{content:""; position:absolute; z-index:3; pointer-events:none;
  left:6%; right:6%; top:50%; height:2px; transform:translateY(-50%) rotate(-9deg);
  border-radius:2px; opacity:.35;
  background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 22%,
    rgba(0,0,0,.5) 78%,rgba(0,0,0,0) 100%)}
.ball b{position:relative; z-index:4; font-family:var(--f-drop); font-weight:800;
  font-variation-settings:'opsz' 96;
  font-size:clamp(2.5rem,7.4vw,3.6rem); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:#2A0F03;
  transform:rotate(-9deg); transform-origin:center;
  text-shadow:0 1px 0 rgba(255,255,255,.22)}
/* Waiting on the API — an empty circle reads as broken, a pulsing one reads as
   working, so the placeholder says which it is. */
.ball[data-pending] b{opacity:.4}

.drop__ballrow{display:flex; align-items:center; gap:clamp(18px,3vw,28px); flex-wrap:wrap}
.drop__ballside{min-width:min(100%,15ch)}
.drop__ballside span{display:block; font-size:.62rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--creamFaint)}
.drop__ballside p{margin-top:8px; font-size:.9rem; color:var(--creamSoft); max-width:26ch}

/* The machine is a tall object in a tall frame. Squashing it into a landscape
   box on narrow screens cropped away the tray the balls land in, which is half
   of what makes it read as a real machine — so it stays portrait and narrows. */
@media(max-width:820px){
  .drop{grid-template-columns:1fr}
  .drop__vid{order:2; width:min(100%,272px)}
  .drop__body{order:1}
}
/* Reduced motion is handled in JS by pausing the video, which leaves its poster
   frame on screen — a still of the same machine rather than an empty box. */

/* ============================================================ the logo wall
   Two identical tracks side by side, each holding the full set repeated, and
   the pair slides left by exactly one track width before snapping back. Because
   the second track is a copy of the first, the snap lands on an identical frame
   and the loop is invisible. Any approach that animates a percentage of the
   viewport instead visibly stutters when the wrap happens. */
.mq{position:relative; display:flex; width:100%; overflow:hidden;
  margin-top:clamp(18px,2.4vw,26px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq__t{display:flex; align-items:center; flex:none; gap:clamp(38px,6vw,84px);
  padding-right:clamp(38px,6vw,84px);
  animation:mqrun 42s linear infinite; will-change:transform}
.mq:hover .mq__t{animation-play-state:paused}
.mq__t li{flex:none; display:grid; place-items:center}
.mq__t picture{display:contents}
.mq__t img{height:calc(clamp(46px,6.2vw,78px) * var(--s,1)); width:auto;
  opacity:.82; transition:opacity .35s var(--ease)}
.mq:hover .mq__t img{opacity:1}
@keyframes mqrun{ from{transform:translateX(0)} to{transform:translateX(-100%)} }
/* A strip that slides forever is the one animation on this site somebody could
   genuinely find unpleasant, so it simply stops. */
@media(prefers-reduced-motion:reduce){
  .mq{-webkit-mask-image:none; mask-image:none; overflow-x:auto}
  .mq__t{animation:none}
  .mq__t:last-child{display:none}
}

/* ============================================================ sponsors page */
.whys{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3vw,40px) clamp(28px,4vw,64px); margin-top:clamp(28px,4vw,46px)}
.why h3{font-family:var(--f-display); font-size:clamp(1.2rem,2.4vw,1.5rem)}
.why p{margin-top:9px; color:var(--creamSoft); font-size:.95rem; line-height:1.62}
.light .why p{color:var(--inkSoft)}
@media(max-width:720px){ .whys{grid-template-columns:1fr} }

/* The member-contact list is numbered because these are four distinct things a
   partner receives, and a partner reading it wants to count them. */
.touch{display:grid; gap:clamp(16px,2.2vw,22px); margin-top:clamp(28px,4vw,44px);
  counter-reset:tc}
.touch li{counter-increment:tc; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:4px 18px; padding-top:18px; border-top:1px solid var(--bone3)}
.touch li::before{content:counter(tc,decimal-leading-zero); grid-row:1/3;
  font-family:var(--f-display); font-size:clamp(1.5rem,3vw,2.1rem); color:var(--goldDeep);
  line-height:1; font-variant-numeric:tabular-nums}
.touch b{font-family:var(--f-display); font-weight:400; font-size:clamp(1.15rem,2.3vw,1.45rem)}
.touch p{color:var(--inkSoft); font-size:.95rem; line-height:1.62; max-width:62ch}
@media(max-width:560px){
  .touch li{grid-template-columns:1fr}
  .touch li::before{grid-row:auto; font-size:1.2rem}
}

.mlist{display:grid; gap:13px; margin-top:clamp(20px,2.6vw,28px)}
.mlist li{position:relative; padding-left:24px; font-size:.95rem; line-height:1.6;
  color:var(--creamSoft)}
.light .mlist li{color:var(--inkSoft)}
.mlist li::before{content:""; position:absolute; left:0; top:.62em; width:9px; height:1px;
  background:var(--gold)}
.light .mlist li::before{background:var(--goldDeep)}

.tiers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,24px); margin-top:clamp(28px,4vw,44px)}
.tier{display:flex; flex-direction:column; background:#fff; border:1px solid var(--bone3);
  border-radius:2px; padding:clamp(22px,2.8vw,30px)}
/* The first tier is the one that is actually scarce, so it is the one that looks it. */
.tier:first-child{border-color:var(--goldDeep); box-shadow:0 0 0 1px var(--goldDeep)}
.tier__av{font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:var(--inkFaint)}
.tier:first-child .tier__av{color:var(--goldDeep)}
.tier__n{margin-top:10px; font-family:var(--f-display);
  font-size:clamp(1.35rem,2.6vw,1.7rem); line-height:1.05}
.tier__l{margin-top:8px; font-size:.92rem; color:var(--inkSoft); line-height:1.55}
.tier__i{margin-top:18px; padding-top:16px; border-top:1px solid var(--bone3);
  display:grid; gap:10px}
.tier__i li{position:relative; padding-left:20px; font-size:.88rem; line-height:1.5;
  color:var(--ink)}
.tier__i li::before{content:""; position:absolute; left:0; top:.55em; width:8px; height:1px;
  background:var(--goldDeep)}
@media(max-width:860px){ .tiers{grid-template-columns:1fr} }

/* A compact restatement of the schedule — the sponsor page needs the dates as
   proof the season is real, not the full event rows again. */
.mini{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,22px); margin-top:clamp(24px,3vw,34px)}
.mini li{padding-top:14px; border-top:1px solid var(--pine3)}
.light .mini li{border-top-color:var(--bone3)}
.mini b{display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.05rem,2vw,1.28rem); color:var(--gold); font-variant-numeric:tabular-nums}
.light .mini b{color:var(--goldDeep)}
.mini span{display:block; margin-top:7px; font-size:.92rem; color:var(--cream)}
.light .mini span{color:var(--ink)}
.mini i{display:block; margin-top:4px; font-style:normal; font-size:.8rem; color:var(--creamFaint)}
.light .mini i{color:var(--inkFaint)}
@media(max-width:760px){ .mini{grid-template-columns:1fr 1fr} }
@media(max-width:420px){ .mini{grid-template-columns:1fr} }

/* nav */
.navlink{font-size:.82rem; text-decoration:none; color:var(--creamSoft); white-space:nowrap;
  padding:8px 2px; transition:color .25s var(--ease)}
.navlink:hover{color:var(--gold)}
@media(max-width:359px){ .navlink{display:none} }