/* Tee to Wall: shared styles (2026-09-26, the scorecard look). A white score card on kraft paper: the card's
   printed green, grid-ruled tables, perforations between sections, and a pencil for the hand-written bits.
   Square corners, no shadows, no gradients, no hover motion (tools/audit.py checks these). */
:root{
  --kraft:#B69C78; --card:#FDFDF9; --ink:#1F2622; --muted:#555D58; --pencil:#474A4C;
  --green:#1B5E3F; --green-2:#15492F; --green-lt:#E3EFE7; --rule:#8FB39F; --perf:#A9B8AD;
  --on-green:#FFFFFF; --foot-text:#E8F1EB;
  /* older names the other pages' rules use */
  --paper:var(--card); --panel:#F7F9F6; --line:var(--rule); --sand:var(--green-lt); --gold:#B8862B; --gold-ink:var(--green);
  --num:"Oswald", "Arial Narrow", system-ui, sans-serif;
  --text:"Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hand:"Kalam", "Segoe Print", "Bradley Hand", cursive;
  --serif:var(--num); --sans:var(--text); --cond:var(--num);
  --wrap:1200px;
}
*{box-sizing:border-box}
html{scroll-padding-top:96px}
body{margin:0;background:var(--kraft) url("/tex/kraft.jpg") center/512px;color:var(--ink);font:400 17px/1.6 var(--text);-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--green)}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
h1,h2,h3{font-family:var(--num);font-weight:600;line-height:1.04;margin:0;letter-spacing:0}
h1{font-size:clamp(48px,6.4vw,88px);color:var(--green)}
h2{font-size:clamp(34px,4.2vw,52px);color:var(--green)}
h3{font-size:24px;font-weight:500}
p{margin:0}
.lede{font-size:19px;color:var(--ink);max-width:36em}
.muted{color:var(--muted)}
.eyebrow{font-family:var(--num);font-weight:500;font-size:17px;color:var(--muted)}
.hand{font-family:var(--hand);color:var(--pencil);font-size:18px;line-height:1.25}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the card everything sits on */
.card{max-width:var(--wrap);margin:30px auto;background:var(--card) url("/tex/card.jpg") center/800px;border:1px solid #8C7656;overflow:clip}
.wrap{padding:0 44px}
@media (max-width:900px){ .card{margin:0;border:0} .wrap{padding:0 16px} }

/* header: the card's top row, links as tabs */
.site-head{position:sticky;top:0;z-index:10;background:var(--card);border-bottom:3px solid var(--green)}
.site-head .wrap{display:flex;align-items:stretch;padding:0;min-height:84px}
.brand{display:flex;align-items:center;gap:14px;padding:12px 26px;text-decoration:none;color:var(--ink);border-right:2px solid var(--green)}
.brand svg{width:60px;height:60px;flex:none}
.brand b{display:block;font-family:var(--num);font-weight:700;font-size:30px;line-height:1;color:var(--green)}
.brand small{display:block;font-size:13.5px;color:var(--muted);margin-top:4px}
.site-head nav{display:flex;flex:1}
.site-head nav a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:0 12px;border-left:1px solid var(--rule);color:var(--ink);text-decoration:none;font-weight:600;font-size:16px}
.site-head nav a:first-child{border-left:0}
.site-head nav a:hover,.site-head nav a[aria-current]{background:var(--green-lt)}
.site-head .go{display:flex;align-items:center;justify-content:center;padding:0 28px;background:var(--green);color:var(--on-green);text-decoration:none;font-family:var(--num);font-weight:500;font-size:21px}
.site-head .go:hover{background:var(--green-2);color:var(--on-green)}
.site-head nav a{white-space:nowrap}
/* the survey seal beside the name (2026-10-05; 55 px narrower than the T2W mark it replaced): six tabs on
   one row down to 1001 px, the tagline from 1221 px */
