/* Artificial Record — one stylesheet, no build step.
   Restores the Base44 presentation on static, server-rendered HTML. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  color-scheme:light;
  --paper:#FBFAF8;        /* masthead / chrome ground */
  --page:#F2F0EC;         /* article ground */
  --card:#FFFFFF;
  --ink:#141414;
  --ink-2:#4A4A48;
  --ink-3:#8A8A86;
  --rule:#1a1a1a;
  --rule-soft:#D9D6D0;
  --accent:#9B1C1C;       /* the crimson: eyebrows, drop cap, links out */
  --link:#9B1C1C;
  --measure:44rem;        /* wider than before, matching the old layout */
  --wide:74rem;           /* masthead + recent-editions grid */
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --label:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--body);font-size:20px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link)}

/* ---------- masthead ---------- */
header.site{background:var(--paper);padding:44px 22px 0;text-align:center}
header.site .inner{max-width:var(--wide);margin:0 auto}
.wordmark{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(38px,8vw,86px);line-height:1;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;
}
.tagline{
  margin:14px 0 0;font-family:var(--label);font-size:12px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
}
.rules{margin:26px 0 0;border-top:1px solid var(--rule);height:4px;border-bottom:1px solid var(--rule)}
.dateline{
  margin:12px 0 22px;font-family:var(--label);font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
}

/* ---------- subscribe: slim bar under the masthead ---------- */
.subbar{background:var(--paper);border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.subbar .inner{
  max-width:var(--wide);margin:0 auto;padding:16px 22px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.subbar .kicker{
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap;
}
.subbar .say{font-size:19px;color:var(--ink);margin:0;flex:1 1 260px}
.subbar .cta{
  flex:0 0 auto;font-family:var(--label);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  background:var(--ink);color:#fff;padding:11px 22px;border-radius:2px;
}
.subbar .cta:hover{background:var(--accent)}

/* ---------- nav ---------- */
nav.site{background:var(--paper);border-bottom:1px solid var(--rule-soft)}
nav.site .inner{
  max-width:var(--wide);margin:0 auto;padding:11px 22px;
  display:flex;gap:26px;justify-content:center;
  font-family:var(--label);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
}
nav.site a{color:var(--ink-2);text-decoration:none}
nav.site a:hover{color:var(--accent)}

/* ---------- article ---------- */
main{max-width:var(--measure);margin:0 auto;padding:52px 22px 0}
.meta-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--label);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.meta-row .eyebrow{color:var(--accent)}
.meta-row .readtime{color:var(--ink-3);font-weight:400;white-space:nowrap}
.edition h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,5.2vw,46px);line-height:1.12;letter-spacing:-.015em;
  margin:14px 0 8px;
}
.standfirst{margin:0 0 30px;color:var(--ink-2);font-size:20px;font-style:italic}
.prose > p:first-of-type::first-letter{
  float:left;font-family:var(--display);font-weight:700;color:var(--accent);
  font-size:5.1em;line-height:.82;padding:.04em .09em 0 0;
}
.prose h2{
  font-family:var(--display);font-weight:700;font-size:29px;line-height:1.2;
  margin:46px 0 14px;padding-top:20px;border-top:1px solid var(--rule-soft);
}
.prose h3{font-family:var(--display);font-weight:600;font-size:23px;line-height:1.25;margin:34px 0 10px}
.prose p{margin:0 0 20px}
.prose em a,.prose a{color:var(--link)}
.prose hr{border:0;border-top:1px solid var(--rule-soft);margin:40px 0}
.prose table{width:100%;border-collapse:collapse;font-size:17px;margin:0 0 22px;display:block;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--rule-soft);padding:8px 10px;text-align:left}
.prose blockquote{margin:0 0 20px;padding-left:18px;border-left:3px solid var(--accent);color:var(--ink-2)}
.backlink{margin:44px 0 0;font-family:var(--label);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.backlink a{text-decoration:none}
audio{width:100%;margin:8px 0 26px}

/* ---------- recent editions ---------- */
.recent{max-width:var(--wide);margin:66px auto 0;padding:0 22px}
.recent .head{
  display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--rule);padding-top:22px;
}
.recent h2{font-family:var(--display);font-weight:700;font-size:33px;margin:0}
.recent .all{
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);text-decoration:none;white-space:nowrap;
}
.recent ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:30px;grid-template-columns:repeat(3,1fr)}
.recent li{border-top:1px solid var(--rule-soft);padding-top:16px}
.recent a{text-decoration:none;color:inherit;display:block}
.recent .d{
  display:block;font-family:var(--label);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.recent .t{display:block;font-family:var(--display);font-weight:600;font-size:21px;line-height:1.25;margin:8px 0 8px}
.recent .s{display:block;font-size:17px;color:var(--ink-2);line-height:1.5}

/* ---------- subscribe: framed box before the footer ---------- */
.subscribe{max-width:var(--wide);margin:70px auto 0;padding:0 22px}
.subscribe .box{
  border:1px solid var(--ink);background:var(--paper);
  padding:44px 26px;text-align:center;position:relative;
}
.subscribe .box::before{
  content:"";position:absolute;inset:6px -6px -6px 6px;
  border:1px solid var(--rule-soft);pointer-events:none;z-index:-1;
}
.subscribe .kicker{
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 12px;
}
.subscribe h2{font-family:var(--display);font-weight:600;font-size:clamp(25px,4vw,36px);line-height:1.15;margin:0 0 10px}
.subscribe p{margin:0 auto;max-width:30rem;color:var(--ink-2);font-size:18px}
/* Keep this container plain. beehiiv's loader injects its own markup here and
   flex / max-width constraints collapse it - that is what removed the email
   field on Sep 8. Do not add display:flex or size constraints to .form. */
.subscribe .form{margin-top:24px;min-height:56px}
.subscribe .fine{margin-top:14px;font-size:14px;color:var(--ink-3)}

/* ---------- archive page ---------- */
.page-title{font-family:var(--display);font-weight:700;font-size:clamp(30px,5vw,44px);margin:0 0 6px}
.archive{list-style:none;margin:34px 0 0;padding:0}
.archive li{border-top:1px solid var(--rule-soft);padding:18px 0}
.archive a{text-decoration:none;color:inherit;display:block}
.archive .d{font-family:var(--label);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.archive .n{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-left:10px}
.archive .t{display:block;font-family:var(--display);font-weight:600;font-size:22px;line-height:1.25;margin:7px 0 0}
.archive .a{
  display:inline-block;margin-top:7px;font-family:var(--label);font-size:10.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent);border-radius:2px;padding:1px 7px;
}

/* ---------- footer ---------- */
footer.site{
  max-width:var(--wide);margin:70px auto 0;padding:26px 22px 70px;
  border-top:3px double var(--rule);
}
footer.site p{margin:0;color:var(--ink-2);font-size:16px}
footer.site .fine{margin-top:10px;font-size:14px;color:var(--ink-3);max-width:46rem}

@media (max-width:820px){
  .recent ul{grid-template-columns:1fr}
  body{font-size:19px}
  main{padding-top:38px}
  .subbar .inner{gap:12px}
  .subbar .say{flex-basis:100%}
}