/* ============================================================
   A Dot in the Cosmos blog
   Hand-rolled, static, self-hosted. Space theme to match the forge.
   ============================================================ */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/space-grotesk-latin.woff2") format("woff2");
}

:root {
  --bg: #0a0a18;
  --ink: #e7e9f3;
  --muted: #9aa4c9;
  --faint: #6b7299;
  --accent: #2fd9ec;          /* cyan */
  --accent-2: #8b7cff;        /* violet */
  --card: #141a2b;
  --border: #242c44;
  --code-bg: #0e1322;
  --measure: 70ch;
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { margin: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  color: var(--ink);
  line-height: 1.65;
  background-color: var(--bg);
  /* deep-space gradient + a light tiled starfield */
  background-image:
    radial-gradient(1px 1px at 30px 40px, #ffffffcc, transparent),
    radial-gradient(1px 1px at 120px 90px, #c4bbffaa, transparent),
    radial-gradient(1.5px 1.5px at 200px 150px, #ffffffb0, transparent),
    radial-gradient(1px 1px at 80px 200px, #a5f3fcaa, transparent),
    radial-gradient(1px 1px at 240px 60px, #ffffff99, transparent),
    radial-gradient(ellipse at 50% -10%, #1b224066 0%, transparent 60%);
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat;
  background-size: 280px 280px, 280px 280px, 280px 280px, 280px 280px, 280px 280px, 100% 100%;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* content starts at 10% from the left and runs to ~24px shy of the globe's left
   edge. The globe is d = 46vw at right: -10%, so its left edge is
   (110vw - 46vw) = 64vw; content width = 64vw - 24px gutter - 10vw left margin. */
.wrap {
  width: calc(54vw - 24px);
  max-width: none;
  margin: 0 0 0 10%;
  padding: 0 1.25rem;
}

/* rotating Earth docked on the right, behind the content */
.earth {
  --d: 46vw;                       /* globe size (fills the right portion) */
  position: fixed;
  top: 50%;
  right: -10%;
  width: var(--d);
  height: var(--d);
  transform: translateY(-50%);
  border-radius: 50%;
  isolation: isolate;
  background-image: url("/assets/earth-clouds.jpg"), url("/assets/earth-day.jpg");
  background-repeat: repeat, repeat;
  background-size: calc(var(--d) * 2) 100%, calc(var(--d) * 2) 100%;
  background-blend-mode: screen, normal;
  box-shadow:
    inset 80px 0 130px 12px rgba(0, 0, 0, 0.92),     /* night side facing the text */
    inset -14px 0 30px 6px rgba(255, 255, 255, 0.12),
    0 0 90px 14px rgba(90, 150, 255, 0.40);          /* atmosphere glow */
  animation: earth-rotate 120s linear infinite;
  z-index: -1;
  pointer-events: none;
}
.earth::after {                                       /* atmospheric rim */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(0, 0, 0, 0) 60%, rgba(120, 180, 255, 0.30) 73%, rgba(120, 180, 255, 0) 82%);
  box-shadow: inset 0 0 60px rgba(120, 180, 255, 0.35);
}
@keyframes earth-rotate {
  from { background-position: 0 0; }
  to   { background-position: calc(var(--d) * -2) 0; }
}
@media (prefers-reduced-motion: reduce) { .earth { animation: none !important; } }

/* narrow screens: recentre the text, hide the globe (no room for it) */
@media (max-width: 1100px) {
  .wrap { width: auto; max-width: 720px; margin: 0 auto; }
  .earth { display: none; }
}

/* ---- site header ---- */
.site-header { padding: 2.2rem 0 1.4rem; }
.site-header .brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.site-header .brand img { width: 34px; height: 34px; }
.site-header .brand b {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  color: var(--ink); letter-spacing: -0.01em;
}
.site-header .brand span { color: var(--accent); }

/* ---- post list: minimal, no cards ---- */
.posts { list-style: none; padding: 0; margin-top: 1.5rem; }
.post { padding: 1.5rem 0; border-top: 1px solid var(--border); }
.post:first-child { border-top: none; }
.post a { color: var(--ink); text-decoration: none; }
.post a:hover { color: var(--accent); }
.post a:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.post h2 {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -0.01em; line-height: 1.2;
}
.post .meta { color: var(--faint); font-size: 0.82rem; margin: 0.35rem 0 0.55rem; }
.post p { color: var(--muted); max-width: 60ch; }

/* ---- article ---- */
.article { padding: 1rem 0 2rem; }
.article .meta { color: var(--faint); font-size: 0.85rem; letter-spacing: 0.02em; }
.article h1 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(2rem, 5.5vw, 3.1rem); line-height: 1.04; margin: 0.5rem 0 0.4rem;
}
.article .lede { color: var(--muted); font-size: 1.2rem; margin: 0.6rem 0 2rem; }
.article-body { max-width: none; }
.article-body > * + * { margin-top: 1.15rem; }
.article-body h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.01em;
  font-size: 1.7rem; line-height: 1.2; margin-top: 2.6rem; padding-top: 0.4rem;
}
.article-body h3 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; margin-top: 1.8rem; }
.article-body p, .article-body li { color: #d7dbea; }
.article-body ul, .article-body ol { padding-left: 1.4rem; }
.article-body li + li { margin-top: 0.4rem; }
.article-body strong { color: #fff; }
.article-body a { border-bottom: 1px solid transparent; }
.article-body a:hover { border-bottom-color: var(--accent); text-decoration: none; }

.article-body blockquote {
  border-left: 3px solid var(--accent-2);
  padding: 0.2rem 0 0.2rem 1.1rem; color: var(--muted); font-style: italic;
}

/* inline + block code */
code, pre, kbd { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; }
:not(pre) > code {
  background: var(--code-bg); border: 1px solid var(--border);
  padding: 0.12em 0.4em; border-radius: 5px; font-size: 0.88em; color: #cfe6ff;
}
pre {
  background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem 1.1rem; overflow-x: auto; font-size: 0.86rem; line-height: 1.55;
  max-width: 680px;   /* keep code blocks a sane width even when prose runs wider */
}
pre code { color: #cdd6f4; }
.cmt { color: #5f6b8c; }   /* manual comment highlight in code blocks */

hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }

/* callout box */
.note {
  background: #11203044; border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 0.9rem 1.1rem; color: var(--muted);
}
.note strong { color: var(--accent); }

/* ---- footer ---- */
.site-footer {
  border-top: 1px solid var(--border); margin-top: 3rem; padding: 1.8rem 0 3rem;
  color: var(--faint); font-size: 0.85rem;
}
.site-footer a { color: var(--muted); }
.back { display: inline-block; margin: 0.5rem 0 1.5rem; color: var(--muted); font-size: 0.9rem; }