/* Tee Tarik guide.
   Layout idea: a pocket yardage book. The scorecard strip is the navigation; each hole is one page of the book, photo on
   the left, plan on the right. 60-30-10: paper carries the page, navy is structure, copper marks only what you tap.
   Gold and red on the photos are data (the shot and the danger), never interface. Single light theme by choice. */
:root {
  --paper: #F6F7F9;
  --white: #FFFFFF;
  --navy: #10213D;
  --navy-deep: #0A1628;
  --ink: #10213D;
  --muted: #4E5A6E;
  --mist: #B9C2D3;
  --line: rgb(16 33 61 / .13);
  --copper: #D39A62;
  --copper-ink: #8A5226;
  --gold: #F2C14E;
  --hazard: #E8432E;
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --script: "Fraunces", Georgia, serif;
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
* { box-sizing: border-box; }
/* The hidden attribute must win over any class that sets display (.course is a grid): the course search and the links that
   open on a date rely on it. publish.py fails without this rule. */
[hidden] { display: none !important; }
html { background: var(--navy-deep); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 var(--body); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--copper-ink); text-underline-offset: .18em; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.02; letter-spacing: .005em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; border-radius: 2px; }
.g { padding-left: var(--gut-l); padding-right: var(--gut-r); }
.in { max-width: 1160px; margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .875rem; line-height: 1.45; }

/* Preview strip and top bar */
.pv { background: var(--navy-deep); color: var(--mist); font-size: .8125rem; }
.pv .in { padding-block: 6px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 20; background: var(--navy); }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 15; background: var(--navy); color: var(--white); }
.bar .in { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 10px; }
.brand { font: 400 1.5rem/1 var(--display); letter-spacing: .02em; color: var(--white); text-decoration: none; white-space: nowrap; }
.brand i { font: italic 500 1.0625rem/1 var(--script); color: var(--mist); margin-left: .3em; letter-spacing: 0; }
.bar nav { display: flex; gap: 18px; align-items: center; font-size: .9375rem; }
.bar nav a { color: var(--white); text-decoration: none; padding-block: 6px; white-space: nowrap; }
.bar nav a:hover { text-decoration: underline; }

/* Buttons: the only copper on the page */
.btn { display: inline-block; padding: 13px 20px; border-radius: 10px; border: 0; background: var(--copper); color: var(--navy-deep); font: 700 1.0625rem/1.2 var(--body); text-decoration: none; cursor: pointer; }
.btn:hover { background: #E0AC78; }
.btn--lift { box-shadow: 0 14px 28px -12px rgb(211 154 98 / .75), 0 2px 5px rgb(10 22 40 / .3); }
.btn--quiet { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgb(16 33 61 / .35); }
.btn--quiet:hover { background: var(--white); }
.on-navy .btn--quiet { color: var(--white); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .45); }
.on-navy .btn--quiet:hover { background: rgb(255 255 255 / .08); }
.linkbtn { background: none; border: 0; padding: 4px 0; font: inherit; font-size: .875rem; color: var(--muted); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* Crumbs */
.crumbs { font-size: .875rem; padding-block: 12px 0; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--mist); }
.crumbs a { color: var(--muted); }
.on-navy .crumbs, .on-navy .crumbs a { color: var(--mist); }

/* Home hero: photo at the back, words in the middle, the finder in front */
.hero { position: relative; background: var(--navy-deep); color: var(--white); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% 45%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgb(10 22 40 / .94) 0%, rgb(10 22 40 / .8) 42%, rgb(10 22 40 / .25) 100%); }
.hero .in { position: relative; z-index: 1; padding-block: clamp(48px, 9vw, 112px) clamp(72px, 11vw, 136px); display: grid; gap: 20px; }
.hero h1 { font-size: clamp(2.75rem, 7.2vw, 5.75rem); max-width: 12em; }
.hero__lede { font-size: 1.1875rem; max-width: 30em; color: rgb(255 255 255 / .88); }
.finder { display: flex; gap: 8px; max-width: 34rem; margin-top: 6px; }
.finder input { flex: 1; min-width: 0; padding: 13px 14px; border-radius: 10px; border: 0; font: 400 1.0625rem/1.2 var(--body); color: var(--ink); background: var(--white); }
.hero__now { margin-top: -8px; font-size: 1rem; color: rgb(255 255 255 / .88); }
.hero__now a { display: inline-block; padding: 10px 0; color: var(--copper); font-weight: 700; }
#courses { scroll-margin-top: 28px; }     /* the search and the header link land here; keeps the heading clear of the sticky bar */
.hero__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9375rem; color: var(--mist); }

