/* Club plan page: the scroll-drawn line drawing of the club */
body{--cp-bg:#0c0d0f;--cp-fg:#f4f3f0;--cp-dim:#a3a29c;--cp-acc:#d5ef65}
body[data-cp-theme=paper]{--cp-bg:#f4f3f0;--cp-fg:#0c0d0f;--cp-dim:#5d5c58;--cp-acc:#5f7a00}
body[data-cp-theme=blueprint]{--cp-bg:#10294a;--cp-fg:#eaf1ff;--cp-dim:#a9bbd6;--cp-acc:#d5ef65}
body[data-cp-theme=paper]{background:#f4f3f0}
body[data-cp-theme=blueprint]{background:#10294a}
/* the site nav sits over a light drawing, so give it its solid bar */
body[data-cp-theme=paper] nav{background:rgba(12,13,15,.86);backdrop-filter:blur(14px)}

#cp-canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
#cp-labels{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cp-shade{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--cp-bg) 0%,color-mix(in srgb,var(--cp-bg) 55%,transparent) 30%,transparent 55%)}
.cp-off #cp-canvas,.cp-off #cp-labels,.cp-off .cp-shade,.cp-off .cp-ui{opacity:0;visibility:hidden}
#cp-canvas,#cp-labels,.cp-shade,.cp-ui{transition:opacity .4s,visibility .4s}

.cp-lab{position:absolute;left:0;top:0;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-acc);white-space:nowrap;
  padding:2px 5px;background:var(--cp-bg);opacity:0;will-change:transform}
.cp-lab.num{color:var(--cp-fg);font-weight:700;font-size:12px;border:1px solid var(--cp-fg);border-radius:999px;padding:3px 7px}

/* drawing style switch, title block, progress rail */
.cp-pal{position:fixed;z-index:40;top:84px;right:var(--mx,32px);display:flex;gap:4px;border:1px solid color-mix(in srgb,var(--cp-fg) 25%,transparent);
  border-radius:999px;padding:4px;background:var(--cp-bg)}
.cp-pal button{font:600 11px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--cp-dim);background:none;border:0;border-radius:999px;padding:9px 14px;cursor:pointer}
.cp-pal button.on{background:var(--cp-fg);color:var(--cp-bg)}
.cp-tblock{position:fixed;right:92px;bottom:28px;z-index:3;display:grid;grid-template-columns:auto auto;border:1px solid var(--cp-fg);background:var(--cp-bg);color:var(--cp-fg);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.cp-tblock div{padding:7px 10px;border-right:1px solid var(--cp-fg);border-bottom:1px solid var(--cp-fg)}
.cp-tblock div:nth-child(2n){border-right:0}
.cp-tblock div:nth-last-child(-n+2){border-bottom:0}
.cp-tblock .k{color:var(--cp-dim)}
.cp-tblock .big{grid-column:1/-1;font-weight:900;font-size:15px;letter-spacing:.02em;display:flex;justify-content:space-between;align-items:center;gap:22px;border-right:0}
.cp-north{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:10px;letter-spacing:.16em}
.cp-north svg{width:14px;height:14px}
.cp-rail{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:3;width:1px;height:120px;background:color-mix(in srgb,var(--cp-fg) 20%,transparent);overflow:hidden}
.cp-rail i{display:block;width:100%;height:0;background:var(--cp-fg)}
.cp-hint{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--cp-dim);transition:opacity .4s}

/* the story text */
.cp-story{position:relative;z-index:2;color:var(--cp-fg)}
.cp-story section{min-height:100vh;display:flex;align-items:center;padding:0 7vw}
.cp-txt{max-width:520px}
/* text rises in only once the drawing script is running, so it always shows if the script can't load */
.cp-ready .cp-txt{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.165,.84,.44,1),transform .6s cubic-bezier(.165,.84,.44,1)}
.cp-ready .cp-txt.in{opacity:1;transform:none}
.cp-eyebrow{font-weight:700;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--cp-acc)}
.cp-story h1,.cp-story h2{margin-top:14px;font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.02em;color:var(--cp-fg)}
.cp-story h1{font-size:clamp(48px,8vw,112px)}
.cp-story h2{font-size:clamp(40px,6vw,84px)}
.cp-story p{margin-top:18px;font-size:18px;line-height:1.5;color:var(--cp-dim);max-width:420px}
.cp-story .btn{margin-top:28px}

/* the footer slides over the drawing */
.cp-after{position:relative;z-index:3;background:var(--ink)}

/* no WebGL: keep the text, drop the drawing */
.cp-nogl #cp-canvas,.cp-nogl .cp-ui,.cp-nogl .cp-shade{display:none}
.cp-nogl .cp-txt,.cp-ready.cp-nogl .cp-txt{opacity:1;transform:none}
.cp-nogl .cp-story section{min-height:60vh}

@media (max-width:760px){
  .cp-pal{top:68px;right:12px}
  .cp-pal button{padding:8px 9px;letter-spacing:.1em}
  .cp-story section{align-items:flex-end;padding:0 16px 16vh}
  .cp-shade{background:linear-gradient(0deg,var(--cp-bg) 0%,color-mix(in srgb,var(--cp-bg) 50%,transparent) 35%,transparent 60%)}
  .cp-story p{font-size:16px}
  .cp-tblock{display:none}
  .cp-rail{right:10px}
}
@media (prefers-reduced-motion:reduce){.cp-txt{transition:none}}