/* OBSERVATORY article chrome — shared by every /notes page.
   No WebGL, no vendor JS: a note loads instantly and reads calmly. */
:root{
  --void:#070d1d; --navy:#0f1b33; --raise:#16243f; --primary:#1b1464;
  --hover:#302a73; --mid:#726e9f; --peri:#9c99bc; --peri-soft:#b3b1cc;
  --mist:#cbc9dc; --tint:#e0dfea; --paper:#f2f2f6; --white:#fff;
  --dusk:#8a86af; --veil:#d2d1e1; --ion:#8d80ff;
  --fd:'Observatory Display',Futura,'Century Gothic',system-ui,sans-serif;
  --fv:'Observatory Voice',Georgia,serif;
  --fs:'Observatory Sans',system-ui,sans-serif;
  --fm:'Observatory Mono',ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --border:rgba(138,134,175,0.25);
  --pad:clamp(20px,4.4vw,84px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{color:var(--mist); font-family:var(--fs); font-size:16.5px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(110% 70% at 78% 108%, rgba(27,20,100,0.4), transparent 55%),
    radial-gradient(80% 55% at 12% -8%, rgba(15,27,51,0.9), transparent 60%),
    var(--void)}
::selection{background:var(--ion); color:var(--void)}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--ion); outline-offset:3px; border-radius:2px}
b,strong{font-weight:600; color:var(--tint)}

header{position:fixed; inset:0 0 auto 0; z-index:50; display:flex;
  align-items:center; justify-content:space-between; padding:16px var(--pad);
  background:rgba(7,13,29,0.78); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(138,134,175,0.16)}
header .brand{display:flex; align-items:center; gap:14px}
header .brand img{height:15px; display:block}
header nav{display:flex; align-items:center; gap:clamp(14px,2.4vw,34px);
  font-family:var(--fm); font-size:11px; letter-spacing:0.22em}
header nav a{color:var(--peri); transition:color 0.18s ease}
header nav a:hover{color:var(--white)}
.btn{display:inline-block; padding:10px 18px; background:var(--ion); color:var(--void);
  font-family:var(--fm); font-size:11px; letter-spacing:0.16em; font-weight:600}
@media (hover:hover) and (pointer:fine){ .btn:hover{background:var(--veil)} }

main{max-width:820px; margin:0 auto; padding:150px var(--pad) 60px}
.crumb{font-family:var(--fm); font-size:11px; letter-spacing:0.22em; color:var(--dusk);
  text-transform:uppercase; display:flex; gap:10px; flex-wrap:wrap}
.crumb a:hover{color:var(--peri)}
.kicker{display:flex; align-items:center; gap:18px; margin:34px 0 26px}
.kicker i{height:1px; width:44px; background:var(--ion)}
.kicker span{font-family:var(--fm); font-size:12px; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--peri)}
h1{font-family:var(--fd); font-weight:700; font-size:clamp(34px,5vw,58px);
  line-height:1.08; letter-spacing:-0.02em; color:var(--white)}
.dek{margin-top:22px; font-size:18px; color:var(--peri-soft); max-width:60ch}
.meta{margin-top:26px; padding-bottom:26px; border-bottom:1px solid var(--border);
  font-family:var(--fm); font-size:11px; letter-spacing:0.18em; color:var(--dusk);
  display:flex; gap:18px; flex-wrap:wrap}

article{margin-top:44px}
article h2{font-family:var(--fd); font-weight:500; font-size:clamp(24px,3vw,32px);
  line-height:1.15; color:var(--white); letter-spacing:-0.01em; margin:52px 0 18px}
article h3{font-family:var(--fd); font-weight:500; font-size:19px; color:var(--white);
  margin:34px 0 12px}