@media (max-width:1220px){ .brand small{display:none} }
@media (max-width:1130px){ .site-head nav a{padding:0 9px;font-size:14.5px} .site-head .go{padding:0 20px} .brand svg{width:54px;height:54px} }
@media (max-width:1000px){
  .site-head{position:static}
  .site-head .wrap{flex-wrap:wrap}
  .brand{border-right:0;padding:12px 16px;flex:1 1 auto}
  .brand svg{width:54px;height:54px}
  .brand b{font-size:26px}
  .site-head .go{padding:0 18px;font-size:18px}
  .site-head nav{order:3;flex:1 1 100%;border-top:1px solid var(--rule);overflow-x:auto}
  .site-head nav a{flex:1 0 auto;justify-content:center;padding:12px 12px;border-left:0;border-right:1px solid var(--rule)}
  .site-head nav a:last-child{border-right:0}
}
/* phones: the six tabs as a grid of two rows of three, like the card's own grid (no hidden tab off the edge) */
@media (max-width:600px){
  .site-head nav{flex-wrap:wrap}
  .site-head nav a{flex:1 1 33%;padding:11px 6px;border-bottom:1px solid var(--rule)}
  .site-head nav a:nth-child(3n){border-right:0}
  .site-head nav a:nth-last-child(-n+3){border-bottom:0}
}
@media (max-width:440px){ .site-head nav a{padding:11px 6px;font-size:14px} .brand{gap:10px;padding:10px 12px} .brand svg{width:44px;height:44px} .brand b{font-size:23px} .site-head .go{padding:0 14px;font-size:17px} }

