/*
 * alexcio.io — site stylesheet.
 *
 * Same Swiss system as the gaiwant page (web/gaiwant.css in the gaiwant repo):
 * one 12-column grid, three type levels, hairlines instead of boxes, no
 * decoration, system Helvetica so the page makes no font requests. Kept as a
 * copy on purpose: the site root must not depend on the app folder that is
 * pulled in at deploy time. When a token or rule changes there, change it
 * here too.
 */

:root {
  --bg: #f5f3ef;
  --ink: #0a0a0a;
  --ink-2: #555555;
  --rule: #0a0a0a;
  --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 {
  min-height: 100svh;
  max-width: 72rem;
  margin: 0 auto;
  padding: calc(var(--unit) * 6) var(--gutter) calc(var(--unit) * 5);
  display: flex;
  flex-direction: column;
}
.page > .grow { flex: 1; }

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

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

/* Titles are Helvetica bold. */
.t-display {
  font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.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); }

/* ---- Top edge ------------------------------------------------------ */

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

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

.foot {
  border-top: 1px solid var(--rule);
  margin-top: calc(var(--unit) * 6);
  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; }

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

@media (max-width: 40em) {
  .row { column-gap: var(--gutter); }
  .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; }
}