/* d3soteric — cosmic theme (Carina "Cosmic Cliffs" direction)
   Drop-in replacement for hugo/static/css/main.css.
   Class names match the existing layouts; the only markup changes are the
   homepage hero (index.html) + starfield/footer in baseof.html. Fonts are
   loaded in head.html. */

:root {
  --space-0:#04060c; --space-1:#070b14; --surface:rgba(122,162,247,0.05);
  --ink:#e9ecf5; --ink-dim:#9aa3b8; --ink-faint:#646d83;
  --blue:#7aa2f7; --violet:#b794f6; --cyan:#7dd3fc; --gold:#e8c97e; --amber:#e0a24a;
  --line:rgba(122,162,247,0.16);
  --maxw:880px;
  --display:"Space Grotesk", system-ui, sans-serif;
  --body:"Inter", system-ui, -apple-system, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--space-0); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.7; overflow-x:hidden;
}

/* Twinkling starfield (fixed, behind everything) */
.starfield {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1.4px 1.4px at 18% 24%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 67% 14%, #cdd6f4, transparent),
    radial-gradient(1.3px 1.3px at 41% 71%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 9% 84%, #fff, transparent),
    radial-gradient(1px 1px at 76% 78%, #fff, transparent),
    radial-gradient(1px 1px at 90% 32%, #aab2d5, transparent),
    radial-gradient(1px 1px at 33% 48%, #cdd6f4, transparent),
    linear-gradient(180deg, #04060c, #060912 60%, #04060c);
  animation:twinkle 6s ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{opacity:.6} 50%{opacity:1} }
@media (prefers-reduced-motion:reduce) { .starfield { animation:none; } }

.site-header, .content, .site-footer { max-width:var(--maxw); margin:0 auto; }
.content { padding:1.4rem 1.4rem 4rem; }

/* Header */
.site-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 1.4rem 1.1rem;
}
.brand {
  font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:.3px;
  color:var(--ink); text-decoration:none; text-shadow:0 0 18px rgba(122,162,247,.5);
}
.brand b { color:var(--blue); }
.site-header nav a {
  color:var(--ink-dim); text-decoration:none; margin-left:1.3rem;
  font-size:.9rem; font-family:var(--mono);
}
.site-header nav a:hover { color:var(--cyan); }

/* Homepage hero — real Carina image as background (see handoff for asset path) */
.hero {
  position:relative; max-width:var(--maxw); margin:0.3rem auto 0;
  border-radius:18px; overflow:hidden; border:1px solid var(--line);
  background:#04060c center/cover no-repeat;
  background-image:url("/content/images/site/carina-hero.jpg");
}
.hero .veil {
  position:absolute; inset:0;
  background:
    radial-gradient(80% 90% at 50% 16%, transparent 28%, rgba(4,6,12,.55) 100%),
    linear-gradient(180deg, rgba(4,6,12,.20), rgba(4,6,12,.84));
}
.hero .inner { position:relative; text-align:center; padding:5rem 1.4rem 4.4rem; }
.eyebrow {
  font-family:var(--mono); font-size:.8rem; letter-spacing:2px;
  text-transform:uppercase; color:var(--gold); opacity:.92;
}
.hero h1 {
  font-family:var(--display); font-weight:700; font-size:4.6rem; line-height:1;
  margin:.45rem 0 .4rem; letter-spacing:1px;
  background:linear-gradient(180deg,#fff,#dfe6fb 50%,#a9b6e0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(122,162,247,.45);
}
.hero h1 .x {
  background:linear-gradient(180deg,var(--violet),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .tagline { font-size:1.28rem; color:var(--ink); margin:.2rem 0 .9rem; }
.hero .lede { color:#c4cbdc; max-width:50ch; margin:0 auto; font-size:1.02rem; }

/* Simple page intro (list pages, 404) */
.intro { padding:1.4rem 0 .6rem; }
.intro h1 { font-family:var(--display); font-weight:700; font-size:2.1rem; margin:0 0 .3rem; }
.intro .tagline { color:var(--ink-dim); margin-top:0; }

/* Section heading rhythm */
.post-list { margin-top:2rem; }

/* Post cards (used by homepage + list pages) */
.post-list {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(330px,1fr)); gap:1.1rem;
}
.post-item {
  position:relative; padding:1.4rem 1.5rem; border:1px solid var(--line);
  border-radius:14px; background:var(--surface);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.post-item:hover {
  transform:translateY(-4px); border-color:rgba(122,162,247,.5);
  box-shadow:0 16px 44px -18px rgba(122,162,247,.6);
}
.post-item h2 { font-family:var(--display); font-weight:500; font-size:1.28rem; line-height:1.25; margin:.45rem 0 .55rem; }
.post-item h2 a { color:var(--ink); text-decoration:none; }
.post-item:hover h2 a { color:var(--cyan); }
.post-item time { font-family:var(--mono); font-size:.76rem; color:var(--blue); letter-spacing:.5px; }
.post-item p { color:var(--ink-dim); font-size:.96rem; margin:.6rem 0 0; }

/* Single post */
.post-header { padding-top:1rem; }
.post-header h1 { font-family:var(--display); font-weight:700; font-size:2.4rem; line-height:1.15; margin:0 0 .5rem; }
.post-header time { font-family:var(--mono); font-size:.85rem; color:var(--blue); }

.post-body { margin-top:2rem; font-size:1.05rem; }
.post-body > p:first-of-type::first-letter {
  font-family:var(--display); font-weight:700; float:left;
  font-size:3.4rem; line-height:.8; padding:.3rem .6rem .2rem 0; color:var(--gold);
}
.post-body h2, .post-body h3 { font-family:var(--display); font-weight:500; }
.post-body h2 { margin-top:2.2rem; font-size:1.6rem; }
.post-body a { color:var(--cyan); }
.post-body img { max-width:100%; height:auto; border-radius:10px; }
.post-body blockquote {
  border-left:2px solid var(--violet); margin:1.6rem 0; padding:.4rem 1.3rem;
  color:var(--ink-dim); font-style:italic;
}
.post-body pre {
  background:var(--space-1); border:1px solid var(--line); border-radius:10px;
  padding:1.1rem 1.2rem; overflow-x:auto; font-family:var(--mono); font-size:.9rem; line-height:1.6;
}
.post-body code { font-family:var(--mono); font-size:.9em; }
.post-body :not(pre) > code {
  background:rgba(122,162,247,.12); padding:.12em .35em; border-radius:4px; color:var(--cyan);
}

/* Tags */
ul.tags, .tags { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0 0; }
ul.tags li a, .tags li a {
  font-family:var(--mono); font-size:.72rem; color:var(--cyan); text-decoration:none;
  border:1px solid rgba(125,211,252,.3); background:rgba(125,211,252,.06);
  padding:.16rem .6rem; border-radius:999px;
}
ul.tags li a:hover, .tags li a:hover { border-color:var(--cyan); }

/* Footer */
.site-footer {
  padding:2rem 1.4rem 3rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  color:var(--ink-faint); font-family:var(--mono); font-size:.78rem;
}
.site-footer a { color:var(--ink-dim); }
.site-footer .credit { font-size:.7rem; color:var(--ink-faint); width:100%; }

/* Pagination */
.pagination { display:flex; gap:1rem; list-style:none; padding:0; margin:2.5rem 0 0; justify-content:center; font-family:var(--mono); font-size:.85rem; }
.pagination a { color:var(--violet); text-decoration:none; }
.pagination .disabled { color:var(--ink-faint); }

@media (max-width:600px) {
  .hero h1 { font-size:3rem; }
  .hero .inner { padding:3.4rem 1rem 3rem; }
  .post-list { grid-template-columns:1fr; }
}