/* Number & Line's front page, in the look decided on 2026-11-09 (docs/number-and-line.md): the
   app's own paper, ink and green. A rounded deep-green panel at the top with the course in colour
   behind it, then a grid of tiles, one for each thing the app does. Type as in the app: Instrument
   Serif for titles and figures, Instrument Sans for text, DM Mono for the caddie and labels, Kalam
   for what the player writes. This sheet is the front page's alone: the course pages, the finder
   and the account pages still use site.css. */
:root {
  color-scheme: light;
  --paper: #f9f6ef; --field: #fffefb; --ink: #212124; --ink-soft: rgba(33, 33, 36, .68); --hairline: rgba(33, 33, 36, .12);
  --green: #1d5b36; --green-deep: #143f26; --green-pale: rgba(29, 91, 54, .1); --cream: #f6f2e8; --cream-soft: rgba(246, 242, 232, .82);
  --line-green: #c9d7a8; --pencil: #b83324; --caddie: #2b4a6f; --fairway: #c2dba8;
  --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(14px, 3vw, 32px);
  --tile: clamp(22px, 2.6vw, 34px);
  --gap: clamp(12px, 1.4vw, 18px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.01em; line-height: 1; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; }
h2 { font-size: clamp(34px, 3.6vw, 52px); }
h3 { font-size: 28px; line-height: 1.08; }
p { margin: 0 0 1em; text-wrap: pretty; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.on-green :focus-visible { outline-color: var(--cream); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.label { margin: 0 0 14px; font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.hand { font-family: var(--hand); color: var(--pencil); }

/* Buttons: solid green for the thing to do, pale green for quieter ones; cream on the green panels. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border: 0; border-radius: 26px; background: var(--green); color: var(--cream); font: 600 16px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { background: var(--green-deep); }
.btn.quiet { background: var(--green-pale); color: var(--green); }
.btn.quiet:hover { background: rgba(29, 91, 54, .18); }
.on-green .btn { background: var(--cream); color: var(--green-deep); }
.on-green .btn:hover { background: #fff; }
.on-green .btn.quiet { background: rgba(246, 242, 232, .14); color: var(--cream); }
.on-green .btn.quiet:hover { background: rgba(246, 242, 232, .22); }

/* The top of the page: the name, the ways in. */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 18px; padding-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.brand span { font: 400 29px/1 var(--serif); white-space: nowrap; }
.brand em { font-style: italic; }
.nav nav { display: flex; align-items: center; gap: 28px; }
.nav nav a { text-decoration: none; font-weight: 500; font-size: 15px; white-space: nowrap; }
.nav nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.nav .btn { height: 42px; padding: 0 20px; font-size: 15px; }
@media (max-width: 900px) { .nav nav a.wide { display: none; } }
@media (max-width: 520px) {
  .nav nav { gap: 14px; }
  .brand img { width: 34px; height: 34px; border-radius: 8px; }
  .brand span { font-size: 23px; }
  .nav nav a.account { font-size: 13px; }
  .nav .btn { height: 38px; padding: 0 14px; font-size: 14px; }
}
@media (max-width: 400px) { .nav nav a.account { display: none; } }

/* The green panel: what the app is for, the search, and the app on a phone and a watch, with the course
   in colour behind. */
.on-green { background: var(--green-deep); color: var(--cream); }
.on-green p { color: var(--cream-soft); }
.on-green .label { color: var(--line-green); }
.panel { position: relative; overflow: hidden; border-radius: clamp(24px, 3vw, 40px); isolation: isolate; }
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) auto; gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 5vw, 72px); padding-bottom: 0; min-height: 600px; }
/* The course behind: the app's own drawing in colour, enlarged and softened so the words read. */
.hero::before {
  content: ""; position: absolute; inset: -40px; z-index: -1;
  background: linear-gradient(100deg, var(--green-deep) 0%, rgba(20, 63, 38, .93) 38%, rgba(20, 63, 38, .55) 100%), url("img/hero-hole.webp") 78% 38% / 150% auto no-repeat;
  filter: blur(6px) saturate(1.15);
}
.hero h1 { font-size: clamp(50px, 6.6vw, 98px); margin-bottom: 26px; }
.hero h1 em { color: var(--line-green); }
.hero .lede { max-width: 31em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; }
.hero .words { padding-bottom: clamp(28px, 5vw, 72px); }
.finder { display: flex; gap: 10px; max-width: 540px; margin-top: 28px; }
.finder .field { flex: 1; min-width: 0; height: 52px; padding: 0 22px; border: 2px solid transparent; border-radius: 26px; background: var(--field); color: var(--ink); font: 400 16px/1 var(--sans); }
.finder .field::placeholder { color: rgba(33, 33, 36, .55); opacity: 1; }
.finder .btn { flex: none; }
.tile .finder .field { border-color: var(--green); }
.proof { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 22px 0 0; padding: 0; list-style: none; font: 400 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(246, 242, 232, .75); }
.devices { position: relative; align-self: end; padding-left: 110px; margin-bottom: -70px; }
.devices .phone { transform: rotate(3deg); }
.devices .watch { position: absolute; left: 0; bottom: 150px; width: 160px; transform: rotate(-5deg); }
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero .words { padding-bottom: 0; }
  .devices { margin: 6px auto -80px; padding-left: 70px; }
  .devices .phone { transform: none; }
  .devices .watch { bottom: 130px; width: 130px; }
}
@media (max-width: 600px) {
  .finder { flex-direction: column; }
  .finder .field { flex: none; }
  .proof { flex-direction: column; }
  .devices { padding-left: 0; }
  .devices .watch { left: -14px; bottom: 150px; width: 108px; }
}

