/* ==========================================================================
   astronomy.css  —  Celestial / Night-Sky theme for the Astronomy section
   Sibling of philosophy.css: same design system, deep-navy + gold + starlight
   palette. Self-contained. Link with:  <link rel="stylesheet" href="/astronomy.css">
   ========================================================================== */

:root{
  --space:#0a0e1a;          /* deep night background (never #000) */
  --space-2:#0b1224;        /* panel / sky-map navy */
  --panel:#121a30;          /* card surface */
  --panel-2:#16203a;        /* raised surface */
  --star:#e9eefb;           /* starlight text */
  --star-soft:#a6b2cd;      /* muted text */
  --gold:#e3b341;           /* desaturated single accent */
  --gold-d:#c79a30;
  --aegean:#8fb3e0;         /* quiet blue for links */
  --line:#26314c;           /* hairline borders */
  --line-2:#33405f;
  --shadow:24px 28px 60px -28px rgba(0,0,0,.65);
  --display:'EB Garamond', Georgia, serif;
  --body:'Open Sans', system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--star);background:var(--space);
  background-image:
    radial-gradient(1200px 620px at 86% -10%, rgba(227,179,65,.10), transparent 60%),
    radial-gradient(900px 520px at -8% 4%, rgba(79,128,196,.12), transparent 55%),
    radial-gradient(1px 1px at 20% 30%, rgba(233,238,251,.65), transparent),
    radial-gradient(1px 1px at 70% 18%, rgba(233,238,251,.5), transparent),
    radial-gradient(1px 1px at 42% 72%, rgba(233,238,251,.45), transparent),
    radial-gradient(1px 1px at 88% 64%, rgba(233,238,251,.5), transparent),
    radial-gradient(1px 1px at 12% 84%, rgba(233,238,251,.4), transparent);
  background-attachment:fixed;
  line-height:1.7;-webkit-font-smoothing:antialiased;
}
a{color:var(--aegean);text-decoration:none;transition:color .18s}
a:hover{color:var(--gold)}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.clearfix::after{content:"";display:table;clear:both}

/* ---- Top bar ---- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(10,14,26,.82);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;
  max-width:1180px;margin:0 auto;padding:14px 28px;gap:18px}
.logo{font-family:var(--display);font-weight:600;font-size:22px;color:var(--star);letter-spacing:.01em;white-space:nowrap}
.logo:hover{color:var(--gold)}
.menu{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.menu a{color:var(--star-soft);font-size:14px;font-weight:500;white-space:nowrap}
.menu a:hover{color:var(--gold)}

/* ---- HERO ---- */
.hero{border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(18,26,48,.65) 0%, transparent 100%)}
.hero-inner{display:grid;grid-template-columns:250px 1fr;gap:46px;align-items:center;
  max-width:1180px;margin:0 auto;padding:60px 28px 54px}
.kicker{font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d)}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(38px,5.2vw,60px);
  line-height:1.04;letter-spacing:.005em;margin:14px 0 18px;color:var(--star)}
.hero p,.hero .lede{font-size:19px;color:var(--star-soft);max-width:62ch;font-weight:400}

/* portrait — circular in a dashed gold ring */
.portrait{width:210px;height:210px;border-radius:50%;object-fit:cover;justify-self:center;
  border:3px solid var(--gold);box-shadow:0 0 0 8px var(--space-2), 0 0 0 9px var(--line), var(--shadow)}

/* ---- Sections & headings ---- */
section{padding:52px 0}
h2{font-family:var(--display);font-weight:600;font-size:33px;margin:6px 0 4px;letter-spacing:.005em;line-height:1.18;color:var(--star)}
h3{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.005em;color:var(--star)}
p{color:var(--star);max-width:74ch}
section .wrap > p, .wrap.clearfix > p{font-size:17px;color:var(--star);margin:0 0 16px;max-width:72ch}
section .wrap > .kicker{margin-bottom:2px}
strong{color:var(--star);font-weight:700}
em{color:var(--star)}

/* constellation divider under section kicker+h2 (CSS-only motif) */
h2 + p::before{content:none}

/* ---- Generic grids ---- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}

/* ---- Cards ---- */
.card{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:14px;padding:26px;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:21px}
.card h3 a{color:var(--star)}
.card h3 a:hover{color:var(--gold)}
.card p{color:var(--star-soft);font-size:15px;margin:0;max-width:none}

/* ---- Quick facts ---- */
.quick-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:22px}
.quick-facts .card{border-top-width:1px;padding:18px 20px}
.quick-facts .card h3{font-family:var(--body);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-d);font-weight:700;margin-bottom:5px}
.quick-facts .card p{font-family:var(--display);font-size:18px;color:var(--star)}

