/* The Grounds: GNN tour course room */
[hidden]{display:none!important}
.grounds{
  --ink:#efe6d2; --dim:#a99f8c; --faint:#776f62; --gold:#e6c98a; --gold2:#b8893a;
  --serif:'Lora',Georgia,serif; --display:'Libre Caslon Text','Lora',Georgia,serif;
  --side:clamp(300px, 22vw, 420px); --board:460px; --page:330px; --sun-alt:20;
  position:relative; min-height:100vh; min-height:100dvh; overflow:hidden;
  color:var(--ink); font-family:var(--serif);
  background:#10141f;
}
.grounds *{box-sizing:border-box}
.g-sky{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,#0b101c 0%,#161b2a 38%,#30262a 64%,#17110f 100%)}
.g-sky .g-warm{position:absolute; inset:0;
  background:radial-gradient(90% 70% at 0% 78%,rgba(255,176,104,.26),rgba(255,156,85,.06) 45%,transparent 70%)}
.g-sky .g-stars{position:absolute; inset:0 0 45% 0; opacity:.55;
  background-image:radial-gradient(1px 1px at 12% 18%,#e8e1cf 50%,transparent 51%),radial-gradient(1px 1px at 31% 8%,#e8e1cf 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 47% 22%,#e8e1cf 50%,transparent 51%),radial-gradient(1px 1px at 63% 12%,#e8e1cf 50%,transparent 51%),
  radial-gradient(1px 1px at 78% 26%,#e8e1cf 50%,transparent 51%),radial-gradient(1.3px 1.3px at 88% 9%,#e8e1cf 50%,transparent 51%),
  radial-gradient(1px 1px at 22% 34%,#e8e1cf 50%,transparent 51%),radial-gradient(1px 1px at 56% 38%,#e8e1cf 50%,transparent 51%),
  radial-gradient(1px 1px at 93% 41%,#e8e1cf 50%,transparent 51%),radial-gradient(1px 1px at 5% 44%,#e8e1cf 50%,transparent 51%)}
.grounds::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}

/* title */
.g-col{position:absolute; left:64px; top:48px; bottom:22px; width:var(--side); z-index:3; display:flex; flex-direction:column; min-height:0}
.g-title{flex:none; margin-bottom:34px}
.g-kicker{margin:0 0 10px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); line-height:1.6}
.g-title h1{margin:0; font-family:var(--display); font-weight:400; font-size:52px; line-height:1.02; letter-spacing:-.01em; color:var(--ink)}
.g-facts{margin:14px 0 0; font-style:italic; font-size:17px; line-height:1.45; color:var(--dim)}
.g-facts span{color:var(--faint); font-style:normal; padding:0 .15em}

/* stage */
.g-stage{position:absolute; top:0; bottom:84px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 5%,#000 95%,transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 5%,#000 95%,transparent); mask-composite:intersect; left:calc(var(--side) + 64px); right:24px; z-index:1;
  transition:right .6s cubic-bezier(.2,.7,.2,1)}
.walking .g-stage{right:calc(var(--page) + 40px)}
.g-cam{position:absolute; inset:0; transform-origin:0 0; transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.g-svg{width:100%; height:100%; display:block; overflow:visible}

/* scene */
.g-floor-shadow{fill:#000; opacity:.42}
.g-ring-line{fill:none; stroke:#d9c7a6; stroke-opacity:.22; stroke-width:1; vector-effect:non-scaling-stroke}
.g-ring-dash{fill:none; stroke:#d9c7a6; stroke-opacity:.1; stroke-dasharray:2 5; vector-effect:non-scaling-stroke}
.g-tick{stroke:#d9c7a6; stroke-opacity:.3; vector-effect:non-scaling-stroke}
.g-month{fill:#cbb995; opacity:.32; text-anchor:middle; font-family:var(--serif); letter-spacing:.08em}
.g-month.on{opacity:.95}
.g-ed{fill:url(#gGold); stroke:#2a1b08; stroke-width:.6; vector-effect:non-scaling-stroke; cursor:pointer; outline:none}
.g-ed.s-canceled{fill:none; stroke:#e6c98a; stroke-width:1.2}
.g-ed.s-shortened{fill:#9d7b3f}
.g-ed.sel,.g-ed:hover,.g-ed:focus-visible{stroke:#fff6dd; stroke-width:2}
.g-wall-fiber{fill:#fff; opacity:.9; mix-blend-mode:multiply; pointer-events:none}
.g-seam line{stroke:#f4e6c4; stroke-width:1.1; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; opacity:.85}
.g-seam{cursor:help; outline:none}
.g-seam:hover line,.g-seam:focus-visible line{stroke:#fff; opacity:1}
.g-ground{fill:#d8c39a}
.g-ground.g-turf{fill:#7f9852}
.g-plinth-green{fill:#bedb7a}
.g-plinth-note{fill:#d9c7a6; text-anchor:middle; font-family:var(--serif); font-style:italic; opacity:.8}
.g-yr a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(184,137,58,.4)}
.g-water-bank{fill:#5b4a30}
.g-sand path{fill:#e3cd9c}
.g-rough path{fill:#8c995b}
.g-wood path{fill:#4c6838}
.g-fair path{fill:#9dbd57}
.g-tee path{fill:#b0cd69}
.g-green path{fill:#bedb7a}
.g-bunker path{fill:#f2e6c7}
.g-mow line{stroke:#c9de8a; opacity:.24}
.g-tree-sh{fill:#2d2a14; opacity:.24}
.g-tree.t0{fill:#3f5a2e} .g-tree.t1{fill:#4a6a35} .g-tree.t2{fill:#56763c}
.g-cart{fill:none; stroke:#efe6d2; opacity:.5}
.g-house-sh{fill:#1e1408; opacity:.45}
.g-clubhouse{cursor:pointer; outline:none}
.g-clubhouse .ad-glow{transition:opacity .4s}
.g-clubhouse:hover .ad-glow,.g-clubhouse:focus-visible .ad-glow{opacity:1}
.board-open .g-clubhouse .ad-glow{opacity:1}
.g-plaque .board{fill:#2b1a10; stroke:#b8893a; stroke-width:1.2; vector-effect:non-scaling-stroke}
.g-plaque .rule{fill:none; stroke:#b8893a; stroke-opacity:.5; vector-effect:non-scaling-stroke}
.g-plaque .post{fill:#3a2616}
.g-plaque .k{fill:#e6c98a; text-anchor:middle; letter-spacing:.18em; font-family:var(--serif)}
.g-plaque .ln{stroke:#b8893a; opacity:.55}
.g-plaque:hover .board,.g-plaque:focus-visible .board{fill:#3a2414}
.g-reflect{opacity:.32}
.g-line{fill:none; stroke:#fffaf0; opacity:.85; stroke-linecap:round; transition:opacity .3s}
.g-line-hit{fill:none; stroke:transparent; pointer-events:stroke; cursor:pointer}
.g-num circle{fill:#1b1a17; opacity:.8}
.g-num text{fill:#f2ead8; text-anchor:middle; font-family:var(--serif)}
.g-hole-g{transition:opacity .4s}
.walking .g-hole-g{opacity:.28}
.walking .g-hole-g.on{opacity:1}
.g-hole-g.on .g-line{stroke:#ffd890; stroke-dasharray:none!important; opacity:1; stroke-width:2.4px; vector-effect:non-scaling-stroke}
.g-hole-g.on .g-num circle{fill:#b8893a; opacity:1}
.g-hole-g:hover .g-line{opacity:1}
.g-flag-sh{stroke:#2b2412; opacity:.35}
.g-pole{stroke:#f3ecdc}
.g-flag{fill:#c8202f}
.g-mark circle{fill:#ffd890; stroke:#2a1b08; stroke-width:.6; vector-effect:non-scaling-stroke; opacity:.75}
.g-mark.on circle{opacity:1}

/* left column */
.g-side{flex:1; min-height:0; overflow:auto; padding-right:8px; margin-right:-8px;
  scrollbar-width:thin; scrollbar-color:#4a4237 transparent; transition:opacity .4s}
.walking .g-side{display:none}
.g-side h2{margin:0 0 10px; font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--dim)}
.g-stories{margin-bottom:26px}
.g-stories ol{list-style:none; margin:0; padding:0}
.g-stories li{border-top:1px solid rgba(217,199,166,.14)}
.g-story{all:unset; display:block; width:100%; padding:10px 0; cursor:pointer; font-style:italic; font-size:16px; line-height:1.35; color:var(--ink)}
.g-story span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .3s}
.g-story:hover span,.g-story:focus-visible span{background-size:100% 1px}
.g-story[aria-expanded="true"]{color:var(--gold)}
.g-story-body p{margin:0 0 8px; font-size:14px; line-height:1.55; color:#d6ccb8}
.g-notes ul{list-style:none; margin:0; padding:0}
.g-note{padding:10px 0; border-top:1px solid rgba(217,199,166,.14)}
.g-note b{display:block; font-weight:500; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.g-note-h{display:block; margin:3px 0 4px; font-style:italic; font-size:15.5px; color:var(--ink)}
.g-note p{margin:0; font-size:13.5px; line-height:1.5; color:#cfc5b1}
.g-src{margin:6px 0 2px!important; font-size:11.5px!important; color:var(--faint)!important; line-height:1.4}
.g-src a{color:var(--dim); text-decoration:none; border-bottom:1px solid rgba(169,159,140,.35)}
.g-src a:hover{color:var(--ink)}

/* the walk */
.g-walk{position:absolute; bottom:30px; left:calc(var(--side) + 64px); right:24px; z-index:4; display:flex; align-items:center; justify-content:center; gap:6px;
  transition:right .6s cubic-bezier(.2,.7,.2,1)}
.walking .g-walk{right:calc(var(--page) + 40px)}
.g-holes{list-style:none; display:flex; gap:2px; margin:0; padding:0; overflow-x:auto; scrollbar-width:none}
.g-holes button,.g-step{all:unset; cursor:pointer; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  font-size:13px; color:var(--dim); transition:color .2s, background .2s}
.g-holes button:hover,.g-step:hover{color:var(--ink); background:rgba(239,230,210,.08)}
.g-holes button:focus-visible,.g-step:focus-visible{outline:1px solid var(--gold)}
.g-holes button[aria-current="true"]{background:#b8893a; color:#1a1208}
.g-step{font-size:20px; color:var(--ink)}

/* the hole card */
.g-hole{flex:1; min-height:0; overflow:auto;
  animation:gUp .45s cubic-bezier(.2,.7,.2,1)}
@keyframes gUp{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.g-hole-k{margin:0; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim)}
.g-hole h3{margin:2px 0 12px; display:flex; align-items:baseline; gap:14px; font-weight:400}
.g-hole-n{font-family:var(--display); font-size:64px; line-height:1; color:var(--ink)}
.g-hole-par{font-style:italic; font-size:20px; color:var(--gold)}
.g-card-rows{border-collapse:collapse; font-size:14px; margin:0 0 4px}
.g-card-rows td{padding:3px 18px 3px 0; color:#d6ccb8}
.g-small{margin:0 0 12px; font-size:11.5px; color:var(--faint)}
.g-sig{margin:0 0 14px; font-size:15px; line-height:1.5; color:#e1d7c2}
.g-sig b,.g-hole-note b{display:block; font-weight:500; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:3px}
.g-hole-note{padding:10px 0; border-top:1px solid rgba(217,199,166,.14)}
.g-hole-note p{margin:0; font-size:14px; line-height:1.55; color:#d6ccb8}

/* the clubhouse, opened: a dialog over the scene */
.g-board{position:absolute; top:4vh; bottom:4vh; left:50%; width:min(var(--board),calc(100% - 32px)); z-index:20; display:flex;
  background:linear-gradient(160deg,#2b1b11,#1a100a 70%); border:1px solid rgba(184,137,58,.35);
  box-shadow:0 0 0 100vmax rgba(6,8,12,.62), 0 40px 80px -20px rgba(0,0,0,.8), inset 0 0 0 9px #22160d, inset 0 0 0 10px rgba(184,137,58,.35);
  transform:translate(-50%,24px) scale(.97); opacity:0; visibility:hidden; transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s, visibility 0s .45s}
.board-open .g-board{transform:translate(-50%,0); opacity:1; visibility:visible; transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s}
.g-board::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:overlay;
  background:repeating-linear-gradient(92deg,rgba(255,255,255,.04) 0 2px,transparent 2px 7px),repeating-linear-gradient(88deg,rgba(0,0,0,.18) 0 1px,transparent 1px 13px)}
.g-board-in{position:relative; flex:1; display:flex; flex-direction:column; padding:30px 30px 22px; min-height:0}
.g-board-k{margin:0; text-align:center; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold2)}
.g-board h2{margin:4px 0 14px; text-align:center; font-family:var(--display); font-weight:400; font-size:28px; letter-spacing:.04em;
  background:linear-gradient(#f6dca0,#b8893a); -webkit-background-clip:text; background-clip:text; color:transparent}
.g-tabs{display:flex; justify-content:center; gap:4px; margin:0 0 16px; border-bottom:1px solid rgba(184,137,58,.25)}
.g-tabs button{all:unset; cursor:pointer; padding:8px 12px 9px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#9a7a48; border-bottom:2px solid transparent; margin-bottom:-1px}
.g-tabs button[aria-selected="true"]{color:#f0d49a; border-bottom-color:#b8893a}
.g-tabs button:hover{color:#e6c98a} .g-tabs button:focus-visible{outline:1px solid var(--gold)}
.g-board-list{flex:1; overflow:auto; min-height:0; padding-right:4px; scrollbar-width:thin; scrollbar-color:#5a4026 transparent}
.g-line-sec{margin-bottom:18px}
.g-ev{margin:12px 0 4px; font-style:italic; font-size:13px; color:#b8893a; text-align:center}
.g-row{display:grid; grid-template-columns:46px 1fr auto; column-gap:10px; align-items:baseline; padding:6px 8px; border-radius:2px}
.g-row.hot{background:rgba(243,213,142,.12)}
.g-yr{font-size:13px; color:var(--gold2); font-variant-numeric:tabular-nums}
.g-who{font-size:16px; color:var(--gold); line-height:1.3}
.g-who a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(230,201,138,.3)}
.g-who a:hover{color:#ffe7b0; border-bottom-color:#ffe7b0}
.g-who .amp{color:var(--gold2)}
.g-row.hot .g-who{color:#ffe3a3}
.g-sc{font-size:13px; color:var(--gold2); font-variant-numeric:tabular-nums; white-space:nowrap}
.g-more{grid-column:2/4; font-size:12px; font-style:italic; color:#a07b40}
.g-club{margin:0; display:grid; gap:0}
.g-club div{display:grid; grid-template-columns:130px 1fr; gap:12px; padding:9px 4px; border-top:1px solid rgba(184,137,58,.16)}
.g-club dt{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#9a7a48; padding-top:3px}
.g-club dd{margin:0; font-size:15px; color:#ecd7a8; line-height:1.4; min-width:0; overflow-wrap:anywhere}
.g-club a{color:inherit; border-bottom:1px solid rgba(230,201,138,.35); text-decoration:none}
.g-changes{list-style:none; margin:0; padding:0}
.g-changes li{display:grid; grid-template-columns:52px 1fr; gap:12px; padding:12px 4px; border-top:1px solid rgba(184,137,58,.16)}
.g-changes b{display:block; font-weight:400; font-style:italic; color:#f0d49a; font-size:15px}
.g-changes p{margin:4px 0 0; font-size:14px; line-height:1.5; color:#d9c39a}
.g-board .g-src{color:#8e6d3a!important}
.g-board .g-src a{color:#b8893a}
.g-board-x{all:unset; position:absolute; top:16px; right:18px; z-index:2; cursor:pointer; font-size:22px; color:var(--gold2); width:28px; height:28px; display:grid; place-items:center}
.g-board-x:focus-visible{outline:1px solid var(--gold)}
.g-open-board{all:unset; position:absolute; top:34px; right:36px; z-index:5; cursor:pointer; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); padding:9px 14px; border:1px solid rgba(230,201,138,.4); transition:opacity .3s}
.g-open-board:hover,.g-open-board:focus-visible{background:rgba(230,201,138,.08)}
.walking .g-open-board{opacity:0; pointer-events:none}

/* the hole: a yardage-book page */
.g-page{position:absolute; top:24px; right:24px; bottom:24px; width:var(--page); z-index:6; overflow:auto; padding:22px 24px 18px;
  background:#efe6d0; color:#2a241a; box-shadow:0 30px 60px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:gPage .5s cubic-bezier(.2,.7,.2,1); scrollbar-width:thin}
@keyframes gPage{from{opacity:0; transform:translateX(18px) rotate(.6deg)}to{opacity:1; transform:none}}
.g-page-h{display:flex; align-items:baseline; gap:12px; border-bottom:1.5px solid #2a241a; padding-bottom:8px; margin-bottom:12px}
.g-page-n{font-family:var(--display); font-size:54px; line-height:.9}
.g-page-meta{font-style:italic; font-size:18px; color:#5a4c34}
.g-page-x{all:unset; margin-left:auto; cursor:pointer; font-size:22px; color:#5a4c34; width:28px; height:28px; display:grid; place-items:center; align-self:center}
.g-page-x:focus-visible{outline:1px solid #2a241a}
.g-plan{margin:0 0 10px}
.g-plan svg{display:block; width:100%; height:auto; background:#e6dcc2; outline:1px solid rgba(42,36,26,.25)}
.g-plan figcaption{font-size:11px; color:#7a6a4e; margin-top:5px; font-style:italic}
.pl-rough{fill:#c9cf9e} .pl-wood{fill:#8fa070} .pl-water{fill:#9bb8c6; stroke:#5d7f90; stroke-width:.8}
.pl-sand{fill:#ead9ab} .pl-fair{fill:#a9c47a} .pl-tee{fill:#93b465} .pl-green{fill:#b9d887; stroke:#5c7a3a; stroke-width:.8}
.pl-bunker{fill:#f6ecd0; stroke:#b39b67; stroke-width:.8}
.pl-line{fill:none; stroke:#2a241a; stroke-width:1.2; stroke-dasharray:3 3}
.pl-tick{stroke:#2a241a; stroke-width:1.1} .pl-yd{font-size:10px; fill:#2a241a; font-family:var(--serif)}
.pl-teept{fill:#2a241a} .pl-pole{stroke:#2a241a; stroke-width:1.1} .pl-flag{fill:#b3202c}
.g-card-rows{border-collapse:collapse; width:100%; font-size:14px; margin:4px 0 10px}
.g-card-rows caption{text-align:left; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#7a6a4e; padding-bottom:4px}
.g-card-rows td{padding:4px 8px 4px 0; border-top:1px solid rgba(42,36,26,.15)}
.g-measure{margin:6px 0 4px; display:grid; grid-template-columns:1fr 1fr; gap:10px 14px}
.g-measure dt{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#7a6a4e}
.g-measure dd{margin:2px 0 0; font-size:15px; font-style:italic}
.g-page .g-small{margin:4px 0 12px; font-size:11px; color:#7a6a4e}
.g-page-note{padding:10px 0; border-top:1px solid rgba(42,36,26,.18)}
.g-page-note b{display:block; font-weight:500; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#7a6a4e; margin-bottom:3px}
.g-page-note p{margin:0; font-size:14.5px; line-height:1.5; color:#2a241a}
.g-page .g-src{color:#8a7a5e!important} .g-page .g-src a{color:#5a4c34; border-bottom-color:rgba(90,76,52,.35)}
.g-page-f{display:flex; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1.5px solid #2a241a}
.g-page-f .g-step{width:auto; padding:0 10px; border-radius:2px; color:#2a241a; font-size:15px}
.g-page-f .g-step:hover{background:rgba(42,36,26,.08)}
.g-page-f .g-step[disabled]{opacity:.25; pointer-events:none}

/* things to find on the course, and the clubhouse label */
.g-mark{cursor:pointer; outline:none}
.g-mark circle{fill:#ffd890; stroke:#2a1b08; stroke-width:.8; vector-effect:non-scaling-stroke}
.g-mark .halo{fill:#ffd890; stroke:none; opacity:.25; transform-box:fill-box; transform-origin:center; animation:gPulse 2.4s ease-in-out infinite}
@keyframes gPulse{50%{opacity:.05; transform:scale(1.6)}}
.g-mark:hover circle:not(.halo),.g-mark:focus-visible circle:not(.halo){fill:#fff3cf}
.g-house-lab text{fill:#f0d49a; text-anchor:middle; letter-spacing:.2em; font-family:var(--serif); pointer-events:none}
.g-house-lab .sub{fill:#c9b48a; letter-spacing:.04em; font-style:italic}
.walking .g-house-lab{opacity:0}
.g-walk-k{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-right:8px; white-space:nowrap}
.g-holes button.has-note{position:relative}
.g-holes button.has-note::after{content:""; position:absolute; top:3px; right:4px; width:5px; height:5px; border-radius:50%; background:#ffd890}

/* the tour here */
.g-season{margin-bottom:10px}
.g-season-k{margin:0 0 6px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#e3d9c4}
.g-years{display:flex; flex-wrap:wrap; gap:4px}
.g-years button{all:unset; cursor:pointer; font-size:11.5px; padding:3px 7px; color:var(--dim); border:1px solid rgba(217,199,166,.18); font-variant-numeric:tabular-nums}
.g-years button:hover{color:var(--ink); border-color:rgba(217,199,166,.45)}
.g-years button[aria-pressed="true"]{color:#1a1208; background:#d9b56a; border-color:#d9b56a}
.g-years button.s-canceled{text-decoration:line-through}
.g-years button:focus-visible{outline:1px solid var(--gold)}

/* colophon */
.g-colo{flex:none; padding-top:16px}
.g-light{margin:0 0 4px; font-style:italic; font-size:12px; line-height:1.45; color:var(--dim)}
.g-light b{font-weight:400; color:#d6ccb8}
.g-credit{margin:0; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#ddd3be}

.g-tip{position:fixed; z-index:20; max-width:260px; padding:8px 11px; background:#1a140e; border:1px solid rgba(230,201,138,.3);
  color:#e6dcc6; font-size:12.5px; line-height:1.45; pointer-events:none; box-shadow:0 10px 24px rgba(0,0,0,.45)}
.g-tip b{font-weight:500; color:var(--gold)}
.g-tip i{color:var(--dim)}
.g-fail{padding:120px 64px; color:var(--dim)}

/* middle widths: the board floats over the scene */
@media (max-width:1100px){
  .grounds{--page:290px}
}
@media (max-width:980px){
  .grounds{--side:260px}
  .g-title h1{font-size:42px}
}

/* phone */
@media (max-width:760px){
  .grounds{min-height:0; overflow:visible; padding-bottom:calc(28px + env(safe-area-inset-bottom)); display:flex; flex-direction:column}
  .g-title{order:0} .g-stage{order:1} .g-walk{order:2} .g-hole{order:3} .g-side{order:4} .g-colo{order:5}
  .grounds::after{position:fixed}
  .g-title,.g-stage,.g-walk,.g-side,.g-colo{position:relative; z-index:1} .g-page{z-index:2}
  .g-sky{position:fixed; z-index:0}
  .g-col{display:contents}
  .g-title{position:relative; padding:30px 20px 0; margin:0; order:0}
  .g-kicker{padding-right:150px}
  .g-title h1{font-size:40px}
  .g-facts{font-size:15px}
  .g-stage{position:relative; left:auto; right:auto!important; top:auto; bottom:auto; height:auto; aspect-ratio:var(--ar,1.3); margin:8px -8px 0; overflow:hidden}
  .g-walk{position:relative; left:auto; right:auto!important; bottom:auto; padding:0 12px; margin-top:4px}
  .g-holes{scroll-snap-type:x mandatory; padding:2px 0}
  .g-holes li{scroll-snap-align:center}
  .g-page{position:relative; order:3; top:auto; right:auto; bottom:auto; width:auto; margin:16px 16px 0; overflow:visible}
  .walking .g-stage,.walking .g-walk{right:auto!important}
  .g-side{overflow:visible; margin:26px 20px 0; padding:0}
  .walking .g-side{display:block}
  .g-colo{position:relative; left:auto; bottom:auto; width:auto; margin:28px 20px 0}
  .g-open-board{position:absolute; top:28px; right:16px; padding:7px 10px; font-size:10px}
  .g-board{position:fixed; inset:auto 0 0 0; top:8vh; left:0; width:auto; border-width:1px 0 0; z-index:30;
    transform:translateY(105%); padding-bottom:env(safe-area-inset-bottom)}
  .board-open .g-board{transform:none}
  .g-club div{grid-template-columns:104px 1fr}
  .g-walk-k{display:none}
}
@media (prefers-reduced-motion:reduce){
  .g-cam,.g-board,.g-stage,.g-walk{transition:none} .g-hole{animation:none}
}

/* audit fixes */
.g-house-lab{cursor:pointer}
.g-house-lab .plate{fill:#141820; fill-opacity:.82; stroke:#b8893a; stroke-opacity:.45; vector-effect:non-scaling-stroke}
.g-house-lab:hover .plate{fill:#1d2230}
.g-sec-h{margin:18px 0 2px; text-align:center; font-family:var(--display); font-weight:400; font-size:17px; letter-spacing:.03em; color:#f0d49a}
.g-line-sec:first-child .g-sec-h{margin-top:4px}
.g-sec-note{margin:0 0 6px; text-align:center; font-style:italic; font-size:12px; color:#a07b40}
.g-ev{font-size:12px}
.g-col{overflow:hidden}
.g-side{overscroll-behavior:contain; -webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent); mask-image:linear-gradient(#000 calc(100% - 22px),transparent); padding-bottom:18px}
@media (max-width:760px){
  .grounds{overflow-x:clip; max-width:100vw}
  .g-stage{margin:8px 0 0!important; width:100%; max-width:100%; overflow:hidden; contain:paint}
  .g-cam{overflow:hidden}
  .g-holes{display:grid; grid-template-columns:repeat(9,30px); justify-content:center; gap:4px 3px; overflow:visible; scroll-snap-type:none}
  .g-walk{flex-wrap:nowrap}
  .g-side{-webkit-mask-image:none; mask-image:none; padding-bottom:0}
  .g-col{overflow:visible}
}

.g-h1 .w{display:inline-block; white-space:nowrap}
.g-h1-break .w{display:inline; white-space:normal; overflow-wrap:anywhere; hyphens:auto}
.g-title{min-width:0}

/* the course switcher: ‹ all courses › beside the name, and its searchable list */
.g-sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.g-title .g-hub-h{margin:0 0 12px; font-family:var(--serif); font-weight:500; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); line-height:1.5}
.g-title h2.g-h1{margin:0; font-family:var(--display); font-weight:400; font-size:52px; line-height:1.02; letter-spacing:-.01em; color:var(--ink)}
.g-switch{display:flex; align-items:stretch; gap:6px; margin:2px 0 16px; max-width:100%}
.g-sw-step,.g-sw-btn{all:unset; box-sizing:border-box; height:34px; border:1px solid rgba(230,201,138,.32); color:var(--gold); cursor:pointer;
  transition:background .2s,border-color .2s}
.g-sw-step{flex:none; width:34px; display:grid; place-items:center; font-size:20px; line-height:1; padding-bottom:2px}
.g-sw-step[aria-disabled="true"]{opacity:.35; cursor:default}
.g-sw-btn{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; padding:0 12px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap}
.g-sw-l{flex:none}
.g-sw-n{flex:1 1 auto; min-width:0; text-align:right; color:var(--dim); letter-spacing:.08em; text-transform:none; font-style:italic; font-size:13px; overflow:hidden}
.g-sw-btn i{flex:none; width:7px; height:7px; border:solid var(--gold); border-width:0 1px 1px 0; transform:translateY(-2px) rotate(45deg); transition:transform .2s}
.g-sw-btn[aria-expanded="true"] i{transform:translateY(2px) rotate(-135deg)}
.g-sw-step:not([aria-disabled="true"]):hover,.g-sw-btn:hover,.g-sw-btn[aria-expanded="true"]{background:rgba(230,201,138,.08); border-color:rgba(230,201,138,.55)}
.g-sw-step:focus-visible,.g-sw-btn:focus-visible{outline:1px solid var(--gold); outline-offset:2px}

.g-sw{position:fixed; z-index:40; display:flex; flex-direction:column; min-height:0; max-height:70vh;
  background:linear-gradient(170deg,#191e2b,#11141d 70%); border:1px solid rgba(230,201,138,.32);
  box-shadow:0 40px 80px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4); color:var(--ink); font-family:var(--serif)}
.g-sw-top{flex:none; display:flex; align-items:center; gap:8px; padding:12px 12px 10px 16px; border-bottom:1px solid rgba(230,201,138,.18)}
.g-sw-top input{flex:1 1 auto; min-width:0; -webkit-appearance:none; appearance:none; background:transparent; border:0; outline:0; color:var(--ink);
  font:italic 16px/1.4 var(--serif); padding:6px 0}
.g-sw-top input::placeholder{color:var(--faint)}
.g-sw-top input::-webkit-search-cancel-button{-webkit-appearance:none}
.g-sw-top:focus-within{border-bottom-color:rgba(230,201,138,.5)}
.g-sw-x{all:unset; flex:none; width:30px; height:30px; display:grid; place-items:center; font-size:22px; color:var(--gold2); cursor:pointer}
.g-sw-x:focus-visible{outline:1px solid var(--gold)}
.g-sw-count{flex:none; margin:0; padding:7px 16px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.g-sw-list{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:0 0 10px; position:relative}
.g-sw-c{position:sticky; top:0; z-index:1; margin:0; padding:9px 16px 6px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  background:#141824; border-top:1px solid rgba(230,201,138,.12)}
.g-sw-c small{font-size:10px; letter-spacing:.08em; color:var(--faint); margin-left:4px}
.g-sw-o{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; row-gap:0; padding:7px 16px 7px 28px; color:var(--ink); text-decoration:none; position:relative;
  border-left:2px solid transparent}
.g-sw-name{font-size:15px; line-height:1.35; min-width:0; overflow-wrap:anywhere}
.g-sw-city{font-size:13px; font-style:italic; color:var(--dim)}
.g-sw-o em{font-style:normal; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.g-sw-o.is-here::before{content:""; position:absolute; left:13px; top:15px; width:6px; height:6px; border-radius:50%; background:var(--gold)}
.g-sw-o.is-here .g-sw-name{color:var(--gold)}
.g-sw-o[aria-selected="true"]{background:rgba(230,201,138,.1); border-left-color:var(--gold)}
.g-sw-none{margin:18px 16px; font-style:italic; color:var(--dim)}
.switch-open .g-open-board{z-index:5}

@media (max-width:980px){ .g-title h2.g-h1{font-size:42px} }
@media (max-width:760px){
  .g-title h2.g-h1{font-size:40px}
  .g-switch{margin:4px 0 14px}
  .g-sw-step,.g-sw-btn{height:40px}
  .g-sw-step{width:40px}
  .g-sw{inset:auto 0 0 0; top:8vh; left:0!important; width:auto!important; max-height:none!important; border-width:1px 0 0;
    padding-bottom:env(safe-area-inset-bottom); box-shadow:0 0 0 100vmax rgba(6,8,12,.62)}
  .g-sw-o{padding-top:10px; padding-bottom:10px}
  .g-sw-o.is-here::before{top:18px}
  .g-sw-x{width:40px; height:40px}
}
@media (max-width:760px){
  .g-title .g-hub-h{padding-right:150px}
  /* the sky stays with the room: fixed, it painted over the record and the course list below the room */
  .g-sky,.grounds::after{position:absolute}
}
@media (max-width:760px){
  /* "Inside the clubhouse" on two short lines, so the place line keeps its room beside it */
  .g-open-board{max-width:118px; white-space:normal; text-align:center; line-height:1.35; letter-spacing:.16em}
  .g-kicker,.g-title .g-hub-h{padding-right:146px}
  .g-kicker{min-height:40px}
}