/* lob.golf's small pages (Support, Privacy, Terms, 404) in the app's look: the game's own painting at the top, then the
   app's cream sheet rising over it (the Shop's sheet), in the app's type. No fonts, images or scripts from anywhere else. */
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/a/nunito-sans.0e2c67291b/NunitoSans-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/a/nunito-sans.0e2c67291b/NunitoSans-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-0303,U+0305-0307,U+0309-0328,U+032A-036F,U+1D00-1DBF,U+1E00-1EFF,U+2070-20AB,U+20AD-20CF,U+2100-2121,U+2123-214F,U+2190,U+2192,U+2194-2211,U+2213-2214,U+2216-22FF,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/a/nunito-sans.0e2c67291b/NunitoSans-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/a/nunito-sans.0e2c67291b/NunitoSans-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-0303,U+0305-0307,U+0309-0328,U+032A-036F,U+1D00-1DBF,U+1E00-1EFF,U+2070-20AB,U+20AD-20CF,U+2100-2121,U+2123-214F,U+2190,U+2192,U+2194-2211,U+2213-2214,U+2216-22FF,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/a/nunito-sans.0e2c67291b/NunitoSans-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/a/nunito-sans.0e2c67291b/NunitoSans-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-0303,U+0305-0307,U+0309-0328,U+032A-036F,U+1D00-1DBF,U+1E00-1EFF,U+2070-20AB,U+20AD-20CF,U+2100-2121,U+2123-214F,U+2190,U+2192,U+2194-2211,U+2213-2214,U+2216-22FF,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/a/nunito-sans.0e2c67291b/NunitoSans-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/a/nunito-sans.0e2c67291b/NunitoSans-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-0303,U+0305-0307,U+0309-0328,U+032A-036F,U+1D00-1DBF,U+1E00-1EFF,U+2070-20AB,U+20AD-20CF,U+2100-2121,U+2123-214F,U+2190,U+2192,U+2194-2211,U+2213-2214,U+2216-22FF,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url(/a/nunito-sans.0e2c67291b/NunitoSans-800-latin.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url(/a/nunito-sans.0e2c67291b/NunitoSans-800-latin-ext.woff2) format("woff2"); unicode-range: U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-0303,U+0305-0307,U+0309-0328,U+032A-036F,U+1D00-1DBF,U+1E00-1EFF,U+2070-20AB,U+20AD-20CF,U+2100-2121,U+2123-214F,U+2190,U+2192,U+2194-2211,U+2213-2214,U+2216-22FF,U+2C60-2C7F,U+A720-A7FF,U+FB00-FB06; }
:root {
  /* F9site: the app's typeface, Nunito Sans, served beside the pages (the build writes its @font-face rules above, from
     src/fonts/nunitosans/fonts.json); the rest of the stack only if its files fail. build.cjs FONT_STACK, the same. */
  --font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --base: #151a12;
  --sheet: #f7f1e5;
  --card: #fffaf0;
  --ink: #2a2733;
  --soft: #625d6b;
  --rule: rgba(42, 39, 51, .13);
  --fill-bg: #ffe08a;
  --fill-ink: #3b2a00;
  --draft-bg: rgba(42, 39, 51, .05);
  --draft-line: rgba(42, 39, 51, .38);
  --btn: #2a2733;
  --btn-ink: #fbf3e2;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sheet: #151a12;
    --card: #1e2619;
    --ink: #fbf1dc;
    --soft: rgba(251, 241, 220, .72);
    --rule: rgba(251, 241, 220, .15);
    --fill-bg: #5a4612;
    --fill-ink: #ffe9a8;
    --draft-bg: rgba(251, 241, 220, .06);
    --draft-line: rgba(251, 241, 220, .4);
    --btn: #fbf3e2;
    --btn-ink: #2a2733;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--sheet); }
body { margin: 0; background: var(--sheet); color: var(--ink); font: 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; }

/* the painting: hole 1's tee at dawn, from the game's own painter (tools/art.cjs) */
.band { position: relative; min-height: 236px; padding: calc(env(safe-area-inset-top) + 22px) 20px 52px; color: #fbf1dc;
  background: var(--base) url(/a/tee.73b7e736c0.jpg) center 42% / cover no-repeat; }
.band::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(21, 26, 18, .5), rgba(21, 26, 18, .12) 62%, rgba(21, 26, 18, 0)); }
.band .inner { position: relative; max-width: 680px; margin: 0 auto; text-shadow: 0 1px 6px rgba(20, 16, 28, .35); }
.band a.home { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: inherit; text-decoration: none; font-size: 24px; font-weight: 700; letter-spacing: -.3px; }
.band a.home img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 2px 8px rgba(20, 16, 28, .3); }
.band p.tag { margin: 6px 0 0; font-size: 15px; font-weight: 500; opacity: .9; }
/* every nav link is a 44 pt tap (FAIRSITE, 19 Oct: the checker measured 39); the current page underlined */
.band nav { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 16px; font-weight: 600; }
.band nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: inherit; text-decoration: none; }
.band nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 #fbf1dc; }
.band nav a:hover { box-shadow: inset 0 -2px 0 rgba(251, 241, 220, .6); }
.band nav a[aria-current="page"]:hover { box-shadow: inset 0 -2px 0 #fbf1dc; }

.sheet { position: relative; margin-top: -28px; border-radius: 28px 28px 0 0; background: var(--sheet); }
main, footer { max-width: 680px; margin: 0 auto; }
main { padding: 34px 20px 8px; }

h1, h2, h3 { font-weight: 700; line-height: 1.18; text-wrap: balance; }
h1 { font-size: 34px; letter-spacing: -.6px; margin: 0 0 8px; }
h2 { font-size: 22px; letter-spacing: -.25px; margin: 2em 0 .45em; padding-top: .9em; border-top: 1px solid var(--rule); }
h3 { font-size: 18px; font-weight: 600; margin: 1.4em 0 .3em; }
p, ul, ol, table { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .4em; }
strong { font-weight: 600; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.lede { font-size: 19px; line-height: 1.5; }
.meta { color: var(--soft); font-size: 15px; }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 16px 18px; margin: 0 0 1.2em; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
/* a draft's note to the owner: a dashed box, so it can't be mistaken for the text */
.draft { background: var(--draft-bg); border: 1.5px dashed var(--draft-line); border-radius: 14px; padding: 10px 14px; margin: 0 0 1.4em; font-size: 15px; }
/* every [FILL: ...] is something only the owner can answer */
.fill { background: var(--fill-bg); color: var(--fill-ink); padding: 0 5px; border-radius: 5px; font-weight: 600; }
.table-wrap { overflow-x: auto; margin: 0 0 1em; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; }
/* the app's dark pill (the Shop's "Buy" button) */
.store, a.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; margin: 6px 0 4px; padding: 0 26px; border-radius: 28px;
  background: var(--btn); color: var(--btn-ink); text-decoration: none; font-weight: 600; font-size: 17px; }
.store:hover, a.btn:hover { text-decoration: none; opacity: .92; }

footer { padding: 22px 20px calc(env(safe-area-inset-bottom) + 40px); color: var(--soft); font-size: 14px; border-top: 1px solid var(--rule); margin-top: 36px; }
footer p { margin: 0; }
footer a { color: inherit; }

/* the 404 */
.lost main { padding-top: 40px; padding-bottom: 24px; }


/* the coming-soon front page (--home=soon; the owner's go of 20 Oct, before launch): the painting fills most of the first
   screen, the sheet says when; no script */
body.soon .band { min-height: min(66vh, 620px); background-position: center 46%; }
body.soon .band p.tag { font-size: 19px; margin-top: 8px; }
.soon main { padding-top: 40px; padding-bottom: 12px; }
.soon main h1 { font-size: 36px; }
@media (min-width: 720px) { .soon main h1 { font-size: 44px; letter-spacing: -.9px; } }

/* FAIRSITE (19 Oct): Fair play, "A day of skies" (the owner's pick; blp-1). Six skies from dawn to night, each with one
   big line and one small pencil drawing; the rules fold into the dusk sky as a pill that opens; support at night. */
body.fair { background: #f6cfae; }
.band.slim { min-height: 0; padding-bottom: 46px; }
.fair .band nav { margin-top: 8px; }
.fair .pen { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.fair .pen path, .fair .pen circle { vector-effect: non-scaling-stroke; }
.fair .pen .ink { fill: currentColor; stroke: none; }
.fair .pen .faint { opacity: .5; }
.fair summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fair summary::-webkit-details-marker { display: none; }
.day { position: relative; max-width: none; padding: 0; margin: -28px 0 0; border-radius: 28px 28px 0 0; overflow: hidden; }
.sky { position: relative; padding: 26px 20px 40px; }
.sky .in { position: relative; max-width: 680px; margin: 0 auto; }
.sky .top { display: flex; justify-content: space-between; align-items: flex-start; min-height: 64px; margin-bottom: 2px; }
.sky .art { width: 124px; height: 100px; flex: none; margin: -10px -8px 0 0; }
.sky .t { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .78; margin: 0; font-variant-numeric: tabular-nums; }
.sky h1.t { margin: 0 0 4px; }
.sky .b { font-size: 42px; line-height: 1.02; font-weight: 700; letter-spacing: -1.3px; margin: 0 0 10px; text-wrap: balance; }
.sky .s { font-size: 18px; line-height: 1.38; font-weight: 500; margin: 0; max-width: 24em; opacity: .9; }
/* the skies, from Lob's palette: peach dawn, sage morning, cream noon, rose afternoon, violet dusk, night */
.s1 { background: linear-gradient(#f6cfae, #f3dcc0); color: #3a2a24; }
.s2 { background: linear-gradient(#e2e7cb, #cfd9b0); color: #27301e; }
.s3 { background: linear-gradient(#fbf1dc, #f2e6c6); color: #2a2733; }
.s4 { background: linear-gradient(#efc9c3, #e3aeb0); color: #3a2229; }
.s5 { background: linear-gradient(#8a73a8, #5f4f86); color: #fbf1dc; }
.s6 { background: linear-gradient(#3a3c6c, #1b1d3a); color: #fbf1dc; padding-bottom: calc(env(safe-area-inset-bottom) + 56px); }
.s6 .stars { position: absolute; inset: 0; pointer-events: none; }
.s6 .stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fbf1dc; opacity: .7; }
.s6 .stars i:nth-child(1) { left: 8%; top: 20%; }
.s6 .stars i:nth-child(2) { left: 22%; top: 64%; }
.s6 .stars i:nth-child(3) { left: 34%; top: 30%; }
.s6 .stars i:nth-child(4) { left: 52%; top: 78%; }
.s6 .stars i:nth-child(5) { left: 64%; top: 12%; }
.s6 .stars i:nth-child(6) { left: 78%; top: 58%; }
.s6 .stars i:nth-child(7) { left: 88%; top: 30%; }
.s6 .stars i:nth-child(8) { left: 94%; top: 74%; }
.s6 .stars i:nth-child(9) { left: 14%; top: 88%; }
.s6 .stars i:nth-child(10) { left: 44%; top: 46%; }
/* the rules pill: tap to open */
.s5 details { margin-top: 18px; }
.s5 summary { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 24px; background: rgba(251, 241, 220, .16); border: 1.5px solid rgba(251, 241, 220, .55); font-weight: 600; font-size: 17px; }
.s5 summary .chev { display: inline-block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; }
.s5 details[open] summary .chev { transform: rotate(-135deg); margin-top: 4px; }
.s5 ol { margin: 16px 0 0; padding-left: 1.3em; font-size: 17px; line-height: 1.4; max-width: 30em; }
.s5 ol li { margin-bottom: .5em; }
.s5 .since { margin: 10px 0 0; font-size: 14px; font-weight: 600; opacity: .72; }
.s5 .older { list-style: none; margin: 6px 0 0; padding: 0; }
.s5 .older ol { margin-top: 4px; font-size: 15px; opacity: .85; }
.fair .mail { display: inline-flex; align-items: center; min-height: 52px; margin-top: 16px; padding: 0 24px; border-radius: 28px; background: #fbf1dc; color: #2a2733; text-decoration: none; font-weight: 600; font-size: 17px; }
@media (prefers-color-scheme: dark) {
  body.fair { background: #5b3d33; }
  .s1 { background: linear-gradient(#5b3d33, #4a3530); color: #fbe6d4; }
  .s2 { background: linear-gradient(#323c27, #2a3322); color: #e9efd6; }
  .s3 { background: linear-gradient(#2a2c21, #20231a); color: #fbf1dc; }
  .s4 { background: linear-gradient(#4d2e33, #43262d); color: #fbe3e2; }
  .s5 { background: linear-gradient(#3e3359, #312a4a); }
  .s6 { background: linear-gradient(#22244a, #0d1022); }
}
@media (min-width: 900px) {
  .fair .band .inner, .sky .in { max-width: 980px; }
  .sky { padding: 56px 40px 64px; }
  .sky .in { display: grid; grid-template-columns: 1fr 220px; column-gap: 40px; align-items: center; }
  .sky .top { display: contents; }
  .sky .art { grid-column: 2; grid-row: 1 / span 4; width: 200px; height: 166px; margin: 0; justify-self: end; }
  .sky .t, .sky .b, .sky .s, .sky details, .sky .mail { grid-column: 1; }
  .sky .mail { justify-self: start; }
  .sky .b { font-size: 72px; letter-spacing: -2.4px; }
  .sky .s { font-size: 21px; }
}