/* buttons */
.btn{display:inline-block;padding:13px 20px;font:500 18px/1 var(--num);text-decoration:none;border:2px solid var(--green);color:var(--green);background:transparent;cursor:pointer}
.btn:hover{background:var(--green-lt);color:var(--green)}
.btn.primary{background:var(--green);color:var(--on-green)}
.btn.primary:hover{background:var(--green-2);color:var(--on-green)}
.btn.small{padding:9px 14px;font-size:16px}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* image with a placeholder until it loads */
.ph{position:relative;background:var(--green-lt);margin:0;display:block}
.print-img{border:1px solid #D8D6CC;background:#F3F1E8}
.ph img{opacity:0}
.ph.ok img{opacity:1}
.ph.ok{background:transparent}
@media (prefers-reduced-motion: no-preference){
  .ph:not(.ok){animation:pulse 1.3s ease-in-out infinite}
  @keyframes pulse{50%{background:#CFE1D5}}
}
figcaption{font-size:14px;color:var(--muted);margin-top:10px}

/* sections: panels of the card, torn along a perforation */
section{padding:60px 0;position:relative}
section + section{border-top:2px dashed var(--perf)}
section + section::before,section + section::after{content:"";position:absolute;top:-9px;width:16px;height:16px;border-radius:50%;background:var(--kraft)}
section + section::before{left:-9px}
section + section::after{right:-9px}
.head{display:grid;gap:12px;margin-bottom:32px;max-width:780px}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 30px;margin-bottom:26px}
@media (max-width:900px){ section{padding:40px 0} section + section::before,section + section::after{display:none} }

/* the scorecard grid */
table{border-collapse:collapse;width:100%}
.sc{font-size:16px}
.sc th,.sc td{border:1px solid var(--rule);padding:9px 10px;text-align:center;vertical-align:middle}
.sc thead th{background:var(--green);color:var(--on-green);font-family:var(--num);font-weight:500;font-size:16px;border-color:#2C7452}
.sc .l{text-align:left}
.sc td.num{font-family:var(--num);font-size:22px;font-weight:500}
.score{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;font-family:var(--hand);font-size:25px;color:var(--pencil);line-height:1}
.score svg{position:absolute;inset:-4px;width:52px;height:52px}
.sc caption{caption-side:bottom;text-align:left;font-size:14.5px;color:var(--muted);padding-top:8px}

/* hero */
.hero{padding:52px 0 60px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.hero h1{margin-bottom:22px}
.hero .cta{margin:28px 0 12px}
.hero .note{font-size:15px;color:var(--muted)}
.hero .mini{margin-top:30px}
.hero-print{margin:0}
@media (max-width:900px){ .hero{padding:32px 0 40px} .hero .wrap{grid-template-columns:1fr;gap:32px} }

/* where the map comes from: the layer stack (layers.js) */
.ttw-layers{margin:0}
.ttw-layers .ttw-fallback{display:block;width:100%;max-width:420px;height:auto;border:1px solid var(--rule)}
.ttw-layers.is-live .ttw-fallback{display:none}
.ttw-layers__wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px 40px;align-items:center}
.ttw-layers__stage{position:relative;perspective:2200px;perspective-origin:50% 20%;display:flex;align-items:center;justify-content:center;overflow:visible}
.ttw-layers__stack{position:relative;transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(-38deg);margin-top:42%}
.ttw-layers__sheet{position:absolute;inset:0;transform:translateZ(calc(var(--i) * var(--gap, 0px)));outline:1px solid rgba(31,38,34,.3);backface-visibility:hidden}
@media (prefers-reduced-motion: no-preference){ .ttw-layers__sheet{transition:opacity .25s ease} }
.ttw-layers__sheet.is-base{background:var(--card);outline-color:rgba(31,38,34,.5)}
.ttw-layers__stack.is-apart .ttw-layers__sheet:not(.is-base){background:rgba(253,253,249,.12)}
.ttw-layers__sheet img,.ttw-layers__sheet svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ttw-layers__sheet.is-dim{opacity:.12}
.ttw-layers__sheet.is-pick{outline:2px solid var(--ink)}
.ttw-layers__num{position:absolute;left:-1px;bottom:-1px;transform:translateY(100%);font:600 12px/1 var(--text);color:var(--on-green);background:var(--green);padding:3px 6px}
.ttw-layers__stack:not(.is-apart) .ttw-layers__num{opacity:0}
.ttw-layers__sheet svg .shot{stroke:var(--gold);stroke-width:3;stroke-dasharray:9 6}
.ttw-layers__sheet svg .tee{fill:var(--card);stroke:var(--ink);stroke-width:2.5}
.ttw-layers__sheet svg .pole{stroke:var(--ink);stroke-width:2.5}
.ttw-layers__sheet svg .pennant{fill:#B3372B}
.ttw-layers__sheet svg .cup{fill:var(--ink)}
.ttw-layers__sheet svg .yds{font:600 22px var(--text);fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:5px}
.ttw-layers__sheet svg .north path{fill:var(--ink)}
.ttw-layers__sheet svg .north text,.ttw-layers__sheet svg .scale text{font:600 17px var(--text);fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:var(--card);stroke-width:4px}
.ttw-layers__sheet svg .scale .on{fill:var(--ink)}
.ttw-layers__sheet svg .scale .off{fill:var(--card);stroke:var(--ink);stroke-width:1.5}
.ttw-layers__ctl{display:block;font:500 15px/1.3 var(--text);color:var(--muted);margin-bottom:12px}
.ttw-range{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;cursor:pointer}
.ttw-range::-webkit-slider-runnable-track{height:2px;background:var(--green)}
.ttw-range::-moz-range-track{height:2px;background:var(--green)}
.ttw-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-7px;background:var(--card);border:2px solid var(--green);border-radius:50%}
.ttw-range::-moz-range-thumb{width:13px;height:13px;background:var(--card);border:2px solid var(--green);border-radius:50%}
.ttw-layers__legend{list-style:none;margin:0;padding:0;border:1px solid var(--rule)}
.ttw-layers__legend li + li{border-top:1px solid var(--rule)}
.ttw-layers__legend button{appearance:none;background:none;border:0;width:100%;text-align:left;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:9px 12px;cursor:pointer;color:var(--ink);font:inherit}
.ttw-layers__legend .n{font:500 17px/1 var(--num);width:30px;height:30px;display:inline-grid;place-items:center;border:1px solid var(--green);color:var(--green)}
.ttw-layers__legend .nm{display:block;font-weight:600;font-size:16px;line-height:1.3}
.ttw-layers__legend .src{display:block;font-size:14.5px;color:var(--muted)}
.ttw-layers__legend button[aria-pressed="true"],.ttw-layers__legend button:hover{background:var(--green-lt)}
.ttw-layers__legend button[aria-pressed="true"] .n{background:var(--green);color:var(--on-green)}
.ttw-layers__legend button:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.ttw-layers figcaption{margin-top:18px;font-size:15px}
@media (max-width:760px){ .ttw-layers__wrap{grid-template-columns:1fr} }
.gis{margin-top:26px;font-size:17px;max-width:44em}

/* sample prints: two across, each with its scorecard row */
.prints{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 44px}
.hole{margin:0}
.hole .row{display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;margin-top:14px;border:1px solid var(--rule);padding:8px 12px 8px 8px;background:rgba(255,255,255,.7);color:var(--ink);font-size:16px}
.hole-icon{width:58px;height:96px;display:block;background:var(--green-lt)}
.hole h3{font-size:24px;color:var(--ink)}
.hole .meta{font-size:15px;color:var(--muted)}
.hole .meta b{font-family:var(--num);font-weight:500;font-size:17px;color:var(--ink)}
.hole .hand{display:block;margin-top:2px;font-size:16.5px}
@media (max-width:760px){ .prints{grid-template-columns:1fr;gap:34px} }
.gallery-link{margin:40px 0 0}

/* how it works (a scorecard table) */
.how td.l p{font-size:15.5px;color:var(--muted);margin-top:2px}
.how td.l b{font-weight:600}
.how{max-width:980px}
@media (max-width:640px){ .sc th,.sc td{padding:8px 6px} .sc .hide-s{display:none} }

/* price list (tools/prices_table.py writes the table and notes; they look like the card's grid) */
table.price2 th,table.price2 td{border:1px solid var(--rule);padding:12px 12px;text-align:left;vertical-align:middle}
table.price2 thead th{background:var(--green);color:var(--on-green);font-family:var(--num);font-weight:500;font-size:16px;border-color:#2C7452;white-space:nowrap}
.price2 th:not(:first-child),.price2 td:not(:first-child){text-align:center}
.price2 td:not(:first-child){font-family:var(--num);font-weight:500;font-size:26px;white-space:nowrap}
.price2 tbody tr:first-child td{background:var(--green-lt)}
.price2 td small{display:block;font-family:var(--text);font-weight:400;font-size:14px;color:var(--muted);white-space:normal}
.price2 td.soon{font-family:var(--text);font-weight:500;font-size:15px;color:var(--muted)}
.price-notes{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--rule);border-top:0}
.price-notes li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 12px;border-top:1px solid var(--rule);font-size:16px}
.price-notes b{font-family:var(--num);font-weight:500;font-size:22px;white-space:nowrap}
.price-notes small{display:block;color:var(--muted);font-size:14px}
.promise-line{border:2px solid var(--green);padding:12px 14px;font-weight:600;color:var(--green);max-width:640px}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:52px}
@media (max-width:860px){ .two-col{grid-template-columns:1fr;gap:28px} }

/* questions */
.faq{max-width:840px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:16px 0;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--num);font-size:26px;line-height:1;color:var(--green)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--muted);padding:0 0 18px;max-width:68ch}

