/* ---------------------------------------------------------------
   Pickleballpreneurs brand system. See brand/brand-kit.html.

   Type: Figtree, matched to the logo's tagline ("Good games. Great
   people."): heavy for headings, regular for text, sentence case
   throughout like the logo. One variable file covers every weight.
   The wordmark itself only ever appears as the logo SVG.

   Colour: the logo's navy and green on a white ground, with a warm
   cream for alternate sections. Deliberately single-theme; every
   colour is painted explicitly so the page holds on any background.
   --------------------------------------------------------------- */

@font-face{
  font-family:"Figtree";
  src:url("/fonts/figtree-latin.woff2") format("woff2");
  font-weight:300 900;
  font-display:swap;
}

:root{
  --ground:#FFFFFF;
  --ink:#101C30;            /* body text: near-black with the navy in it */
  /* Pickleballpreneurs green, from the logo. Dark enough for text on
     white, and it carries white text when it's the fill. */
  --green:#246B20;
  --green-dark:#1B5418;     /* hover on green fills */
  --green-light:#A8D89C;    /* the same green, lifted for navy & photos */
  --fill:#F5F3EC;           /* warm cream for alternate sections */
  --muted:#566073;          /* secondary text, navy-grey */
  --rule:#E3E0D6;
  --navy:#042550;           /* logo navy (the same navy as We Support Dreams) */

  --display:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Corner softness, site-wide. 0 puts back v1's square edges. */
  --radius:18px;          /* cards and colour blocks */
  --radius-sm:12px;       /* photos, inputs, small panels */
  --pill:999px;           /* buttons and badges */

  --pad:clamp(20px,5vw,64px);
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}

/* ---------- shared ---------- */

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

.display{
  font-family:var(--display);
  font-weight:800;
  color:var(--navy);
  line-height:1.08;
  letter-spacing:-.015em;
  text-wrap:balance;
  overflow-wrap:break-word;
  margin:0;
}

.eyebrow{
  font-family:var(--body);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0;
}

.prose{max-width:62ch}

/* ---------- primary call to action ---------- */

.cta{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--green);color:#FFFFFF;
  font-family:var(--display);
  font-size:clamp(21px,2.6vw,27px);font-weight:700;
  letter-spacing:.02em;line-height:1;
  padding:20px 30px;text-decoration:none;border:2px solid var(--ink);
  transition:transform .15s ease,background .15s ease;
}
.cta:hover{background:var(--green-dark);transform:translateY(-2px)}
.cta .arw{font-family:var(--body);font-size:.8em;font-weight:600}
.cta-note{font-size:13px;color:var(--muted);margin:12px 0 0}

/* ---------- lime fact band ---------- */

