/*
  Laurels — shared by the landing page and the blog.

  Fonts are SELF-HOSTED, not pulled from Google. On a site whose entire
  pitch is "we collect almost nothing", shipping every visitor's IP to a
  third party to fetch a typeface would undercut the copy on the page. Both
  face is SIL Open Font License and already sits on whiskmobile.com — copy
  the .woff2 into assets/fonts/ and it lights up. Until then the fallback
  stack below does the work, which is why it is a real stack rather than a
  bare `sans-serif`.
*/
@font-face {
  font-family: "Comfortaa";
  src: url("/assets/fonts/comfortaa-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --ink: #000000;
  --ink-2: #1A1A1A;
  --ink-3: #242424;
  --cream: #F5F5F5;
  --dim: #A3A3A3;
  --leaf: #4DA3FF;
  --line: #2E2E2E;
  /* The main call to action only; everything else is the flat --leaf. */
  --grad: linear-gradient(90deg, #E0270A, #0066CC);
  --header: rgba(0, 0, 0, 0.92);
  --footer: #0D0D0D;
  --body-2: #D6D6D6;
  --raised: rgba(255, 255, 255, 0.03);
  --well: rgba(0, 0, 0, 0.25);
  --field: rgba(255, 255, 255, 0.04);
  /*
    Major Mono Display is gone, wordmark included.

    It came off the UI furniture first, because its letterforms turned
    "JOIN WITH A CODE" into "JOIN WITN Δ CODE", and stayed on the wordmark
    on the argument that whiskmobile.com gets away with it where the type
    is large, uppercase and short. Two of those were true here and the
    first was not: the header wordmark is 17px, and at 17px the A is a
    bare triangle and the U a shield, so the name of the product read as
    something you had to work out.

    A wordmark you decode is not a wordmark. The mark does the
    distinguishing; the word only has to say what it says.
  */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --sans: Comfortaa, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1080px;
}

/* The light half, the same Standard theme the apps and league pages use.
   Dark stays the default rule so a browser with no preference, and a
   crawler, gets the half the unfurl image was made for. */
@media (prefers-color-scheme: light) {
  :root {
    --ink: #F5F5F7;
    --ink-2: #FFFFFF;
    --ink-3: #EDEDF0;
    --cream: #111111;
    --dim: #5C5C63;
    --leaf: #0066CC;
    --line: #D9D9DE;
    --grad: linear-gradient(90deg, #D0300F, #0066CC);
    --header: rgba(245, 245, 247, 0.92);
    --footer: #EDEDF0;
    --body-2: #333338;
    --raised: #FFFFFF;
    --well: #FFFFFF;
    --field: #FFFFFF;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- header ---------- */

header.site {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--header);
  backdrop-filter: blur(8px);
  z-index: 10;
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}
.brand svg { width: 28px; height: 28px; display: block; }
.brand b {
  font: 700 19px/1 var(--sans);
}
nav.top {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
nav.top a {
  font: 600 13px/1.4 var(--sans);
  text-decoration: none;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--dim);
  white-space: nowrap;
}
nav.top a:hover { color: var(--cream); }
nav.top a.cta {
  border-color: var(--line);
  color: var(--leaf);
}
nav.top a.cta:hover { border-color: var(--leaf); }

/* ---------- hero ---------- */

.hero { padding: 84px 0 76px; }
.eyebrow {
  font: 600 13px/1.4 var(--sans);
  color: var(--dim);
  margin: 0 0 28px;
}
/*
  The headline is set in the SANS, not the mono.
  whiskmobile.com can carry a monospace h1 because its headline is four
  uppercase words with wide tracking; ours is a lowercase sentence, and
  monospace makes a sentence harder to read the longer it gets - every
  letter the same width removes the word shapes you actually read by.
  Round 2 took the mono off the furniture too (eyebrow, nav, section
  heads, buttons): uppercase tracked mono read as stern, not friendly.
  Only the payload block, which is literally data, is still monospace.
*/
h1 {
  font: 700 clamp(36px, 6.6vw, 68px)/1.08 var(--sans);
  letter-spacing: -0.02em;
  margin: 0 0 26px;
  max-width: 18ch;
}
h1 .dot { color: var(--leaf); }
.lede {
  font-size: 18px;
  max-width: 54ch;
  margin: 0 0 34px;
  color: var(--body-2);
}

.buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  font: 600 13px/1.4 var(--sans);
  text-decoration: none;
  padding: 15px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--cream);
  background: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--leaf); color: var(--leaf); }
.btn.solid {
  background: var(--grad);
  /* Paint under the transparent border too, or the gradient's first and
     last pixels repeat into it as a stripe at each end. */
  background-origin: border-box;
  border-color: transparent;
  color: #FFFFFF;
}
.btn.solid:hover { filter: brightness(1.12); color: #FFFFFF; border-color: transparent; }

/* ---------- sections ---------- */

section { padding: 64px 0; border-top: 1px solid var(--line); }
section.band { background: var(--ink-2); }

.sechead {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 30px;
  font: 600 13px/1.4 var(--sans);
}
.sechead h2 { font: 700 22px/1.2 var(--sans); letter-spacing: -0.01em; margin: 0; }
.sechead .count { margin-left: auto; color: var(--dim); }
.sechead a { color: var(--dim); text-decoration: none; margin-left: auto; }
.sechead a:hover { color: var(--leaf); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  background: var(--raised);
}
.card .num {
  font: 600 13px/1.4 var(--sans);
  color: var(--leaf);
  display: block;
  margin: 0 0 14px;
}
.card h3 {
  font: 600 17px/1.3 var(--sans);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.card p { margin: 0; font-size: 14.5px; color: var(--dim); }

/* ---------- the payload block ---------- */

.payload {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  overflow-x: auto;
  font: 13px/1.75 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--leaf);
  background: var(--well);
  margin: 0;
}
.payload .k { color: var(--dim); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li {
  padding: 9px 0 9px 22px;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-size: 15px;
}
ul.plain li::before {
  /* A hyphen, not an em-dash: see WRITING-STYLE.md. This one is rendered
     text on a public page, so the rule applies to it as much as to prose. */
  content: "-";
  position: absolute;
  left: 0;
  color: var(--leaf);
}
ul.plain li:last-child { border-bottom: none; }

/* ---------- join ---------- */

.join { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; }
.join input {
  flex: 1 1 220px;
  font: 15px/1 var(--sans);
  padding: 15px 16px;
  border-radius: 12px;
  background: var(--field);
  border: 1px solid var(--line);
  color: var(--cream);
}
.join input:focus { outline: 2px solid var(--leaf); outline-offset: -1px; }

/* ---------- blog ---------- */

.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.post .meta {
  font: 600 13px/1.4 var(--sans);
  color: var(--dim);
  margin: 0 0 10px;
}
.post h3 { font: 400 19px/1.35 var(--sans); margin: 0 0 8px; }
.post h3 a { text-decoration: none; }
.post h3 a:hover { color: var(--leaf); }
.post p { margin: 0; color: var(--dim); font-size: 14.5px; }

/* ---------- article ---------- */

/* Top and bottom only: the shorthand used to zero .wrap's side gutter,
   so terms and privacy ran edge to edge on a phone. */
.article { max-width: 68ch; padding-top: 56px; padding-bottom: 72px; }
.article h1 { font: 400 clamp(28px, 4vw, 40px)/1.25 var(--sans); max-width: none; }
.article h2 { font: 400 22px/1.35 var(--sans); margin: 38px 0 10px; }
.article h3 {
  font: 600 13px/1.4 var(--sans);
  color: var(--leaf);
  margin: 24px 0 8px;
}
.article p, .article li { color: var(--body-2); }
.article li { margin-bottom: 6px; }
.article .meta {
  font: 13px/1.4 var(--sans);
  color: var(--dim);
  margin: -6px 0 28px;
}
.article strong { color: var(--cream); font-weight: 600; }
.article code {
  font: 13px ui-monospace, Menlo, monospace;
  background: var(--well);
  padding: 2px 5px;
  border-radius: 6px;
}
.article pre {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x: auto;
  background: var(--well);
}

/* ---------- footer ---------- */

/*
  The other app, and deliberately the quietest thing on the page.

  It sits AFTER "Join a league", which is the page's one ask, and it is
  built not to compete with it: no section heading, no count, no button.
  Somebody who came here to join a league should not arrive at two calls
  to action and have to pick.

  Labelled as ours rather than recommended. On a page that spends four
  sections explaining what we do not do to people, an unlabelled app
  promotion would read as exactly the thing we say is not here.
*/
.alsofrom {
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding: 26px 0;
}
.alsofrom a {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  max-width: 62ch;
}
.alsofrom img {
  width: 56px;
  height: 56px;
  border-radius: 13px;
  flex: none;
}
.alsofrom .eyebrow {
  font: 600 13px/1.4 var(--sans);
  color: var(--dim);
  margin: 0 0 6px;
}
.alsofrom h3 {
  font: 600 17px/1.2 var(--sans);
  margin: 0 0 6px;
}
.alsofrom p.blurb {
  margin: 0;
  font-size: 14px;
  color: var(--dim);
}
.alsofrom a:hover h3 { color: var(--leaf); }
@media (max-width: 560px) {
  .alsofrom a { gap: 12px; }
  .alsofrom img { width: 44px; height: 44px; border-radius: 10px; }
}

footer.site {
  border-top: 1px solid var(--line);
  background: var(--footer);
  padding: 44px 0;
  font-size: 14px;
  color: var(--dim);
}
footer.site .cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 28px;
}
@media (max-width: 680px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
footer.site h4 {
  font: 600 13px/1.4 var(--sans);
  margin: 0 0 14px;
  color: var(--cream);
}
footer.site a { display: block; padding: 4px 0; text-decoration: none; }
/* A link inside the company line reads as part of the sentence. */
footer.site p a { display: inline; padding: 0; }
footer.site a:hover { color: var(--leaf); }