/* Sections */
.sec { padding-block: clamp(44px, 7vw, 88px); }
.sec--white { background: var(--white); border-block: 1px solid var(--line); }
.sec--navy { background: var(--navy); color: var(--white); }
.sec__head { display: grid; gap: 8px; margin-bottom: 22px; }
.sec__head p { max-width: 42em; color: var(--muted); }
.sec--navy .sec__head p { color: rgb(255 255 255 / .82); }
.lift { margin-top: clamp(-72px, -6vw, -40px); position: relative; z-index: 2; }   /* one thing breaks the section edge */

/* Course cards */
.courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.course { background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.course a { color: inherit; text-decoration: none; display: contents; }
.course img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; background: var(--navy); }
.course__txt { padding: 14px 16px 16px; display: grid; gap: 4px; align-content: start; }
.course h3 { font-size: 1.5rem; }
.course a:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.course__meta { font-size: .9375rem; color: var(--muted); }

/* Driver tool */
.drv { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: clamp(18px, 3vw, 28px); display: grid; gap: 16px; box-shadow: 0 24px 48px -32px rgb(10 22 40 / .45); color: var(--ink); }
.drv h2, .drv h3 { font-size: clamp(1.75rem, 3.4vw, 2.25rem); }
.drv__ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; }
.drv__ctl label { grid-column: 1 / -1; font-weight: 700; }
.drv input[type=range] { width: 100%; accent-color: var(--copper-ink); height: 28px; }
.drv output { font: 400 2rem/1 var(--display); min-width: 4.2ch; text-align: right; font-variant-numeric: tabular-nums; }
.drv select { padding: 8px 10px; border-radius: 8px; border: 1.5px solid rgb(16 33 61 / .4); font: inherit; background: var(--white); color: var(--ink); }
.drv__tee { display: flex; gap: 10px; align-items: center; font-size: .9375rem; }
.drv__sum { font-size: 1.125rem; }
.drv__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-top: 10px; }
.drv__list a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.drv__list a:hover { border-color: var(--navy); }
.drv__list span { font-size: .875rem; color: var(--muted); }
.drv__more, .drv__note { font-size: .875rem; color: var(--muted); }

