/* Prodromos site styles, taken from the digest email (send_digest.py) so the
   website and the inbox read as one product: same navy accent and blue tint,
   the same system font stack, the digest's topic-section header, paper rows,
   study-type badges, feedback buttons and reply callout. */

:root {
  --accent: #1a2f4d;
  --tint: #dce5ef;
  --ink: #1a1a1a;
  --body: #333;
  --meta: #555;
  --muted: #999;
  --rule: #e0e0e0;
  --bg: #ffffff;

  --rct-bg: #dfeaf7;  --rct-ink: #235a8f;
  --sr-bg: #f1ecf9;   --sr-ink: #6b3fa0;
  --pre-bg: #fff3cd;  --pre-ink: #8a6d1b;

  --yes-bg: #e3f4e8;  --yes-ink: #1b6b3a;  --yes-bd: #b9e0c6;
  --no-bg: #fbe6e6;   --no-ink: #9b2c2c;   --no-bd: #efc2c2;
  --save-bg: #fdf3d7; --save-ink: #8a6512; --save-bd: #ecd79a;
}
/* Light only for now (Tom, 2026-10-02): a dark scheme will come later, once
   it has been designed properly rather than derived. `color-scheme` stops
   browsers darkening form controls and scrollbars on their own. */
:root { color-scheme: light; }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}
a { color: var(--accent); }
.bar { height: 8px; background: var(--accent); }
.wrap { max-width: 640px; margin: 0 auto; padding: 22px 16px 40px; }

/* Masthead: the digest's wordmark, plus a quiet nav. */
header {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 6px 18px; margin-bottom: 26px;
}
.wordmark {
  font-size: 18px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); text-decoration: none;
}
nav { font-size: 13px; }
nav a { color: var(--meta); text-decoration: none; margin-left: 16px; }
nav a:first-child { margin-left: 0; }
nav a:hover, nav a[aria-current="page"] { color: var(--accent); }

/* Headline: the digest's "3 new relevant papers for Thomas" line, scaled up. */
h1 { font-size: 22px; line-height: 1.3; color: var(--ink); margin: 0 0 10px; }
h1 .hl { color: var(--accent); }
.lead { font-size: 16px; color: var(--meta); margin: 0 0 8px; }
.meta { font-size: 13px; color: var(--meta); margin: 0 0 8px; }

/* Section header: the digest's per-topic header. */
h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
  background: var(--tint); border-left: 4px solid var(--accent);
  padding: 6px 0 6px 10px; margin: 32px 0 12px;
}
h3 { font-size: 15px; color: var(--ink); margin: 0 0 4px; }
p, li { color: var(--body); }
li { margin-bottom: 6px; }

/* Paper rows, as in the digest. Also used for steps and plans. */
.rows { list-style: none; padding: 0; margin: 0; }
.row { padding: 10px 8px; border-bottom: 1px solid var(--rule); }
.row:last-child { border-bottom: 0; }
.row .title { font-size: 15px; font-weight: 600; color: var(--accent); }
.row .num { color: var(--muted); font-weight: 400; }
.row .src { font-size: 13px; color: var(--meta); margin-top: 2px; }
.row .src .topic { color: var(--accent); font-size: 12px; }
.row .why { font-size: 13px; color: var(--body); margin-top: 6px; }
.label { color: var(--accent); font-weight: 600; }

.badge {
  display: inline-block; border-radius: 3px; padding: 1px 6px;
  font-size: 12px; font-weight: 600; margin: 2px 0 0 6px;
}
.badge.rct { background: var(--rct-bg); color: var(--rct-ink); }
.badge.sr  { background: var(--sr-bg);  color: var(--sr-ink); }
.badge.pre { background: var(--pre-bg); color: var(--pre-ink); }

.buttons { margin-top: 10px; }
.btn {
  display: inline-block; padding: 3px 9px; margin-right: 5px; border-radius: 4px;
  font-size: 11px; font-weight: 600; text-decoration: none; border: 1px solid;
}
.btn.yes  { background: var(--yes-bg);  color: var(--yes-ink);  border-color: var(--yes-bd); }
.btn.no   { background: var(--no-bg);   color: var(--no-ink);   border-color: var(--no-bd); }
.btn.save { background: var(--save-bg); color: var(--save-ink); border-color: var(--save-bd); margin-left: 13px; }

