/* Collider: the newsletter's warm peach page, red masthead and accents,
   bold sans headings over a serif reading column. */

:root:has(.collider) {
  --collider-bg: light-dark(#fff7f3, #1b1513);
  --collider-ink: light-dark(#333132, #f3e9e4);
  --collider-text: light-dark(#3d3a3b, #ddd0ca);
  --collider-muted: light-dark(#8a7a74, #a8958e);
  --collider-red: light-dark(#ee212e, #ff5a63);
  --collider-line: light-dark(#fab8a5, #5a3a33);
  --collider-card: light-dark(#ffffff, #241c19);
  --collider-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pw-bg: var(--collider-bg);
  --pmx-color-bg: var(--collider-bg);
  --pmx-color-link: var(--collider-red);
}
body:has(.collider) { background: var(--collider-bg); }

.collider { max-width: 40rem; margin: 0 auto; color: var(--collider-text); }
.collider-masthead { margin: 0 0 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--collider-line); }
/* The masthead artwork has a peach ground; keep it on peach in dark mode too. */
.collider-masthead a { display: block; padding: 0.5rem 0.75rem; border-radius: 14px; background: #fff7f3; }
.collider-masthead img { display: block; width: 100%; height: auto; border-radius: 0; }
.collider-tagline {
  margin: 0.6rem 0 0; text-align: right;
  color: var(--collider-ink); font-family: var(--collider-sans); font-weight: 700; font-size: 1.05rem;
}
.collider-edition-link > *:is(ul, ol, div) { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.collider-edition-link li::marker { content: none; }
.edition-chip {
  display: inline-block; color: var(--collider-red); font-family: var(--collider-sans);
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
}
.edition-chip:hover { text-decoration: underline; }

.collider .pmx-document { --pmx-document-measure: 40rem; }
.collider .pmx-prose { font-family: var(--pw-font-serif); font-size: 1.12rem; line-height: 1.7; color: var(--collider-text); }
.collider .pmx-document h1, .collider .pmx-document h2, .collider .pmx-document h3 {
  color: var(--collider-ink); font-family: var(--collider-sans); font-weight: 700; letter-spacing: -0.01em;
}
.collider .pmx-document h1 { font-size: clamp(2rem, 4.4vw, 2.75rem); line-height: 1.12; letter-spacing: -0.02em; }
.collider .pmx-document h2 { font-size: 1.5rem; color: var(--collider-red); }
.collider .pmx-document h3 { font-size: 1.15rem; }
.collider .pmx-prose strong { color: var(--collider-ink); font-family: var(--collider-sans); }
.collider .pmx-prose img[data-pmx-image] { border-radius: 10px; }
.collider .pmx-prose em { color: var(--collider-muted); }
.collider .pmx-document > .pmx-prose + .pmx-prose { border-top: 1px solid var(--collider-line); margin-top: 2.5rem; padding-top: 2rem; }
.collider .pmx-heading-anchor { color: var(--collider-line); }

/* The edition list on /collider */
.collider .card-grid > .pmx-query-results { grid-template-columns: 1fr; gap: 1.25rem; }
.collider .edition-card {
  flex-direction: row; align-items: stretch; border-radius: 14px;
  background: var(--collider-card); border-color: var(--collider-line);
}
.collider .edition-card .card-media { flex: 0 0 38%; aspect-ratio: 4 / 3; }
.collider .edition-card .card-title { font-family: var(--collider-sans); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--collider-ink); }
.collider .edition-card .card-date {
  order: -1; margin: 0; padding: 0; color: var(--collider-red); font-family: var(--collider-sans);
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
}

.collider-footer { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--collider-line); color: var(--collider-muted); font-size: 0.95rem; }
.collider-footer a { color: var(--collider-red); }

@media (max-width: 640px) {
  .collider .edition-card { flex-direction: column; }
  .collider .edition-card .card-media { flex-basis: auto; aspect-ratio: 16 / 10; }
}

/* Links transcluded into an edition read as part of its Dead Cat list. */
.collider .pmx-prose .pmx-document[data-type="link"] { --pmx-document-measure: none; margin: 1.6rem 0; padding: 0; max-width: none; }
.collider .pmx-prose .pmx-document[data-type="link"] > .pmx-prose { margin: 0; padding: 0; border: 0; }
.collider .pmx-prose .pmx-document[data-type="link"] p { margin: 0 0 0.6rem; }