/* Site-wide responsive tuning on top of the Ananke/Tachyons base styles. */

/* ---------- Font sizes: scale down the Tachyons type ramp ---------- */
.f1 { font-size: 2.25rem; }
.f2 { font-size: 1.75rem; }
.f3 { font-size: 1.25rem; }
.f4 { font-size: 1.05rem; }
.f5 { font-size: 0.95rem; }
.f6 { font-size: 0.8rem; }
.f7 { font-size: 0.7rem; }

@media screen and (min-width: 30em) {
  .f1-l, .f1-ns { font-size: 3rem; }
  .f2-l, .f2-ns { font-size: 2.1rem; }
  .f3-l, .f3-ns { font-size: 1.4rem; }
}

/* ---------- Margins: near-zero on mobile, trimmed on desktop ---------- */
.ph3 { padding-left: .5rem; padding-right: .5rem; }
.pa3 { padding: .5rem; }

@media screen and (min-width: 60em) {
  .ph5-l { padding-left: 1rem; padding-right: 1rem; }
  .pa4-l, .pa5-l { padding: 1.5rem; }
}

article.center.measure-wide,
.measure-wide {
  max-width: 46em;
}

/* ---------- Hero / cover header: reduce height ---------- */
header.cover .pv6 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media screen and (min-width: 60em) {
  header.cover .pv6 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* ---------- Tables: light gray cells, white gaps between them ---------- */
.avenir table,
.nested-copy-line-height table {
  border-collapse: separate;
  border-spacing: 2px;
  width: 100%;
  margin: 1rem 0;
}

.avenir table th,
.avenir table td,
.nested-copy-line-height table th,
.nested-copy-line-height table td {
  background-color: #eee;
  border: 2px solid #fff;
  padding: .5rem .75rem;
  text-align: left;
}

.avenir table th,
.nested-copy-line-height table th {
  background-color: #ddd;
  font-weight: 600;
}

/* ---------- Preview tiles (home + /apps/ + /projects/) ---------- */
.tile-grid-item {
  width: 47%;
  max-width: 220px;
}

@media screen and (min-width: 30em) {
  .tile-grid-item {
    width: 200px;
  }
}

@media screen and (min-width: 60em) {
  .tile-grid-item {
    width: 200px;
  }
  .tile-grid {
    max-width: 1400px !important;
  }
}

.tile-grid-card {
  height: 230px;
}

.tile-grid-img {
  height: 90px;
  object-fit: contain;
  background: #f4f4f4;
  flex: none;
}

.tile-grid-card .f6 {
  font-size: 0.95rem;
}

.tile-grid-card .f7 {
  font-size: 0.85rem;
}