/* A framed digest sample on the homepage. */
.digest { border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; margin: 6px 0 8px; }
.digest .bar { height: 6px; }
.digest .inner { padding: 14px 10px 6px; }
.digest .wordmark { font-size: 14px; display: block; margin: 0 0 12px 8px; }
.digest .mailmark { display: flex; align-items: center; gap: 9px; margin: 0 0 14px 8px; }
.digest .mailmark img { display: block; width: 14px; height: auto; }
.digest .mailmark .wordmark { margin: 0; }
.digest .head { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 4px 8px; }
.digest .head .hl { color: var(--accent); }
.caption { font-size: 12px; color: var(--muted); margin: 0 0 4px; }

/* The digest's reply callout. */
.callout {
  background: var(--tint); border-radius: 4px; padding: 12px 14px;
  font-size: 14px; color: var(--body); line-height: 1.55; margin: 16px 0;
}
.callout strong { color: var(--ink); }

/* Plans, as paper rows set side by side on wider screens. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 14px 0; }
.plan { border: 1px solid var(--rule); border-top: 4px solid var(--accent); border-radius: 4px; padding: 12px 14px; }
.plan .name { font-size: 15px; font-weight: 700; color: var(--accent); }
.plan .price { font-size: 13px; font-weight: 600; color: var(--meta); margin: 2px 0 8px; }
.plan ul { padding-left: 18px; margin: 0; font-size: 14px; }

table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 14px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.tablewrap { overflow-x: auto; }

.draft {
  background: var(--pre-bg); color: var(--pre-ink); border-radius: 4px;
  padding: 12px 14px; margin: 0 0 18px; font-size: 13px;
}

/* The digest's footer. */
footer { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); }
footer a { color: var(--muted); margin-right: 12px; }
footer p { color: var(--muted); margin: 8px 0 0; }

/* ------------------------------------------------------------------------
   Homepage (2026-10-02 redesign). Wider page, two-column hero on a pale-blue
   band, the sample digest framed as a real email, three benefits, and one
   clear call to action. Everything above still governs the inner pages.
   ------------------------------------------------------------------------ */
.wide { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.site header { padding: 20px 0 0; margin-bottom: 0; align-items: center; }
.logo { display: block; line-height: 0; }
.logo img { display: block; width: 139px; height: auto; }

.hero { background: var(--tint); margin-top: 22px; padding: 56px 0 64px; }
.hero .wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px;
}
.hero h1 { font-size: 40px; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 18px; text-wrap: balance; }
.hero h1 .hl, .nowrap { white-space: nowrap; }
.hero .lead { font-size: 18px; color: var(--body); margin: 0 0 28px; max-width: 34em; }

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-bottom: 26px; }
.button {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 15px; padding: 12px 22px; border-radius: 6px;
}
.button:hover { background: #24406a; }
.textlink { font-weight: 600; font-size: 15px; text-decoration: none; }
.textlink:hover { text-decoration: underline; }


/* The sample digest, framed as a real email in an inbox. */
.mail {
  background: var(--bg); border: 1px solid #c9d3df; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(26, 47, 77, .06), 0 12px 32px rgba(26, 47, 77, .12);
}
.mail-head { padding: 12px 16px; border-bottom: 1px solid var(--rule); font-size: 12px; color: var(--meta); line-height: 1.7; }
.mail-head .k { display: inline-block; width: 58px; color: var(--muted); }
.mail-head .subj { color: var(--ink); font-weight: 600; }
.mail .digest { border: 0; border-radius: 0; margin: 0; }
.mail .clip { max-height: 520px; overflow: hidden; position: relative; }
.mail .clip::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  background: linear-gradient(rgba(255,255,255,0), #fff);
}
.hero .caption { margin: 10px 2px 0; color: var(--meta); }

/* Three benefits. */
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding: 56px 0 8px; }
.benefit::before { content: ""; display: block; width: 36px; height: 3px; background: var(--accent); margin-bottom: 14px; }
.benefit h3 { font-size: 17px; color: var(--ink); margin: 0 0 6px; }
.benefit p { font-size: 15px; color: var(--meta); margin: 0; }

.closing {
  margin: 48px 0 0; padding: 28px 30px; border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: 4px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
}
.closing h3 { font-size: 18px; margin: 0 0 4px; }
.closing p { margin: 0; color: var(--meta); }
.site footer { margin-top: 56px; padding-bottom: 40px; }

/* ------------------------------------------------------------------------
   Inner pages, same system as the homepage: a slimmer single-column title
   band, then content on the wide page. Long text sits in .prose at a
   readable measure, left-aligned with the masthead.
   ------------------------------------------------------------------------ */
.hero.slim { padding: 48px 0 52px; }
.hero.slim .wide { display: block; }
.hero.slim h1 { font-size: 36px; margin-bottom: 12px; }
.hero.slim .lead { margin-bottom: 0; }
.hero.slim .cta { margin: 26px 0 0; }
.hero .meta { font-size: 14px; color: var(--meta); margin: 0; }
.hero .draft { max-width: 720px; margin: 0 0 22px; }

