/* Birdie Hills website: the game's "fine" look. Light glass panels, thin type, widely spaced small capitals, hairlines, line icons.
   System fonts only (the same stack as the game), no scripts, nothing loaded from other sites. */
:root {
  --bg-1: #f1f8f5; --bg-2: #fafcfa;
  --ink: #24485a; --soft: #4b6b7a; --faint: rgba(36, 72, 90, .6);
  --teal: #1f9e94; --teal-ink: #157a6e; --coral: #f2785c;
  --line: rgba(36, 72, 90, .13); --glass: rgba(255, 255, 255, .72); --glass-edge: rgba(255, 255, 255, .95);
  --shadow: 0 10px 30px rgba(30, 70, 90, .1); --shadow-lg: 0 18px 48px rgba(30, 70, 90, .16);
  --btn-bg: #24485a; --btn-ink: #ffffff; --btn-hover: #1b3947;
  /* the picture on the home page */
  --sky-1: #d9eef2; --sky-2: #fafcfa; --sun: #fbe3a0; --sun-glow: #fff1cb; --cloud: #ffffff;
  --hill-a: #d5e8d8; --hill-b: #bfddc9; --hill-c: #a6d0b6; --green: #c4ecd0; --green-edge: #9fd2b0;
  --water: #c3e3ec; --cartpath: #f4ecd9; --trunk: #9a7b66; --t1: #f1bb6c; --t2: #ea9a7e; --t3: #d97f6d; --pine: #6dbaa6; --pole: #24485a;
  --font: "Avenir Next", Avenir, "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-1: #1b2152; --bg-2: #11153a;
    --ink: #eef2ff; --soft: #bcc5ea; --faint: rgba(238, 242, 255, .6);
    --teal: #5ad7c8; --teal-ink: #86ead9; --coral: #ff8f75;
    --line: rgba(230, 236, 255, .15); --glass: rgba(30, 36, 80, .74); --glass-edge: rgba(230, 236, 255, .1);
    --shadow: 0 10px 30px rgba(0, 0, 0, .4); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
    --btn-bg: #eef2ff; --btn-ink: #24304f; --btn-hover: #ffffff;
    --sky-1: #2b3578; --sky-2: #151a46; --sun: #f6efcf; --sun-glow: #aab4ee; --cloud: #4a5598;
    --hill-a: #2c4f78; --hill-b: #276270; --hill-c: #1f7468; --green: #2f8f84; --green-edge: #36a395;
    --water: #356a99; --cartpath: #5a5f93; --trunk: #6d5a58; --t1: #c99a52; --t2: #c9806b; --t3: #b6665c; --pine: #3e9d8c; --pole: #eef2ff;
  }
}
:root[data-theme="dark"] {
  --bg-1: #1b2152; --bg-2: #11153a;
  --ink: #eef2ff; --soft: #bcc5ea; --faint: rgba(238, 242, 255, .6);
  --teal: #5ad7c8; --teal-ink: #86ead9; --coral: #ff8f75;
  --line: rgba(230, 236, 255, .15); --glass: rgba(30, 36, 80, .74); --glass-edge: rgba(230, 236, 255, .1);
  --shadow: 0 10px 30px rgba(0, 0, 0, .4); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
  --btn-bg: #eef2ff; --btn-ink: #24304f; --btn-hover: #ffffff;
  --sky-1: #2b3578; --sky-2: #151a46; --sun: #f6efcf; --sun-glow: #aab4ee; --cloud: #4a5598;
  --hill-a: #2c4f78; --hill-b: #276270; --hill-c: #1f7468; --green: #2f8f84; --green-edge: #36a395;
  --water: #356a99; --cartpath: #5a5f93; --trunk: #6d5a58; --t1: #c99a52; --t2: #c9806b; --t3: #b6665c; --pine: #3e9d8c; --pole: #eef2ff;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 400 17px/1.7 var(--font); font-synthesis: none;
  background: radial-gradient(1100px 600px at 85% -10%, rgba(31, 158, 148, .10), transparent 70%), linear-gradient(180deg, var(--bg-1), var(--bg-2) 520px) var(--bg-2);
  padding-left: max(22px, env(safe-area-inset-left, 0px)); padding-right: max(22px, env(safe-area-inset-right, 0px)); }
