/* thestarhop.space: calm night sky (item 28). Deep navy #0B1426 with a faint CSS starfield, starlight #E6EBF5 text,
   pale blue #9CC3FF links, warm gold #F2C46D accents. A wide 76rem layout with a sidebar, Marcellus (SIL OFL,
   self-hosted) for the name and headings, and public-domain NASA / NPS images. Nothing moves. */
@font-face{font-family:"Marcellus SH";src:url("/chart/sp-marcellus.woff2") format("woff2");font-display:swap}
:root{--colour-type:#e6ebf5;--colour-page:#0b1426;--colour-mark:#9cc3ff;--colour-mark-2:#f2c46d;--colour-wash:#14213f;--colour-dim:#cdd6e8;--colour-line:#2a3a63}
html{font-size:18px;-webkit-text-size-adjust:100%}
body.sp-zine{margin:0;padding:0 22px;font-family:"Source Sans 3","Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;line-height:1.65;color:var(--colour-type);
  background:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%) 0 0/340px 340px,radial-gradient(1px 1px at 72% 44%,#cfe0ff 50%,transparent 51%) 0 0/260px 260px,
  radial-gradient(1.5px 1.5px at 38% 82%,#fff3d1 50%,transparent 51%) 0 0/420px 420px,linear-gradient(180deg,#081022 0,#0b1426 40rem,#0d1830 100%);background-color:var(--colour-page);min-height:100vh}
body.sp-zine>nav,.sp-head,.sp-not-live,.sp-text,.sp-back{max-width:76rem;margin-left:auto;margin-right:auto}
h1,h2,h3,.sp-logo-word{font-family:"Marcellus SH","Cormorant Garamond",Georgia,serif;font-weight:400}
h1{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.18;margin:0 0 16px;color:#fff}
h2{font-size:1.6rem;display:flex;gap:12px;align-items:baseline;border-bottom:1px solid var(--colour-line);padding-bottom:6px;margin:40px 0 16px}
h3{font-size:1.25rem}
a{color:var(--colour-mark);text-underline-offset:.2em}a:hover{color:#fff}
:focus-visible{outline:3px solid var(--colour-mark-2);outline-offset:3px}
.sp-to-text{position:absolute;clip:rect(0 0 0 0)}.sp-to-text:focus{clip:auto;background:var(--colour-page);padding:9px;z-index:3}

/* the top: nav row, then the logo and dek */
.sp-contents{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 26px;padding:16px 0 0;margin:0 auto;list-style:none;font-size:.86rem;text-transform:uppercase;letter-spacing:.14em}
.sp-contents a{color:var(--colour-dim);text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent}
.sp-contents a:hover{color:#fff}.sp-contents a[aria-current="page"]{color:var(--colour-mark-2);border-bottom-color:var(--colour-mark-2)}
.sp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 30px;padding:10px 0 18px;border-bottom:1px solid var(--colour-line)}
.sp-nameplate{margin:0}.sp-nameplate a{color:inherit;text-decoration:none;display:block}
.sp-logo{display:block;width:100%;max-width:340px;height:auto}
.sp-logo-word{font-size:34px;letter-spacing:3px;fill:#f7e3b0;text-transform:uppercase}
.sp-dek{margin:0 0 6px;max-width:34rem;color:var(--colour-dim);font-size:.98rem}
.sp-not-live{display:block;margin-top:16px;margin-bottom:16px;padding:8px 12px;border:1px solid var(--colour-mark-2);color:var(--colour-mark-2);font-weight:700;border-radius:4px}
.sp-text{padding-bottom:20px}
.sp-text>p,.sp-text>ul,.sp-text>ol,.sp-text>dl{max-width:68ch}

/* home: a wide Milky Way panorama with the opening words over its dark foot */
.sp-opening{position:relative;margin:0 0 10px;border-radius:10px;overflow:hidden;background:#050a16}
.sp-sky-hero{margin:0}.sp-sky-hero img{display:block;width:100%;height:clamp(18rem,38vw,30rem);object-fit:cover;object-position:center 30%}
.sp-sky-hero figcaption{position:absolute;top:10px;right:12px;font-size:.78rem;color:#e6ebf5;background:rgb(5 10 22 / .88);padding:3px 8px;border-radius:3px}
.sp-opening-words{padding:22px 26px 26px;background:linear-gradient(180deg,rgb(5 10 22 / 0),#050a16 34%)}
@media (min-width:56rem){.sp-opening-words{position:absolute;left:0;right:0;bottom:0;padding:80px 34px 30px}.sp-opening-words>*{max-width:46rem}}
.sp-opening-line{font-size:1.12rem;color:#dfe6f3}
.sp-counts{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.92rem;background:rgb(20 33 63 / .85);border-left:3px solid var(--colour-mark-2);padding:9px 12px;white-space:pre-line;margin-bottom:0}

/* home: main column plus a tools sidebar */
.sp-spread{display:grid;gap:0 44px}
@media (min-width:60rem){.sp-spread{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.sp-spread-side section{background:var(--colour-wash);border:1px solid var(--colour-line);border-radius:10px;padding:4px 22px 14px;margin-top:40px}
.sp-spread-side h2{border-bottom-color:#33467a}
.sp-folio-num{color:var(--colour-mark-2);font-variant-numeric:oldstyle-nums;font-size:1.1rem;font-family:"Marcellus SH",Georgia,serif}
.sp-notes,.sp-numbered{padding-left:26px}.sp-notes li,.sp-numbered li{margin-bottom:16px}
.sp-notes li::marker,.sp-numbered li::marker{color:var(--colour-mark-2)}
.sp-credit-line{display:block;font-size:.84rem;color:var(--colour-dim)}

/* image plates */
.sp-plate-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.sp-plate{margin:0;background:var(--colour-wash);border:1px solid var(--colour-line);border-radius:10px;overflow:hidden}
.sp-plate img{display:block;width:100%;height:13rem;object-fit:cover;background:#000}
.sp-plate figcaption{padding:10px 14px 12px;font-size:.92rem;line-height:1.45}
.sp-plate-credit{display:block;font-size:.8rem;color:var(--colour-dim);margin-top:4px}
.sp-plate-aside{max-width:24rem;margin:8px 0 18px}
@media (min-width:60rem){.sp-plate-aside{float:right;margin:8px 0 22px 34px;width:24rem}}

/* tools */
.sp-tray{background:var(--colour-wash);border:1px solid var(--colour-line);padding:18px 22px;border-radius:10px;max-width:46rem;clear:both}
.sp-tray label{display:inline-block;margin-top:6px;color:var(--colour-dim)}
.sp-tray input,.sp-tray select,select{font:inherit;font-size:1rem;color:var(--colour-type);background:#0b1426;border:1px solid #4a5f95;border-radius:6px;padding:7px 10px;min-height:2.4rem}
.sp-tray input{width:10ch}
.sp-tray select{min-width:14rem;max-width:100%}
.sp-tray dl{margin-top:16px}
button{font:inherit;padding:9px 20px;border:1px solid var(--colour-mark-2);background:transparent;color:var(--colour-mark-2);border-radius:999px;cursor:pointer}
button:hover{background:var(--colour-mark-2);color:var(--colour-page)}
.sp-echo{font-size:1.2rem;font-style:italic;color:#fff}
.sp-quizpage dt{font-weight:700;margin-top:22px}.sp-quizpage dd{margin-left:18px}
.sp-uncover summary{cursor:pointer;color:var(--colour-mark);text-decoration:underline}
.sp-awaiting{background:var(--colour-mark-2);color:var(--colour-page);padding:6px}
.sp-blank-page{font-style:italic;color:var(--colour-dim)}
.sp-credits p{max-width:70ch}.sp-plain{font-size:.82rem;color:var(--colour-dim);overflow-wrap:anywhere}
.sp-micro{color:var(--colour-dim)}
.sp-back{clear:both;padding:22px 0 40px;font-size:.9rem;color:var(--colour-dim);border-top:1px solid var(--colour-line);margin-top:30px}
.sp-back hr{display:none}
.sp-back a{color:var(--colour-mark)}
.config-error,.config-error-inline{display:inline-block;background:#3a1010;border:2px solid #ff8f8f;color:#ffe3e3;padding:.4rem .6rem}
@media (max-width:56rem){.sp-sky-hero figcaption{position:static;border-radius:0;background:#050a16;padding:6px 12px}} /* item 29: credit under the photo on small screens */