/* home.css: snatchmygame.com premium landing, "the clubhouse" (MOCKUP).
   Page-only additions on top of premium.css. Every new class here is prefixed home-. Where the film
   or the clear nav needs it, a few pm- rules are scoped to this page (.home-film …, .pm-nav:not(.is-solid) …). */

/* ---------------------------------------------------------------- nav: the primary action, from 600px */
.home-navcta { display: none; min-height: 36px; padding: 0 var(--pm-s4); font-size: .75rem; }
@media (min-width: 600px) { .home-navcta { display: inline-flex; } }

/* ---------------------------------------------------------------- opening film */
/* Film text sits on a bright dawn sky, so the beats here get a deeper scrim than the default
   and the eyebrows go linen (brass-hi on haze falls under 3:1). */
.home-film .pm-beat::before {
  inset: -2% -6%;
  background: radial-gradient(closest-side, rgba(var(--pm-scrim), .58), rgba(var(--pm-scrim), .22) 62%, rgba(var(--pm-scrim), 0));
  filter: blur(18px);
}
.home-film .pm-eyebrow { color: var(--pm-linen); opacity: .92; }
/* The eyebrows sit at the thin top edge of the beat scrim, and on wide screens right over the lake
   glare, where 11px caps vanish. Give them their own tight halo and a touch more weight. */
.home-film .pm-beat:not(.home-beat-sign) .pm-eyebrow {
  font-weight: 600; opacity: 1;
  text-shadow: 0 0 3px rgba(var(--pm-scrim), .95), 0 0 7px rgba(var(--pm-scrim), .95), 0 0 14px rgba(var(--pm-scrim), .85),
               0 0 26px rgba(var(--pm-scrim), .6), 0 1px 1px rgba(var(--pm-scrim), .7);
}
/* the scroll cue sits low over the terrace in the first frame */
.home-film .pm-cue { white-space: nowrap; color: var(--pm-linen); font-weight: 600; text-shadow: 0 0 12px rgba(var(--pm-scrim), .95), 0 0 3px rgba(var(--pm-scrim), .8); }
/* over the film the nav is clear and the dawn sky is bright: keep the wordmark and section links readable */
.pm-nav:not(.is-solid) .pm-wordmark,
.pm-nav:not(.is-solid) .pm-nav__links a { text-shadow: 0 0 14px rgba(var(--pm-scrim), .7), 0 1px 2px rgba(var(--pm-scrim), .55); }
.pm-nav:not(.is-solid) .pm-nav__links a { color: var(--pm-linen); }
/* the dawn haze behind the clear nav is nearly white at the top left: a deeper fade and a firmer
   wordmark keep SNATCHMYGAME legible over every frame */
.pm-nav:not(.is-solid) { background: linear-gradient(rgba(var(--pm-scrim), .58), rgba(var(--pm-scrim), .22) 70%, rgba(var(--pm-scrim), 0)); }
.pm-nav:not(.is-solid) .pm-wordmark { font-weight: 400; text-shadow: 0 0 10px rgba(var(--pm-scrim), .85), 0 0 3px rgba(var(--pm-scrim), .7); }
/* On desktop a palm frond crosses the top left corner for most of the film and broke up the thin caps:
   a soft dark pool sits behind the wordmark while the nav is clear (it goes with the solid nav). */
.pm-nav .pm-wordmark { position: relative; isolation: isolate; line-height: 1.2; }
.pm-nav:not(.is-solid) .pm-wordmark::before {
  content: ""; position: absolute; inset: -10px -20px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--pm-scrim), .5), rgba(var(--pm-scrim), .24) 60%, rgba(var(--pm-scrim), 0));
  filter: blur(6px);
}
/* At 1x the hairlines of the 15px Didone caps still broke up where frond edges crossed them (2026-11-15
   sceptic): while the nav is clear the caps go one step heavier, and the film right behind the word is
   softly blurred, so leaf edges no longer cut through the letters. The blur is masked to a soft oval. */