img, svg { max-width: 100%; }
a { color: var(--teal-ink); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--teal); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 8px; }
h1, h2, h3 { margin: 0; font-weight: 300; line-height: 1.12; text-wrap: balance; letter-spacing: -.005em; }
h1 { font-size: clamp(46px, 9vw, 104px); font-weight: 200; letter-spacing: -.02em; }
h2 { font-size: clamp(26px, 3.6vw, 38px); }
h3 { font-size: 20px; }
p { margin: 0 0 1.1em; }
strong { font-weight: 600; }
.skip { position: absolute; left: -999px; top: 10px; background: var(--btn-bg); color: var(--btn-ink); padding: 10px 18px; border-radius: 999px; z-index: 10; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.skip:focus { left: 10px; }

/* the small spaced capitals the game uses for labels */
.caps, .eyebrow, nav a, .label, .facts th, .foot .small, .button, .faq summary small { font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.eyebrow { display: inline-block; margin: 0 0 22px; font-size: 12px; line-height: 1; color: var(--teal-ink); }
.eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 14px; }

.top, main, .foot { max-width: 1040px; margin-left: auto; margin-right: auto; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 30px 0 10px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-size: 25px; font-weight: 300; line-height: 1; letter-spacing: .01em; }
.brand .ico { width: 26px; height: 26px; color: var(--teal); }
.brand:hover { color: var(--ink); }
nav { display: flex; flex-wrap: wrap; gap: 4px 6px; }
nav a { text-decoration: none; color: var(--soft); font-size: 11.5px; line-height: 1; padding: 16px 13px 14px; border-bottom: 1px solid transparent; }
nav a:hover { color: var(--ink); }
nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--teal); }
.ico { width: 28px; height: 28px; flex: none; }

main { padding: 0 0 72px; }
.hero { padding: 64px 0 8px; display: grid; gap: 56px; }
.hero h1 { margin-bottom: 26px; font-size: clamp(56px, 10vw, 112px); }
.lead { font-size: clamp(20px, 2.4vw, 25px); line-height: 1.55; font-weight: 300; color: var(--soft); max-width: 31em; margin: 0; }
.status { margin: 26px 0 0; color: var(--faint); font-size: 15px; }
.hero-art { position: relative; border-radius: 30px; overflow: hidden; border: 1px solid var(--glass-edge); box-shadow: var(--shadow-lg); background: var(--sky-1); }
.hero-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.hero-art svg { display: block; width: 100%; height: auto; min-height: 220px; max-height: 420px; }

main > section { margin-top: 104px; }
main > .hero { margin-top: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; margin-bottom: 34px; }
.section-head .caps { font-size: 12px; color: var(--soft); }
.facets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facets li { padding: 34px 28px 12px 0; border-bottom: 1px solid var(--line); }
.facets li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.facets .ico { color: var(--teal); margin-bottom: 22px; width: 30px; height: 30px; }
.facets .label { display: block; margin-bottom: 14px; font-size: 12px; line-height: 1.5; color: var(--ink); }
.facets p { color: var(--soft); font-size: 16px; line-height: 1.65; }
.panel { background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); border-radius: 30px; padding: clamp(30px, 5vw, 64px); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.panel h2 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 200; margin-bottom: 20px; }
.panel p { color: var(--soft); font-size: 19px; line-height: 1.65; max-width: 32em; margin: 0; }

.page-head { padding: 76px 0 8px; }
.page-head h1 { font-size: clamp(42px, 7vw, 84px); margin-bottom: 20px; }
.page-head .lede { color: var(--soft); font-size: 21px; font-weight: 300; line-height: 1.55; max-width: 30em; margin: 0; }
.page-head .eyebrow { margin-bottom: 22px; }
.page-head .cta { margin: 38px 0 0; }