/* Course header */
.chead { position: relative; background: var(--navy-deep); color: var(--white); overflow: hidden; }
.chead__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 22 40 / .72), rgb(10 22 40 / .9)); }
.chead .in { position: relative; z-index: 1; padding-block: 4px clamp(64px, 9vw, 112px); display: grid; gap: 16px; }
.chead h1 { font-size: clamp(2.5rem, 6.4vw, 4.75rem); max-width: 14em; }
.chead__lede { max-width: 34em; color: rgb(255 255 255 / .88); font-size: 1.125rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 5px 12px; border-radius: 999px; font-size: .9375rem; font-variant-numeric: tabular-nums; border: 1px solid var(--line); background: var(--white); }
.on-navy .chips li { background: none; border-color: rgb(185 194 211 / .4); }
.chips .hard { background: var(--navy); color: var(--white); border-color: var(--navy); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.share { margin-top: 16px; }
.wa-note { font-size: .875rem; opacity: .72; }
.film { margin-top: 14px; font-size: .9375rem; }
.film a { color: var(--white); text-underline-offset: .18em; }

/* Scorecard */
.sc-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px -32px rgb(10 22 40 / .45); }
.sc { border-collapse: collapse; width: 100%; min-width: 760px; text-align: center; font-variant-numeric: tabular-nums; }
.sc caption { text-align: left; padding: 12px 16px 2px; font-size: .875rem; color: var(--muted); }
.sc th, .sc td { padding: 9px 5px; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.sc tbody tr:last-child > * { border-bottom: 0; }
.sc th[scope=row] { text-align: left; padding-left: 16px; color: var(--muted); font-weight: 700; white-space: nowrap; position: sticky; left: 0; background: var(--white); }
.sc thead a { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 700; }
.sc thead a:hover { background: var(--navy); color: var(--white); }
.sc .tot { background: var(--paper); font-weight: 700; }
.sc .hard { font-weight: 700; color: var(--copper-ink); }

/* Facts list */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 28px; border-top: 2px solid var(--ink); }
.facts div { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.facts dt { font-size: .875rem; color: var(--muted); }
.facts dd { font-weight: 700; }
.facts a { color: inherit; }

/* Hole list */
.holes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.hc { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 10px; color: var(--ink); text-decoration: none; }
.hc:hover { border-color: var(--navy); }
.thumb { position: relative; width: 84px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: var(--navy); }
.thumb img, .thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb path { fill: none; stroke: var(--gold); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.thumb circle { fill: var(--hazard); }
.hc__n { font: 400 1.625rem/1 var(--display); }
.hc__meta { font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.hc__hook { font-weight: 700; margin-top: 4px; line-height: 1.3; }
.hc__q { font: italic 500 1rem/1.3 var(--script); color: var(--muted); }
.tag { display: inline-block; font-size: .75rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--muted); vertical-align: middle; margin-left: 6px; }

/* Hole page: scorecard strip, photo, plan */
.strip { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: calc(env(safe-area-inset-top, 0px) + 52px); z-index: 12; }
.strip ol { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 6px var(--gut-r) 6px var(--gut-l); max-width: 1160px; margin-inline: auto; scroll-snap-type: x proximity; }
.strip ol::-webkit-scrollbar { display: none; }
.strip a { display: grid; justify-items: center; gap: 1px; min-width: 46px; padding: 5px 4px 4px; border-radius: 8px; color: var(--ink); text-decoration: none; scroll-snap-align: center; font-variant-numeric: tabular-nums; }
.strip b { font: 400 1.125rem/1 var(--display); }
.strip span { font-size: .6875rem; color: var(--muted); }
.strip a:hover { background: var(--paper); }
.strip a[aria-current] { background: var(--navy); color: var(--white); }
.strip a[aria-current] span { color: var(--mist); }

.hole { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4.5vw, 64px); align-items: start; padding-block: 22px clamp(40px, 6vw, 72px); }
.shot { display: grid; gap: 8px; justify-items: center; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 122px); }
.frame { position: relative; height: min(calc(100svh - 190px), 820px); min-height: 460px; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 18px; overflow: hidden; background: var(--navy); box-shadow: 0 30px 60px -34px rgb(10 22 40 / .7); }
.frame img, .frame svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot__ctl { display: flex; gap: 18px; }
.ov { overflow: visible; }
.ov .aim, .ov .pre { fill: none; stroke: var(--gold); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgb(242 193 78 / .75)) drop-shadow(0 2px 3px rgb(0 0 0 / .5)); }
.ov .missmask { fill: none; stroke: #FFFFFF; stroke-width: 30; }
.ov .miss { fill: none; stroke: var(--hazard); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 30 22; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .5)); }
.ov .ring { fill: rgb(242 193 78 / .18); stroke: var(--gold); stroke-width: 7; filter: drop-shadow(0 0 8px rgb(242 193 78 / .8)); }
.ov .ring2 { fill: none; stroke: var(--gold); stroke-opacity: .8; stroke-width: 4; stroke-dasharray: 22 16; }
.ov .tee { fill: #FFFFFF; stroke: rgb(0 0 0 / .5); stroke-width: 4; }
.ov .gb { fill: rgb(232 67 46 / .14); stroke: var(--hazard); stroke-width: 5; }
.ov .flag line { stroke: #FFFFFF; stroke-width: 6; }
.ov .flag path { fill: var(--hazard); }
.ov .cd__bg { fill: rgb(10 22 40 / .9); }
.ov .cd__bar { fill: var(--gold); }
.ov .cd--hz .cd__bar { fill: var(--hazard); }
.ov .cd__t { font-family: var(--display); font-size: 62px; fill: #FFFFFF; letter-spacing: 1px; }
.ov .cd__n { font-family: var(--body); font-weight: 700; font-size: 26px; letter-spacing: .5px; fill: var(--gold); }
.ov .cd--hz .cd__n { fill: #FF9A88; }
.ov [opacity] { transition: opacity .3s ease; }

.plan { display: grid; gap: 18px; max-width: 36rem; }
.plan h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); }
.plan h1 small { display: block; font: 400 1rem/1.3 var(--body); color: var(--muted); margin-bottom: 6px; letter-spacing: 0; }
.hook { font: 400 clamp(1.625rem, 3vw, 2.125rem)/1.08 var(--display); }
.hook em { display: block; font: italic 500 clamp(1.375rem, 2.4vw, 1.75rem)/1.2 var(--script); color: var(--muted); margin-top: 6px; }
.steps { border-top: 2px solid var(--ink); }
.steps div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.steps dt { color: var(--muted); font-size: .9375rem; }
.steps dd { font-weight: 700; }
.prose { display: grid; gap: 10px; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font: 700 1.0625rem/1.35 var(--body); letter-spacing: 0; margin-top: 4px; }
.tees { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tees th, .tees td { text-align: left; padding: 6px 22px 6px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.tees th { color: var(--muted); font-weight: 400; }
.nextprev { display: flex; gap: 10px; flex-wrap: wrap; }
.nextprev .btn { flex: 1; text-align: center; white-space: nowrap; }

/* Pocket guide */
.pg { border-collapse: collapse; width: 100%; background: var(--white); font-size: .875rem; line-height: 1.3; }
.pg th, .pg td { border: 1px solid rgb(16 33 61 / .28); padding: 6px 8px; text-align: left; vertical-align: top; }
.pg thead th { background: var(--navy); color: var(--white); font-weight: 700; }
.pg td.c, .pg th.c { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg tfoot td { font-weight: 700; background: var(--paper); }
.pg-wrap { overflow-x: auto; }

/* Footer */
.foot { background: var(--navy-deep); color: var(--mist); font-size: .9375rem; }
.foot .in { padding-block: 32px 44px; display: grid; gap: 18px; }
.foot a { color: var(--white); }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 32px; }
.foot h2 { font: 700 .9375rem/1.3 var(--body); color: var(--white); margin-bottom: 6px; letter-spacing: 0; }
.foot li { padding: 2px 0; }
.foot__fine { font-size: .8125rem; line-height: 1.5; border-top: 1px solid rgb(185 194 211 / .2); padding-top: 14px; display: grid; gap: 4px; }

@media (max-width: 860px) {
  .bar nav a.opt { display: none; }
  .hero::after { background: linear-gradient(180deg, rgb(10 22 40 / .78), rgb(10 22 40 / .92)); }
  .finder { flex-direction: column; }
  /* phones: title and question first, then the photo, then the plan */
  .hole { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding-top: 14px; }
  .plan { display: contents; }
  .plan > h1 { order: 1; } .plan > .chips { order: 2; } .plan > .hook { order: 3; }
  .shot { position: static; order: 4; }
  .plan > * { order: 5; }
  .plan > h1, .plan > .chips, .plan > .hook { order: 1; }
  .frame { height: min(62svh, calc((100vw - 32px) * 16 / 9)); min-height: 0; width: auto; max-height: none; }
  .holes { grid-template-columns: 1fr; }
  .steps div { grid-template-columns: 6.25rem minmax(0, 1fr); }
  .nextprev { position: sticky; bottom: 0; z-index: 10; background: var(--paper); padding: 10px var(--gut-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gut-l); margin: 0 calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut-l)); border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .ov [opacity] { transition: none; } }
@media print {
  .pv, .bar, .foot, .crumbs, .noprint { display: none !important; }
  body { background: #fff; font-size: 9.5pt; }
  .sec { padding: 0; }
  .pg { font-size: 8.5pt; }
  .pg thead th { background: #fff; color: #000; border-bottom: 2px solid #000; }
  h1 { font-size: 20pt; }
}

.follow { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; font-size: .9375rem; }
.sc thead span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; color: var(--muted); font-weight: 700; }

/* Questions and answers (qa.py). The question is set in the body face: seven display headings in a row would shout. */
.qa { max-width: 46rem; display: grid; }
.qa__lead { font-family: var(--display); font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.02; margin-bottom: 22px; text-wrap: balance; }
.qa__item { display: grid; gap: 10px; padding: 20px 0; border-top: 1px solid var(--line); }
.qa__lead + .qa__item, .qa--hole .qa__item:first-child { border-top: 2px solid var(--ink); }
.qa__item h2 { font: 700 1.1875rem/1.3 var(--body); letter-spacing: 0; }
.qa__more { font-size: .9375rem; color: var(--muted); }
.qa--hole .qa__item { padding: 16px 0; gap: 8px; }
.qa--hole .qa__item h2 { font-size: 1.0625rem; }
.checked { font-size: .875rem; line-height: 1.45; color: var(--muted); padding-top: 14px; border-top: 1px solid var(--line); }
.qt-wrap { overflow-x: auto; }
.qt { border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 100%; }
.qt th, .qt td { text-align: left; padding: 8px 18px 8px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; vertical-align: top; }
.qt thead th { color: var(--muted); font-weight: 400; font-size: .875rem; white-space: nowrap; }
.qt tbody th { font-weight: 700; min-width: 6.5rem; }
.chead--q h1 { font-size: clamp(1.9rem, 4.6vw, 3.25rem); max-width: 20em; }
.chead--q .qa__item { border: 0; padding: 0; gap: 16px; }
.chead--q .chead__lede { max-width: 40em; }
.qbody { max-width: 52rem; display: grid; gap: 16px; }
.qbody h2 { font-size: 1.5rem; margin-top: 14px; }
.qlist { list-style: none; display: grid; border-top: 2px solid var(--ink); }
.qlist li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.qlist--links a { font-weight: 700; color: var(--ink); }