.facts{background:var(--green);color:#FFFFFF;border-block:2px solid var(--ink)}
.facts-grid{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(2,1fr);
}
.fact{padding:20px 0;border-bottom:1px solid rgba(6,6,6,.18)}
.fact:nth-child(odd){padding-right:18px;border-right:1px solid rgba(6,6,6,.18)}
.fact:nth-child(even){padding-left:18px}
.fact:nth-last-child(-n+2){border-bottom:none}
.fact dt{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(6,6,6,.62);margin:0 0 4px;
}
.fact dd{
  margin:0;font-family:var(--display);
  font-size:clamp(23px,3.2vw,31px);font-weight:700;
  line-height:1;font-variant-numeric:tabular-nums;
}
.fact dd em{
  font-family:var(--body);font-style:normal;font-size:12px;font-weight:500;
  text-transform:none;letter-spacing:0;color:rgba(6,6,6,.62);
}
.fact small{
  display:block;font-family:var(--body);font-size:12px;font-weight:500;
  text-transform:none;letter-spacing:0;color:rgba(6,6,6,.62);margin-top:5px;
}

/* ---------- experience notice ---------- */

.notice{background:var(--navy);color:#FFFFFF;padding-block:clamp(26px,4vw,38px)}
.notice-in{display:flex;flex-direction:column;gap:10px}
.notice h2{font-size:clamp(22px,3vw,31px);color:#FFFFFF;margin:0}
.notice p{margin:0;max-width:66ch;color:rgba(255,255,255,.86);font-size:16px}
.notice a{color:var(--green-light);text-underline-offset:3px}

/* ---------- generic section ---------- */

.section{padding-block:clamp(52px,8vw,92px)}
.section.tint{background:var(--fill)}
.section h2{font-size:clamp(30px,4.6vw,50px);margin-bottom:24px}
.lede{font-size:clamp(17px,2vw,20px);color:var(--ink);margin:0 0 32px}
.lede a{color:var(--ink);text-decoration-color:var(--green);text-underline-offset:3px}
.body-copy p{max-width:66ch;margin:0 0 18px}
.body-copy p:last-child{margin-bottom:0}

/* ---------- the two halves of the night ---------- */

.halves{display:grid;gap:18px;grid-template-columns:1fr;margin-top:8px}
.half{padding:30px 28px 32px;display:flex;flex-direction:column;gap:12px;position:relative}
.half .plus{
  position:absolute;top:16px;right:20px;
  font-family:var(--display);font-size:26px;line-height:1;opacity:.5;
}
.half-play{background:var(--green);color:#FFFFFF}
.half-connect{background:var(--navy);color:#FFFFFF}
.half time{
  font-family:var(--display);
  font-size:clamp(30px,4.4vw,42px);font-weight:700;
  line-height:1;font-variant-numeric:tabular-nums;
}
.half h3{
  font-family:var(--body);font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin:0;
}
.half-play h3{color:rgba(255,255,255,.8)}
.half-connect h3{color:var(--green-light)}
.half p{margin:0;font-size:16px;line-height:1.55}
.half-connect p{color:rgba(255,255,255,.86)}

/* ---------- questions ---------- */

.qa{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--rule)}
.qa > div{padding:22px 0;border-bottom:1px solid var(--rule)}
.qa dt{
  font-family:var(--display);
  font-size:23px;font-weight:700;
  line-height:1.05;margin:0 0 6px;
}
.qa dd{margin:0;color:var(--muted);max-width:60ch}
.qa a{color:var(--ink);text-decoration-color:var(--green);text-underline-offset:3px}

/* ---------- watch-first videos ---------- */

.videos{display:grid;gap:16px;grid-template-columns:1fr;margin-top:8px}
.videos:has(> :only-child){grid-template-columns:1fr;max-width:640px}
.video{
  display:flex;gap:18px;align-items:center;min-width:0;
  border:1px solid var(--rule);background:var(--ground);
  padding:20px;text-decoration:none;
  transition:border-color .15s ease,transform .15s ease;
}
.video:hover{border-color:var(--ink);transform:translateY(-2px)}
.video .play{
  flex:none;width:56px;height:56px;border:2px solid var(--ink);background:var(--green);
  display:flex;align-items:center;justify-content:center;
}
.video .play::after{
  content:"";width:0;height:0;margin-left:4px;
  border-left:15px solid #FFFFFF;
  border-top:10px solid transparent;border-bottom:10px solid transparent;
}
.video .meta{display:block;
  font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);
}
.video .vt{
  font-family:var(--display);
  font-size:24px;font-weight:700;
  line-height:1.05;margin:3px 0 4px;
}
.video p{margin:0;font-size:14px;color:var(--muted)}

/* ---------- partners and people ---------- */

.partners{display:grid;gap:16px;grid-template-columns:1fr;margin-top:8px}
.partner{
  border:1px solid var(--rule);background:var(--ground);padding:24px;
  display:flex;flex-direction:column;gap:8px;
}
.partner .role{
  font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);
}
.partner .name{
  font-family:var(--display);
  font-size:27px;font-weight:700;line-height:1;
}
.partner p{margin:0;font-size:15px;color:var(--muted)}
.partner a{color:var(--ink);text-decoration-color:var(--green);text-underline-offset:3px}
.partner .logo{display:block;width:100%;max-width:176px;height:auto;margin:2px 0 4px}
.people .partner .logo{max-width:120px}
.partner .pic{width:100%;height:auto;border-radius:6px;margin-top:4px}
.partner .cap{font-size:12px;color:var(--muted);margin-top:-2px}
svg.logo{max-width:150px}

.people{display:grid;gap:16px;grid-template-columns:1fr;margin-top:16px}
.people > *{min-width:0}
.person{
  display:flex;gap:20px;align-items:flex-start;
  border:1px solid var(--rule);background:var(--ground);
  padding:18px 22px 18px 18px;
}
.person img{width:104px;height:104px;flex:none;object-fit:cover;border-radius:6px}
.person .role{
  font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);
}
.person .name{
  font-family:var(--display);
  font-size:27px;font-weight:700;
  line-height:1;margin:4px 0 6px;
}
.person p{margin:0;font-size:15px;color:var(--muted)}
.person a{color:var(--ink);text-decoration-color:var(--green);text-underline-offset:3px}

/* ---------- placeholder blocks ---------- */

.ph{
  border:2px dashed var(--green);
  background:repeating-linear-gradient(135deg,#FBFDF4 0 12px,#F3F8E4 12px 24px);
  color:var(--green);padding:20px;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  min-height:120px;text-align:center;
}
.ph b{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ph span{font-size:13px;color:var(--muted)}
.ph.tall{min-height:150px}

/* ---------- closing call to action ---------- */

.close{background:var(--ink);color:#FFFFFF;padding-block:clamp(56px,9vw,104px)}
.close h2{color:#FFFFFF;margin-bottom:18px}
.close p{color:rgba(255,255,255,.8);margin:0 0 30px;max-width:52ch}

/* ---------- footer ---------- */

.foot{
  padding-block:34px;border-top:1px solid var(--rule);
  font-size:14px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
}
.foot strong{
  font-family:var(--display);
  font-size:20px;font-weight:700;
  color:var(--ink);letter-spacing:.01em;
}

/* ---------- wider screens ---------- */

@media (min-width:760px){
  .facts-grid{grid-template-columns:repeat(3,1fr)}
  .fact{padding:24px 18px;border-bottom:1px solid rgba(6,6,6,.18)}
  .fact:nth-child(odd){border-right:none;padding-right:18px}
  .fact:nth-child(even){padding-left:18px}
  .fact:not(:nth-child(3n+1)){border-left:1px solid rgba(6,6,6,.18)}
  .fact:nth-child(3n+1){padding-left:0}
  .fact:nth-last-child(-n+3){border-bottom:none}
  .halves{grid-template-columns:1fr 1fr}
  .qa{grid-template-columns:1fr 1fr;column-gap:44px}
  .videos{grid-template-columns:1fr 1fr}
  .partners{grid-template-columns:repeat(3,1fr)}
  .people{grid-template-columns:1fr 1fr}
  .notice-in{flex-direction:row;align-items:baseline;gap:26px}
  .notice h2{flex:none;max-width:11ch}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .cta:hover,.video:hover{transform:none}
}

/* ===============================================================
   v2 additions: site chrome, schedule, gallery, waitlist.
   Everything above this line is v1's stylesheet, unchanged.
   =============================================================== */

/* ---------- skip link and nav ---------- */

.skip{
  position:absolute;left:-9999px;top:0;z-index:20;
  background:var(--ink);color:#FFFFFF;padding:12px 18px;
  font-size:14px;font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

.nav{background:var(--ground);border-bottom:1px solid var(--rule);position:relative;z-index:5}
.nav-in{
  max-width:var(--maxw);margin-inline:auto;padding:14px var(--pad);
  display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;
}
.nav-in a{
  font-size:14px;font-weight:600;text-decoration:none;color:var(--muted);
  text-underline-offset:4px;
}
.nav-in a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--green)}
.nav-cta{
  background:var(--green);color:#FFFFFF!important;border:2px solid var(--ink);
  padding:7px 14px;font-size:13px!important;letter-spacing:.02em;
  font-family:var(--display);font-weight:700!important;
  line-height:1.2;
}
.nav-cta:hover{background:var(--green-dark);text-decoration:none!important}
@media (max-width:759px){.nav-cta{display:none}}

/* A call to action with nowhere to go yet: same shape, no affordance. */
.cta-static{
  background:transparent;color:var(--ink);border-style:dashed;
  cursor:default;font-size:clamp(16px,2vw,20px);
}
.cta-static:hover{transform:none;background:transparent}

/* ---------- interior page headers ---------- */

.page-head{padding-block:clamp(38px,6vw,68px) clamp(6px,2vw,14px);background:var(--ground)}
.page-head .eyebrow{color:var(--green);margin-bottom:12px}
.page-head h1{font-size:clamp(34px,7vw,66px);margin:0 0 18px}
.page-head .lede{margin-bottom:0;color:var(--muted)}

h2.display.sub{
  font-size:clamp(22px,3vw,30px);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  margin:0 0 18px;
}
h2.display.sub small{
  font-family:var(--body);font-size:13px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--muted);
}
h2.display.sub + .rows,h2.display.sub + .grid{margin-bottom:46px}
.rows + h2.display.sub,.empty + h2.display.sub,.group + .group{margin-top:46px}

.empty{
  border:1px dashed var(--rule);background:var(--fill);
  padding:26px;margin:0 0 46px;color:var(--muted);font-size:15px;
}

/* ---------- schedule rows ---------- */

.rows{border-top:1px solid var(--rule)}
.row{
  display:grid;gap:4px 18px;align-items:baseline;
  grid-template-columns:auto 1fr;
  grid-template-areas:"no main" ". date" ". venue" ". badge";
  padding:20px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;
  transition:background .15s ease;
}
.row:hover{background:var(--fill)}
.row-no{
  grid-area:no;
  font-family:var(--display);font-weight:700;
  font-size:30px;line-height:1;color:var(--green);
  font-variant-numeric:tabular-nums;min-width:1.6em;
}
.row-main{grid-area:main;display:flex;flex-direction:column;gap:3px;min-width:0}
.row-main b{
  font-family:var(--display);font-weight:700;
  font-size:24px;line-height:1.05;
}
.row-main small,.row-venue{font-size:14px;color:var(--muted)}
.row-date{grid-area:date;display:flex;align-items:baseline;gap:8px}
.row-date b{
  font-family:var(--display);font-weight:700;
  font-size:19px;font-variant-numeric:tabular-nums;
}
.row-date small{font-size:13px;color:var(--muted)}
.row-venue{grid-area:venue}

.badge{
  grid-area:badge;justify-self:start;white-space:nowrap;margin-top:6px;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--ink);
}
.badge-open{background:var(--green);color:#FFFFFF;border-color:var(--green)}
.badge-announced{background:var(--ground);color:var(--ink)}
.badge-full{background:var(--navy);color:#FFFFFF;border-color:var(--navy)}
.badge-past{background:var(--ground);color:var(--muted);border-color:var(--rule)}

/* ---------- gallery ---------- */

.grid{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
.strip{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);margin-top:8px}
.tile{display:block;position:relative;background:var(--fill);overflow:hidden}
.tile img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .2s ease}
.tile:hover img{transform:scale(1.03)}
.group-note{font-size:13px;color:var(--muted);margin:14px 0 0;max-width:70ch}
.group-note a{color:var(--ink);text-decoration-color:var(--green);text-underline-offset:3px}
.more{margin:20px 0 0}
.more a{
  font-family:var(--display);font-weight:700;
  font-size:20px;
  text-decoration-color:var(--green);text-underline-offset:4px;
}

/* Lightbox. The only part of this site that needs JavaScript — with it
   off, a thumbnail is a plain link straight to the full-size photo. */
.lb{
  position:fixed;inset:0;z-index:30;
  background:rgba(6,6,6,.94);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,40px);
}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb-btn{
  position:absolute;background:rgba(6,6,6,.55);color:#FFFFFF;
  border:2px solid rgba(255,255,255,.55);
  width:48px;height:48px;font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.lb-btn:hover{background:var(--green);color:#FFFFFF;border-color:var(--green)}
.lb-close{top:14px;right:14px}
.lb-prev{left:10px;top:50%;transform:translateY(-50%)}
.lb-next{right:10px;top:50%;transform:translateY(-50%)}
.lb-count{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.75);font-size:13px;font-variant-numeric:tabular-nums;
}
body.lb-open{overflow:hidden}

/* ---------- waitlist ---------- */

.waitlist{background:var(--fill);border-top:1px solid var(--rule)}
.waitlist h2{font-size:clamp(28px,4.4vw,46px)}
.wl-form{display:flex;flex-direction:column;gap:16px;max-width:460px;margin-top:4px}
.wl-field{display:flex;flex-direction:column;gap:6px}
.wl-field span{
  font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.wl-field input{
  font-family:var(--body);font-size:17px;padding:13px 14px;
  border:2px solid var(--ink);background:var(--ground);color:var(--ink);
  border-radius:0;
}
.wl-consent{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--muted)}
.wl-consent input{margin:2px 0 0;width:19px;height:19px;flex:none;accent-color:var(--green)}
.wl-form .cta{align-self:flex-start;font-size:20px;padding:15px 24px}
.wl-note{font-size:13px;color:var(--muted);margin:0}
.wl-note.is-error{color:#8A2323}

/* ---------- footer ---------- */

.foot{align-items:flex-start}
.foot-brand{display:flex;flex-direction:column;gap:5px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-links a{color:var(--muted);text-underline-offset:3px}
.foot-links a:hover{color:var(--ink)}
.foot-legal{display:flex;flex-direction:column;gap:5px;font-size:13px}

/* ---------- wider screens ---------- */

@media (min-width:760px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .strip{grid-template-columns:repeat(4,1fr)}
  .row{
    grid-template-columns:auto 7.5rem 1fr auto auto;
    grid-template-areas:"no date main venue badge";
    align-items:center;gap:22px;
  }
  .badge{justify-self:end;margin-top:0}
  .row-date{flex-direction:column;gap:1px;align-items:flex-start}
  .foot{flex-wrap:nowrap;gap:40px}
  .foot-legal{text-align:right;align-items:flex-end;margin-left:auto}
}

/* Feature nights sit differently in the schedule: once a quarter, and
   the reason someone scrolls the list is to spot them. */
.row-feature{background:#FBFFF0}
.row-feature:hover{background:#0A3166}
.row-feature .row-no{color:var(--ink)}
.row-feature-tag{
  display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);margin-bottom:3px;
}

/* next-up strip: where the facts band was */
.next{background:var(--green);color:#FFFFFF;border-block:2px solid var(--ink)}
.next-in{padding-block:18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px}
.next .eyebrow{color:rgba(6,6,6,.62);flex-basis:100%}
.next-when{margin:0;font-size:16px;font-variant-numeric:tabular-nums}
.next-when b{
  font-family:var(--display);font-weight:700;
  font-size:clamp(22px,3vw,28px);margin-right:6px;
}
.next-link{font-weight:700;font-size:15px;color:var(--ink);text-underline-offset:3px}
.next-note{flex-basis:100%;margin:4px 0 0;font-size:14px;color:rgba(6,6,6,.72)}
.next-note a{color:var(--ink);text-underline-offset:3px}

/* why pickleball: three short points */
.why{display:grid;gap:30px;grid-template-columns:1fr;margin-top:8px}
.why h3,.side h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(22px,2.6vw,26px);line-height:1.05;margin:0 0 10px;
}
.why h3{padding-top:14px;border-top:3px solid var(--green)}
.why p{margin:0;color:var(--muted);max-width:46ch}

/* both sides of the net */
.sides{display:grid;gap:16px;grid-template-columns:1fr;margin-top:8px}
.side{background:var(--ground);border:1px solid var(--rule);padding:26px 26px 28px}
.side p{margin:0;max-width:52ch}

/* schedule: phones have no hover, so say the row goes somewhere */
.row-more{display:block;margin-top:8px;font-size:13px;font-weight:700;color:var(--ink)}
.row:hover .row-more{text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:3px}

@media (min-width:760px){
  .why{grid-template-columns:1fr 1fr;gap:34px}
  .sides{grid-template-columns:1fr 1fr}
  .next .eyebrow{flex-basis:auto}
  .next-link{margin-left:auto}
}

/* Feature nights, second pass: the subtle tint did not stand out.
   Navy is the business half of the brand, and a feature night is the
   one where the talking gets top billing, so it carries the navy. */
.row-feature{background:var(--navy);color:#FFFFFF;border-bottom-color:var(--navy);padding-inline:14px;margin-inline:-14px}
.row-feature:hover{background:#0A3166}
.row-feature .row-no{color:var(--green-light)}
.row-feature .row-main small,.row-feature .row-venue,.row-feature .row-date small{color:rgba(255,255,255,.75)}
.row-feature .row-more{color:var(--green-light)}
.row-feature-tag{
  display:inline-block;align-self:flex-start;background:var(--green-light);color:var(--navy);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;margin-bottom:6px;
}
.row-feature .badge{border-color:rgba(255,255,255,.6)}
.badge-planned{background:transparent;color:var(--muted);border-style:dashed;border-color:var(--muted)}
.row-feature .badge-planned{color:#FFFFFF;border-color:rgba(255,255,255,.7)}

/* ===============================================================
   Softer edges. A designer friend's note: the square boxes and hard
   lines read more PC than Apple. Rounded cards, pill buttons, no heavy
   ink rules. Every corner comes from --radius / --radius-sm / --pill
   at :root, so tuning it is one number and deleting this block puts
   v1's square look back.
   =============================================================== */

/* buttons: pills, no ink outline */
.cta{border:0;border-radius:var(--pill);padding:18px 30px}
.cta-static{border:1.5px dashed currentColor;border-radius:var(--pill)}
.badge,.row-feature-tag{border-radius:var(--pill)}
.badge{padding:5px 12px}

/* the lime bands lose their hard black rules */
.facts,.next{border-block:0}

/* colour blocks and cards */
.half,.partner,.person,.side,.video,.empty,.row-feature{border-radius:var(--radius)}
.partner,.person,.side,.video{border-color:var(--rule)}
.video:hover{border-color:var(--green)}
.video .play{border:0;border-radius:50%}
.partner .pic,.person img,.tile,.tile img{border-radius:var(--radius-sm)}
.tile{overflow:hidden}

/* why pickleball: a short rounded marker instead of a full-width line */
.why h3{border-top:0;padding-top:0;position:relative}
.why h3::before{
  content:"";display:block;width:44px;height:5px;border-radius:var(--pill);
  background:var(--green);margin-bottom:14px;
}

/* form fields */
.wl-field input{border:1.5px solid var(--rule);border-radius:var(--radius-sm)}
.wl-field input:focus{border-color:var(--ink);outline:none}

/* lightbox controls */
.lb-btn{border-radius:50%}
.lb img{border-radius:var(--radius-sm)}

/* ---------- nav: easier to see, contact as a quiet pill ---------- */
.nav-in{gap:8px 20px}
.nav-in a{color:var(--ink);font-size:15px}
.nav-contact,.nav-cta{
  padding:7px 16px!important;border-radius:var(--pill);line-height:1.2;
}
.nav-contact{border:1.5px solid currentColor}
.nav-contact:hover{background:var(--ink);color:#FFFFFF!important;text-decoration:none!important}
.nav-cta{border:0}

/* ---------- nav on a phone ----------
   Brand + three links do not fit on one line at 375px. On the home page
   the big title directly below already is the brand, so the nav keeps
   just the links, top right. Elsewhere the links take their own row. */
@media (max-width:759px){
  .nav-in{gap:6px 16px;padding-block:12px}
  .nav-in a{font-size:14px}
  .nav-contact,.nav-cta{padding:6px 13px!important}
}

/* ---------- gallery: bento ----------
   Square cells; a tall photo spans two rows, a wide one two columns, a
   featured one the full width. Cells are sized from the page width so a
   tall tile is close to a phone photo's 9:16 and only the edges crop.
   `dense` lets later photos fill any gaps. */
.bento{
  --cols:2;--gap:8px;
  display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gap);
  grid-auto-flow:dense;
  grid-auto-rows:calc((min(100vw, var(--maxw)) - 2 * var(--pad) - (var(--cols) - 1) * var(--gap)) / var(--cols));
}
.bento .tile{height:100%}
.bento .tile img{aspect-ratio:auto;width:100%;height:100%;object-fit:cover}
.bento .tile-tall{grid-row:span 2}
.bento .tile-wide{grid-column:span 2}
.bento .tile-hero{grid-column:1 / -1}
h2.display.sub + .bento{margin-bottom:0}

/* home page strip: four tall shots, faces kept in frame */
.strip .tile img{aspect-ratio:3/4;object-position:center 30%}

@media (min-width:760px){
  .bento{--cols:4;--gap:10px}
  .bento .tile-hero{grid-row:span 2}
}

/* ---------- nav, third pass ----------
   "Home" replaces the wordmark: people didn't realise the name was the
   way back. Links sit left, "Contact us" top right. The page you're on
   is marked, so Home isn't a mystery on the home page either. */
.nav-in{justify-content:flex-start}
.nav-contact{margin-left:auto}
.nav-in a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:6px}

/* headings for screen readers only (the schedule page's own title) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* the schedule opens straight onto the dates now */
.sr-only + .section{padding-top:clamp(32px,5vw,56px)}
.recap-text{font-size:clamp(19px,2.4vw,24px);line-height:1.5;margin:0}
.group h2.display.sub a{text-decoration:none}
.group h2.display.sub a:hover{text-decoration:underline;text-decoration-color:var(--green)}

/* ---------- text on the green bands ----------
   The lime bands carried black text; green carries white. */
.fact dt{color:rgba(255,255,255,.72)}
.fact dd em,.fact small{color:rgba(255,255,255,.78)}
.fact{border-color:rgba(255,255,255,.22)!important}
.next .eyebrow{color:rgba(255,255,255,.72)}
.next-when,.next-link,.next-note,.next-note a{color:#FFFFFF}
.nav-home{display:inline-flex;align-items:center;gap:7px}
.nav-home img{width:26px;height:26px;display:block}
.foot-logo{width:200px;height:auto;display:block}

/* ===============================================================
   Hero: white first, logo prominent, a real photo beside it.
   The logo is never recoloured or placed over a photo: it sits on
   white, full colour, as the focus group chose it. Same component on
   the home page (logo as the headline) and event and recap pages
   (the event as the headline).
   =============================================================== */
.hero{background:var(--ground);border-bottom:1px solid var(--rule)}
.hero-in{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(28px,5vw,64px) var(--pad) clamp(36px,5vw,72px);
  display:grid;gap:clamp(24px,4vw,56px);align-items:center;
}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.hero-logo{margin:0;line-height:0;width:min(100%,600px)}
.hero-logo img{width:100%;height:auto;display:block}
.hero-title{font-size:clamp(34px,5.6vw,60px);margin:10px 0 0}
.hero .eyebrow{color:var(--green)}
.hero-lede{font-size:clamp(17px,1.9vw,19px);line-height:1.6;color:var(--ink);max-width:54ch;margin:22px 0 28px}
.hero .cta-note{color:var(--muted)}
.hero-photo{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--fill);aspect-ratio:16/10}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block}
@media (min-width:900px){
  .hero-in{grid-template-columns:1.05fr 1fr}
  .hero-photo{aspect-ratio:4/3.4}
}