/* The gate's screens and the comments frame in this theme's clothes
   (docs/THEMES.md, The member gate, tier two; The comments): both link
   this sheet after the platform's. The fonts the manifest's tokens name,
   the paper's warm ground in light, headings in Newsreader at its display
   size, labels in Plex Sans small capitals like the site's, and readers'
   comments set in the story's serif, as letters to the paper. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..600&display=swap");

html {
  --gate-ground: light-dark(#f1ede3, Canvas);
  --gate-card: light-dark(#fffdf8, color-mix(in srgb, CanvasText 5%, Canvas));
  --gate-line: light-dark(#d9d4c8, color-mix(in srgb, CanvasText 18%, transparent));
}

.pixel-gate-title,
.pixel-comments-title {
  font-weight: 650;
  font-variation-settings: "opsz" 60;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.pixel-gate-label,
.pixel-gate-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pixel-gate-button { font-weight: 500; }

.pixel-comments-head {
  padding-top: 0.75rem;
  border-top: 3px solid CanvasText;
}

.pixel-comments-title { font-size: 1.5rem; }

.pixel-comment-author { font-weight: 600; }

.pixel-comment-time,
.pixel-comment-score { font-variant-numeric: tabular-nums; }

.pixel-comment-body {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.55;
}