:root {
  color-scheme: dark;
  --forest: #031b13;
  --forest-soft: #113c29;
  --lime: #c4ff32;
  --blue: #53a8fc;
  --white: #f8faf7;
  --muted: #b7c0b9;
  --hero-image: url("/assets/img/club/hero-preview.jpg");
  --next-event-image: url("/assets/img/club/hero-preview.jpg");
  --result-image: url("/assets/img/club/hero-preview.jpg");
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--forest); color: var(--white); font-family: Inter, Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--lime); outline-offset: 6px; }
button:focus-visible.live-card { outline-color: white; }
[hidden] { display: none !important; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: block; width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; z-index: 100; top: -100px; left: 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--lime); color: var(--forest); font-weight: 700; }
.skip-link:focus { top: 1rem; }
.page-width { width: calc(100% - 2.25rem); max-width: 76rem; margin-inline: auto; }
.landing { --page-gutter: 1.125rem; position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); padding-bottom: calc(6.6rem + env(safe-area-inset-bottom, 0px)); overflow: clip; }
.hero-background { z-index: -1; position: absolute; inset: 0 0 auto; height: clamp(37rem, 170vw, 58rem); background-image: linear-gradient(180deg, rgba(2, 26, 15, .30) 0%, rgba(2, 26, 15, .15) 30%, rgba(2, 26, 15, .23) 57%, var(--forest) 99%), linear-gradient(90deg, rgba(1, 23, 12, .60), transparent 70%), var(--hero-image); background-size: cover; background-position: center, center, 57% 48%; }
.glass { border: 1px solid rgba(233, 255, 231, .23); background: linear-gradient(140deg, rgba(231, 255, 236, .065), rgba(3, 24, 14, .32)); box-shadow: inset 0 1px 0 rgba(244, 255, 230, .06), 0 14px 40px rgba(0, 0, 0, .08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-header { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding-block: max(1.3rem, env(safe-area-inset-top)) 0; }
.brand { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; max-width: 100%; }
.brand-mark { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; flex-shrink: 0; border-radius: 50%; color: var(--lime); background: #154329; font-size: 1.35rem; font-weight: 800; }
.brand-name { display: flex; flex-direction: column; gap: .23rem; min-width: 0; overflow-wrap: anywhere; font-weight: 750; }
.brand-name span:first-child { font-size: 1rem; letter-spacing: .22em; }
.brand-name span:last-child { font-size: .64rem; letter-spacing: .39em; }
.menu-toggle { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: 50%; }
.menu-toggle .icon { width: 1.4rem; height: 1.4rem; }
.menu-panel { position: absolute; top: calc(100% + .7rem); right: 0; min-width: 12rem; padding: .55rem; border: 1px solid #426049; border-radius: 16px; background: #092a1eee; box-shadow: 0 16px 40px #0006; backdrop-filter: blur(18px); }
.menu-panel a { display: block; padding: .8rem 1rem; border-radius: 10px; font-size: .95rem; }
.menu-panel a:hover { background: #c4ff3220; color: var(--lime); }
.hero { position: relative; display: flex; flex-direction: column; min-height: clamp(22.8rem, 107vw, 39rem); padding-top: clamp(3.6rem, 18vw, 9rem); padding-bottom: 1.3rem; }
.hero-copy h1 { margin: 0; font-size: clamp(3rem, 14.6vw, 7rem); font-weight: 750; letter-spacing: -.048em; line-height: 1.04; overflow-wrap: anywhere; }
.tagline { display: flex; align-items: center; gap: .65rem; margin: 1rem 0 0; color: #d9ded7; font-size: clamp(.94rem, 3.4vw, 1.35rem); line-height: 1.5; }
.tagline > span { flex: 0 0 1.6rem; height: 2px; background: var(--lime); }
.weather-card { align-self: flex-end; width: 9.65rem; max-width: 100%; margin-top: auto; padding: .75rem .85rem; border-radius: 18px; background: linear-gradient(140deg, rgba(151, 157, 39, .24), rgba(8, 27, 12, .55)); }
.temperature { display: flex; align-items: center; gap: .65rem; }
.temperature strong { font-size: 2.05rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.sun-icon { width: 1.7rem; height: 1.7rem; color: var(--lime); }
.weather-card p { margin: 0; line-height: 1.45; }
.weather-description { margin-top: .25rem !important; font-size: .94rem; }
.wind { font-size: .78rem; color: var(--muted); }
.course-condition { margin-top: .5rem !important; font-size: .78rem; color: var(--lime); }
.club-updates { position: relative; }
.live-card { position: relative; display: block; width: 100%; padding: .95rem 1rem 1rem; overflow: hidden; border: 1px solid rgba(239, 255, 184, .64); border-radius: 24px; color: #062113; background: linear-gradient(100deg, #b8ff29 0%, #c9ff3a 53%, #b5e353 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 15px 45px #0002; text-align: left; min-height: 7.85rem; }
.live-card-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; max-width: calc(100% - 2.75rem); }
.live-card-copy > * { max-width: 100%; overflow-wrap: anywhere; }
.live-badge { display: inline-flex; align-items: center; gap: .36rem; padding: .36rem .58rem; border-radius: 7px; color: var(--lime); background: #002815; font-size: .77rem; font-weight: 700; letter-spacing: .03em; }
.live-badge > span { width: .44rem; height: .44rem; background: var(--lime); border-radius: 50%; }
.event-title { display: block; margin-top: .62rem; font-size: clamp(1.85rem, 8vw, 3.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; }
.event-subtitle { display: flex; align-items: center; gap: .4rem; margin-top: .48rem; font-size: clamp(.96rem, 4vw, 1.65rem); line-height: 1.3; }
.event-subtitle > span { flex: 0 0 .42rem; height: .42rem; background: currentColor; border-radius: 50%; }
.trophy-art { position: absolute; display: grid; place-items: center; inset: .7rem 2.5rem -.65rem auto; width: 31%; opacity: .4; }
.trophy-fallback { width: 100%; height: 100%; max-height: 9.5rem; fill: none; stroke: #325814; stroke-width: .65; stroke-linecap: round; stroke-linejoin: round; }
.trophy-photo { position: absolute; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.trophy-art:has(.trophy-photo:not([hidden])) { opacity: 1; }
.trophy-art:has(.trophy-photo:not([hidden])) .trophy-fallback { display: none; }
.event-link-icon { position: absolute; z-index: 3; display: grid; place-items: center; right: 1rem; bottom: 1rem; width: 2.55rem; height: 2.55rem; border-radius: 50%; color: #062113; background: #d0ff38; box-shadow: 0 0 0 1px #e1ff6a66; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: .65rem; }
.summary-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; width: 100%; padding: .83rem .86rem 1rem; min-height: 8.85rem; border-radius: 22px; text-align: left; }
.summary-background { position: absolute; z-index: -1; inset: 0; background-size: cover; background-position: center; opacity: .21; filter: saturate(.65); mask-image: linear-gradient(180deg, transparent 8%, black); }
.next-event .summary-background { background-image: linear-gradient(180deg, #031b13dd, #031b1322), var(--next-event-image); }
.latest-result .summary-background { background-image: linear-gradient(180deg, #031b13dd, #031b1322), var(--result-image); background-position: 65% center; }
.card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .2rem; }
.card-label { padding-top: .08rem; color: var(--lime); font-size: .76rem; font-weight: 650; line-height: 1.4; }
.card-icon { display: grid; place-items: center; width: 1.92rem; height: 1.92rem; flex-shrink: 0; border-radius: 50%; color: #002815; }
.calendar-circle { background: var(--lime); }
.flag-circle { background: var(--blue); }
.card-icon .icon { width: 1.06rem; height: 1.06rem; stroke-width: 2; }
.card-body { display: flex; flex-direction: column; margin-top: .68rem; gap: .4rem; overflow-wrap: anywhere; }
.card-body > strong { font-size: clamp(.96rem, 3.62vw, 1.8rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.25; }
.event-date { color: var(--blue); font-size: clamp(.75rem, 3.22vw, 1.4rem); font-weight: 650; line-height: 1.4; }
.card-secondary { color: var(--muted); font-size: clamp(.75rem, 3vw, 1.2rem); line-height: 1.4; }
.result-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem; }
.result-score { color: var(--blue); font-size: 1.32rem; font-weight: 800; line-height: 1; }
.placement { color: var(--muted); font-size: .82rem; }
.bottom-nav { position: fixed; z-index: 20; left: calc(var(--page-gutter) + env(safe-area-inset-left, 0px)); right: calc(var(--page-gutter) + env(safe-area-inset-right, 0px)); bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; max-width: 40rem; margin-inline: auto; padding: .7rem .45rem; border-radius: 24px; background-color: rgba(6, 26, 17, .88); }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 3rem; gap: .4rem; padding: .15rem; border: 0; color: #b0b9b2; background: none; font-size: .85rem; line-height: 1.25; overflow-wrap: anywhere; }
.nav-item .icon { width: 1.65rem; height: 1.65rem; flex-shrink: 0; }
.nav-item.is-active { color: var(--lime); }
.nav-item.is-active .home-icon { fill: var(--lime); stroke: var(--lime); }
.nav-item:hover:not(:disabled) { color: var(--lime); }
.nav-item:disabled { opacity: .85; }
.detail-dialog { position: fixed; width: min(calc(100% - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), 28rem); max-height: calc(100vh - 2rem); max-height: calc(100svh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; padding: 2.2rem 1.5rem 1.5rem; border: 1px solid #456e52; border-radius: 25px; color: var(--white); background: #08291d; box-shadow: 0 24px 100px #0007; }
body:has(dialog[open]) { overflow: hidden; }
.detail-dialog::backdrop { background: #00170bd9; backdrop-filter: blur(6px); }
.detail-dialog h2 { margin: 1rem 0 .55rem; font-size: 2rem; letter-spacing: -.04em; overflow-wrap: anywhere; }
.detail-dialog > p { color: var(--muted); font-size: 1rem; }
.dialog-close { position: absolute; top: .7rem; right: .7rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid #ffffff26; border-radius: 50%; background: #ffffff08; }
.dialog-eyebrow { color: var(--lime); font-size: .8rem; font-weight: 750; letter-spacing: .12em; }
.dialog-detail { display: flex; flex-direction: column; gap: .55rem; margin-top: 1.5rem; padding: 1rem; border-radius: 16px; background: #ffffff08; }
.dialog-detail > span { color: var(--muted); font-size: .85rem; }
.dialog-detail > strong { font-size: 1.4rem; }
.dialog-detail p { margin: 0; }
.dialog-detail .dialog-score { color: var(--blue); font-size: 3rem; }
@media (max-width: 300px) {
  .summary-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 359px) {
  .landing { --page-gutter: .75rem; }
  .page-width { width: calc(100% - 1.5rem); }
  .summary-card { padding-inline: .65rem; }
  .card-icon { width: 1.65rem; height: 1.65rem; }
  .card-body > strong { font-size: .9rem; }
  .brand-name span:first-child { font-size: .9rem; }
  .brand-name span:last-child { font-size: .6rem; }
}
@media (min-width: 600px) {
  .landing { --page-gutter: 2rem; padding-bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); }
  .page-width { width: calc(100% - 4rem); }
  .site-header { padding-top: max(2rem, env(safe-area-inset-top, 0px)); }
  .brand { gap: 1rem; }
  .brand-mark { width: 3.5rem; height: 3.5rem; font-size: 1.85rem; }
  .brand-name span:first-child { font-size: 1.5rem; }
  .brand-name span:last-child { font-size: .87rem; }
  .menu-toggle { width: 3.5rem; height: 3.5rem; }
  .hero { min-height: 36rem; padding-top: 7rem; }
  .hero-copy h1 { font-size: clamp(5.4rem, 12vw, 8rem); }
  .weather-card { width: 13.3rem; padding: 1.15rem 1.3rem; border-radius: 25px; }
  .temperature strong { font-size: 3rem; }
  .sun-icon { width: 2.5rem; height: 2.5rem; }
  .weather-description { font-size: 1.25rem; }
  .wind, .course-condition { font-size: .96rem; }
  .live-card { padding: 1.5rem 1.7rem; min-height: 11rem; border-radius: 31px; }
  .live-badge { font-size: .95rem; padding: .55rem .85rem; }
  .event-title { margin-top: .8rem; }
  .event-link-icon { width: 3.55rem; height: 3.55rem; right: 1.7rem; bottom: 1.5rem; }
  .trophy-art { right: 7rem; width: 30%; }
  .trophy-fallback { max-height: 12rem; }
  .summary-grid { gap: 1.1rem; margin-top: 1.1rem; }
  .summary-card { padding: 1.4rem; min-height: 12rem; border-radius: 28px; }
  .card-label { font-size: 1rem; }
  .card-icon { width: 2.8rem; height: 2.8rem; }
  .card-icon .icon { width: 1.55rem; height: 1.55rem; }
  .card-body { gap: .6rem; }
  .result-score { font-size: 2rem; }
  .placement { font-size: 1.1rem; }
  .bottom-nav { padding: 1rem; border-radius: 30px; }
  .nav-item { font-size: 1rem; }
  .nav-item .icon { width: 1.9rem; height: 1.9rem; }
}
@media (min-width: 1000px) {
  .landing { --page-gutter: 3.5rem; padding-bottom: max(1.4rem, env(safe-area-inset-bottom, 0px)); }
  .page-width { width: calc(100% - 7rem); }
  .hero-background { height: 66rem; background-position: center, center, 50% 42%; }
  .hero { min-height: 40rem; padding-top: 7.8rem; }
  .hero-copy h1 { font-size: clamp(6.5rem, 8.9vw, 8.75rem); }
  .hero .weather-card { position: absolute; right: 0; bottom: 2.4rem; }
  .tagline { font-size: 1.45rem; margin-top: 1.6rem; }
  .tagline > span { flex-basis: 3rem; }
  .live-card { min-height: 14rem; padding: 2rem 2.3rem; }
  .event-title { font-size: 4rem; }
  .event-subtitle { font-size: 1.5rem; }
  .trophy-art { right: 8rem; width: 35%; }
  .trophy-fallback { max-height: 13rem; }
  .summary-card { min-height: 13.2rem; padding: 1.6rem 2rem; }
  .card-body > strong { font-size: 1.85rem; }
  .event-date { font-size: 1.3rem; }
  .card-secondary { font-size: 1.15rem; }
  .bottom-nav { position: relative; left: auto; right: auto; bottom: auto; width: 100%; margin-top: 1.8rem; margin-bottom: 1.3rem; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 999px) {
  .landing { --page-gutter: 1.5rem; padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
  .page-width { width: calc(100% - 3rem); }
  .site-header { padding-top: max(.85rem, env(safe-area-inset-top, 0px)); }
  .brand-mark { width: 2.75rem; height: 2.75rem; font-size: 1.4rem; }
  .brand-name span:first-child { font-size: 1.05rem; }
  .brand-name span:last-child { font-size: .65rem; }
  .menu-toggle { width: 2.75rem; height: 2.75rem; }
  .hero { min-height: 20rem; padding-top: 2.5rem; }
  .hero-copy h1 { font-size: clamp(3rem, 7vw, 4.6rem); }
  .hero .weather-card { width: 10.5rem; margin-top: 1rem; padding: .85rem 1rem; border-radius: 20px; }
  .temperature strong { font-size: 2.25rem; }
  .sun-icon { width: 1.9rem; height: 1.9rem; }
  .weather-description { font-size: 1rem; }
  .wind, .course-condition { font-size: .8rem; }
  .live-card { min-height: 8.8rem; padding: 1.1rem 1.4rem; border-radius: 24px; }
  .event-title { font-size: 2.6rem; }
  .event-subtitle { font-size: 1.1rem; }
  .event-link-icon { width: 2.75rem; height: 2.75rem; bottom: 1.1rem; right: 1.4rem; }
  .summary-card { min-height: 10rem; padding: 1rem 1.3rem; }
  .card-body > strong { font-size: 1.3rem; }
  .event-date { font-size: 1rem; }
  .card-secondary { font-size: .95rem; }
  .bottom-nav { padding: .5rem; border-radius: 24px; }
  .nav-item { flex-direction: row; flex-wrap: wrap; gap: .6rem; font-size: .9rem; }
  .nav-item .icon { width: 1.4rem; height: 1.4rem; }
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background-color: rgba(6, 26, 17, .92); }
  .weather-card { background-color: rgba(27, 48, 21, .92); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }