/*
 * gaiwant — static subpage stylesheet.
 *
 * Swiss rules applied here: one grid (12 columns), three type levels,
 * hairlines instead of boxes, no decoration. Colour comes from the
 * screenshots; the page itself works in grayscale.
 *
 * Type: Helvetica for everything, with two exceptions copied from the app:
 * the "gaiwant" wordmark in Clash Display and the index numerals in Fragment
 * Mono (a monospaced Helvetica, OFL). Paths are relative so the folder works
 * under any base URL.
 */

@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("fonts/FragmentMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #f5f3ef;
  --ink: #0a0a0a;
  --ink-2: #555555;
  --rule: #0a0a0a;
  --display: "Clash Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --numeral: "Fragment Mono", ui-monospace, Menlo, monospace;
  --text: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --gutter: max(1.5rem, 3vw);
  --unit: 0.5rem;
  --measure: 34em;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  font-size: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body { margin: 0; }

img { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}
a:hover { border-bottom-width: 2px; padding-bottom: 0; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---- Grid ------------------------------------------------------------ */

.page {
  max-width: 72rem;
  margin: 0 auto;
  padding: calc(var(--unit) * 6) var(--gutter) calc(var(--unit) * 12);
}

.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* ---- Type levels (three) -------------------------------------------- */

/* Titles are Helvetica bold. Clash Display is reserved for the wordmark
   (.wordmark): it is the app's logotype, not a heading face. */
.t-display {
  font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.wordmark { font-family: var(--display); font-weight: 500; }
.t-lede {
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.45;
  margin: 0;
  max-width: var(--measure);
}
.t-body { font-size: 1.0625rem; line-height: 1.6; margin: 0; max-width: var(--measure); }
.t-small { font-size: 0.875rem; line-height: 1.5; letter-spacing: 0.02em; margin: 0; color: var(--ink-2); }

/* ---- Header ---------------------------------------------------------- */

.top { padding-bottom: calc(var(--unit) * 2); font-weight: 700; }
.top a { border-bottom: 0; }

.head {
  border-top: 1px solid var(--rule);
  padding-top: calc(var(--unit) * 3);
  row-gap: calc(var(--unit) * 3);
}
.head__icon { grid-column: 1 / span 2; }
.head__icon img {
  /* Same size as the display type so the icon's top meets the wordmark's top. */
  width: clamp(2.75rem, 6vw, 4.5rem);
  border-radius: 22%;
}
.head__title { grid-column: 3 / span 10; align-self: start; }
.head__lede { grid-column: 3 / span 10; }
.head__lede p + p { margin-top: calc(var(--unit) * 2); }

.stores {
  grid-column: 3 / span 10;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--unit) * 2) calc(var(--unit) * 6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.stores li { display: flex; flex-direction: column; justify-content: flex-start; }
.stores .store { color: var(--ink-2); }
.stores .t-small { margin-top: 0.125rem; }

/* ---- Screens --------------------------------------------------------- */

.screens {
  border-top: 1px solid var(--rule);
  margin-top: calc(var(--unit) * 8);
  padding-top: calc(var(--unit) * 3);
  row-gap: calc(var(--unit) * 5);
}
.screens > figure {
  grid-column: span 3;
  margin: 0;
}
.screens img {
  width: 100%;
  border-radius: 14% / 6.5%;
}
.screens figcaption {
  margin-top: calc(var(--unit) * 2);
  max-width: none;
}
.screens .num { display: block; font-family: var(--numeral); font-weight: 400; color: var(--ink); }

/* ---- Facts ----------------------------------------------------------- */

.facts {
  margin: calc(var(--unit) * 8) 0 0;
  padding: 0;
  list-style: none;
}
.facts > li {
  border-top: 1px solid var(--rule);
  padding: calc(var(--unit) * 3) 0 calc(var(--unit) * 5);
}
.facts .num { grid-column: 1 / span 2; font-family: var(--numeral); font-weight: 400; color: var(--ink); }
.facts h2 {
  grid-column: 3 / span 4;
  font: inherit;
  font-weight: 700;
  font-size: 1.0625rem;
  margin: 0;
}
.facts p { grid-column: 7 / span 6; }

/* ---- Footer ---------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule);
  margin-top: calc(var(--unit) * 8);
  padding-top: calc(var(--unit) * 3);
}
.foot nav { grid-column: 1 / span 8; display: flex; flex-wrap: wrap; gap: var(--unit) calc(var(--unit) * 4); }
.foot .t-small:last-child { grid-column: 9 / span 4; text-align: right; }

/* ---- Article pages (privacy, support) -------------------------------- */

.article { row-gap: calc(var(--unit) * 3); }
.article__meta { grid-column: 1 / span 2; }
.article__body { grid-column: 3 / span 8; }
.article__body p, .article__body ul { max-width: var(--measure); margin: 0; }
.article__body p + p, .article__body ul + p, .article__body p + ul {
  margin-top: calc(var(--unit) * 2);
}
.article__body ul { padding-left: 1.25em; }

/* Vendors page: one block per vendor, hairline above, name as the heading. */
.vendor { border-top: 1px solid var(--rule); margin-top: calc(var(--unit) * 5); padding-top: calc(var(--unit) * 3); }
.vendor h2 { font: inherit; font-weight: 700; margin: 0 0 var(--unit); }
.vendor h2 a { border-bottom-width: 1px; }
.vendor .teas { margin-top: calc(var(--unit) * 2); }
.vendor .teas .t-small { margin-bottom: 0.25rem; }

/* ---- Small screens --------------------------------------------------- */

@media (max-width: 40em) {
  .row { column-gap: var(--gutter); }
  .head__icon { grid-column: 1 / span 3; }
  .head__title, .head__lede, .stores { grid-column: 1 / -1; }
  .screens > figure { grid-column: span 6; }
  .facts .num { grid-column: 1 / -1; }
  .facts h2 { grid-column: 1 / -1; margin-top: var(--unit); }
  .facts p { grid-column: 1 / -1; margin-top: var(--unit); }
  .foot nav, .foot .t-small:last-child { grid-column: 1 / -1; text-align: left; }
  .foot .t-small:last-child { margin-top: calc(var(--unit) * 2); }
  .article__meta, .article__body { grid-column: 1 / -1; }
}