/* Phones: a dark bezel round each screenshot. */
.phone { width: 300px; flex: none; padding: 9px; border-radius: 46px; background: #121212; box-shadow: 0 30px 60px rgba(0, 0, 0, .3), inset 0 0 0 1.5px #3b3b3b; }
.phone img { width: 100%; height: auto; aspect-ratio: 1206 / 2622; border-radius: 38px; background: var(--paper); }
.phone.small { width: 230px; padding: 7px; border-radius: 38px; }
.phone.small img { border-radius: 31px; }
@media (max-width: 600px) { .phone { width: min(280px, 78vw); } }
/* The watch: an Apple Watch Ultra, drawn here round a picture of its screen. A squared titanium case
   with a flat crystal; on the right the guard that holds the Digital Crown (its orange ring showing)
   and the side button; on the left the orange Action button over the speaker's slots. The strap is
   Apple's Trail Loop in green and grey: a soft woven band, grey down the middle with green edges.
   Every measure is a share of its width, so it's the same watch at any size. */
.watch { position: relative; width: 200px; flex: none; aspect-ratio: 100 / 188; display: grid; place-items: center; filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .35)); }
.watch::before, .watch::after {
  content: ""; position: absolute; left: 14%; right: 14%; height: 50%;
  background:
    linear-gradient(to right, #4f6245 0 9%, rgba(79, 98, 69, 0) 9% 91%, #4f6245 91%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .2) 0 1px, rgba(255, 255, 255, .06) 1px 2.5px),
    repeating-linear-gradient(to right, rgba(0, 0, 0, .05) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(to right, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, .1) 50%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .38)),
    #8a8e85;
}
/* Each end of the strap narrows a little, as it goes round the wrist, and is cut off square: solid
   to its end, never faded out. */
