/* The design partners page (templates/site/partners.html). Loaded after dataset.css, which gives the watercolour
   base: paper, Newsreader, the night band, buttons and section headings. Only this page's own pieces are here. */

.kpis { grid-template-columns: repeat(3, 1fr); max-width: 820px; }

/* the five steps: gold numerals in a hairline column */
.steps { list-style: none; counter-reset: s; margin: 32px 0 0; padding: 0; max-width: 760px; border-top: 1px solid var(--rule); }
.steps li {
  counter-increment: s; position: relative;
  padding: 16px 0 16px 56px; border-bottom: 1px solid var(--rule);
  font-size: 19px; line-height: 28px; color: var(--ink-2);
}
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 12px;
  font-size: 30px; line-height: 36px; font-weight: 500; color: var(--gold-ink); font-variant-numeric: tabular-nums;
}
.steps b { color: var(--ink); }

/* plain lists: a hairline between items, no bullets */
.plain { list-style: none; margin: 24px 0 0; padding: 0; max-width: 760px; }
.plain li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 18px; line-height: 27px; color: var(--ink-2); }
.plain li:last-child { border-bottom: 0; }
.plain b { color: var(--ink); }

/* you get, we ask */
.pair { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; }
.card { padding: 24px 28px 12px; border-radius: 20px; background: rgba(247, 241, 227, 0.72); border: 1px solid var(--rule); }
.card h3 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.card .plain { margin-top: 12px; }
.card .plain li { font-size: 17px; line-height: 26px; }

#start pre { max-width: 760px; }
#start .lede { margin-top: 24px; }
#start .night-actions { margin-top: 32px; }

/* the landing page's dawn painting, glazed onto the paper; absent when the landing files are not served */
.dawn {
  height: 300px; margin-top: 24px;
  background: url(/assets/dawn-poster.jpg) 70% 50% / cover no-repeat;
  mix-blend-mode: multiply;
  -webkit-mask: linear-gradient(transparent, #000 35%); mask: linear-gradient(transparent, #000 35%);
}

@media (max-width: 760px) {
  .kpis { grid-template-columns: 1fr; }
  .kpi, .kpi + .kpi, .kpi:nth-child(even) { padding: 14px 0; border-left: 0; }
  .pair { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .steps li { padding-left: 44px; font-size: 17px; line-height: 26px; }
  .steps li::before { font-size: 24px; }
  .plain li { font-size: 17px; line-height: 26px; }
  .dawn { height: 200px; }
}