/* ordered steps (thanks page) */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;max-width:820px}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--rule)}
.steps li:first-child{border-top:0}
.steps li::before{content:counter(s);font-family:var(--num);font-weight:500;font-size:30px;color:var(--green);line-height:1}
.steps h3{font-size:22px;margin-bottom:6px}
.steps p{color:var(--muted)}

/* plain tables elsewhere */
.plain th,.plain td{text-align:left;padding:12px 12px 12px 0;border-top:1px solid var(--rule);vertical-align:top}
.plain thead th{font-family:var(--num);font-weight:500;font-size:15px;color:var(--muted);border-top:0;padding-bottom:10px}

/* forms */
form.of{display:grid;gap:14px}
.of label{display:grid;gap:6px;font-weight:600;font-size:15px}
.of .hint{font-weight:400;color:var(--muted)}
.of input,.of select,.of textarea{font:inherit;color:inherit;border:1px solid var(--ink);background:#FFFFFF;padding:12px;width:100%;border-radius:0}
.of textarea{min-height:120px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){ .grid2{grid-template-columns:1fr} }
.status{min-height:1.5em;font-weight:500}

/* footer: the card's green foot */
.site-foot{background:var(--green);color:var(--foot-text);padding:36px 0 calc(38px + env(safe-area-inset-bottom));font-size:15px}
.site-foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.site-foot .wordmark{font-family:var(--num);font-weight:700;color:#FFFFFF;text-decoration:none}
.site-foot .seal{display:block;width:128px;margin:0 0 4px}
.site-foot .seal svg{display:block;width:100%;height:auto}
.site-foot h4{font-family:var(--num);font-weight:500;font-size:19px;color:#FFFFFF;margin:0 0 8px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.site-foot a{color:#FFFFFF}
.site-foot a:hover{color:var(--foot-text)}
.site-foot .small{color:var(--foot-text);font-size:14px;margin-top:10px}
.site-foot :focus-visible{outline-color:#FFFFFF}
@media (max-width:760px){ .site-foot .wrap{grid-template-columns:1fr} }

/* long-form legal pages */
.doc{max-width:780px;padding:48px 0 70px}
.doc h1{font-size:clamp(36px,5vw,54px);margin-bottom:8px}
.doc h2{font-size:28px;margin:40px 0 10px}
.doc p,.doc li{max-width:70ch}
.doc p+p{margin-top:12px}
.doc ul{padding-left:22px}
.doc li{margin:6px 0}
.doc .updated{color:var(--muted);margin-bottom:28px}

/* gallery: each hole as a pair, 3D render beside watercolor */
.gallery-intro{padding-bottom:28px}
.gallery-intro .head{margin-bottom:0}
.gallery-intro h1{font-size:clamp(40px,5.4vw,66px)}
.hole-pair{padding:48px 0}
.pair-head{display:grid;gap:8px;margin-bottom:24px}
.pair-head h2{font-size:clamp(28px,3.2vw,38px)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.pair figure{margin:0}
.pair figcaption{font-family:var(--num);font-weight:500;font-size:16px;color:var(--ink)}
@media (max-width:640px){ .pair{grid-template-columns:1fr;gap:26px} }

/* gallery: the 3D print's art finishes (coming soon: no price, no order button), three per hole */
.finishes .head{margin-bottom:8px}
.finish-hole{padding:34px 0 0}
.finish-hole + .finish-hole{margin-top:34px;border-top:1px solid var(--rule)}
.finish-hole h3{font-size:clamp(22px,2.4vw,27px);margin-bottom:18px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.trio figure{margin:0}
.trio figcaption{font-family:var(--num);font-weight:500;font-size:16px;color:var(--ink)}
@media (max-width:640px){ .trio{gap:10px} .trio figcaption{font-size:13px} }
/* the home page's trio framed in a room (tools/wall_mockup.py), the full width under the three sheets */
.wall{margin:36px 0 0}
.wall img{width:100%}
@media (max-width:640px){ .wall{margin-top:24px} }

/* for courses (for-courses.html): the course maps, a picture beside its words */
.course-intro{padding-bottom:44px}
.course-intro .head{margin-bottom:0}
.course-intro h1{font-size:clamp(40px,5.4vw,66px)}
.course-intro .cta{margin-top:26px}
.course-fig{margin:0}
.course-split{align-items:start}
.course-split p + p{margin-top:12px}
.course-split .page-fig{max-width:440px;width:100%;justify-self:center}
.course-flip{grid-template-columns:.9fr 1.1fr}
.what{max-width:640px}
.what td.l{font-size:15.5px;line-height:1.45}
.what td.l:first-child{font-weight:600}
.course-note{margin-top:14px;font-size:15px}
.cutout-fig{margin:0;max-width:320px;width:100%;justify-self:center}
/* the routing map turning: a video under the poster, the poster's width */
.turn-fig{margin-top:28px}
.turn-fig video{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9}
@media (max-width:860px){ .course-flip{grid-template-columns:1fr} .course-flip .course-fig{order:2} }
/* the course guide's phone screen; the grounds report's pages, three across (one above the other on phones) */
.phone-fig{margin:0;max-width:300px;width:100%;justify-self:center}
.report-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.report-pages figure{margin:0}
.report-pages figcaption{font-family:var(--num);font-weight:500;font-size:16px;color:var(--ink)}
.report-body{margin-top:34px}
@media (max-width:640px){ .report-pages{grid-template-columns:1fr;gap:26px;justify-items:center} .report-pages figure{max-width:400px;width:100%} }

.notice-bar{background:#F3E6C4;color:#5C4712;border-bottom:1px solid var(--rule);padding:12px 0;font-size:16px}

/* thanks page */
.thanks .orderref{display:grid;gap:4px;margin:18px 0 8px}
.thanks .orderref b{font-family:var(--num);font-weight:600;font-size:30px;letter-spacing:.04em}
.paystate{border:1px solid var(--ink);background:var(--panel);padding:16px 18px;margin:18px 0 8px;max-width:640px;display:grid;gap:10px}
.paystate .ok b{color:var(--green)}
.skel-line{display:block;height:14px;background:var(--green-lt);width:72%}
.skel-line.short{width:44%}
@media (prefers-reduced-motion: no-preference){ .skel-line{animation:pulse 1.2s ease-in-out infinite} }
.receipt-table td{padding:10px 12px 10px 0}
.receipt-table td.num{text-align:right;font-family:var(--num);font-weight:500;font-size:18px;white-space:nowrap}
.receipt-table tr.total td{border-top:1px solid var(--ink);font-weight:600}
.thanks .steps{margin-top:8px}
.thanks .promise-line{margin-top:22px}
.thanks .block{margin-top:34px}
.thanks .block h2{margin-bottom:10px}

/* a value still to be filled in before a deploy (tools/audit.py fails while any is left) */
.todo{background:#F3E6C4;outline:1px dashed #8E6519}

/* the hole analysis (for-courses #analysis, courses.js): a hole played a thousand times, the crew's day, the bunker
   ledger. The pictures and numbers are the print app's, for a real course under a made-up name. */
.an-play{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:30px;align-items:start}
.an-stage{position:relative;margin:0;border:1px solid var(--rule);background:var(--green-lt)}
.an-stage img{display:block;width:100%;height:auto}
.an-canvas{position:absolute;left:0;top:0;pointer-events:none}
.an-side h3{font-size:24px;color:var(--ink);margin-bottom:10px}
.an-golfers{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.an-g{appearance:none;background:var(--card);border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:center;padding:10px 12px;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.an-g .sw{width:14px;height:14px;border-radius:50%}
.an-g b{display:block;font:500 17px/1.15 var(--num);color:var(--ink)}
.an-g small{display:block;font-size:13.5px;color:var(--muted);line-height:1.3}
.an-g[aria-pressed="true"]{background:var(--green-lt)}
.an-g[aria-pressed="true"] b{color:var(--green)}
.an-g:hover{background:var(--green-lt)}
.an-g:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.an-stats{width:100%;margin-top:18px}
.an-stats td.num{font-size:20px;width:30%}
.an-note{margin-top:10px;font-size:15px;color:var(--muted)}
.an-hazards{list-style:none;margin:14px 0 0;padding:0;font-size:15.5px}
.an-hazards li{padding:7px 0;border-bottom:1px solid var(--rule)}
.an-hazards b{font-family:var(--num);font-weight:500;color:var(--green);margin-right:4px}
.an-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:14px;color:var(--muted)}
.an-key span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:var(--k)}
.an-fallback{margin-top:12px}
.an-day{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:30px;align-items:start}
.an-day-stage{margin:0;border:1px solid var(--rule);background:var(--green-lt)}
.an-day-stage img{display:block;width:100%;height:auto}
.an-layers{display:grid;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.an-l{appearance:none;background:var(--card);border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 14px;text-align:left;cursor:pointer;color:var(--ink);font:500 17px/1.2 var(--num)}
.an-l[aria-pressed="true"]{background:var(--green);color:var(--on-green)}
.an-l:hover{background:var(--green-lt);color:var(--ink)}
.an-l[aria-pressed="true"]:hover{background:var(--green-2);color:var(--on-green)}
.an-l:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.an-day-cap{margin-top:14px;font-size:15.5px}
.an-ledger{width:100%}
.an-ledger td{vertical-align:middle}
.an-ledger td:first-child{white-space:nowrap}
.an-ledger .bar{display:block;height:12px;background:var(--green);min-width:2px}
.an-ledger .bar.rare{background:var(--rule)}
.an-ledger td.barcell{width:42%;text-align:left}
.an-ledger td.how{font-size:14.5px;text-align:left}
.an-checks{counter-reset:chk;list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.an-checks li{counter-increment:chk;display:grid;grid-template-columns:44px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--rule)}
.an-checks li::before{content:counter(chk);display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--green);color:var(--green);font:500 17px/1 var(--num)}
.an-plan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.an-plan > div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:18px 18px 20px;background:var(--card)}
.an-plan h3{font-size:22px;color:var(--green);margin-bottom:8px}
.an-plan p{font-size:15.5px}
.an-plan .when{font-family:var(--hand);color:var(--pencil);font-size:18px;margin-bottom:6px}
@media (max-width:900px){ .an-play,.an-day{grid-template-columns:1fr} .an-plan{grid-template-columns:1fr}
  /* a hole is tall: on a phone it fits the screen (the stage hugs the picture, so the dots stay on it) */
  .an-stage,.an-day-stage{width:fit-content;max-width:100%;margin:0 auto}
  .an-stage img,.an-day-stage img{width:auto;max-width:100%;max-height:70vh} }
@media (max-width:640px){ .an-ledger td.barcell{width:34%} .an-ledger .hide-s{display:none} }
/* the hole analysis's headline cells, the honest-limits column, the ask; the For courses index under the intro */
.an-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin:0 0 36px}
.an-facts > div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 16px 16px;background:var(--card)}
.an-facts i{display:block;font:500 15px/1 var(--num);font-style:normal;color:var(--muted);margin-bottom:8px}
.an-facts b{display:block;font:600 32px/1.05 var(--num);color:var(--green)}
.an-facts span{display:block;font-size:15px;line-height:1.4;color:var(--ink);margin-top:6px}
.an-honest h3{font-size:26px;color:var(--green);margin-bottom:10px}
.an-honest p + p{margin-top:12px}
.an-need{margin-top:22px}
.an-cta{margin-top:30px}
.an-ledger tr.gap td{color:var(--muted);font-size:14.5px;text-align:left;background:var(--panel)}
.course-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin-top:30px;max-width:900px}
.course-index a{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 14px;text-decoration:none;color:var(--ink);font:500 18px/1.15 var(--num);background:var(--card)}
.course-index a small{display:block;font:400 14px/1.35 var(--text);color:var(--muted);margin-top:4px}
.course-index a:hover{background:var(--green-lt);color:var(--ink)}
.course-index a.new{background:var(--green);color:var(--on-green)}
.course-index a.new small{color:var(--foot-text)}
.course-index a.new:hover{background:var(--green-2);color:var(--on-green)}
@media (max-width:900px){ .an-facts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .course-index{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .an-facts b{font-size:27px} .course-index a{padding:11px 10px;font-size:17px} }