/* Terra Tinker front page: sells the map maker, then lists the other work. The same inks and typeface as the
   map maker and the plaque maker (carto/web/shared/shop.css): a white sheet on a grey-green table, black
   type, contour brown and hydro blue. The one picture is a real contour drawing,
   framed like a map sheet with its corner coordinates. */

@font-face {
  font-family: "Archivo";
  src: url("/shared/vendor/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --table: #e7eae3;
  --sheet: #ffffff;
  --ink: #1c211e;
  --ink-2: #4f5852;
  --rule: #d2d8cf;
  --contour: #9a5528;
  --hydro: #1a6fa8;
  --woodland: #dbe9cf;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--table); }
body {
  margin: 0;
  background: var(--table);
  color: var(--ink);
  font: 400 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--hydro); outline-offset: 3px; }

.sheet {
  max-width: 1040px;
  margin: 40px auto;
  padding: 56px 64px 64px;
  background: var(--sheet);
  border: 1.5px solid var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  grid-template-areas:
    "intro plate"
    "work  plate";
  column-gap: 64px;
  align-items: start;
}

.intro { grid-area: intro; }
.wordmark {
  margin: 0 0 28px;
  font-size: 22px;
  line-height: 1;
  font-weight: 760;
  font-stretch: 125%;
  letter-spacing: -0.01em;
}
.headline {
  margin: 0;
  font-size: clamp(36px, 5.2vw, 56px);
  line-height: 1.04;
  font-weight: 760;
  font-stretch: 115%;
  letter-spacing: -0.02em;
}
.lede { margin: 18px 0 0; max-width: 34ch; font-size: 21px; line-height: 1.4; color: var(--ink-2); }
.cta { margin: 28px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.button {
  display: inline-block;
  padding: 13px 26px;
  background: var(--ink);
  color: var(--sheet);
  font-size: 17px;
  font-weight: 650;
  text-decoration: none;
  border: 1.5px solid var(--ink);
}
.button:hover { background: var(--contour); border-color: var(--contour); }
.from { font-size: 15px; color: var(--ink-2); font-stretch: 90%; }

/* The plate: a contour drawing inside a neatline, coordinates at two corners. */
.plate { grid-area: plate; margin: 0; }
.neatline {
  position: relative;
  padding: 22px;
  outline: 1.5px solid var(--ink);
  outline-offset: -1px;
  box-shadow: inset 0 0 0 5px var(--sheet), inset 0 0 0 6px var(--ink);
}
.contours { display: block; width: 100%; height: auto; }
.contours path { fill: none; stroke: var(--contour); stroke-width: 0.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.contours path.index { stroke-width: 1.4; }
.contours path.lake { fill: #d6e6f2; stroke: var(--hydro); stroke-width: 1; }
.tick {
  position: absolute;
  font-size: 11px;
  font-stretch: 72%;
  font-weight: 560;
  color: var(--ink-2);
  background: var(--sheet);
  padding: 0 4px;
  white-space: nowrap;
}
.tick.nw { top: -9px; left: 14px; }
.tick.se { bottom: -9px; right: 14px; }
figcaption { margin-top: 14px; font-size: 13px; color: var(--ink-2); font-stretch: 85%; }

/* What you get, then the other work: plain lists, one rule between items. */
.work { grid-area: work; margin-top: 56px; }
.work h2 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--ink);
  font-size: 15px;
  font-weight: 650;
  font-stretch: 85%;
  letter-spacing: 0.01em;
}
.work h2.also { margin-top: 48px; }
.points { list-style: none; margin: 0; padding: 0; }
.points li { padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); max-width: 58ch; }
.points b { color: var(--ink); font-weight: 650; }
.pieces { list-style: none; margin: 0; padding: 0; }
.piece { padding: 22px 0 24px; border-bottom: 1px solid var(--rule); }
.piece h3 { margin: 0; font-size: 26px; font-weight: 700; font-stretch: 110%; letter-spacing: -0.01em; line-height: 1.2; }
.piece h3 a { text-decoration: none; background: linear-gradient(var(--contour), var(--contour)) 0 100% / 100% 2px no-repeat; padding-bottom: 2px; }
.piece h3 a:hover { color: var(--contour); }
.piece p { margin: 8px 0 0; max-width: 54ch; color: var(--ink-2); }

@media (max-width: 860px) {
  .sheet {
    margin: 0;
    padding: 32px 16px 40px;
    border-width: 0 0 1.5px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "plate" "work";
  }
  .work { margin-top: 40px; }
  .plate { margin-top: 36px; }
  .lede { font-size: 19px; }
}