:root{
  /* the two logo colours stay in hex so the raster logos and illustrations match exactly */
  --green:#2f5a2d;
  --cream:#fffada;
  --green-deep:oklch(0.35 0.075 142);
  --green-soft:oklch(0.58 0.11 142);
  --ink:oklch(0.27 0.06 142);
  --ink-soft:oklch(0.40 0.06 142);
  --cream-deep:oklch(0.94 0.06 104);
  --cream-line:oklch(0.98 0.05 104 / 0.35);
  --rule:oklch(0.43 0.085 142 / 0.28);
  --focus:oklch(0.55 0.2 260);

  --display:'Balsamiq Sans','Comic Sans MS',system-ui,sans-serif;
  --body:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;

  --step-0:1.0625rem;
  --step-1:1.3rem;
  --step-2:clamp(1.6rem,1.2rem + 2vw,2.3rem);
  --step-3:clamp(2.1rem,1.4rem + 3.2vw,3.2rem);
  --step-4:clamp(2.5rem,1.2rem + 6.2vw,5.4rem);
  --clock:clamp(2.6rem,1.6rem + 4vw,4.6rem);

  --space-2xs:0.25rem;
  --space-xs:0.5rem;
  --space-sm:0.75rem;
  --space-md:1rem;
  --space-lg:1.5rem;
  --space-xl:2rem;
  --space-2xl:3rem;
  --space-3xl:clamp(4rem,3rem + 5vw,7rem);
  --gutter:clamp(1rem,0.5rem + 3vw,3rem);

  --measure:62ch;
  --radius:18px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-out-quint:cubic-bezier(.23,1,.32,1);

  --z-header:10;
  --z-dock:20;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:var(--step-0);line-height:1.6;
  font-kerning:normal;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;text-wrap:balance;letter-spacing:-0.01em}
p,li{text-wrap:pretty}
b{font-weight:500}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--space-md);top:-4rem;z-index:calc(var(--z-dock) + 1);background:var(--cream);color:var(--green);padding:var(--space-xs) var(--space-md);border-radius:999px}
.skip:focus{top:var(--space-md)}

/* buttons: pill with a speech-bubble tail, the logo's shape */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
  min-height:3.25rem;padding:0.8rem 1.6rem;border-radius:999px;border:2px solid transparent;
  font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1.2;text-decoration:none;
  cursor:pointer;transition:transform .35s var(--ease-out),background-color .2s,color .2s;
}
.btn::after{
  content:"";position:absolute;right:18%;bottom:-9px;width:16px;height:14px;background:inherit;
  clip-path:polygon(0 0,100% 0,85% 100%);border-radius:0 0 4px 0;
}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn:active{transform:translateY(1px)}
.btn-cream{background:var(--cream);color:var(--green)}
.btn-cream:hover{background:#fff}
.btn-green{background:var(--green);color:var(--cream)}
.btn-green:hover{background:var(--green-deep)}
.btn-ghost{background:transparent;color:var(--cream);border-color:var(--cream-line);font-size:1rem;min-height:2.9rem}
.btn-ghost::after{display:none}
.btn-ghost:hover{border-color:var(--cream)}
.wa-icon{width:1.35em;height:1.35em;flex:none}

/* header */
.top{
  position:absolute;inset:0 0 auto 0;z-index:var(--z-header);
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-md) var(--gutter);
}
.top-logo img{width:clamp(4.5rem,3.5rem + 4vw,6.5rem);height:auto;margin:-0.6rem 0 -1rem -0.4rem}
.top-cta{
  color:var(--cream);font-family:var(--display);font-weight:700;text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center;padding:0 var(--space-md);
  border:2px solid var(--cream-line);border-radius:999px;transition:border-color .2s
}
.top-cta:hover{border-color:var(--cream)}