.pm-nav:not(.is-solid) .pm-wordmark { font-weight: 500; }
.pm-nav:not(.is-solid) .pm-wordmark::after {
  content: ""; position: absolute; inset: -6px -14px; z-index: -2; pointer-events: none;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
/* under 900px the dark pool behind the word stays and the blur goes (premium.css, "no blur behind glass") */
@media (max-width: 899px) { .pm-nav:not(.is-solid) .pm-wordmark::after { display: none; } }

/* One solid primary per screen: the film sign-off and the season band each carry a solid "Follow golf
   live", and both share a screen with the nav. So the nav button is always a ghost (linen outline on a
   light dark wash); the solid button is the one in the page. */
.pm-nav .home-navcta {
  background: rgba(var(--pm-scrim), .3); color: var(--pm-linen); border-color: rgba(242, 236, 223, .7);
  text-shadow: 0 0 6px rgba(var(--pm-scrim), .6);
}
.pm-nav .home-navcta:hover { background: rgba(var(--pm-scrim), .45); border-color: var(--pm-linen); color: var(--pm-linen); }

/* ---- the beats. Each one hangs from its top edge in a named zone, so it never sits on a face.
   Shots: HS1 the table (0 to .36), HS2 what they see (.36 to .73), HS3 the faces (.73 to 1).
   Zones were checked on every 5% of the film at 1440x900, 768x1024, 390x844 and 360x780, EN and TH. */
html:not(.no-js) .home-film:not(.pm-film--still) .pm-beat {
  top: var(--top, 12vh); padding-block: 0;
  transform: translate3d(-50%, var(--y), 0);
}
/* beat 1, HS1: the headline stands in the mist and mountains above the heads. It shows before the
   script runs, so on a slow connection it paints with the poster. */
.home-beat-hero { --o: 1; --top: calc(var(--pm-nav-h) + 3vh); }
.home-beat-hero .pm-display { margin-inline: auto; font-size: clamp(2.5rem, 1rem + 4.6vw, 5.25rem); line-height: 1.04;
  text-shadow: 0 0 26px rgba(var(--pm-scrim), .7), 0 0 6px rgba(var(--pm-scrim), .55), 0 1px 2px rgba(var(--pm-scrim), .5); }
/* wide screens: one line, so it stays in the mist above the caddies' hats */
@media (min-aspect-ratio: 9/10) and (min-width: 900px) { .home-beat-hero .pm-display { white-space: nowrap; } :lang(th) .home-beat-hero .pm-display { font-size: clamp(2.25rem, 1rem + 3.6vw, 4.25rem); } }
.home-beat-hero .pm-eyebrow { margin-bottom: 1.2vh; }
/* beat 2, HS1: same zone, the headline has gone */
.home-beat-two { --top: calc(var(--pm-nav-h) + 3vh); }
.home-beat-two .pm-statement { max-width: 30em; margin-inline: auto; font-size: clamp(1.25rem, .9rem + 1.5vw, 2.125rem); line-height: 1.22; font-weight: 400;
  text-shadow: 0 0 22px rgba(var(--pm-scrim), .95), 0 0 8px rgba(var(--pm-scrim), .9), 0 0 3px rgba(var(--pm-scrim), .8), 0 1px 2px rgba(var(--pm-scrim), .7); }
.home-film .home-beat-two::before, .home-film .home-beat-hero::before {
  inset: -14% -4%;
  background: radial-gradient(closest-side, rgba(var(--pm-scrim), .74), rgba(var(--pm-scrim), .4) 62%, rgba(var(--pm-scrim), 0));
}
/* beat 3, HS2: the girl and her group fill the left of the landscape frame, so the list stands on the
   misty fairway to the right. Portrait: she fills the middle and lower frame, so the list stands in the sky
   above her visor. */
@media (min-aspect-ratio: 9/10) {
  html:not(.no-js) .home-film:not(.pm-film--still) .home-beat-list { left: 73%; width: min(44vw, 520px); --top: 27vh; }
}
@media (max-aspect-ratio: 9/10) {
  html:not(.no-js) .home-film:not(.pm-film--still) .home-beat-list { --top: calc(var(--pm-nav-h) + .5vh); }
  .home-film:not(.pm-film--still) .home-beat-list .pm-eyebrow { margin-bottom: .6vh; }
  .home-film:not(.pm-film--still) .home-beat-list .pm-list { font-size: clamp(1.0625rem, 2.5vh, 1.5rem); line-height: 1.2; gap: .7vh; }
  .home-film:not(.pm-film--still) .home-beat-list .pm-list > li + li::before { display: none; }
  /* the sky here is pale: pine ink with a light halo reads better than linen on a dark smudge */
  .home-film:not(.pm-film--still) .home-beat-list { color: var(--pm-pine); text-shadow: 0 0 14px rgba(242, 236, 223, .9), 0 0 3px rgba(242, 236, 223, .8); }
  .home-film:not(.pm-film--still) .home-beat-list::before { display: none; }
  .home-film:not(.pm-film--still) .home-beat-list .pm-list { font-weight: 400; }
  .home-film:not(.pm-film--still) .pm-beat.home-beat-list .pm-eyebrow { color: var(--pm-pine); text-shadow: 0 0 10px rgba(242, 236, 223, .9); }
}
.home-film .home-beat-list::before {
  background: radial-gradient(closest-side, rgba(var(--pm-scrim), .7), rgba(var(--pm-scrim), .34) 62%, rgba(var(--pm-scrim), 0));
}
/* beat 4, HS3: the sign-off. Landscape: the family is in the left half, the words in the right half, linen on
   the dark teak of the clubhouse. Portrait: the faces are in the lower part, the words above in the sky. */
.home-beat-sign .pm-monogram { --mono: clamp(56px, 10vh, 128px); }
.home-beat-sign .pm-wordmark { display: block; margin-top: 2vh; font-size: clamp(.9375rem, .85rem + .4vw, 1.125rem); }
.home-beat-sign .pm-signoff { margin-top: 1vh; color: var(--pm-linen); }
.home-beat-sign .pm-ctas { margin-top: 2.5vh; }
.home-beat-sign { text-shadow: 0 0 18px rgba(var(--pm-scrim), .9), 0 1px 2px rgba(var(--pm-scrim), .7); }
@media (min-aspect-ratio: 9/10) {
  html:not(.no-js) .home-film:not(.pm-film--still) .home-beat-sign { left: 82%; width: min(32vw, 460px); padding-inline: 0; --top: 24vh; }
}
@media (max-aspect-ratio: 9/10) {
  html:not(.no-js) .home-film:not(.pm-film--still) .home-beat-sign { --top: calc(var(--pm-nav-h) + 1vh); }
  .home-beat-sign .pm-monogram { --mono: clamp(44px, 6.4vh, 72px); }
  .home-beat-sign .pm-wordmark { margin-top: 1.2vh; }
  .home-beat-sign .pm-signoff { margin-top: .4vh; font-size: clamp(1.0625rem, 4.6vw, 1.375rem); }
  .home-beat-sign .pm-ctas { margin-top: 1.4vh; }
  .home-beat-sign .pm-cta { min-height: 42px; }
  /* portrait HS3 is shot against the pale morning sky (not dark teak), so the sign-off is pine ink
     with a light halo, like the list over HS2 */
  .home-film:not(.pm-film--still) .home-beat-sign { color: var(--pm-pine); text-shadow: 0 0 14px rgba(242, 236, 223, .95), 0 0 4px rgba(242, 236, 223, .9); }
  .home-film:not(.pm-film--still) .home-beat-sign .pm-signoff,
  .home-film:not(.pm-film--still) .home-beat-sign .pm-wordmark { color: var(--pm-pine); }
  .home-film:not(.pm-film--still) .home-beat-sign .pm-monogram { color: var(--pm-pine); text-shadow: none; box-shadow: inset 0 0 0 1px var(--pm-pine); background: rgba(242, 236, 223, .5); }
  .home-film:not(.pm-film--still) .home-beat-sign .pm-monogram::before { border-color: rgba(18, 49, 40, .4); }
  .home-film:not(.pm-film--still) .home-beat-sign .pm-monogram > span:first-child { color: var(--pm-brass); }
}

/* Reduced motion (or a failed film): one tall still (HS2, the girl at the ball) with every beat stacked
   over it; dim it evenly. */
.home-film.pm-film--still .pm-film__stage::after { background: rgba(var(--pm-scrim), .56); }

/* ---------------------------------------------------------------- in-page scroll clips (clipfilm.js)
   The canvas lies over the photo and plays as the section passes; the <img> stays underneath as the
   poster and is all there is with reduced motion. */
.pm-clip__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.is-playing > .pm-clip__canvas { opacity: 1; }
.pm-still > picture { display: contents; }
.pm-tile > picture { display: contents; }
.home-tiles > li:first-child .pm-tile img { object-position: 50% 18%; }   /* keep his head in when he stands */
.pm-tile > picture > img, .pm-tile > picture > .pm-clip__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.pm-tile--soon > picture > img, .pm-tile--soon > picture > .pm-clip__canvas { filter: saturate(.55) brightness(.8); }

/* Thai has no spaces between words, only between phrases. home.js wraps each phrase of a Thai
   headline in this span so a line never breaks inside one. */
.home-ph { display: inline-block; max-width: 100%; }

/* no JS: show the film as its poster with the beats stacked, like reduced motion */
html.no-js .pm-film { height: auto; }
html.no-js .pm-film__stage {
  position: relative; height: auto; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; gap: var(--pm-s7);
  padding: calc(var(--pm-nav-h) + var(--pm-s7)) 0 var(--pm-s8);
}
html.no-js .pm-beat { --o: 1; position: relative; left: auto; top: auto; bottom: auto; transform: none; margin-inline: auto; pointer-events: auto; }
html.no-js .pm-cue, html.no-js .pm-pin { display: none; }

/* ---------------------------------------------------------------- families (parents + coaches) */
.home-families .pm-split + .pm-split { margin-top: clamp(var(--pm-s8), 10vw, 160px); }
.home-copy .pm-h2 { font-size: clamp(1.875rem, 1.3rem + 2vw, 3rem); }
.home-copy .pm-lede { color: var(--pm-ink-2); }

/* the live card pinned to the parents photo: what a parent actually sees */
.home-photo { position: relative; }
.home-card {
  position: absolute; right: clamp(12px, 3vw, 28px); bottom: clamp(-28px, -2vw, -12px);
  width: min(240px, 62%);
  padding: var(--pm-s4) var(--pm-s5) var(--pm-s4);
  background: var(--pm-pine); color: var(--pm-linen);
  border-radius: var(--pm-r);
  box-shadow: 0 0 0 1px rgba(216, 190, 139, .45), 0 18px 40px -18px rgba(15, 42, 32, .55);
}
.home-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--pm-s3); font-size: var(--pm-fs-small); color: var(--pm-mist); }
.home-card__live { display: inline-flex; align-items: center; gap: 6px; color: var(--pm-brass-hi); font-weight: 600; }
.home-card__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3FA36B; animation: home-pulse 2.4s var(--pm-ease-inout) infinite; }
@keyframes home-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.home-card__score { margin-top: var(--pm-s2); font-family: var(--pm-serif); font-weight: 300; font-size: 2rem; line-height: 1.1; }
.home-card__sub { margin-top: 2px; font-size: var(--pm-fs-small); color: var(--pm-mist); font-variant-numeric: lining-nums; }
@media (max-width: 899px) { .home-photo { margin-bottom: var(--pm-s4); } }
@media (max-width: 599px) {
  .home-card { position: relative; right: auto; bottom: auto; width: auto; max-width: 280px; margin: -20px var(--pm-s4) 0 auto; }   /* only kisses the photo: the clip plays under it */
}

