/* The Xealot newsletter page. Style file: values come from these tokens and the site tokens in styles.css. */
:root {
  /* Type scale, ratio 1.25 */
  --xl-fs-xs: 0.8rem;
  --xl-fs-sm: 0.9rem;
  --xl-fs-md: 1rem;
  --xl-fs-lg: 1.25rem;
  --xl-fs-xl: 1.563rem;
  --xl-fs-2xl: 1.953rem;
  --xl-lh-tight: 1.15;
  --xl-lh-body: 1.55;
  /* Spacing scale, 8px base */
  --xl-s1: 0.5rem;
  --xl-s2: 1rem;
  --xl-s3: 1.5rem;
  --xl-s4: 2rem;
  --xl-s5: 3rem;
  --xl-s6: 4rem;
}

.xl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--xl-s5);
  align-items: center;
}
.xl-kicker {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: var(--xl-fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-text);
  margin-bottom: var(--xl-s1);
}
.xl-say { font-family: "Space Mono", ui-monospace, monospace; font-size: var(--xl-fs-sm); color: var(--ink-soft); margin-top: var(--xl-s1); }
.xl-facts { display: flex; flex-wrap: wrap; gap: var(--xl-s1) var(--xl-s3); margin-top: var(--xl-s3); list-style: none; }
.xl-facts li { font-size: var(--xl-fs-sm); font-weight: 600; color: var(--ink); padding-left: var(--xl-s2); border-left: 3px solid var(--orange); }

/* Signup slot */
.xl-form {
  background: var(--panel);
  border: 2px dashed var(--silver-deep);
  border-radius: var(--r);
  padding: var(--xl-s4) var(--xl-s3);
}
.xl-form h2 { font-size: var(--xl-fs-xl); margin-bottom: var(--xl-s1); max-width: none; }
.xl-form p { color: var(--ink-soft); font-size: var(--xl-fs-md); }
.xl-form-flag {
  display: inline-block;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: var(--xl-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--orange-soft);
  color: var(--orange-text);
  border-radius: var(--r);
  padding: calc(var(--xl-s1) / 2) var(--xl-s1);
  margin-bottom: var(--xl-s2);
}
.xl-form-fake { display: grid; gap: var(--xl-s1); margin-top: var(--xl-s3); }
.xl-form-fake span {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--silver-deep);
  font-size: var(--xl-fs-sm);
  padding: var(--xl-s1) var(--xl-s2);
}

.xl-form-embed { min-width: 0; width: 100%; }
.xl-form-embed iframe { display: block; max-width: 100%; }

/* What you get: numbered strip */
.xl-get {
  list-style: none;
  counter-reset: get;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  margin-top: var(--xl-s4);
}
.xl-get li { counter-increment: get; padding: var(--xl-s3) var(--xl-s3) 0 0; }
.xl-get li + li { padding-left: var(--xl-s3); border-left: 1px solid var(--line); }
.xl-get li::before {
  content: counter(get, decimal-leading-zero);
  display: block;
  font-family: "Space Mono", ui-monospace, monospace;
  color: var(--orange-text);
  font-size: var(--xl-fs-lg);
  margin-bottom: var(--xl-s1);
}
.xl-get h3 { font-size: var(--xl-fs-lg); }
.xl-get p { color: var(--ink-soft); font-size: var(--xl-fs-md); line-height: var(--xl-lh-body); }

/* Sample issue, shown as an email */
.xl-sample-wrap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--xl-s5); align-items: start; }
.xl-mail {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.xl-mail-head {
  background: var(--dark);
  color: var(--on-dark);
  padding: var(--xl-s2) var(--xl-s3);
  font-size: var(--xl-fs-sm);
  display: grid;
  gap: calc(var(--xl-s1) / 2);
}
.xl-mail-head b { color: var(--silver); font-weight: 600; margin-right: var(--xl-s1); }
.xl-mail-body { padding: var(--xl-s3); }
.xl-mail-body h3 { font-size: var(--xl-fs-lg); margin-top: var(--xl-s3); }
.xl-mail-body h3:first-child { margin-top: 0; }
.xl-mail-body .xl-lead { color: var(--ink); line-height: var(--xl-lh-body); }
.xl-sec {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: var(--xl-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange-text);
  margin-top: var(--xl-s3);
  padding-top: var(--xl-s2);
  border-top: 1px solid var(--line);
}
.xl-item { margin-top: var(--xl-s2); }
.xl-item h4 { font-family: "Archivo", system-ui, sans-serif; font-size: var(--xl-fs-md); font-weight: 800; }
.xl-item .xl-src { font-size: var(--xl-fs-xs); color: var(--ink-soft); }
.xl-item p { font-size: var(--xl-fs-sm); color: var(--ink-soft); line-height: var(--xl-lh-body); margin-top: calc(var(--xl-s1) / 2); }
.xl-item .xl-take { color: var(--ink); }

@media (max-width: 900px) {
  .xl-hero-grid, .xl-sample-wrap { grid-template-columns: 1fr; gap: var(--xl-s4); }
  .xl-get { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xl-get li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .xl-get { grid-template-columns: 1fr; }
  .xl-get li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}