/* hero: the page's one drenched surface */
.hero{
  position:relative;background:var(--green);color:var(--cream);
  display:grid;gap:var(--space-xl);align-items:center;
  padding:calc(5.5rem + var(--space-lg)) var(--gutter) var(--space-3xl);
  min-height:min(100svh,60rem);
}
.hero h1{color:var(--cream);font-size:var(--step-4);max-width:12ch}
.hero-lede{margin-top:var(--space-lg);font-size:var(--step-1);line-height:1.5;max-width:34ch}
.hero-actions{margin-top:var(--space-xl);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-md)}
.hero-note{font-size:0.95rem;opacity:.92;max-width:34ch}
.hero-art{max-width:40rem;justify-self:center;width:100%}
.bubble-frame{
  aspect-ratio:200/160;
  -webkit-mask:url(bubble.svg) center/100% 100% no-repeat;mask:url(bubble.svg) center/100% 100% no-repeat;
  background:var(--cream);
  animation:pop 1.1s var(--ease-out-quint) .15s both;
}
.bubble-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 70%;transform:scale(1.12) translateY(-3%)}
.hero-down{
  position:absolute;left:50%;bottom:var(--space-lg);translate:-50% 0;
  color:var(--cream);font-size:0.95rem;text-decoration:none;opacity:.85;
  min-height:44px;display:inline-flex;align-items:center;gap:var(--space-xs)
}
.hero-down::after{content:"";width:.55em;height:.55em;border-right:2px solid;border-bottom:2px solid;rotate:45deg;translate:0 -3px}
@keyframes pop{from{transform:scale(.9) rotate(-3deg)}to{transform:none}}

@media (min-width:56rem){
  .hero{grid-template-columns:1.05fr 1fr;gap:var(--space-2xl)}
  .hero-art{justify-self:end}
}

/* the evening: a timeline with the clock on a rail */
.evening{padding:var(--space-3xl) var(--gutter) 0;max-width:76rem;margin:0 auto}
.beat{
  position:relative;display:grid;gap:var(--space-lg) var(--space-2xl);
  grid-template-columns:1fr;padding-bottom:var(--space-3xl);
}
.beat::before{
  content:"";position:absolute;left:0.35rem;top:4.5rem;bottom:1rem;
  border-left:3px dotted var(--rule);
}
.beat:last-child::before{display:none}
.clock{
  font-family:var(--display);font-weight:700;font-size:var(--clock);line-height:1;color:var(--green);
  font-variant-numeric:tabular-nums;letter-spacing:-0.02em
}
.clock-small{font-size:calc(var(--clock) * .6);color:var(--green-soft)}
.beat-body{padding-left:var(--space-xl)}
.beat h2{font-size:var(--step-3);color:var(--green);max-width:16ch}
.beat-break h2{font-size:var(--step-2)}
.beat-lede{margin-top:var(--space-md);font-size:var(--step-1);line-height:1.5;max-width:40ch}
.beat-body > p:not(.beat-lede){margin-top:var(--space-sm);max-width:var(--measure)}
.weekend-note{color:var(--ink-soft);font-size:0.95rem}
.facts{list-style:none;margin-top:var(--space-xl);display:grid;gap:var(--space-lg);max-width:var(--measure)}
.facts li{position:relative;padding-left:2.4rem}
.facts li::before{
  content:"";position:absolute;left:0;top:.2em;width:1.6rem;height:1.3rem;background:var(--green);
  -webkit-mask:url(bubble.svg) center/100% 100% no-repeat;mask:url(bubble.svg) center/100% 100% no-repeat;
}
.facts b{color:var(--green);display:block}

@media (min-width:56rem){
  .beat{grid-template-columns:14rem minmax(0,1fr) minmax(0,26rem);align-items:start}
  .beat::before{left:2.2rem;top:6rem}
  .beat-body{padding-left:0}
  .beat-break,.beat-end{grid-template-columns:14rem minmax(0,1fr)}
  .beat-games{grid-template-columns:14rem minmax(0,1fr) minmax(0,26rem)}
  .beat-games .deck{grid-column:2}
  .beat-games .photo{grid-column:3;grid-row:1 / span 2}
  .beat-talk .photo{margin-top:var(--space-xl)}
}

