/* The product's own palette (front/styles/tokens.css). What the blog adds is
   that the two accents carry meaning: nebula marks what the ephemeris
   computed, solar marks what people said it meant. Single theme on purpose,
   because the product is a dark instrument. */
:root{
  --ink:#0B0D1A; --ink-2:#12152B;
  --starlight:#ECEAF0; --slate:#8A90B4; --slate-dim:#5A5F80;
  --nebula:#7C6BF5; --solar:#E9B44C; --hair:rgba(236,234,240,.10);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ink); color:var(--starlight);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:66ch; margin:0 auto; padding:0 22px}
.wide{max-width:1000px; margin:0 auto; padding:0 22px}

.label{
  font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--slate);
  text-decoration:none;
}
a.label:hover{color:var(--starlight)}

header.masthead{border-bottom:1px solid var(--hair); padding:22px 0 20px; margin-bottom:64px}
header.masthead .wide{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; font-weight:600;
  color:var(--starlight); text-decoration:none}
.orb{width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #b9aefc, #7C6BF5 62%, #4b3fb0);
  box-shadow:0 0 14px rgba(124,107,245,.55)}
.brand .dim{color:var(--slate-dim); font-weight:400}

h1{
  font-family:"GFS Didot",Georgia,"Times New Roman",serif; font-weight:400;
  font-size:clamp(38px,6.6vw,66px); line-height:1.05; letter-spacing:-.01em;
  margin:.5rem 0 0; text-wrap:balance;
}
h1 em{font-style:normal; color:var(--nebula)}
h1.col{font-size:clamp(34px,5.4vw,54px)}
.standfirst{font-size:clamp(18px,2.2vw,21px); color:var(--slate); margin:26px 0 0; text-wrap:pretty}
.byline{margin-top:34px; padding-top:18px; border-top:1px solid var(--hair);
  display:flex; gap:22px; flex-wrap:wrap}

h2{
  font-family:"GFS Didot",Georgia,serif; font-weight:400;
  font-size:clamp(27px,3.6vw,36px); line-height:1.2; margin:78px 0 4px; text-wrap:balance;
}
h2 + .label{margin-bottom:24px; display:block}
p{margin:0 0 20px}
a{color:var(--nebula)}

/* The key: two block types, and the reader learns them in the first screen. */
.key{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:44px 0 0}
@media (max-width:620px){.key{grid-template-columns:1fr}}
.key > div{border:1px solid var(--hair); border-radius:12px; padding:14px 16px; background:var(--ink-2)}
.key .m{border-left:3px solid var(--nebula)}
.key .i{border-left:3px solid var(--solar)}
.key p{margin:6px 0 0; font-size:14.5px; color:var(--slate); line-height:1.6}
.lab-m{color:var(--nebula)}
.lab-s{color:var(--solar)}

/* MEASURED: an instrument panel, with registration marks at the corners. */
.readout{
  position:relative; margin:36px 0; padding:26px 24px 22px;
  background:linear-gradient(180deg, rgba(124,107,245,.07), rgba(18,21,43,.9));
  border:1px solid rgba(124,107,245,.34); border-radius:14px;
}
.readout::before,.readout::after{
  content:""; position:absolute; width:11px; height:11px; pointer-events:none;
  border-color:rgba(124,107,245,.6); border-style:solid;
}
.readout::before{top:9px; left:9px; border-width:1px 0 0 1px}
.readout::after{bottom:9px; right:9px; border-width:0 1px 1px 0}
.readout > .label{display:block; margin-bottom:18px; color:var(--nebula)}
.rows{display:grid; gap:11px}
.row{display:grid; grid-template-columns:1fr auto; gap:14px; align-items:baseline;
  padding-bottom:10px; border-bottom:1px dashed rgba(236,234,240,.09)}
.row:last-child{border-bottom:0; padding-bottom:0}
.row .k{color:var(--slate); font-size:14.5px}
.row .v{font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;
  font-size:15px; text-align:right}
.row .v .unit{color:var(--slate-dim); font-size:12.5px}
.readout .foot{margin:18px 0 0; font-size:13px; color:var(--slate-dim); line-height:1.62}

/* INTERPRETED: warm, ruled, quieter. Never the same shape as a readout. */
.hist{border-left:3px solid var(--solar); padding:2px 0 2px 20px; margin:32px 0}
.hist > .label{display:block; margin-bottom:12px; color:var(--solar)}
.hist p{font-size:16.5px}

figure{margin:46px 0}
figure canvas{display:block; width:100%; height:auto; max-width:520px; margin:0 auto}
figcaption{margin-top:18px; font-size:14px; color:var(--slate); text-align:center;
  max-width:54ch; margin-left:auto; margin-right:auto; line-height:1.62}

.scroller{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:14.5px}
th{text-align:left; font-family:"JetBrains Mono",monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.13em; color:var(--slate); font-weight:400; padding:0 16px 10px 0; white-space:nowrap}
td{padding:9px 16px 9px 0; border-top:1px solid var(--hair); white-space:nowrap}
td.num{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums}

.pull{font-family:"GFS Didot",Georgia,serif; font-size:clamp(23px,3.2vw,31px); line-height:1.34;
  margin:56px 0; padding-left:24px; border-left:1px solid var(--nebula); text-wrap:balance}

.sources{margin:24px 0 0; padding:0; list-style:none; display:grid; gap:15px}
.sources li{font-size:14.5px; color:var(--slate); padding-left:18px; position:relative; line-height:1.62}
.sources li::before{content:"·"; position:absolute; left:2px; top:-3px; color:var(--nebula); font-size:20px}

.cta{margin:78px 0 0; padding:30px 24px; border:1px solid var(--hair); border-radius:14px;
  background:var(--ink-2); text-align:center}
.cta p{margin:10px auto 22px; color:var(--slate); max-width:44ch}
.cta a.btn{display:inline-block; padding:13px 24px; border-radius:11px; font-weight:600;
  color:#0a0a14; background:linear-gradient(100deg,#7C6BF5,#9a8bff); text-decoration:none}

/* The column */
.cards{display:grid; gap:16px; margin:44px 0 0;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr))}
.card{display:flex; flex-direction:column; gap:8px; text-decoration:none;
  border:1px solid var(--hair); border-radius:14px; padding:22px 22px 20px;
  background:var(--ink-2); color:var(--starlight); transition:border-color .18s ease}
.card:hover{border-color:rgba(124,107,245,.45)}
.card h2{font-size:23px; margin:2px 0 0; line-height:1.22}
.card p{font-size:14.5px; color:var(--slate); margin:0; line-height:1.62}
.card .more{color:var(--nebula); margin-top:6px}

footer{margin:84px 0 60px; padding-top:22px; border-top:1px solid var(--hair)}
footer p{font-size:13px; color:var(--slate-dim); margin:16px 0 0}
.langs{display:flex; flex-wrap:wrap; gap:6px 16px}
.lang{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px;
  color:var(--slate); text-decoration:none}
.lang:hover{color:var(--starlight)}
.lang.on{color:var(--nebula)}

*:focus-visible{outline:2px solid var(--nebula); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

.lede{max-width:56ch}