:root{
  --bg:     #0d0b16;   /* deep void indigo */
  --glow:   #1a1329;   /* lifted center of the sky */
  --ink:    #ece5d6;   /* parchment */
  --muted:  #9188ab;   /* dusty violet */
  --accent: #e8b45e;   /* candle gold */
  --moon:   #b9a6e4;   /* moon lavender */
  --rule:   #2b2342;   /* dark violet hairline */
  --maxw:   640px;
}
*{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  background:
    /* faint nebulae drifting in the dark */
    radial-gradient(42% 30% at 18% 24%, rgba(185,166,228,.06), transparent 70%) fixed,
    radial-gradient(36% 26% at 82% 12%, rgba(232,180,94,.05),  transparent 70%) fixed,
    radial-gradient(120% 90% at 50% 0%, var(--glow) 0%, var(--bg) 62%) fixed,
    var(--bg);
}
body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:'Lato', 'Helvetica Neue', sans-serif;
  font-size:1.04rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ---- starfield ---- */
body::before, body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-repeat:repeat;
}
body::before{ /* small stars, slow twinkle */
  background-image:
    radial-gradient(1px 1px at 22px 34px,  rgba(236,229,214,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 118px 90px, rgba(236,229,214,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 187px 26px, rgba(185,166,228,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 64px 152px, rgba(236,229,214,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 226px 188px,rgba(236,229,214,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 156px 236px,rgba(185,166,228,.6) 50%, transparent 51%);
  background-size:260px 260px;
  animation:twinkle 5s ease-in-out infinite alternate;
}
body::after{ /* brighter stars, offset rhythm */
  background-image:
    radial-gradient(1.5px 1.5px at 82px 58px,  rgba(232,180,94,.9)  50%, transparent 51%),
    radial-gradient(2px 2px     at 300px 210px,rgba(236,229,214,1)  50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 210px 320px,rgba(185,166,228,.9) 50%, transparent 51%),
    radial-gradient(2px 2px     at 372px 96px, rgba(236,229,214,.85) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46px 260px, rgba(232,180,94,.7)  50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 260px 30px, rgba(185,166,228,.75) 50%, transparent 51%);
  background-size:420px 420px;
  animation:twinkle 7s ease-in-out infinite alternate-reverse;
}

/* ---- the sky's residents ---- */
.sky{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.moon{
  position:absolute; top:26px; right:7vw;
  width:48px; height:48px;
  background:url("tv-pixel.svg") center/contain no-repeat;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 14px rgba(150,175,255,.35));
  animation:moonbob 11s ease-in-out infinite;
}
@keyframes moonbob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-6px); }
}
.comet{
  position:absolute; top:16%; left:-12%;
  width:86px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(236,229,214,0), rgba(236,229,214,.85));
  opacity:0;
  transform:rotate(16deg);
  animation:comet 14s ease-in 5s infinite;
}
.comet::after{ /* the bright head of the shooting star */
  content:""; position:absolute; right:-2px; top:-1.5px;
  width:5px; height:5px; border-radius:50%;
  background:#f5efe0;
  box-shadow:0 0 8px 2px rgba(236,229,214,.8);
}
@keyframes comet{
  0%   { opacity:0; transform:translate(0,0) rotate(16deg); }
  1.5% { opacity:.9; }
  7%   { opacity:0; transform:translate(120vw, 34vh) rotate(16deg); }
  100% { opacity:0; transform:translate(120vw, 34vh) rotate(16deg); }
}
@media (prefers-reduced-motion: reduce){
  .moon, .comet{ animation:none; }
  .comet{ display:none; }
}
@media (max-width:480px){
  .moon{ width:36px; height:36px; top:20px; right:5vw; }
}

/* content sits above the sky */
.site-head, main, .site-foot{ position:relative; z-index:1; }
@keyframes twinkle{
  from{ opacity:.45; }
  to  { opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation:none; }
}

::selection{ background:var(--moon); color:var(--bg); }

main{ max-width:var(--maxw); margin:0 auto; padding:0 1.25rem 5rem; }

/* header / footer */
.site-head{
  max-width:var(--maxw); margin:0 auto; padding:1.6rem 1.25rem 1.2rem;
}
.brand{
  font-family:'Oswald', sans-serif; font-weight:400;
  font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
}
.brand::before{ content:"☾  "; color:var(--accent); }
.brand:hover{
  color:var(--accent);
  text-shadow:0 0 16px rgba(232,180,94,.45);
}
.site-foot{
  max-width:var(--maxw); margin:0 auto; padding:2rem 1.25rem 3rem;
  border-top:1px solid var(--rule);
  font-family:'Jost', sans-serif; font-weight:300; font-style:italic;
  font-size:.92rem; letter-spacing:.24em; color:var(--muted);
}
.site-foot::after{ content:" ✶"; color:var(--moon); font-style:normal; }

/* home intro */
.intro{ padding:2.5rem 0 1rem; }
.intro h1{
  font-family:'DM Serif Display', Georgia, serif;
  font-weight:400;
  font-size:clamp(2.3rem,8vw,3.4rem);
  line-height:1.05; letter-spacing:-0.01em; margin:0 0 .7rem;
  text-shadow:0 0 32px rgba(232,180,94,.22);
  text-wrap:balance;               /* even lines, no orphans */
}
.lede{ font-family:'Jost', sans-serif; font-weight:300;
  font-size:1.2rem; letter-spacing:.01em; color:var(--muted); margin:0; max-width:38ch; }

/* writing list */
.writing{ padding:2.8rem 0 0; }
.writing h2{
  font-family:'Oswald', sans-serif;
  font-weight:500; font-size:.82rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--moon); margin:0 0 1rem; padding-bottom:.6rem;
  border-bottom:1px solid var(--rule);
}
.writing h2::before{ content:"✶ "; color:var(--accent); }
.post-list{ list-style:none; margin:0; padding:0; }
.post-item{ padding:1.2rem 0; border-bottom:1px solid var(--rule); }
.post-item a{ text-decoration:none; color:var(--ink); display:block; }
.post-item a:hover .post-title{
  color:var(--accent);
  text-shadow:0 0 18px rgba(232,180,94,.4);
}
.post-date{
  display:block; font-family:'Oswald', sans-serif;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.2rem;
}
.post-title{
  font-family:'DM Serif Display', Georgia, serif;
  font-weight:400; font-size:1.5rem; line-height:1.25;
  transition:color .15s ease, text-shadow .15s ease;
}
.post-summary{ font-family:'Jost', sans-serif; font-weight:300;
  margin:.35rem 0 0; color:var(--muted); font-size:1.02rem; }
