/* Tee to Green's website, in the Quiet Caddie look (docs/research/brand-be-the-club.md, Linen & Moss):
   moss bands and linen pages, Instrument Serif with an italic for what's said, Instrument Sans for
   the text, DM Mono for labels and figures, clay for the one thing to do. Where the book itself
   speaks (the caddie's note, the price page) it's the app's ruled notebook paper, with the
   player's writing in Kalam pencil, as in the app. */
:root {
  color-scheme: light;
  --linen: #f6f3ec; --linen-deep: #ece7dc; --sand: #e4ddcd; --ink: #151515; --ink-soft: rgba(21, 21, 21, .68);
  --moss: #3f4a33; --moss-2: #56634a; --moss-ink: #ece7dc; --clay: #b65a34; --clay-press: #9c4a28;
  --fairway: #c5ccb2; --paper: #f9f6ef; --rule: rgba(186, 201, 222, .75); --margin: rgba(217, 143, 138, .85);
  --pencil: #b83324;
  --caddie: #2b4a6f;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --hand: "Kalam", "Bradley Hand", cursive;
  --gutter: clamp(16px, 5vw, 72px);
  --line: 34px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--linen); color: var(--ink); font: 400 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.01em; line-height: .98; }
h1 { font-size: clamp(56px, 8.4vw, 116px); }
h2 { font-size: clamp(42px, 5.4vw, 72px); }
h3 { font-size: 32px; line-height: 1.1; }
h1 em, h2 em, h3 em { font-style: italic; }
p { margin: 0 0 1em; max-width: 36em; }
.label { margin: 0 0 18px; font: 400 13px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--clay); }
.lede { font-size: 21px; line-height: 1.55; }
.hand { font-family: var(--hand); color: var(--pencil); }

/* The one thing to do: clay. Quieter actions are outlined. */
.cta {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 28px; border-radius: 28px;
  background: var(--clay); color: var(--linen); font: 700 17px/1 var(--sans); text-decoration: none;
}
.cta:hover { background: var(--clay-press); }
.cta.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.cta.ghost:hover { background: rgba(0, 0, 0, .05); }
.on-moss .cta.ghost:hover { background: rgba(255, 255, 255, .08); }