/* photo slots: drop assets/photos/<name>.jpg and site.js swaps it in */
.photo{max-width:30rem}
.photo-empty{
  aspect-ratio:4/3;border-radius:var(--radius);border:2px dashed var(--rule);
  background:
    radial-gradient(circle at 30% 35%,oklch(0.43 0.085 142 / .08) 0 18%,transparent 19%),
    radial-gradient(circle at 70% 60%,oklch(0.43 0.085 142 / .06) 0 24%,transparent 25%),
    var(--cream-deep);
  display:grid;place-items:center;color:var(--ink-soft);font-family:var(--display);font-size:1.1rem
}
@media (min-width:56rem){.photo-empty,.photo img{aspect-ratio:4/5}}
.photo img{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:var(--radius)}
.photo figcaption{margin-top:var(--space-sm);font-size:0.9rem;color:var(--ink-soft)}
.photo-tilt{rotate:2deg}

/* hour two sits on green: the second drenched moment */
.beat-games{
  background:var(--green);color:var(--cream);
  margin:0 calc(var(--gutter) * -1) var(--space-3xl);padding:var(--space-3xl) var(--gutter);
}
@media (min-width:56rem){.beat-games{margin-inline:0;border-radius:48px}}
.beat-games::before{display:none}
.beat-games .clock{color:var(--cream)}
.beat-games h2{color:var(--cream)}
.beat-games .photo-empty{background:var(--green-deep);border-color:var(--cream-line);color:var(--cream)}
.beat-games .photo figcaption{color:var(--cream);opacity:.85}

.deck{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-md);max-width:30rem}
.deck-title{font-size:0.95rem;opacity:.9}
.card{
  width:100%;min-height:11rem;display:grid;align-items:center;
  background:var(--cream);color:var(--green);border-radius:var(--radius);
  padding:var(--space-xl) var(--space-lg);rotate:-1.5deg;
  box-shadow:0 1px 0 oklch(0.2 0.05 142 / .3),0 12px 28px -14px oklch(0.15 0.05 142 / .6);
}
.card-q{font-family:var(--display);font-weight:700;font-size:var(--step-2);line-height:1.2;text-wrap:balance}
.card.is-dealing{animation:deal .55s var(--ease-out-quint)}
@keyframes deal{
  0%{transform:translateX(0) rotate(0);filter:blur(0)}
  35%{transform:translateX(18%) rotate(8deg);filter:blur(2px)}
  36%{transform:translateX(-12%) rotate(-6deg)}
  100%{transform:none;filter:blur(0)}
}
.deck-hint{font-size:0.95rem;opacity:.9}

/* where and when */
.where{padding:0 var(--gutter) var(--space-3xl);max-width:76rem;margin:0 auto}
.where h2,.faq h2{font-size:var(--step-3);color:var(--green)}
.where-lede{margin-top:var(--space-md);max-width:var(--measure)}
.venues{margin-top:var(--space-xl);display:grid;gap:var(--space-xl) var(--space-2xl);grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.venues-fallback{padding:var(--space-lg);border:2px dashed var(--rule);border-radius:var(--radius);max-width:var(--measure)}
.venue{padding-top:var(--space-lg);border-top:2px solid var(--green)}
.venue h3{font-size:var(--step-2);color:var(--green)}
.venue-addr{margin-top:var(--space-2xs);color:var(--ink-soft)}
.venue-addr a{color:var(--green);margin-left:var(--space-xs)}
.days{list-style:none;margin-top:var(--space-md);display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-xs)}
.day{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:3.6rem;border-radius:14px;text-decoration:none;font-size:0.8rem;line-height:1.1
}
.day b{font-family:var(--display);font-weight:700;font-size:1.05rem}
a.day{background:var(--green);color:var(--cream);transition:transform .3s var(--ease-out),background-color .2s}
a.day:hover{background:var(--green-deep);transform:translateY(-2px) rotate(-2deg)}
span.day{color:var(--ink-soft);border:2px dashed var(--rule)}
.where-updated{margin-top:var(--space-lg);font-size:0.85rem;color:var(--ink-soft)}

