/* ad333.info — "Sổ tay sân": pocket yardage book + Saigon night driving range. AD333 read as a golf-ball model code. */
:root{
  --paper:#EEF0E6;--sheet:#F9FAF4;--ink:#0F1B1F;--ink-2:#3B4B4C;--line:#C9D0BF;
  --night:#0A2230;--night-2:#06161F;--night-3:#0E2A36;--mist:#C9D6CF;--mist-2:#9FB4A9;
  --turf:#2F7A4B;--turf-d:#1D5433;--turf-l:#3B8B58;--ball:#E5F23C;--ball-d:#A5B115;
  --flag:#D9442B;--flag-t:#B0341F;--sand:#E6D7A8;--water:#3C8DB0;--link:#145C76;
  --fd:"Barlow Condensed","Arial Narrow",sans-serif;--fb:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--fm:"Roboto Mono",ui-monospace,Menlo,monospace;
  --font-head:var(--fd);--font-body:var(--fb);--hh:76px;
  --primary:#0F1B1F;--accent:#E5F23C;--surface:#F9FAF4;--text:#0F1B1F;--muted:#3B4B4C;--border:#C9D0BF;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);background-image:radial-gradient(circle,rgba(15,27,31,.075) 1px,transparent 1.3px);background-size:22px 22px;color:var(--ink);font:400 17px/1.72 var(--fb);overflow-x:hidden;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--flag);outline-offset:3px;border-radius:4px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
@media (min-width:700px){.wrap{padding:0 28px}}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--ball);padding:12px 18px;border-radius:8px;font:700 16px/1 var(--fb);text-decoration:none}
.skip:focus{top:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font:700 19px/1.1 var(--fd);letter-spacing:.02em;text-decoration:none;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn-ball{background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.6),transparent 38%),radial-gradient(circle,rgba(15,27,31,.1) 1.3px,transparent 1.7px) 0 0/8px 8px,var(--ball);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),0 4px 0 var(--ink)}
.btn-ball:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--ink),0 6px 0 var(--ink)}
.btn-ball:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px var(--ink),0 1px 0 var(--ink)}
.btn-line{color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn-line:hover{background:rgba(234,240,234,.1)}
.btn-lg{min-height:56px;padding:0 26px;font-size:21px}

/* ball mark */
.ball .b0{fill:var(--ball);stroke:var(--ink);stroke-width:1.6}
.ball .bd{fill:rgba(15,27,31,.2)}
.ball .bs{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;opacity:.8}

/* header: scorecard strip */
.hdr{position:sticky;top:0;z-index:50;background:var(--sheet);box-shadow:0 1px 0 var(--ink)}
.hdr-in{max-width:1240px;margin:0 auto;padding:0 16px;min-height:68px;display:flex;align-items:center;gap:10px;position:relative}
@media (min-width:700px){.hdr-in{padding:0 28px;gap:14px}}
.mow{height:9px;background:repeating-linear-gradient(90deg,var(--turf) 0 34px,var(--turf-l) 34px 68px)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:48px;flex:none}
.brand-ball{width:38px;height:38px;flex:none}
.brand-t{display:grid;line-height:1}
.wm{font:italic 800 30px/.95 var(--fd);letter-spacing:.005em}
.tag{font:500 11px/1.3 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:3px}
.menu{margin-left:auto;display:inline-flex;align-items:center;gap:9px;min-height:44px;min-width:44px;padding:0 16px 0 14px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:700 18px/1 var(--fd);letter-spacing:.03em;cursor:pointer}
.menu:hover{background:var(--ball)}
.flagico{position:relative;width:14px;height:20px;flex:none}
.flagico::before{content:"";position:absolute;left:2px;top:1px;bottom:0;width:2px;background:var(--ink)}
.flagico i{position:absolute;left:4px;top:1px;width:0;height:0;border-left:10px solid var(--flag);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;transition:transform .2s}
.hdr.is-open .flagico i{transform:translateY(9px)}
.hdr.is-open .menu{background:var(--ink);color:var(--ball)}
.hdr.is-open .menu .flagico::before{background:var(--ball)}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--night);color:#EAF0EA;padding:14px 16px 20px;max-height:calc(100vh - var(--hh));overflow:auto;box-shadow:0 24px 40px -20px rgba(0,0,0,.6);border-top:9px solid var(--turf)}
.hdr.is-open .nav{display:block}
.nav-h{display:grid;grid-template-columns:52px 1fr;margin:0 0 4px;font:500 12px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--ball)}
.nav-h span{padding:8px 0 10px}
.nav-h span:first-child{text-align:center}
.nav ol{list-style:none;margin:0 0 16px;padding:0;border-top:1px solid rgba(234,240,234,.18)}
.nav li{border-bottom:1px solid rgba(234,240,234,.18)}
.nav li a{display:grid;grid-template-columns:52px 1fr;align-items:center;min-height:54px;color:#EAF0EA;text-decoration:none;font:600 21px/1.2 var(--fd)}
.nav .ni{align-self:stretch;display:grid;place-items:center;border-right:1px solid rgba(234,240,234,.18);font:500 15px/1 var(--fm);color:var(--mist-2)}
.nav .nl{padding:10px 14px}
.nav li a:hover .nl{color:var(--ball)}
.nav li a[aria-current=page] .ni{background:var(--ball);color:var(--ink)}
.nav li a[aria-current=page] .nl{color:var(--ball)}
.nav-play{width:100%}
.lsw{display:flex;flex:none}
.lsw a{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 6px;font:600 13px/1 var(--fm);color:var(--ink);text-decoration:none;border:1.5px solid var(--ink)}
.lsw a+a{margin-left:-1.5px}
.lsw a:first-child{border-radius:999px 0 0 999px}
.lsw a:last-child{border-radius:0 999px 999px 0}
.lsw a[aria-current=true]{background:var(--ink);color:var(--ball)}
.hdr-cta{display:none;min-height:46px;font-size:18px;padding:0 18px}
@media (max-width:399px){.menu{padding:0;width:46px;justify-content:center}.menu .mt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.wm{font-size:27px}.brand-ball{width:34px;height:34px}}
@media (max-width:459px){.hdr .tag{display:none}}
@media (min-width:720px){.hdr-cta{display:inline-flex}}
@media (min-width:1200px){
  .menu{display:none}
  .nav{display:flex;position:static;background:none;color:inherit;padding:0;max-height:none;overflow:visible;box-shadow:none;border:0;margin-left:auto;align-self:stretch}
  .nav-h,.nav-play{display:none}
  .nav ol{display:flex;margin:0;border:0}
  .nav li{border:0;border-left:1px solid var(--line);display:flex}
  .nav li:last-child{border-right:1px solid var(--line)}
  .nav li a{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;min-height:68px;padding:8px 14px;color:var(--ink);font:600 18px/1.1 var(--fd);position:relative;max-width:180px}
  .nav .ni{border:0;display:inline-grid;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-2);font-size:11px;color:var(--ink-2)}
  .nav .nl{padding:0}
  .nav li a:hover{background:#F1F5DA}
  .nav li a:hover .nl{color:var(--ink)}
  .nav li a[aria-current=page]{box-shadow:inset 0 -4px 0 var(--flag)}
  .nav li a[aria-current=page] .ni{background:var(--ball);box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
  .nav li a[aria-current=page] .nl{color:var(--ink)}
}

/* shared kicker / lead */
.kick{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:500 12.5px/1.4 var(--fm);letter-spacing:.1em;text-transform:uppercase}
.kb{width:13px;height:13px;border-radius:50%;background:var(--ball);box-shadow:0 0 0 1.5px var(--ink);flex:none}
.lead p{margin:0 0 .8em}
.lead p:last-child{margin:0}

/* HOME: night driving range */
.range{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--night-2) 0%,var(--night) 48%,#0D3336 100%);color:#EAF0EA;padding:36px 0 0;isolation:isolate}
.range::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(60deg,rgba(234,240,234,.06) 0 1px,transparent 1px 17px),repeating-linear-gradient(-60deg,rgba(234,240,234,.06) 0 1px,transparent 1px 17px);-webkit-mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 80%);mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 80%)}
.range-sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lamp{position:absolute;top:14px;width:44px;height:9px;border-radius:2px;background:#FFFCE3;box-shadow:0 0 14px 5px rgba(255,249,204,.5),0 0 60px 20px rgba(255,249,204,.12)}
.lamp::after{content:"";position:absolute;left:50%;top:6px;width:1100px;height:900px;margin-left:-550px;background:conic-gradient(from 158deg at 50% 0,transparent 0deg,rgba(255,248,196,.09) 16deg,rgba(255,248,196,.05) 30deg,transparent 44deg);transform-origin:50% 0}
.l1{left:8%}.l2{left:52%;top:8px}.l3{left:90%}
.l1::after{transform:rotate(-14deg)}.l3::after{transform:rotate(14deg)}
@media (max-width:699px){.l2{display:none}.l3{left:82%}}
@media (prefers-reduced-motion:no-preference){
  .l1::after{animation:sway 11s ease-in-out infinite alternate}
  .l3::after{animation:sway2 13s ease-in-out infinite alternate}
  .arc{animation:dash 18s linear infinite}
}
@keyframes sway{from{transform:rotate(-17deg)}to{transform:rotate(-9deg)}}
@keyframes sway2{from{transform:rotate(17deg)}to{transform:rotate(9deg)}}
@keyframes dash{to{stroke-dashoffset:-220}}
.range-field{position:absolute;left:0;right:0;bottom:0;width:100%;height:190px;z-index:-1}
.rf0{fill:#0F3A2F}.rf1{fill:#134632}.rf2{fill:#175236}.rf3{fill:#1B5E3B}
.tg{fill:#2B7A48;stroke:rgba(229,242,60,.3);stroke-width:1;vector-effect:non-scaling-stroke}
.tp{stroke:#EAF0EA;stroke-width:1.5;vector-effect:non-scaling-stroke}
.tfl{fill:var(--flag)}
.arc{fill:none;stroke:var(--ball);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 10;vector-effect:non-scaling-stroke;opacity:.75}
.range-in{max-width:1240px;margin:0 auto;padding:0 16px 56px;display:grid;gap:34px}
@media (min-width:700px){.range-in{padding:0 28px 72px}}
.range .kick{color:var(--ball)}
.range .kb{box-shadow:0 0 0 1.5px var(--night-2),0 0 12px 2px rgba(229,242,60,.5)}
.range h1{margin:0 0 20px;font:700 clamp(38px,5.1vw,68px)/1.06 var(--fd);letter-spacing:-.005em;color:#F6F9F0;max-width:17ch}
@media (min-width:700px) and (max-width:1039px){.range h1{max-width:22ch}}
.range .lead{font-size:18.5px;line-height:1.7;color:var(--mist);max-width:60ch}
.range .lead strong{color:#fff}
.acts{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 24px}
.range .btn-ball{box-shadow:0 5px 0 var(--ball-d),0 12px 26px -8px rgba(229,242,60,.45)}
.range .btn-ball:hover{box-shadow:0 7px 0 var(--ball-d),0 16px 30px -8px rgba(229,242,60,.5)}
.range .btn-ball:active{box-shadow:0 1px 0 var(--ball-d)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{position:relative;padding:8px 14px 8px 32px;border-radius:999px;background:rgba(6,22,31,.55);box-shadow:inset 0 0 0 1px rgba(234,240,234,.22);font:500 13.5px/1.35 var(--fm);color:#DDE7E0}
.chips li::before{content:"";position:absolute;left:11px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--night-2);box-shadow:inset 0 0 0 3px var(--ball)}
@media (min-width:1040px){
  .range{padding-top:56px}
  .range-in{grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:56px;align-items:center;padding-bottom:96px}
}

/* range bay = the game cabinet */
.bay{position:relative;background:linear-gradient(180deg,#123746,var(--night-3) 30%,#0B222C);border-radius:24px 24px 10px 10px;padding:12px 12px 14px;box-shadow:0 0 0 1px rgba(234,240,234,.1),0 40px 70px -34px #000,inset 0 1px 0 rgba(255,255,255,.12);min-width:0;scroll-margin-top:calc(var(--hh) + 10px)}
.bay::after{content:"";position:absolute;left:18px;right:18px;bottom:-10px;height:10px;border-radius:0 0 8px 8px;background:#06161F}
.bay-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:2px 6px 10px;font:500 12px/1.3 var(--fm);letter-spacing:.1em;text-transform:uppercase}
.bay-l{color:var(--ball)}
.bay-r{color:var(--mist-2)}
.tray{display:flex;gap:5px;height:28px;padding:5px 10px;border-radius:14px;background:#051218;box-shadow:inset 0 4px 8px #000;overflow:hidden}
.tray i{flex:none;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75),transparent 38%),radial-gradient(circle,rgba(15,27,31,.18) 1px,transparent 1.4px) 0 0/5px 5px,var(--ball)}
.tray i:nth-child(3n){background:radial-gradient(circle at 32% 28%,#fff,transparent 40%),radial-gradient(circle,rgba(15,27,31,.16) 1px,transparent 1.4px) 0 0/5px 5px,#E9EEE6}
.tray i:nth-child(4n+2){transform:translateY(1px)}

/* scorecard (contents) */
.scard{background:var(--sheet);border:2px solid var(--ink);border-radius:12px;overflow:hidden;box-shadow:6px 6px 0 rgba(15,27,31,.12)}
.scard-h{display:grid;grid-template-columns:52px 1fr auto;align-items:center;margin:0;background:var(--turf-d);color:#F4F7EE;font:500 12px/1.3 var(--fm);letter-spacing:.1em;text-transform:uppercase}
.scard-h span{padding:11px 12px}
.scard-h span:first-child{text-align:center;padding:11px 0;border-right:1px solid rgba(255,255,255,.2)}
.scard-c{display:grid;place-items:center;width:28px;height:28px;margin-right:10px;padding:0!important;border-radius:50%;background:var(--ball);color:var(--ink);font-weight:600;letter-spacing:0}
.scard ol{list-style:none;margin:0;padding:0}
.scard li+li{border-top:1px solid var(--line)}
.scard a{display:grid;grid-template-columns:52px 1fr 40px;align-items:center;min-height:50px;color:var(--ink);text-decoration:none;font:600 16px/1.38 var(--fb)}
.sc-n{align-self:stretch;display:grid;place-items:center;border-right:1px solid var(--line);font:700 22px/1 var(--fd)}
.sc-l{padding:10px 12px}
.sc-b{justify-self:center;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.scard a:hover{background:#F1F5DA}
.scard a:hover .sc-b,.scard a[aria-current=true] .sc-b{background:var(--ball);box-shadow:inset 0 0 0 1.5px var(--ink)}
.scard a[aria-current=true] .sc-n{background:var(--ink);color:var(--ball)}
.card-band{padding:44px 0 4px}
.card-band .wrap{container-type:inline-size}
.card-note{margin:0 0 14px;max-width:62ch;font:500 13.5px/1.55 var(--fm);color:var(--ink-2)}
@container (min-width:860px){
  .card-band .scard ol{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .card-band .scard li+li{border-top:0;border-left:1px solid var(--line)}
  .card-band .scard a{grid-template-columns:1fr;grid-template-rows:48px 1fr;align-items:start;height:100%}
  .card-band .sc-n{border-right:0;border-bottom:1px solid var(--line)}
  .card-band .sc-l{font-size:15.5px;padding:12px 12px 16px}
  .card-band .sc-b{display:none}
}

/* INNER: yardage book cover */
.cover{position:relative;background:repeating-radial-gradient(ellipse at 88% 22%,transparent 0 26px,rgba(47,122,75,.12) 26px 27.5px),var(--sheet);border-bottom:2px solid var(--ink)}
.cover-in{display:grid;gap:30px;padding-top:22px;padding-bottom:40px}
.bc ol{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;align-items:center;font:500 13px/1.3 var(--fm)}
.bc li{display:flex;align-items:center}
.bc li+li::before{content:"";width:6px;height:6px;margin:0 10px;border-radius:50%;background:var(--turf)}
.bc a{display:inline-flex;align-items:center;min-height:44px;color:var(--link)}
.bc span[aria-current]{color:var(--ink-2)}
.cover .kick{color:var(--turf-d)}
.cover h1{margin:0 0 18px;font:700 clamp(36px,4.5vw,60px)/1.07 var(--fd);color:var(--ink);max-width:22ch}
.cover .lead{font-size:18.5px;color:var(--ink-2);max-width:62ch}
.mow-b{height:12px}
@media (min-width:1000px){
  .cover-in{grid-template-columns:minmax(0,1.25fr) minmax(330px,.85fr);gap:56px;align-items:start;padding-top:28px;padding-bottom:52px}
  .cover-card{padding-top:62px}
}

/* article: every section is a hole */
.book{padding:30px 0 30px}
.content{max-width:1120px;margin:0 auto;container-type:inline-size}
.prose>:first-child{margin-top:0}
.prose p{margin:0 0 1em}
.prose strong{font-weight:800;color:var(--ink)}
.prose h3,.prose h4{font:700 23px/1.2 var(--fd);margin:1.4em 0 .5em}
.prose ul{list-style:none;margin:0 0 1.2em;padding:0}
.prose ul li{position:relative;padding-left:28px;margin:0 0 .55em}
.prose ul li::before{content:"";position:absolute;left:2px;top:.52em;width:12px;height:12px;border-radius:50%;background:var(--ball);box-shadow:inset 0 0 0 1.5px var(--ink)}
.prose ol{margin:0 0 1.2em;padding-left:1.6em}
.prose ol li{margin:0 0 .55em;padding-left:4px}
.prose ol li::marker{font:700 18px var(--fd);color:var(--flag-t)}
.prose blockquote{margin:1.2em 0;padding:14px 18px;border-left:4px solid var(--turf);background:var(--sheet)}
.table-wrap{overflow-x:auto;margin:1.3em 0;border:2px solid var(--ink);border-radius:10px;background:var(--sheet)}
.table-wrap table{width:100%;min-width:520px;border-collapse:collapse;font-size:16px;line-height:1.5}
.table-wrap th{background:var(--turf-d);color:#F4F7EE;font:600 18px/1.25 var(--fd);letter-spacing:.02em;text-align:left;padding:11px 14px;vertical-align:bottom}
.table-wrap td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top}
.table-wrap td:first-child{font-weight:700}
.table-wrap tr:nth-child(even) td{background:#F0F3E7}
.intro-rest,.plain{margin:0 0 20px}
.content>.hole:first-child{border-top:0;padding-top:12px}
.hole{display:grid;grid-template-columns:62px minmax(0,1fr);grid-template-areas:"map head" "body body";column-gap:16px;padding:34px 0 30px;border-top:1.5px solid var(--ink)}
.hole-map{grid-area:map;position:relative;width:62px}
.hole-map .hmap{display:block;width:100%;height:auto}
.hole-no{position:absolute;left:-6px;top:-10px;display:flex;align-items:baseline;gap:3px;padding:3px 6px;border-radius:5px;background:var(--ink);color:var(--ball);font:700 16px/1 var(--fd)}
.hole-no small{font:500 9px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.hole-h{grid-area:head;align-self:center;margin:0;font:700 clamp(27px,3.4vw,40px)/1.12 var(--fd);color:var(--ink)}
.hole-body{grid-area:body;margin-top:18px;min-width:0}
.hmap .h-rough,.ymap .h-rough{fill:#2C6B41}
.h-trees circle{fill:#20522F}
.h-carry{fill:none;stroke:rgba(249,250,244,.45);stroke-width:1;stroke-dasharray:2 3}
.h-water{fill:var(--water)}
.h-fw{fill:none;stroke:#5FAE6B;stroke-width:30;stroke-linecap:round;stroke-linejoin:round}
.h-mow{fill:none;stroke:#6FBE7A;stroke-width:30;stroke-dasharray:8 8;stroke-linejoin:round}
.h-bk{fill:var(--sand)}
.h-gr{fill:#8ED08B;stroke:#5FAE6B;stroke-width:2}
.h-cup{fill:var(--ink)}
.h-pin{stroke:#F9FAF4;stroke-width:1.6}
.h-flag{fill:var(--flag)}
.h-tee{fill:#8ED08B;stroke:#F9FAF4;stroke-width:1}
.h-ball{fill:var(--ball);stroke:var(--ink);stroke-width:.8}
@container (min-width:760px){
  .hole{grid-template-columns:176px minmax(0,1fr);grid-template-areas:"map head" "map body";grid-template-rows:auto 1fr;column-gap:44px;padding:48px 0 40px}
  .hole-map{width:176px;position:sticky;top:calc(var(--hh) + 22px);align-self:start;display:flex;flex-direction:column;gap:12px}
  .hole-map .hmap{border-radius:10px;box-shadow:6px 6px 0 rgba(15,27,31,.14)}
  .hole-no{position:static;display:flex;align-items:baseline;gap:8px;padding:0;background:none;color:var(--ink);font:italic 800 52px/.9 var(--fd)}
  .hole-no small{font-size:11px;color:var(--ink-2);font-style:normal}
  .hole-h{align-self:start}
  .intro-rest,.plain{margin-left:220px}
  .hole-body{max-width:72ch}
}

/* FAQ: ball drops into the cup */
.qs details{border-top:1px solid var(--line)}
.qs details:last-child{border-bottom:1px solid var(--line)}
.qs summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:14px 0;cursor:pointer;list-style:none;font:700 18px/1.45 var(--fb)}
.qs summary::-webkit-details-marker{display:none}
.qs summary:hover .q{color:var(--link)}
.cupico{position:relative;flex:none;width:40px;height:30px}
.cupico::before{content:"";position:absolute;left:4px;right:4px;bottom:2px;height:10px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px #8ED08B}
.cupico i{position:absolute;left:12px;top:0;width:16px;height:16px;border-radius:50%;background:var(--ball);box-shadow:inset 0 0 0 1.5px var(--ink);transition:transform .35s cubic-bezier(.5,-0.4,.5,1.4)}
.qs details[open] .cupico i{transform:translateY(12px) scale(.75)}
.qs .a{padding:0 0 18px;max-width:70ch}

/* tee-box CTA */
.tee{position:relative;background:linear-gradient(180deg,var(--night),#0D3336);color:#EAF0EA;padding:46px 0 56px;overflow:hidden}
.tee::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:repeating-linear-gradient(90deg,var(--turf) 0 34px,var(--turf-l) 34px 68px)}
.tee-in{max-width:1240px;margin:0 auto;padding:0 16px;display:grid;gap:22px;align-items:center}
@media (min-width:700px){.tee-in{padding:0 28px}}
.tee-art{position:relative;width:70px;height:92px}
.tb{position:absolute;left:5px;top:0;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.8),transparent 36%),radial-gradient(circle,rgba(15,27,31,.16) 1.8px,transparent 2.3px) 0 0/9px 9px,var(--ball);box-shadow:0 0 30px 4px rgba(229,242,60,.25)}
.tpeg{position:absolute;left:23px;top:56px;width:24px;height:36px;background:#F4F6F0;clip-path:polygon(0 0,100% 0,62% 22%,56% 100%,44% 100%,38% 22%)}
.tee-t{margin:0 0 8px;font:700 clamp(28px,3.4vw,38px)/1.1 var(--fd);color:#fff}
.tee-p{margin:0 0 8px;font-size:17.5px;color:var(--mist);max-width:62ch}
.tee-s{margin:0;font:500 13.5px/1.5 var(--fm);color:var(--mist-2)}
.tee .btn-ball{box-shadow:0 5px 0 var(--ball-d)}
@media (min-width:860px){.tee-in{grid-template-columns:auto minmax(0,1fr) auto;gap:36px}}

/* related: yardage pages */
.rel{padding:52px 0 60px}
.rel-h{margin:0 0 22px;font:italic 800 clamp(34px,4vw,48px)/1 var(--fd)}
.yps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:16px}
.yps li{flex:1 1 300px;min-width:0}
.yp{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr);gap:16px;align-items:start;height:100%;padding:16px 16px 18px;background:var(--sheet);border:2px solid var(--ink);border-radius:12px;color:var(--ink);text-decoration:none;transition:transform .18s,box-shadow .18s}
.yp:hover{transform:translate(-2px,-3px);box-shadow:6px 7px 0 var(--turf)}
.ymap{width:60px;height:auto;border-radius:6px}
.yp-t strong{display:block;margin:0 0 6px;font:700 22px/1.15 var(--fd)}
.yp-t span{display:block;font-size:16px;line-height:1.55;color:var(--ink-2)}
.yp-go{position:absolute;right:14px;top:14px;width:0;height:0;border-left:11px solid var(--flag);border-top:5px solid transparent;border-bottom:5px solid transparent}

/* footer: night turf */
.ftr{background:var(--night-2);color:var(--mist)}
.ftr-g{display:grid;gap:30px;padding:40px 0 30px}
.ftr .brand{color:#fff}
.ftr .tag{color:var(--mist-2);text-transform:none;letter-spacing:.02em}
.disc{margin:16px 0 0;font-size:16px;line-height:1.65;max-width:54ch}
.ftr h2{margin:0 0 8px;font:500 12.5px/1.3 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--ball)}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr ul a{display:inline-flex;align-items:center;min-height:44px;color:#EAF0EA;text-decoration:none;font-size:16.5px}
.ftr ul a:hover{color:var(--ball);text-decoration:underline}
.ftr-bot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:18px 0 26px;border-top:1px solid rgba(234,240,234,.16)}
.age{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 3px var(--ball);color:var(--ball);font:800 19px/1 var(--fd)}
.ftr-c{font:500 13.5px/1.4 var(--fm);color:var(--mist-2)}
.ftr .lsw{margin-left:auto}
.ftr .lsw a{color:#EAF0EA;border-color:rgba(234,240,234,.4)}
.ftr .lsw a[aria-current=true]{background:var(--ball);color:var(--ink);border-color:var(--ball)}
@media (min-width:760px){.ftr-g{grid-template-columns:1.5fr 1fr 1fr;gap:44px;padding:52px 0 36px}}

/* 404 */
.nf{padding-top:60px;padding-bottom:80px;max-width:760px}
.nf-n{margin:0;font:italic 800 clamp(96px,18vw,180px)/.9 var(--fd);color:var(--turf)}
.nf h1{font:700 clamp(34px,5vw,54px)/1.1 var(--fd);margin:10px 0 12px}
.nf p{margin:0 0 26px}

:lang(en) .hole-h,:lang(en) .range h1,:lang(en) .cover h1{letter-spacing:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}