/* Moss: the band across the top and the bands between pages. */
.on-moss { background: var(--moss); color: var(--moss-ink); }
.on-moss p { color: rgba(236, 231, 220, .86); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 26px; padding-bottom: 26px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand img { width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.brand span { font: 400 32px/1 var(--serif); }
.brand em { font-style: italic; }
.nav nav { display: flex; align-items: center; gap: 34px; }
.nav nav a { text-decoration: none; font-weight: 500; font-size: 16px; }
.nav nav a:not(.cta):hover { text-decoration: underline; text-underline-offset: 4px; }
.nav .cta { height: 44px; padding: 0 22px; font-size: 15px; }
@media (max-width: 820px) { .nav nav a.wide { display: none; } }
.brand span, .cta, .nav nav a.account { white-space: nowrap; }
@media (max-width: 520px) {
  .nav nav a:not(.cta):not(.account) { display: none; }
  /* Your rounds: small, in the corner above the call, where the header has room for it. */
  .nav { position: relative; }
  .nav nav a.account { position: absolute; top: 5px; right: var(--gutter); font-size: 13px; opacity: .85; }
  .brand { gap: 10px; }
  .brand img { width: 36px; height: 36px; border-radius: 8px; }
  .brand span { font-size: 25px; }
  .nav .cta { height: 40px; padding: 0 16px; font-size: 14px; }
}

.hero { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; padding-top: 40px; padding-bottom: 0; }
.hero h1 { margin-bottom: 30px; color: var(--moss-ink); font-size: clamp(60px, 7.2vw, 104px); }
.hero .lede { max-width: 30em; }
.hero .soon { display: block; margin: 16px 0 0; font: 400 13px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(236, 231, 220, .7); }
.hero .phone { margin-bottom: -90px; transform: rotate(3deg); }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero .phone { margin: 10px auto -90px; transform: none; }
}

/* The search on the page: paper field, clay button. It goes on to the course finder. */
.finder { display: flex; gap: 10px; max-width: 560px; margin-top: 34px; }
.finder .field { flex: 1; min-width: 0; height: 56px; padding: 0 22px; border: 0; border-radius: 28px; background: var(--paper); color: var(--ink); font: 400 17px/1 var(--sans); }
.finder .field::placeholder { color: rgba(21, 21, 21, .55); opacity: 1; }
.finder .cta { flex: none; border: 0; cursor: pointer; }
.courses .finder { margin-top: 26px; }
@media (max-width: 600px) {
  .finder { flex-direction: column; }
  .finder .field { flex: none; }
  .finder .cta { justify-content: center; }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The three voices, in each one's own hand: the book prints, the caddie types, you write. */
.voices { padding-top: 170px; padding-bottom: 20px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.three > div { border-top: 1px solid rgba(21, 21, 21, .15); padding-top: 22px; }
.three h3 { margin-bottom: 12px; }
.three p:not(.sample) { font-size: 17px; color: var(--ink-soft); }
.sample { height: 44px; margin: 0 0 16px; display: flex; align-items: center; }
.sample.print { font: 600 30px/1 "Source Serif 4", Georgia, serif; color: var(--ink); }
.sample.slip { width: max-content; height: auto; padding: 8px 14px; background: var(--paper); border: 1px solid rgba(43, 74, 111, .35); border-left: 4px solid var(--caddie); border-radius: 4px; font: 500 20px/1.4 var(--mono); color: var(--caddie); }
.sample.biro { font: 400 34px/1 var(--hand); color: var(--pencil); }
@media (max-width: 800px) { .voices { padding-top: 130px; } .three { grid-template-columns: 1fr; gap: 24px; } }

/* Phones: a dark bezel round each screenshot. */
.phone {
  width: 320px; flex: none; padding: 10px; border-radius: 50px; background: #121212;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .28), inset 0 0 0 1.5px #3b3b3b;
}
.phone img { width: 100%; height: auto; aspect-ratio: 1206 / 2622; border-radius: 41px; background: var(--paper); }
.phone.small { width: 260px; padding: 8px; border-radius: 42px; }
.phone.small img { border-radius: 35px; }
.watchimg { width: 230px; height: auto; flex: none; filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .28)); }
@media (max-width: 600px) { .phone, .phone.small { width: min(300px, 80vw); } }

/* Linen pages: features, words beside phones, alternating sides. */
.page { padding-top: 90px; padding-bottom: 70px; }
.page + .page { padding-top: 40px; }
.page.tail { padding-top: 40px; }
@media (max-width: 600px) {
  .page { padding-top: 70px; padding-bottom: 50px; }
  .page + .page { padding-top: 30px; }
}
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.feature .stage {
  position: relative; display: flex; justify-content: center; align-items: center; gap: 22px; padding: 56px 20px;
  background: var(--sand); border-radius: 28px;
}
.feature.flip .words { order: 2; }
.feature ul { margin: 0 0 1em; padding: 0; list-style: none; max-width: 34em; }
.feature li { padding: 12px 0 12px 30px; border-top: 1px solid rgba(21, 21, 21, .12); position: relative; }
.feature li:last-child { border-bottom: 1px solid rgba(21, 21, 21, .12); }
.feature li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--moss); }
.feature h2 { margin-bottom: 26px; }
/* Pencil notes in the margin of a screenshot, as a player would write them. */
.note {
  position: absolute; font: 400 24px/1.1 var(--hand); color: var(--pencil); transform: rotate(-4deg); white-space: nowrap;
}
.note::after { content: ""; display: block; width: 46px; height: 2px; margin-top: 6px; background: var(--pencil); opacity: .7; border-radius: 2px; }
/* Earlier than the rest: a stage with two devices needs a column of its own. */
@media (max-width: 1100px) {
  .feature { grid-template-columns: 1fr; }
  .feature.flip .words { order: 0; }
  .note { display: none; }
}
@media (max-width: 600px) { .feature .stage { flex-direction: column; align-items: center; padding: 36px 12px; } }

/* The book speaking: a page of the app's ruled notebook, red margin and all. */
.notebook {
  position: relative; background-color: var(--paper);
  background-image:
    linear-gradient(to right, transparent 55px, var(--margin) 55px, var(--margin) 56.5px, transparent 56.5px),
    linear-gradient(to bottom, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line));
  background-size: 100% 100%, 100% var(--line);
  border-radius: 6px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 18px 40px rgba(63, 74, 51, .16);
  padding: calc(var(--line) * 1.5) clamp(20px, 4vw, 48px) calc(var(--line) * 1.5) 80px;
  font-family: "Newsreader", Georgia, serif; font-size: 19px; line-height: var(--line);
}
.notebook, .on-moss .notebook p { color: var(--ink); }
.notebook p { margin: 0 0 var(--line); }
.notebook .figure { font: 400 26px/var(--line) var(--serif); }
.on-moss .notebook .written { color: var(--pencil); }
.caddie h2, .courses h2 { margin-bottom: 26px; }
.notebook .label { line-height: var(--line); margin: 0; }
.notebook h3 { font-size: 40px; line-height: calc(var(--line) * 2); }
.notebook .written { font: 400 30px/var(--line) var(--hand); color: var(--pencil); margin: 0 0 var(--line); }
/* The caddie's voice: typed in caddie slate, never the player's pencil. */
.notebook .caddie-line, .on-moss .notebook .caddie-line { font: 500 20px/var(--line) var(--mono); color: var(--caddie); margin: 0 0 var(--line); }

