/* The download page wears the app's design (DESIGN.md): flat, ink for actions, colour only for
   meaning, the app's own typefaces served from this site (SIL OFL 1.1, licences beside them).
   Composed like an editorial portfolio: a pale field like the app's lock screen, then a strict
   grid with a narrow label column, numbered entries, a gallery, and a lot of air. */

@font-face {
  font-family: "Wix Madefor Text";
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/wix-madefor-text/cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Wix Madefor Text";
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/wix-madefor-text/cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Wix Madefor Text";
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/wix-madefor-text/latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Wix Madefor Text";
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/wix-madefor-text/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: "Wix Madefor Display";
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/wix-madefor-display/cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Wix Madefor Display";
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/wix-madefor-display/cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Wix Madefor Display";
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/wix-madefor-display/latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Wix Madefor Display";
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/wix-madefor-display/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;
}

:root {
  color-scheme: light;
  --paper: #f8f9f8;
  --sheet: #ffffff;
  --bar: #eef0ef;
  --well: #edefee;
  --rule: #e2e5e3;
  --line: #cdd2cf;
  --ink: #131615;
  --ink-hover: #2b302e;
  --ink-2: #3f4542;
  --mute: #626a66;
  --on-ink: #f8f9f8;
  --warn: #a84d00;
  --warn-soft: #f9e3d7;
  --frame: rgba(19, 22, 21, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #121514;
    --sheet: #1a1d1c;
    --bar: #171a19;
    --well: #202423;
    --rule: #262a29;
    --line: #3a3f3d;
    --ink: #ecefee;
    --ink-hover: #d2d7d5;
    --ink-2: #c3c9c6;
    --mute: #929a96;
    --on-ink: #121514;
    --warn: #f98a17;
    --warn-soft: #34200f;
    --frame: rgba(255, 255, 255, 0.08);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 "Wix Madefor Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ink);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* One grid for the whole page: the same margins top to bottom. */
.top,
main,
.foot {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: 48px;
}

.top {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
  align-items: center;
  gap: 24px;
  padding-block: 28px;
}

.logo {
  display: block;
  width: 40px;
  height: 40px;
  fill: currentColor;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  font-size: 14px;
  font-weight: 500;
}

.nav a {
  color: var(--ink-2);
  text-decoration: none;
}

.nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Small boxes with a hairline, like the controls in the app's tables. */
.lang {
  justify-self: end;
  display: inline-flex;
  margin: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13px;
  font-weight: 500;
}

.lang span,
.lang a {
  padding: 5px 12px;
}

.lang span {
  background: var(--ink);
  color: var(--on-ink);
}

.lang a {
  text-decoration: none;
}

.lang a:hover {
  background: var(--well);
}

/* The field: the app's lock screen as the page's picture, pale and quiet. */
.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(120px, 1fr) auto auto;
  grid-template-areas:
    "tl tr"
    ". ."
    "headline headline"
    "bl br";
  column-gap: 32px;
  min-height: min(68vh, 640px);
  padding: 32px;
  background: var(--bar);
}

.corner {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.tl {
  grid-area: tl;
}

.tr {
  grid-area: tr;
  text-align: right;
}

.bl {
  grid-area: bl;
}

.br {
  grid-area: br;
  text-align: right;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: "Wix Madefor Display", "Wix Madefor Text", "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  text-wrap: balance;
}

h1 {
  grid-area: headline;
  max-width: 13em;
  margin: 0 0 40px -4px;
  font-size: clamp(40px, 6.6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 32px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 14px;
  font-weight: 500;
}

.icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.notice .icon {
  margin-top: 2px;
}

/* A section: its name small in the left column, its content on the right; air between them. */
.block {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 16px 24px;
  padding-block: 64px 72px;
  border-top: 1px solid var(--rule);
}

.notice + .block {
  border-top: 0;
}

.label {
  font-family: "Wix Madefor Text", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-2);
}

.content {
  min-width: 0;
}

.channel + .channel {
  margin-top: 56px;
}

h3 {
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

h4 {
  margin-top: 32px;
  font-size: 15px;
  letter-spacing: 0;
  font-family: "Wix Madefor Text", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
}

.version {
  color: var(--mute);
}

.muted {
  margin: 6px 0 0;
  color: var(--mute);
  font-size: 13px;
}

.no {
  flex: none;
  min-width: 3ch;
  color: var(--mute);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.downloads,
.steps {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.downloads li,
.steps li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 20px;
  border-top: 1px solid var(--rule);
}

.downloads li:last-child,
.steps li:last-child {
  border-bottom: 1px solid var(--rule);
}

.downloads p,
.steps p {
  margin: 0;
}

.item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  min-width: 0;
}

/* The one filled ink box per platform: the download. */
.download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: "Wix Madefor Display", "Wix Madefor Text", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}

.download:hover {
  background: var(--ink-hover);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  min-width: 0;
  color: var(--mute);
  font-size: 13px;
}

.later p {
  color: var(--mute);
}

code {
  font: 12px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace;
  overflow-wrap: anywhere;
}

.notes,
.text {
  max-width: 62ch;
  margin: 10px 0 0;
  color: var(--ink-2);
  white-space: pre-wrap;
}

.text {
  margin: 0;
  white-space: normal;
}

.steps p {
  max-width: 62ch;
  color: var(--ink-2);
}

.steps strong {
  color: var(--ink);
  font-weight: 600;
}

/* The gallery: screens of the app, numbered like plates; they follow the reader's day or night. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
}

figure {
  margin: 0;
}

figure img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 0 0 1px var(--frame);
}

figcaption {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-2);
}

.gallery + .muted {
  margin-top: 32px;
}

/* The footer's rule spans the content column, like the sections' rules above it. */
.foot {
  width: auto;
  max-width: none;
  margin-inline: max(48px, calc((100% - 1184px) / 2));
  padding-inline: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 24px;
  padding-block: 24px 48px;
  border-top: 1px solid var(--rule);
  color: var(--mute);
  font-size: 13px;
}

.foot a {
  color: var(--ink-2);
}

.foot > :last-child {
  text-align: right;
}

@media (max-width: 900px) {
  .top,
  main,
  .foot {
    padding-inline: 24px;
  }

  .top {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .field {
    padding: 24px;
    min-height: 460px;
  }

  .block {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 48px 56px;
  }

  .notice {
    padding-inline: 24px;
  }

  .gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .foot {
    margin-inline: 24px;
    padding-inline: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foot > :last-child {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .field {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "tl"
      "."
      "headline"
      "bl"
      "br";
    row-gap: 8px;
  }

  .tr {
    display: none;
  }

  .br {
    text-align: left;
  }
}