/* sheets: a label on the left, the words on the right, a hairline between rows */
.sheet { margin-top: 56px; border-top: 1px solid var(--line); }
.sheet .row { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); gap: 12px 40px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.sheet .label { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--soft); }
.sheet .body { max-width: 36em; }
.sheet .body > :last-child { margin-bottom: 0; }
.sheet ul { padding-left: 1.2em; margin: 0 0 1em; }
.sheet li { margin-bottom: .55em; }
.sheet li::marker { color: var(--teal); }
.draft { background: rgba(242, 120, 92, .1); border: 1px solid rgba(242, 120, 92, .45); color: var(--ink); border-radius: 16px; padding: 12px 18px; font-weight: 600; font-size: 15px; margin: 40px 0 0; max-width: 36em; }
.updated { margin: 28px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--faint); }

.facts { width: 100%; border-collapse: collapse; }
.facts th, .facts td { text-align: left; vertical-align: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.facts tr:first-child th, .facts tr:first-child td { padding-top: 0; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.facts th { width: 210px; font-size: 12px; line-height: 1.7; color: var(--soft); padding-right: 24px; }
.facts td { font-size: 18px; font-weight: 300; line-height: 1.6; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); text-decoration: none; font-size: 12px; line-height: 1; box-shadow: var(--shadow); }
.button:hover { background: var(--btn-hover); color: var(--btn-ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 14px 0; font-size: 20px; font-weight: 300; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 20px; font-weight: 300; color: var(--teal-ink); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--soft); max-width: 36em; margin: 0 0 24px; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: var(--glass); }
.logo-row img { width: 104px; height: 104px; }
.logo-row p { margin: 0; color: var(--soft); flex: 1 1 220px; }

.foot { border-top: 1px solid var(--line); padding: 30px 0 52px; color: var(--soft); font-size: 15px; }
.foot p { margin: 0 0 10px; }
.foot .small { font-size: 11.5px; letter-spacing: .24em; }
.foot a { color: var(--soft); text-decoration-color: var(--line); }
.foot a:hover { color: var(--ink); }

@media (max-width: 860px) {
  .facets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facets li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .facets li:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--line); }
  .sheet .row { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .facts { margin-top: 14px; }
}
@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .top { padding-top: 22px; }
  nav a { padding: 14px 9px 12px; letter-spacing: .2em; }
  .hero, .page-head { padding-top: 48px; }
  main > section { margin-top: 76px; }
  .facets { grid-template-columns: 1fr; }
  .facets li, .facets li:nth-child(even), .facets li:nth-child(odd) { padding: 28px 0 8px; border-left: 0; }
  .facts th, .facts td { display: block; width: auto; padding: 0; border: 0; }
  .facts tr { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .facts tr:first-child { padding-top: 0; }
  .facts tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .facts th { padding-bottom: 6px; }
  .logo-row { padding: 22px; }
}

/* the home page picture */
.scene .sk1 { stop-color: var(--sky-1); } .scene .sk2 { stop-color: var(--sky-2); }
.scene .sun { fill: var(--sun); } .scene .sunglow { fill: var(--sun-glow); opacity: .65; }
.scene .cloud { fill: var(--cloud); opacity: .85; }
.scene .hill-a { fill: var(--hill-a); } .scene .hill-b { fill: var(--hill-b); } .scene .hill-c { fill: var(--hill-c); }
.scene .pond { fill: var(--water); } .scene .cartpath { fill: none; stroke: var(--cartpath); stroke-width: 9; stroke-linecap: round; }
.scene .green-edge { fill: var(--green-edge); opacity: .5; } .scene .green { fill: var(--green); }
.scene .hole { fill: #24485a; opacity: .75; } .scene .pole { stroke: var(--pole); stroke-width: 2.4; stroke-linecap: round; opacity: .8; } .scene .flag { fill: var(--coral); }
.scene .arc { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .85; } .scene .ball { fill: #fff; }
.scene .trunk { fill: var(--trunk); } .scene .t1 { fill: var(--t1); } .scene .t2 { fill: var(--t2); } .scene .t3 { fill: var(--t3); } .scene .pine { fill: var(--pine); }