/* ---- Key-stars list ---- */
.stars-list{list-style:none;margin:18px 0 0;max-width:880px}
.stars-list li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--star-soft);font-size:16px}
.stars-list li:last-child{border-bottom:none}
.star-name{font-family:var(--display);font-weight:600;font-size:18px;color:var(--gold);margin-right:6px}

/* ---- Feature image + figures ---- */
.feature-image{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line);
  box-shadow:var(--shadow);background:var(--space-2)}
.source-note{font-size:13.5px;color:var(--star-soft);margin-top:12px;line-height:1.6;max-width:80ch}
.source-note a{color:var(--aegean)}
figure{margin:0}
.float-figure{margin:6px 0 22px;max-width:46%;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
.float-figure.right{float:right;margin-left:30px}
.float-figure.left{float:left;margin-right:30px}
.float-figure img{display:block;width:100%;height:auto}
.float-figure figcaption{padding:13px 16px;font-size:13.5px;color:var(--star-soft);line-height:1.55}

/* ---- Image gallery ---- */
.image-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:24px}
.image-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.image-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.image-card img{display:block;width:100%;height:200px;object-fit:cover;background:var(--space-2)}
.image-card h3{padding:16px 18px 0;font-size:19px}
.image-card h3 a{color:var(--star)}
.image-card h3 a:hover{color:var(--gold)}
.image-card p{padding:6px 18px 20px;color:var(--star-soft);font-size:14.5px;margin:0;max-width:none}

/* ---- Pullquote / insight callouts ---- */
.pullquote{background:var(--panel-2);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:0 14px 14px 0;padding:24px 30px;margin:26px 0;max-width:880px}
.pullquote p{font-family:var(--display);font-size:21px;font-style:italic;color:var(--star);line-height:1.5;margin:0;max-width:none}
.pullquote .source-note{font-style:normal;font-family:var(--body);margin-top:12px}
.insight-label{display:block;font-family:var(--body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-d);font-weight:700;margin-bottom:8px}
.insight-box{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:0 14px 14px 0;padding:22px 28px;margin:24px 0;max-width:880px}
.insight-box p{color:var(--star-soft);font-size:15.5px;margin:0;max-width:none}

/* ---- Data tables ---- */
.data-table{width:100%;border-collapse:collapse;margin-top:22px;font-size:15px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.data-table th,.data-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--star-soft)}
.data-table thead th{font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-d);background:var(--space-2)}
.data-table td:first-child{color:var(--star);font-weight:600}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover td{background:rgba(227,179,65,.05)}

/* ---- Ordered lists in prose ---- */
.wrap ol{margin:8px 0 16px 22px;color:var(--star-soft)}
.wrap ol li{margin:0 0 8px}
.wrap ol li strong{color:var(--star)}

/* ---- Sources block ---- */
.sources{max-width:880px;margin-top:8px}
.sources h3{margin-bottom:8px}
.sources p{color:var(--star-soft);font-size:15px}
.sources ul{margin:8px 0 0 20px}
.sources li{margin:0 0 7px;color:var(--star-soft);font-size:14.5px}

/* ---- Buttons ---- */
.btn{display:inline-block;font-weight:600;font-size:15px;padding:12px 22px;border-radius:8px;
  background:var(--gold);color:#1a1206;border:1px solid var(--gold);
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,background .18s}
.btn:hover{color:#1a1206;transform:translateY(-2px);background:var(--gold-d);
  box-shadow:0 14px 26px -12px rgba(227,179,65,.5)}

/* ---- Bottom CTA strip (inline-centered in markup) ---- */
.cta,.bottom-cta{background:var(--space-2);border:1px solid var(--line);border-radius:18px;padding:40px 28px;margin-top:8px}
.cta h2{color:var(--star)}
.cta p{color:var(--star-soft);max-width:60ch}
.cta a:not(.btn){color:var(--aegean);font-weight:600}
.cta a:not(.btn):hover{color:var(--gold)}

/* ---- Related links row ---- */
section .wrap > p a{font-weight:500}

/* ---- Footer ---- */
footer{background:#070a12;color:var(--star-soft);font-size:14px;border-top:1px solid var(--line)}
.footer-bottom{max-width:1180px;margin:0 auto;padding:30px 28px;line-height:1.9}
footer a{color:var(--aegean)}
footer a:hover{color:var(--gold)}

/* ---- Responsive ---- */
@media(max-width:880px){
  .hero-inner{grid-template-columns:1fr;gap:26px;padding:44px 24px 40px}
  .portrait{order:-1;width:150px;height:150px}
  .grid-2,.grid-3{grid-template-columns:1fr;gap:16px}
  .float-figure,.float-figure.left,.float-figure.right{float:none;max-width:100%;margin:18px 0}
  h2{font-size:27px}
  .menu{gap:12px;font-size:13px}
  .wrap{padding:0 20px}
  section{padding:40px 0}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important}}