/* The content pages. Deliberately its own stylesheet rather than desktop.css:
   these pages carry no 3D scene and no app chrome, they are read rather than
   played with, and they must render with no JavaScript at all. Same paper and
   ink as the home page so they do not feel like a different site. */
:root {
  --paper: #f4f2ed;
  --ink: #282b27;
  --muted: #6e7664;
  --line: #dcded5;
  --panel: #e9ece3;
  --signal: #d74738;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font:
    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.site-head {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  max-width: 860px;
  margin: 0 auto;
  padding: 26px 28px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--ink);
  text-decoration: none;
}
.brand img {
  border-radius: 5px;
}
.site-head nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-left: auto;
  font-size: 12.5px;
}
.site-head nav a {
  color: var(--muted);
  text-decoration: none;
}
.site-head nav a:hover {
  color: var(--ink);
}

main {
  max-width: 860px;
  margin: 0 auto;
  padding: 44px 28px 20px;
}
.eyebrow {
  font: 9px var(--mono);
  letter-spacing: 2px;
  color: #717c68;
  margin: 0 0 18px;
}
h1 {
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.1;
  letter-spacing: -1.6px;
  font-weight: 500;
  margin: 0 0 20px;
}
h2 {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.6px;
  font-weight: 500;
  margin: 44px 0 14px;
}
.lede {
  font-size: 17px;
  line-height: 1.7;
  color: #5c6455;
  margin: 0 0 32px;
}
p {
  margin: 0 0 16px;
}
a {
  color: #3f5b46;
}
ul {
  margin: 0 0 16px;
  padding-left: 20px;
}
li {
  margin-bottom: 8px;
}
code {
  font: 12.5px var(--mono);
  background: #e3e7dc;
  border-radius: 4px;
  padding: 1px 5px;
}

/* Wide tables scroll inside their own box; the page body never does. */
.table-scroll {
  overflow-x: auto;
  margin: 26px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
}
table.compare {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
  font-size: 13px;
  background: var(--panel);
}
table.compare th,
table.compare td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid #dce1d3;
  vertical-align: top;
}
table.compare thead th {
  font: 9px var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6b7464;
  background: #e3e7dc;
}
table.compare tbody th {
  font-weight: 600;
  white-space: nowrap;
}
table.compare tr:last-child th,
table.compare tr:last-child td {
  border-bottom: 0;
}
table.compare tr.is-us {
  background: #e2e8dc;
}

.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 20px;
}
.two-up h2 {
  margin-top: 24px;
  font-size: 17px;
}

.card-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.card-list a {
  display: grid;
  gap: 4px;
  padding: 18px 22px;
  background: var(--panel);
  text-decoration: none;
  color: var(--ink);
}
.card-list a:hover {
  background: #e3e8db;
}
.card-list span {
  font-size: 12.5px;
  color: var(--muted);
}

.checked,
.back {
  font-size: 12px;
  color: #7e8677;
}
.back {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.site-foot {
  max-width: 860px;
  margin: 40px auto 0;
  padding: 24px 28px 56px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.site-foot strong {
  color: var(--ink);
}

@media (max-width: 640px) {
  .two-up {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .site-head nav {
    margin-left: 0;
    width: 100%;
  }
  main {
    padding: 32px 22px 16px;
  }
}

/* The 404. Same page furniture as everything else; the only extra is the
   address that missed, set in mono so it reads as a path and not a sentence. */
.notfound-path {
  margin: -12px 0 28px;
}
.notfound-path code {
  font-size: 13px;
  padding: 4px 9px;
  color: var(--signal);
  background: #efe4e0;
  word-break: break-all;
}
.notfound .card-list {
  margin-top: 28px;
}

.site-credits {
  margin-top: 18px;
  color: #8a9280;
}
.site-credits a {
  color: #6e7664;
}