/* trial */
.trial{
  max-width:76rem;margin:0 auto;padding:var(--space-3xl) var(--gutter);
  display:grid;gap:var(--space-2xl);align-items:center;border-top:2px solid var(--rule)
}
.trial h2{font-size:var(--step-4);color:var(--green);max-width:10ch}
.steps{margin-top:var(--space-xl);padding-left:0;list-style:none;counter-reset:s;display:grid;gap:var(--space-md);max-width:var(--measure)}
.steps li{counter-increment:s;display:flex;gap:var(--space-md);align-items:baseline;font-size:var(--step-1);line-height:1.4}
.steps li::before{
  content:counter(s);flex:none;font-family:var(--display);font-weight:700;color:var(--cream);background:var(--green);
  width:2.1rem;height:2.1rem;border-radius:50% 50% 50% 12%;display:grid;place-items:center;font-size:1.05rem;translate:0 -.15em
}
.trial-note{margin:var(--space-lg) 0 var(--space-xl);color:var(--ink-soft);max-width:44ch}
.trial-art{width:min(100%,26rem);justify-self:center;border-radius:50% 50% 50% 18%}
@media (min-width:56rem){.trial{grid-template-columns:1.3fr 1fr}}

/* faq */
.faq{max-width:52rem;margin:0 auto;padding:0 var(--gutter) var(--space-3xl)}
.faq details{border-bottom:2px solid var(--rule)}
.faq details:first-of-type{margin-top:var(--space-lg)}
.faq summary{
  list-style:none;cursor:pointer;min-height:44px;padding:var(--space-md) 2.5rem var(--space-md) 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:var(--step-1);color:var(--green)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.3rem;top:50%;translate:0 -50%;
  font-size:1.8rem;line-height:1;transition:rotate .3s var(--ease-out)
}
.faq details[open] summary::after{rotate:45deg}
.faq details p{padding-bottom:var(--space-lg);max-width:var(--measure)}

/* footer + dock */
.foot{
  background:var(--green);color:var(--cream);text-align:center;
  padding:var(--space-2xl) var(--gutter) calc(var(--space-3xl) + 3rem + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)
}
.foot-logo{width:6rem;background:var(--cream);border-radius:50%;padding:.2rem}
.foot-links{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs) var(--space-lg);margin-top:var(--space-sm)}
.foot-links a{display:inline-flex;align-items:center;min-height:44px}

.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dock);
  display:flex;justify-content:center;
  padding:var(--space-sm) var(--gutter) calc(var(--space-md) + env(safe-area-inset-bottom));
  pointer-events:none;transition:translate .45s var(--ease-out),opacity .3s
}
.dock .btn{
  pointer-events:auto;width:min(100%,26rem);background:var(--green);color:var(--cream);
  border-color:var(--cream);white-space:nowrap;font-size:clamp(1rem,0.8rem + 1vw,1.15rem);box-shadow:0 10px 24px -10px oklch(0.15 0.05 142 / .7)
}
.dock .btn:hover{background:var(--green-deep)}
@media (min-width:56rem){.dock{justify-content:flex-end}.dock .btn{width:auto}}
.dock.is-hidden{translate:0 120%;opacity:0}

/* scroll-driven pops where supported; content is visible everywhere else */
@supports (animation-timeline:view()){
  .clock,.facts li,.venue,.steps li,.photo{
    animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%
  }
  @keyframes rise{from{transform:translateY(24px) scale(.97)}to{transform:none}}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .btn:hover,a.day:hover{transform:none}
}