article p{margin:16px 0; color:var(--peri-soft); max-width:70ch}
article ul,article ol{margin:16px 0 16px 22px; color:var(--peri-soft); max-width:66ch}
article li{margin:8px 0}
article li::marker{color:var(--ion)}
article a[href^="http"]{color:var(--veil); border-bottom:1px solid rgba(141,128,255,0.45)}
article a[href^="http"]:hover{color:var(--white); border-bottom-color:var(--ion)}
article a[href^="/"]{color:var(--veil); border-bottom:1px solid rgba(138,134,175,0.4)}
article img{max-width:100%; display:block; border:1px solid var(--border); margin:26px 0 8px}
figcaption{font-family:var(--fm); font-size:11px; letter-spacing:0.12em; color:var(--dusk);
  margin-bottom:18px}

.pull{font-family:var(--fv); font-style:italic; font-size:clamp(21px,2.6vw,27px);
  line-height:1.45; color:var(--veil); border-left:2px solid var(--ion);
  padding:6px 0 6px 26px; margin:34px 0; max-width:56ch}
.tldr{background:linear-gradient(150deg, rgba(22,36,63,0.55), rgba(15,27,51,0.3));
  border:1px solid var(--border); padding:24px 28px; margin:36px 0}
.tldr .t{font-family:var(--fm); font-size:11px; letter-spacing:0.28em; color:var(--ion);
  margin-bottom:12px}
.tldr p{margin:0; color:var(--mist)}
.stamp{font-family:var(--fm); font-size:12px; letter-spacing:0.06em; color:var(--ion);
  margin:6px 0 22px}
.stamp::before{content:'└ '; color:var(--dusk)}
.stamp a{color:inherit; border-bottom:1px solid rgba(141,128,255,0.4)}
.check{border-top:1px solid var(--border); margin:26px 0}
.check li{list-style:none; margin:0; padding:14px 2px; border-bottom:1px solid var(--border);
  display:flex; gap:14px; align-items:baseline; max-width:none}
.check li::before{content:'▸'; color:var(--ion); font-family:var(--fm); flex:0 0 auto}
.note-rule{margin:44px 0 0; padding:22px 26px; border:1px solid var(--border);
  font-size:14px; color:var(--peri)}
.formula{font-family:var(--fm); font-size:14.5px; color:var(--tint);
  background:rgba(22,36,63,0.5); border:1px solid var(--border);
  padding:16px 20px; margin:18px 0; overflow-x:auto; white-space:nowrap}

.next{margin-top:56px; padding-top:28px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--fm); font-size:12px; letter-spacing:0.14em}
.next a{color:var(--peri)} .next a:hover{color:var(--white)}

.cta{margin-top:56px; text-align:center; border:1px solid var(--border);
  padding:40px 28px; background:linear-gradient(150deg, rgba(22,36,63,0.5), rgba(15,27,51,0.28))}
.cta h2{font-family:var(--fd); font-weight:500; font-size:26px; color:var(--white); margin:0}
.cta p{margin:12px auto 22px; color:var(--peri-soft); max-width:52ch; font-size:14.5px}

footer{border-top:1px solid var(--border); padding:30px var(--pad) 40px; margin-top:70px}
.foot{max-width:820px; margin:0 auto; display:flex; justify-content:space-between;
  gap:18px; flex-wrap:wrap; font-family:var(--fm); font-size:10.5px;
  letter-spacing:0.18em; color:var(--dusk)}
.foot a:hover{color:var(--peri)}

/* the notes index */
.note-list{margin-top:44px; border-top:1px solid var(--border)}
.note-list a{display:block; padding:30px 2px; border-bottom:1px solid var(--border);
  transition:background 0.18s ease}
.note-list a:hover h3{color:var(--ion)}
.note-list .k{font-family:var(--fm); font-size:10.5px; letter-spacing:0.24em;
  color:var(--dusk); text-transform:uppercase}
.note-list h3{font-family:var(--fd); font-weight:500; font-size:clamp(21px,2.6vw,28px);
  color:var(--white); margin:10px 0 8px; transition:color 0.18s ease}
.note-list p{color:var(--peri-soft); font-size:14.5px; max-width:64ch; margin:0}