/* The caddie's note, on its own band. */
.caddie { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: center; padding-top: 110px; padding-bottom: 110px; }
.caddie .notebook { transform: rotate(-1.2deg); }
@media (max-width: 900px) { .caddie { grid-template-columns: 1fr; } .caddie .notebook { transform: none; } }

/* What the caddie reads: four paper cards on the moss (your bag, the flight, the green, the wind),
   then the note they add up to beside the hole page. */
.caddie-intro { padding-top: 110px; padding-bottom: 44px; }
.caddie-intro h2 { margin-bottom: 26px; }
.band-end { padding-top: 40px; padding-bottom: 90px; }
.band-end p { font-size: 17px; margin: 0; max-width: 44em; }
.inputs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1100px) { .inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .inputs { grid-template-columns: 1fr; } }
.input { display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border-radius: 6px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .22); }
.input figure { margin: 0; height: 230px; background: var(--sand); overflow: hidden; }
.input figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.input .body { padding: 20px 22px 26px; }
.input .label { margin-bottom: 10px; color: var(--clay-press); }
.input h3 { font-size: 28px; margin-bottom: 12px; }
.on-moss .input p:not(.label) { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
/* The caddie's strip as the app types it: slate on a paper slip with a slate edge. */
.input .strips { display: flex; flex-direction: column; justify-content: center; gap: 12px; height: auto; min-height: 230px; padding: 18px 20px; }
.input .strips span { display: block; margin-bottom: 4px; font: 400 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.on-moss .input p.slip { margin: 0; padding: 6px 10px; background: var(--paper); border: 1px solid rgba(43, 74, 111, .35); border-left: 4px solid var(--caddie); border-radius: 4px; font: 500 13px/1.4 var(--mono); color: var(--caddie); }
.caddie.result { grid-template-columns: auto 1fr; padding-top: 70px; }
.caddie.result h3 { font-size: clamp(32px, 3.6vw, 44px); margin-bottom: 28px; color: var(--moss-ink); }
.caddie.result .phone { transform: rotate(-2deg); }
@media (max-width: 900px) { .caddie.result { grid-template-columns: 1fr; } .caddie.result .phone { margin: 0 auto; transform: none; } }

/* Courses: a moss band with a call to find yours. */
.courses { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; padding-top: 110px; padding-bottom: 110px; }
.courses .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.courses .facts div { border-top: 1px solid rgba(236, 231, 220, .3); padding-top: 14px; }
.courses .facts strong { display: block; font: 400 44px/1.1 var(--serif); color: var(--moss-ink); }
.courses .facts span { font: 400 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(236, 231, 220, .7); }
@media (max-width: 900px) { .courses { grid-template-columns: 1fr; } }

/* Price: a notebook page with free and unlocked side by side. */
.price { max-width: 980px; margin: 0 auto; }
.price .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.price ul { margin: 0 0 var(--line); padding-left: 1.1em; }
.price li::marker { color: var(--moss); }
@media (max-width: 700px) { .price .cols { grid-template-columns: 1fr; } .notebook.price { padding-left: 72px; padding-right: 16px; } }

.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.promises div { border-top: 1px solid rgba(21, 21, 21, .15); padding-top: 22px; }
.promises h3 { margin-bottom: 12px; }
.promises p { font-size: 17px; color: var(--ink-soft); }
.promises a { color: var(--clay); }
@media (max-width: 800px) { .promises { grid-template-columns: 1fr; gap: 10px; } }

.footer-row { padding-top: 46px; padding-bottom: 46px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: center; font-size: 15px; }
footer nav { display: flex; flex-wrap: wrap; gap: 26px; }
footer nav a { text-decoration: none; }
footer nav a:hover { text-decoration: underline; }
footer small { font: 400 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(236, 231, 220, .65); }