.watch::before { top: 0; clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%); }
.watch::after { bottom: 0; clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); }
.watch .case {
  position: relative; z-index: 1; width: 82%; padding: 3.4%; border-radius: 24% / 19.5%;
  background: linear-gradient(135deg, #ebe8e1 0%, #bdb9b0 28%, #8f8b83 64%, #aeaaa1 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 -2px 3px rgba(0, 0, 0, .3), inset 0 0 0 3px rgba(0, 0, 0, .06);
}
/* The crown's guard, standing out from the right-hand side. */
.watch .guard {
  position: absolute; left: 98.5%; top: 25%; width: 7%; height: 45%; border-radius: 0 45% 45% 0 / 0 8% 8% 0;
  background: linear-gradient(to right, #8a867e, #cfcbc2 55%, #9d9990); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .28);
}
/* The Digital Crown, ridged, with its orange ring against the case. */
.watch .guard::before {
  content: ""; position: absolute; left: 62%; top: 9%; width: 82%; height: 40%; border-radius: 18% 30% 30% 18% / 10%;
  background:
    linear-gradient(to right, #f26a1b 0 22%, rgba(242, 106, 27, 0) 22%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .32) 0 1px, rgba(255, 255, 255, .2) 1px 3px),
    linear-gradient(to right, #76726b, #d6d2c9 58%, #8c8880);
}
/* The side button, below it. */
.watch .guard::after {
  content: ""; position: absolute; left: 70%; top: 60%; width: 34%; height: 30%; border-radius: 0 60% 60% 0 / 0 14% 14% 0;
  background: linear-gradient(to right, #76726b, #b9b5ac);
}
/* The Action button, in international orange, and the speaker's slots under it. */
.watch .action {
  position: absolute; right: 99.4%; top: 31%; width: 3.2%; height: 16%; border-radius: 70% 0 0 70% / 13% 0 0 13%;
  background: linear-gradient(to left, #c85417, #f6812f);
}
.watch .action::after {
  content: ""; position: absolute; right: -55%; top: 150%; width: 70%; height: 120%; border-radius: 2px;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .6) 0 20%, rgba(0, 0, 0, 0) 20% 40%);
}
.watch .glass { position: relative; overflow: hidden; aspect-ratio: 410 / 502; border-radius: 20% / 16.5%; background: #000; box-shadow: 0 0 0 1.5px #0b0b0b; }
.watch .glass img { width: 100%; height: 100%; object-fit: cover; }
/* Light across the flat crystal, from the top left. */
.watch .glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 30%); pointer-events: none; }

/* The grid of tiles: twelve columns, each tile saying how many it takes. */
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.tile { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: var(--tile); border-radius: clamp(20px, 2.2vw, 30px); background: var(--field); border: 1px solid var(--hairline); }
.tile.on-green { border: 0; background: var(--green-deep); }
.tile.sand { background: #efeadd; }
.tile h2 { margin-bottom: 16px; }
.tile h3 { margin-bottom: 10px; }
.tile p { max-width: 34em; }
.tile p:last-child { margin-bottom: 0; }
.tile .soft { color: var(--ink-soft); }
.span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
/* Two tiles with a device each need the width: below it, one to a row. */
@media (max-width: 1180px) { .span-6 { grid-column: span 12; } }
@media (max-width: 1040px) {
  .span-4 { grid-column: span 6; } .span-5, .span-7, .span-8 { grid-column: span 12; }
  .tiles > .span-4:nth-of-type(3), .tiles > .promise:last-of-type { grid-column: span 12; }
}
@media (max-width: 680px) { .span-4, .span-6 { grid-column: span 12; } }

/* The three answers, each in its own hand. */
.answer { min-height: 300px; }
.answer .show { margin-bottom: 20px; }
.defs { position: absolute; }
.scene { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 14px; background: var(--paper); border: 1px solid var(--hairline); }
.fairway { fill: #e2ecd2; stroke: var(--ink); stroke-width: .7; }
.green { fill: var(--fairway); stroke: var(--ink); stroke-width: .8; }
.sand { fill: #f4ecd6; stroke: var(--ink); stroke-width: .6; }
.tee { fill: var(--fairway); stroke: var(--ink); stroke-width: .7; }
.trees circle { fill: none; stroke: rgba(33, 33, 36, .45); stroke-width: .6; }
.scene .measure { fill: none; stroke: var(--ink); stroke-width: .7; }
.scene .leader { fill: none; stroke: rgba(33, 33, 36, .45); stroke-width: .5; }
.scene .you { fill: var(--ink); }
.scene .you-ring { fill: none; stroke: var(--ink); stroke-width: .6; }
.scene .cap { font: 600 4.6px/1 var(--sans); letter-spacing: .08em; fill: var(--ink-soft); }
.scene .num { font: 400 12px/1 var(--serif); fill: var(--ink); }
.scene .num.small { font-size: 9px; }
.scene .pill { fill: var(--ink); }
.scene .on-pill { fill: var(--paper); font-size: 13px; }
.scene .wind { fill: none; stroke: var(--ink); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.scene .caddie-line { fill: none; stroke: var(--caddie); stroke-width: 1.9; stroke-linecap: round; stroke-dasharray: .1 3.4; }
.scene .caddie-ring { fill: none; stroke: var(--caddie); stroke-width: 1; }
.scene .caddie-dot { fill: var(--caddie); }
.scene .slip rect { fill: var(--field); stroke: rgba(43, 74, 111, .4); stroke-width: .5; }
.scene .slip path { stroke: var(--caddie); stroke-width: 2.2; }
.scene .slip text { font: 500 6.4px/1 var(--mono); fill: var(--caddie); }
.scene .slip .line { font-size: 5.4px; }
.scene .biro { fill: none; stroke: var(--pencil); stroke-width: 1.8; stroke-linecap: round; }
.scene .biro.mark { stroke-width: 2.2; }
.scene .hand { font: 400 21px/1 var(--hand); fill: var(--pencil); }

.caddie-card { position: relative; display: flex; flex-direction: column; gap: 5px; width: 100%; max-width: 380px; padding: 12px 14px 12px 20px; overflow: hidden; border-radius: 18px; background: var(--field); border: 1px solid rgba(33, 33, 36, .14); box-shadow: 0 2px 5px rgba(0, 0, 0, .16); color: var(--caddie); font-family: var(--mono); }
.caddie-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--caddie); }
.caddie-card div { display: flex; align-items: baseline; gap: 10px; }
.caddie-card i { flex: none; width: 54px; font: 500 9px/1 var(--mono); letter-spacing: .13em; opacity: .7; }
.caddie-card b { font: 500 16px/1.25 var(--mono); }
.caddie-card span { font: 500 14px/1.25 var(--mono); }
.caddie-card p { margin: 0 0 6px; max-width: none; font: 400 13px/1.5 var(--mono); color: var(--caddie); }

/* A tile with words beside a device. */
.split { flex-direction: row; align-items: center; gap: clamp(20px, 3vw, 48px); }
.split .words { flex: 1; min-width: 0; }
/* The device sits in the middle of its stage, whole: a tall tile doesn't leave it at the foot. */
.split .stage { flex: none; display: flex; align-items: center; justify-content: center; gap: 16px; align-self: stretch; margin: calc(var(--tile) * -1) calc(var(--tile) * -1) calc(var(--tile) * -1) 0; padding: 34px; background: #efeadd; }
.split.flip .stage { order: -1; margin: calc(var(--tile) * -1) 0 calc(var(--tile) * -1) calc(var(--tile) * -1); }
@media (max-width: 760px) {
  .split, .split.flip { flex-direction: column; align-items: stretch; }
  .split .stage, .split.flip .stage { order: 0; margin: 0 calc(var(--tile) * -1) calc(var(--tile) * -1); }
}
.list { margin: 0 0 1em; padding: 0; list-style: none; max-width: 34em; }
.list li { position: relative; padding: 11px 0 11px 26px; border-top: 1px solid var(--hairline); }
.list li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.on-green .list li { border-top-color: rgba(246, 242, 232, .2); color: var(--cream-soft); }
.on-green .list li::before { background: var(--line-green); }
/* Who's speaking, each in its own hand. */
.legend { color: var(--ink-soft); }
.legend span { white-space: nowrap; }
.legend .print { font: 400 21px/1 var(--serif); color: var(--ink); }
.legend .slip { padding: 2px 8px; background: var(--field); border: 1px solid rgba(43, 74, 111, .35); border-left: 3px solid var(--caddie); border-radius: 4px; font: 500 13px/1.4 var(--mono); color: var(--caddie); }
.legend .biro { font: 400 21px/1 var(--hand); color: var(--pencil); }

/* What the caddie reads: four small tiles inside its green one. */
.reads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: 28px; }
@media (max-width: 1040px) { .reads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .reads { grid-template-columns: 1fr; } }
.read { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--field); color: var(--ink); }
.read figure { margin: 0; height: 190px; background: #efeadd; overflow: hidden; }
.read figure img { width: 100%; height: 100%; object-fit: cover; }
.read .body { padding: 18px 20px 22px; }
.read h3 { font-size: 25px; }
.on-green .read p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.on-green .read .label { margin-bottom: 8px; color: var(--ink-soft); }
.read .winds { display: flex; flex-direction: column; justify-content: center; gap: 10px; height: auto; min-height: 190px; padding: 16px 18px; }
.read .winds span { display: block; margin-bottom: 3px; font: 400 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.on-green .read .winds p { margin: 0; padding: 5px 10px; background: var(--field); border: 1px solid rgba(43, 74, 111, .3); border-left: 4px solid var(--caddie); border-radius: 6px; font: 500 13px/1.4 var(--mono); color: var(--caddie); }
.caddie-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .caddie-top { grid-template-columns: 1fr; } }
.said { margin: 0; }
.said figcaption { margin-top: 14px; font: 400 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(246, 242, 232, .7); }
.said .caddie-card { max-width: none; padding: 16px 18px 16px 24px; }
.fine { margin-top: 22px; font-size: 15px; }

/* Courses: the facts in the title face. */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 24px; margin-top: auto; padding-top: 30px; }
.facts div { border-top: 1px solid rgba(246, 242, 232, .28); padding-top: 12px; }
.facts strong { display: block; font: 400 40px/1.1 var(--serif); color: var(--cream); }
.facts span { font: 400 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(246, 242, 232, .7); }

/* Price. */
.figure { margin: 0 0 14px; font: 400 24px/1.1 var(--serif); }
.figure strong { margin-right: 8px; font-weight: 400; font-size: clamp(54px, 6vw, 76px); letter-spacing: -.01em; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 36px; margin: 20px 0; }
@media (max-width: 700px) { .cols { grid-template-columns: 1fr; } }
.cols .list li { padding: 8px 0 8px 26px; font-size: 16px; }
.cols .list li::before { top: 16px; }
.cols .label { margin-bottom: 8px; }
.promise p a { color: var(--green); }

/* The foot of the page: the two things to know once more, then the links. */
footer.wrap { padding-top: var(--gap); padding-bottom: var(--gutter); }
.closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(28px, 4.4vw, 60px); padding-bottom: 28px; }
.closing h2 { font-size: clamp(36px, 4.6vw, 64px); }
.closing h2 em { color: var(--line-green); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; padding: 22px clamp(28px, 4.4vw, 60px) 34px; font-size: 15px; border-top: 1px solid rgba(246, 242, 232, .16); }
.foot-row .brand span { font-size: 25px; }
.foot-row .brand img { width: 34px; height: 34px; border-radius: 8px; }
footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
footer nav a { text-decoration: none; }
footer nav a:hover { text-decoration: underline; }
footer small { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(246, 242, 232, .65); }