.prose { max-width: 720px; padding-top: 12px; }
.prose > h2:first-child { margin-top: 36px; }
h2.section-title {
  font-size: 24px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: -.01em;
  background: none; border: 0; padding: 0; margin: 56px 0 6px;
}
.prose > h2.section-title:first-child { margin-top: 48px; }
.plans + .cards { padding-top: 56px; }
.hero + .wide > .cards:first-child { padding-top: 44px; }
.section-lead { color: var(--meta); margin: 0 0 4px; max-width: 40em; }

/* Card grid: the benefit style, reused for steps and contact options. */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; padding: 28px 0 0; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card::before { content: ""; display: block; width: 36px; height: 3px; background: var(--accent); margin-bottom: 14px; }
.card .step { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .06em; margin: 0 0 4px; }
.card h3 { font-size: 17px; color: var(--ink); margin: 0 0 6px; }
.card p, .card li { font-size: 15px; color: var(--meta); margin: 0 0 6px; }
.card ul { padding-left: 18px; margin: 0; }

/* Plans on the wide page. */
.site .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 36px 0 0; }
.site .plan { padding: 22px 22px 20px; border-top-width: 4px; background: var(--bg); }
.site .plan .name { font-size: 18px; }
.site .plan .price { font-size: 14px; margin: 4px 0 14px; }
.site .plan ul { font-size: 15px; }
.plan .inherit { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.site .plan.featured { border-color: var(--accent); box-shadow: 0 1px 2px rgba(26,47,77,.06), 0 12px 32px rgba(26,47,77,.10); }

@media (max-width: 1000px) and (min-width: 821px) {
  .site .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .hero.slim { padding: 32px 0 36px; }
  .hero.slim h1 { font-size: 28px; }
  .cards, .cards.three, .site .plans { grid-template-columns: 1fr; gap: 26px; }
  .section-title { margin-top: 44px; }
  .hero { padding: 36px 0 44px; }
  .hero .wide { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: 30px; }
  .hero .lead { font-size: 16px; }
  .benefits { grid-template-columns: 1fr; gap: 26px; padding-top: 40px; }
  .closing { padding: 22px; }
  .mail .clip { max-height: 440px; }
}

/* ------------------------------------------------------------------------
   Join form (site/join.html, generated by build_join_page.py).
   ------------------------------------------------------------------------ */
.joinform h2 { margin-top: 40px; }
.sintro { color: var(--meta); font-size: 15px; }
.q { margin: 22px 0; }
.q[hidden] { display: none; }
.qhead { font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.qnum { color: var(--muted); font-weight: 600; margin-right: 6px; }
.opt { font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 6px; }
.qprompt { color: var(--meta); font-size: 15px; margin: 0 0 10px; }
.joinform input[type=text], .joinform input[type=email], .joinform textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid #c9d3df; border-radius: 6px; padding: 10px 12px;
}
.joinform textarea { resize: vertical; }
.joinform input:focus, .joinform textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.opt-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; color: var(--body); cursor: pointer; }
.opt-row input { margin-top: 5px; accent-color: var(--accent); }
.topic { border: 1px solid var(--rule); border-radius: 6px; padding: 12px 14px; margin: 0 0 8px; }
.topic:has(input:checked) { border-color: var(--accent); background: #f5f8fb; }
.topic label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.topic input { margin-top: 5px; accent-color: var(--accent); flex: none; }
.tbody { display: block; }
.tname { display: block; font-weight: 700; color: var(--accent); }
.tdesc { display: block; font-size: 14px; color: var(--body); margin-top: 2px; }
.tmore { margin: 6px 0 0 26px; font-size: 13px; color: var(--meta); }
.tmore summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.tmore ul { margin: 6px 0 0; padding-left: 18px; }
.tmore li { color: var(--meta); margin-bottom: 3px; }
.tmore .j { color: var(--muted); font-style: italic; }
.tmore .nc { margin: 6px 0 0; color: var(--meta); }
.extra { border-top: 1px solid var(--rule); margin-top: 28px; }
.addtopic {
  font: inherit; font-weight: 600; color: var(--accent); background: var(--bg);
  border: 1px dashed var(--accent); border-radius: 6px; padding: 10px 16px; cursor: pointer;
}
.addtopic:hover { background: #f5f8fb; }
.linkbtn { font: inherit; font-size: 14px; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.consent { margin: 8px 0 18px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.joinform .button { border: 0; cursor: pointer; font: inherit; font-weight: 600; }