:root {
            --cream: #f7f3ea;
            --sand: #efe8d6;
            --green: #1f3327;
            --ink: #344032;
            --gold: #bb902e;
            --muted: #6d7164;
            --footer: #12190f
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            background: var(--cream);
            color: var(--ink);
            font: 14px/1.6 Inter, Arial, sans-serif
        }

        a {
            color: inherit;
            text-decoration: none
        }

        button {
            font: inherit
        }

        img {
            display: block;
            width: 100%;
            object-fit: cover
        }

        h1,
        h2,
        h3,
        p {
            margin: 0
        }

        /* This page carries the site's stylesheet for the sake of the shared
           navigation bar, and that stylesheet gives every heading the olive
           colour and the tight tracking used elsewhere. Here the headings take
           their colour from the band they sit on — cream on the photograph and
           on the dark green sections, ink on the pale ones — so it is handed
           back. Without this, "Joining the Club" is olive on dark green, which
           is to say invisible. */
        h1,
        h2,
        h3 {
            font-family: 'Playfair Display', Georgia, serif;
            font-weight: 600;
            line-height: 1.2;
            color: inherit;
            letter-spacing: normal;
            text-wrap: wrap
        }

        h2 {
            font-size: 36px
        }

        h3 {
            font-size: 18px
        }

        a:focus-visible,
        button:focus-visible {
            outline: 3px solid var(--gold);
            outline-offset: 5px
        }

        .wrap {
            width: calc(100% - 96px);
            max-width: 1344px;
            margin: auto
        }

        .gold {
            color: var(--gold)
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0
        }

        .crest {
            width: 43px;
            height: 43px;
            border: 3px solid var(--gold);
            border-radius: 50%;
            display: grid;
            place-items: center;
            color: var(--gold);
            font-size: 22px
        }

        .brand strong {
            font: 600 16px 'Playfair Display', Georgia, serif;
            letter-spacing: .6px
        }

        .brand small {
            display: block;
            font-size: 9px;
            letter-spacing: 2.6px;
            margin-top: 4px
        }

        .pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 42px;
            padding: 10px 24px;
            border: 1px solid #b6baad;
            border-radius: 4px;
            font-size: 12px
        }

        .pill.gold-button {
            background: var(--gold);
            border-color: var(--gold);
            color: #fff
        }

        .hero {
            height: 610px;
            position: relative;
            display: grid;
            place-items: center;
            text-align: center;
            color: var(--cream);
            background: linear-gradient(#111b0f66, #111b0f8c), none center 51%/cover
        }

        .hero-inner {
            max-width: 1000px;
            padding: 30px 20px
        }

        .eyebrow {
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 13px
        }

        .hero h1 {
            font-size: 64px;
            line-height: 1.03;
            max-width: 920px;
            margin: auto;
            color: #fff
        }

        .hero p {
            font-size: 17px;
            line-height: 1.6;
            margin: 22px auto 30px;
            max-width: 770px;
            color: #e1dfd4
        }

        .hero .buttons {
            display: flex;
            justify-content: center;
            gap: 16px
        }

        .hero .pill {
            padding: 12px 26px;
            font-size: 13px
        }

        .stats {
            height: 110px;
            background: #1f3126;
            color: #d2c18b;
            display: grid;
            grid-template-columns: repeat(4, 1fr)
        }

        .stat {
            text-align: center;
            align-content: center;
            border-right: 1px solid #ffffff16
        }

        .stat:last-child {
            border: 0
        }

        .stat b {
            font: 600 23px 'Playfair Display', Georgia, serif;
            display: block;
            margin-bottom: 5px
        }

        .stat span {
            font-size: 10px;
            letter-spacing: 2px;
            color: #c1c3b6
        }

        .section {
            padding: 92px 0
        }

        .title-line:after {
            content: '';
            display: block;
            width: 56px;
            height: 2px;
            background: var(--gold);
            margin-top: 19px
        }

        .intro {
            max-width: 670px;
            margin-top: 23px;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.7
        }

        .leadership {
            text-align: center;
            padding: 92px 0 96px
        }

        .leadership .title-line:after {
            margin: 20px auto 0
        }

        .leaders {
            display: flex;
            justify-content: center;
            gap: 32px;
            margin-top: 54px
        }

        .leader {
            width: 276px;
            padding: 22px 14px 24px;
            border: 1px solid #e1ded6;
            border-radius: 3px;
            background: #fff
        }

        .leader img {
            height: 78px;
            width: 78px;
            border-radius: 50%;
            border: 4px solid #eeeae0;
            margin: 0 auto 15px
        }

        .leader h3 {
            font-size: 16px;
            margin-bottom: 8px
        }

        .leader p {
            font-size: 11px;
            color: var(--gold);
            letter-spacing: 2px
        }

        .ranges {
            background: var(--green);
            color: #eeebdf;
            padding: 98px 0
        }

        .split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 56px;
            align-items: center
        }

        .ranges .intro {
            color: #bfc7ba;
            max-width: 545px
        }

        .text-link {
            display: inline-block;
            margin-top: 29px;
            color: var(--gold);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 2px
        }

        .ranges img {
            height: 458px;
            border-radius: 3px
        }

        .sports-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 24px;
            margin-top: 48px
        }

        .sport {
            overflow: hidden;
            background: #fff;
            border-radius: 3px
        }

        .sport img {
            height: 128px
        }

        .sport .card-body {
            padding: 13px 17px 16px
        }

        .icon {
            color: var(--gold);
            font-size: 20px;
            line-height: 1.15
        }

        .sport h3 {
            font: 500 12px/1.5 Inter, Arial, sans-serif;
            margin-top: 6px
        }

        .wide-link {
            display: flex;
            justify-content: center;
            border: 1px solid #aeb6a7;
            border-radius: 4px;
            min-height: 43px;
            align-items: center;
            font-size: 11px;
            letter-spacing: 2px;
            font-weight: 600;
            margin-top: 48px
        }

        .sand {
            background: var(--sand)
        }

        .dining-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-top: 50px
        }

        .dining-card {
            background: white;
            border-radius: 3px;
            overflow: hidden
        }

        .dining-card img {
            height: 179px
        }

        .dining-card .card-body {
            padding: 19px 22px 21px;
            min-height: 147px
        }

        .dining-card h3 {
            font-size: 18px;
            margin-bottom: 11px
        }

        .dining-card p {
            font-size: 13px;
            line-height: 1.6;
            color: var(--muted)
        }

        .dining-card .hours {
            font-size: 11px;
            letter-spacing: 1.5px;
            color: var(--gold)
        }

        .wide-link.dark {
            background: var(--green);
            color: var(--cream);
            border-color: var(--green)
        }

        .events-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
            margin-top: 55px
        }

        .event {
            border-radius: 3px;
            background: white;
            overflow: hidden
        }

        .event-image {
            position: relative
        }

        .event-image img {
            height: 194px
        }

        .date {
            position: absolute;
            left: 17px;
            top: 17px;
            border-radius: 2px;
            background: var(--cream);
            text-align: center;
            padding: 4px 8px;
            line-height: 1.1
        }

        .date span {
            font-size: 10px;
            display: block
        }

        .date b {
            font-size: 20px
        }

        .category {
            position: absolute;
            right: 15px;
            top: 16px;
            background: var(--green);
            color: #e7e7d5;
            font-size: 9px;
            letter-spacing: 1px;
            border-radius: 3px;
            padding: 4px 12px
        }

        .event .card-body {
            padding: 24px;
            min-height: 246px
        }

        .event h3 {
            font-size: 18px;
            margin-bottom: 12px
        }

        .event .meta {
            font-size: 11px;
            color: #8c8e7d;
            line-height: 1.8
        }

        .meta i {
            font-style: normal;
            color: var(--gold);
            display: inline-block;
            width: 16px
        }

        .event p {
            font-size: 13px;
            color: var(--muted);
            margin-top: 18px
        }

        .event .learn {
            display: inline-block;
            font-size: 12px;
            font-weight: 600;
            margin-top: 18px
        }

        .amenities {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 24px;
            margin-top: 56px
        }

        .amenity {
            padding: 24px 10px 20px;
            background: white;
            border-radius: 3px;
            min-height: 120px;
            text-align: center
        }

        .amenity h3 {
            font: 500 12px/1.5 Inter, Arial, sans-serif;
            margin-top: 5px
        }

        .amenity p {
            font-size: 9px;
            color: #969689;
            letter-spacing: 1px;
            margin-top: 4px
        }

        .membership {
            background: linear-gradient(#1f3327e8, #1f3327e8), url('jali.svg') 0 0/118px 118px repeat;
            text-align: center;
            color: var(--cream);
            padding: 92px 24px
        }

        .membership .intro {
            margin: 25px auto 30px;
            color: #c0c6b8;
            max-width: 630px
        }

        .membership .title-line:after {
            margin: 20px auto 0
        }

        .contact {
            padding: 96px 0
        }

        .contact .split {
            align-items: start
        }

        .contact h2 {
            margin-bottom: 24px
        }

        .contact address {
            font-style: normal;
            color: var(--muted);
            font-size: 14px;
            line-height: 2.5
        }

        .contact address i {
            font-style: normal;
            color: var(--gold);
            display: inline-block;
            width: 26px
        }

        .contact img {
            height: 522px;
            border-radius: 3px
        }

        .contact h3 {
            margin: 35px 0 17px;
            font-size: 21px
        }

        .timing {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            border-bottom: 1px solid #e4e2d6;
            padding: 9px 0;
            font-size: 11px
        }

        .timing span {
            color: #8b8d7d;
            text-align: right;
            font-size: 10px
        }

        .contact .learn {
            display: inline-block;
            font-size: 12px;
            font-weight: 600;
            margin-top: 26px
        }

        a:hover {
            filter: brightness(.85)
        }

        .hero a:hover,
        footer a:hover {
            filter: brightness(1.2)
        }

        @media(min-width:1500px) {
            .hero {
                height: 660px
            }
        }

        @media(max-width:1200px) {
            .brand strong {
                font-size: 13px
            }

            .wrap {
                width: calc(100% - 64px)
            }

            .sports-grid {
                gap: 18px
            }

            .dining-grid {
                gap: 22px
            }

            .amenities {
                gap: 15px
            }
        }

        @media(max-width:1000px) {
            .hero h1 {
                font-size: 54px
            }

            .sports-grid {
                grid-template-columns: repeat(3, 1fr)
            }

            .dining-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .amenities {
                grid-template-columns: repeat(3, 1fr)
            }

            .split {
                gap: 32px
            }

            .events-grid {
                gap: 20px
            }

            .event .card-body {
                padding: 18px
            }

            .ranges img {
                height: 360px
            }
        }

        @media(max-width:600px) {
            .wrap {
                width: calc(100% - 36px)
            }

            .brand strong {
                font-size: 11px
            }

            .brand small {
                font-size: 8px
            }

            .crest {
                width: 34px;
                height: 34px;
                font-size: 17px
            }

            .hero {
                height: 570px
            }

            .hero h1 {
                font-size: 43px
            }

            .hero p {
                font-size: 14px
            }

            .hero .pill {
                padding: 11px 18px;
                font-size: 11px
            }

            .eyebrow {
                font-size: 9px
            }

            .stats {
                height: auto;
                grid-template-columns: repeat(2, 1fr)
            }

            .stat {
                padding: 23px 8px;
                border-bottom: 1px solid #ffffff16
            }

            .stat span {
                font-size: 8px
            }

            .section,
            .leadership,
            .ranges,
            .contact {
                padding: 60px 0
            }

            h2 {
                font-size: 30px
            }

            .leaders {
                gap: 15px;
                margin-top: 35px
            }

            .leader {
                width: 50%;
                padding: 23px 10px
            }

            .leader img {
                width: 75px;
                height: 75px
            }

            .leader h3 {
                font-size: 15px
            }

            .leader p {
                font-size: 8px;
                letter-spacing: 1px
            }

            .split {
                grid-template-columns: 1fr;
                gap: 35px
            }

            .ranges img {
                height: auto;
                aspect-ratio: 1.4
            }

            .sports-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
                margin-top: 30px
            }

            .sport img {
                height: 110px
            }

            .sport .card-body {
                padding: 12px
            }

            .sport h3 {
                font-size: 11px
            }

            .dining-grid {
                gap: 16px;
                margin-top: 32px
            }

            .dining-card img {
                height: 125px
            }

            .dining-card .card-body {
                padding: 15px;
                min-height: 170px
            }

            .dining-card h3 {
                font-size: 16px
            }

            .dining-card p {
                font-size: 11px
            }

            .events-grid {
                grid-template-columns: 1fr;
                margin-top: 35px
            }

            .event-image img {
                height: 210px
            }

            .event .card-body {
                min-height: 0;
                padding: 23px
            }

            .amenities {
                grid-template-columns: repeat(2, 1fr);
                margin-top: 35px
            }

            .membership {
                padding: 68px 22px
            }

            .contact address {
                font-size: 12px
            }

            .contact img {
                height: auto;
                aspect-ratio: 1.2
            }

            .timing {
                font-size: 10px
            }

            .timing span {
                max-width: 65%;
                font-size: 9px
            }

            .wide-link {
                margin-top: 33px
            }
        }

        @media(prefers-reduced-motion:reduce) {
            html {
                scroll-behavior: auto
            }
        }

        .card-photo {
            overflow: hidden
        }

        /* Motion stays visible by default, including when scripts are unavailable. */
        @keyframes club-rise {
            from {
                opacity: .25;
                transform: translateY(22px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        @keyframes club-line {
            from {
                transform: scaleX(.25)
            }

            to {
                transform: scaleX(1)
            }
        }

        @media(prefers-reduced-motion:no-preference) {
            .hero-inner>* {
                animation: club-rise 900ms cubic-bezier(.2, .65, .3, 1) backwards
            }

            .hero-inner h1 {
                animation-delay: 100ms
            }

            .hero-inner p {
                animation-delay: 200ms
            }

            .hero-inner .buttons {
                animation-delay: 300ms
            }

            .motion-enter {
                animation: club-rise 750ms cubic-bezier(.2, .65, .3, 1) var(--motion-delay, 0ms) backwards
            }

            .title-line.motion-enter:after {
                transform-origin: left;
                animation: club-line 900ms ease-out
            }

            .leadership .title-line:after,
            .membership .title-line:after {
                transform-origin: center
            }

            .leader,
            .sport,
            .dining-card,
            .event,
            .amenity {
                transition: transform 300ms ease, box-shadow 300ms ease
            }

            .sport img,
            .dining-card img,
            .event-image img {
                transition: transform 650ms cubic-bezier(.2, .65, .3, 1)
            }

            .event-image {
                overflow: hidden
            }

            .pill,
            .wide-link,
            .socials a {
                transition: transform 250ms ease, box-shadow 250ms ease, background-color 250ms ease
            }

            @media(hover:hover) and (pointer:fine) {

                .leader:hover,
                .sport:hover,
                .dining-card:hover,
                .event:hover,
                .amenity:hover {
                    transform: translateY(-10px);
                    box-shadow: 0 20px 38px #1f332733
                }

                .sport:hover img,
                .dining-card:hover img,
                .event:hover img {
                    transform: scale(1.09)
                }

                .motion-enter:hover {
                    animation: none
                }

                .pill:hover,
                .wide-link:hover,
                .socials a:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 6px 16px #12190f20
                }
            }
        }