.empty{ color:var(--muted); padding:1rem 0; }

/* a post */
.post{ padding:2rem 0 0; }
.back{
  display:inline-block; margin-bottom:1.6rem;
  font-family:'Oswald', sans-serif; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
}
.back:hover{ color:var(--accent); text-shadow:0 0 14px rgba(232,180,94,.4); }
.post h1{
  font-family:'DM Serif Display', Georgia, serif;
  font-weight:400;
  font-size:clamp(2rem,7vw,2.9rem);
  line-height:1.12; letter-spacing:-0.01em; margin:0 0 .5rem;
  text-shadow:0 0 28px rgba(232,180,94,.2);
}
.post-meta{
  font-family:'Oswald', sans-serif;
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--moon); margin:0 0 2rem;
}
.post p{ margin:0 0 1.3rem; text-wrap:pretty; }
.post h2{
  font-family:'Jost', sans-serif;
  font-weight:400; font-size:1.45rem; letter-spacing:.01em; margin:2.4rem 0 .8rem;
}
.post h3{
  font-family:'Jost', sans-serif;
  font-weight:400; font-size:1.15rem; margin:2rem 0 .6rem;
}
.post a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent);
  text-underline-offset:3px; text-decoration-thickness:2px; }
.post a:hover{ color:var(--accent); }
.post blockquote{
  font-family:'DM Serif Display', Georgia, serif; font-style:italic;
  font-size:1.12em;
  margin:1.6rem 0; padding:.2rem 0 .2rem 1.3rem;
  border-left:3px solid var(--moon); color:var(--muted);
}
.post img{ max-width:100%; height:auto; border-radius:6px; }
.post video{ max-width:100%; border-radius:6px; display:block; }
.caption{ font-family:'Jost', sans-serif; font-weight:300;
  font-size:.92rem; color:var(--muted); margin-top:-.7rem; }
.post hr{ border:none; margin:2.4rem 0; text-align:center; }
.post hr::after{
  content:"✶ ☾ ✶"; color:var(--moon); letter-spacing:.6em;
  font-size:1rem;
}
.post ul, .post ol{ padding-left:1.3rem; margin:0 0 1.3rem; }
.post li{ margin:.3rem 0; }
.post code{
  font-family:ui-monospace, Menlo, monospace; font-size:.9em;
  background:#171129; border:1px solid var(--rule); border-radius:4px; padding:.05em .35em;
  color:var(--moon);
}

@media (max-width:480px){
  body{ font-size:1.08rem; }
}