:root {
  --wall: #131211; --wall-2: #1a1917;
  --cap: #b7b1a6; --cap-dim: #6f6a61; --cap-bright: #e8e3d8;
  --hairline: rgba(183,177,166,.18);
  --serif: "Didot", "Bodoni 72", "Palatino", Georgia, serif;
  --mono: "SF Mono", "Menlo", ui-monospace, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: radial-gradient(120% 90% at 50% 0%, var(--wall-2) 0%, var(--wall) 60%);
  color: var(--cap);
  font-family: var(--mono);
  min-height: 100vh;
  padding: clamp(20px, 4vh, 48px) 18px 70px;
  display: flex; flex-direction: column; align-items: center;
  -webkit-font-smoothing: antialiased;
}
header { text-align: center; margin-bottom: clamp(22px, 3.5vh, 44px); max-width: 640px; }
header .home {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cap-dim); text-decoration: none;
}
header .home:hover { color: var(--cap-bright); }
header h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: .3em; text-indent: .3em;
  color: var(--cap-bright); text-transform: uppercase;
}
header .lede {
  margin-top: 14px;
  font-size: 11px; line-height: 1.7;
  color: var(--cap);
}
header nav {
  margin-top: 20px;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
}
header nav a { color: var(--cap-dim); text-decoration: none; }
header nav a:hover { color: var(--cap-bright); }
header nav a.here { color: var(--cap-bright); border-bottom: 1px solid var(--cap-dim); padding-bottom: 2px; }
.studies {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 330px));
  gap: 36px 30px;
  justify-content: center;
  width: 100%;
}
.study canvas {
  display: block; width: 100%; height: auto;
  box-shadow: 0 16px 44px -14px rgba(0,0,0,.6), 0 3px 12px rgba(0,0,0,.35);
}
.study .t {
  margin-top: 14px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.study h2 {
  font-family: var(--mono); font-weight: 400;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cap-bright);
}
.study .sub { font-size: 9.5px; letter-spacing: .14em; color: var(--cap-dim); text-transform: uppercase; }
.study p { margin-top: 7px; font-size: 10.5px; line-height: 1.6; color: var(--cap-dim); }
.study .swatches { display: flex; margin-top: 10px; height: 14px; border-radius: 2px; overflow: hidden; }
.study .swatches i { flex: 1; }
@media (max-width: 1000px) { .studies { grid-template-columns: repeat(2, minmax(0, 340px)); } }
@media (max-width: 620px)  { .studies { grid-template-columns: minmax(0, 420px); } }