/* ---------------------------------------------------------------- the road ahead: full-bleed picture, words below */
/* The junior walking away with his bag is the point of the picture, so no text sits on it: the photo runs
   full width, fades at its foot into pine, and the heading group follows on pine underneath. */
.home-band { position: relative; background: var(--pm-pine); padding-bottom: calc(var(--pm-section-y) * .35); }
.home-band .pm-head { margin-bottom: 0; }
.home-band__img { height: min(86vh, 56.25vw); min-height: 420px; border-radius: 0; }
.home-band__img img { object-position: 50% 30%; }  /* keep his feet clear of the fade */
.home-band__img::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 9%; pointer-events: none;
  background: linear-gradient(to top, var(--pm-pine), rgba(15, 42, 32, 0));
}
.home-band .pm-wrap { margin-top: clamp(var(--pm-s6), 4vw, var(--pm-s8)); }
.home-band .pm-lede { color: rgba(242, 236, 223, .86); }
@media (max-width: 899px) {
  /* phones and portrait tablets: a 4:5 crop centred on the walker and the clock tower behind him */
  .home-band__img { height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 78vh; }
  .home-band__img img { object-position: 50% 50%; }   /* the small set is already this crop */
}

/* ---------------------------------------------------------------- sports: golf large, the rest waiting */
.home-tiles { display: grid; gap: var(--pm-s3); grid-template-columns: 1fr 1fr; }
.home-tiles > li:first-child { grid-column: 1 / -1; }
.home-tiles > li:first-child .pm-tile { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .home-tiles { grid-template-columns: repeat(4, 1fr); gap: var(--pm-s4); }
  .home-tiles > li:first-child { grid-column: 1 / 3; grid-row: 1 / 3; }
  .home-tiles > li:first-child .pm-tile { aspect-ratio: auto; height: 100%; }
}
.home-tiles .pm-tile__body { padding: var(--pm-s4); }
.home-tiles > li:first-child .pm-tile__body { padding: clamp(var(--pm-s5), 3vw, var(--pm-s7)); gap: var(--pm-s3); }
.home-tiles > li:first-child .pm-tile__name { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.home-tile__line { font-size: var(--pm-fs-small); color: var(--pm-mist); max-width: 26em; }
@media (max-width: 599px) { .home-tiles .pm-tile__name { font-size: 1.25rem; } }

/* ---------------------------------------------------------------- partners */
.home-partners__img { aspect-ratio: 21 / 9; max-width: 1080px; margin-inline: auto; }
.home-partners__img img { object-position: 50% 62%; }
@media (max-width: 599px) { .home-partners__img { aspect-ratio: 4 / 3; } }
.home-roles { display: grid; gap: var(--pm-s7); max-width: 880px; margin: clamp(var(--pm-s7), 6vw, var(--pm-s8)) auto 0; }
@media (min-width: 700px) { .home-roles { grid-template-columns: 1fr 1fr; gap: var(--pm-s8); } }
.home-roles h3 { font-family: var(--pm-serif); font-weight: 400; font-size: var(--pm-fs-h3); line-height: 1.25; padding-bottom: var(--pm-s3); border-bottom: 1px solid var(--pm-brass); }
.home-roles__list > li { padding-block: var(--pm-s3); border-bottom: 1px solid var(--pm-line-light); color: var(--pm-ink); }

/* ---------------------------------------------------------------- the 2027 season: five cups, seen from above */
.home-season { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: var(--pm-s6) var(--pm-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1080px; }
@media (min-width: 900px) { .home-season { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 899px) { .home-season > li:last-child { grid-column: 1 / -1; } }
.home-season > li { display: grid; justify-items: center; align-content: start; text-align: center; gap: var(--pm-s2); }
.home-cup {
  width: clamp(112px, 12vw, 148px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px var(--pm-brass-hi), 0 0 0 7px var(--pm-pine), 0 0 0 8px rgba(216, 190, 139, .45);
  margin-bottom: var(--pm-s3); background: var(--pm-pine-2);
}
.home-cup > img { width: 100%; height: 100%; object-fit: cover; }
.home-season .pm-venue__date { font-size: var(--pm-fs-small); }
.home-season .pm-venue__name { font-size: 1.0625rem; max-width: 13em; }

/* ---------------------------------------------------------------- footer */
.home-footer__brand { display: grid; gap: var(--pm-s2); }
.home-footer__links { display: flex; gap: var(--pm-s5); flex-wrap: wrap; }
.home-footer__links a { text-decoration: none; color: var(--pm-mist); }
.home-footer__links a:hover { color: var(--pm-linen); }

@media (prefers-reduced-motion: reduce) {
  .home-card__live::before { animation: none; }
}