/* =============================================================================
   Sky Tonight — "celestial observatory / vintage star atlas"
   Deep indigo night, layered starfield, astronomer's amber (red-light) accent,
   Fraunces display + Hanken Grotesk body + IBM Plex Mono coordinate readouts.
   ============================================================================= */

:root {
  --ink:        #070b18;   /* deepest night */
  --ink-2:      #0c1226;
  --panel:      rgba(20, 28, 54, 0.55);
  --panel-solid:#121a33;
  --border:     rgba(150, 170, 220, 0.16);
  --border-2:   rgba(150, 170, 220, 0.28);
  --text:       #e9edfb;
  --muted:      #97a3c6;
  --faint:      #7481a7;
  --amber:      #ffb347;   /* astronomer's warm light */
  --amber-2:    #ffd089;
  --amber-deep: #c8761b;
  --star:       #f4f7ff;

  --display: "Fraunces", Georgia, serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1080px;
  --radius: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- Atmosphere: fixed full-bleed background layers --------------------- */
.sky-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(1200px 800px at 78% -8%, #1a2348 0%, rgba(26,35,72,0) 55%),
    radial-gradient(900px 700px at 10% 110%, #122 0%, rgba(17,34,34,0) 60%),
    linear-gradient(180deg, #070b18 0%, #0a1020 55%, #070a16 100%);
}
.stars { position: absolute; inset: -50%; background-repeat: repeat; }
/* Two star layers built from radial-gradient dots; parallax-ish sizes + twinkle. */
.stars--far {
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(244,247,255,0.9), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(244,247,255,0.7), transparent),
    radial-gradient(1px 1px at 210px 150px, rgba(200,220,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 200px, rgba(244,247,255,0.6), transparent),
    radial-gradient(1px 1px at 300px 50px, rgba(244,247,255,0.8), transparent),
    radial-gradient(1px 1px at 360px 240px, rgba(220,230,255,0.7), transparent);
  background-size: 400px 300px;
  opacity: 0.6;
  animation: twinkle 7s ease-in-out infinite;
}
.stars--near {
  background-image:
    radial-gradient(1.6px 1.6px at 60px 120px, #fff, transparent),
    radial-gradient(2px 2px at 250px 60px, var(--amber-2), transparent),
    radial-gradient(1.6px 1.6px at 420px 300px, #fff, transparent),
    radial-gradient(1.6px 1.6px at 520px 180px, #cfe0ff, transparent);
  background-size: 640px 480px;
  opacity: 0.85;
  animation: twinkle 5s ease-in-out infinite reverse;
}
@keyframes twinkle { 0%,100% { opacity: 0.35; } 50% { opacity: 0.9; } }
.milkyway {
  position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 70% 25%, rgba(120,150,255,0.10), transparent 70%),
              radial-gradient(40% 60% at 30% 80%, rgba(255,179,71,0.06), transparent 70%);
  filter: blur(6px);
  transform: rotate(-18deg) scale(1.4);
}
.grain {
  position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Occasional shooting stars — streak diagonally, long quiet gaps between. */
.meteors { position: absolute; inset: 0; overflow: hidden; }
.meteor {
  position: absolute; top: -8%;
  width: 130px; height: 2px; border-radius: 2px; opacity: 0;
  /* Bright head on the right end; the tail fades out to the left. The bar is
     rotated to lie along the travel direction (down-left), so the head leads
     and the tail trails up-right — the natural shooting-star look. */
  background: linear-gradient(90deg, rgba(207,224,255,0), rgba(207,224,255,0.95));
  filter: drop-shadow(0 0 6px rgba(180,210,255,0.85));
}
@media (prefers-reduced-motion: no-preference) {
  .meteor { animation: shoot var(--dur, 12s) linear infinite; animation-delay: var(--delay, 0s); }
}
@keyframes shoot {
  0%   { opacity: 0; transform: translate(0, 0) rotate(147deg) scale(var(--sc, 1)); }
  2%   { opacity: 1; }
  9%   { opacity: 1; }
  14%  { opacity: 0; transform: translate(-360px, 230px) rotate(147deg) scale(var(--sc, 1)); }
  100% { opacity: 0; transform: translate(-360px, 230px) rotate(147deg) scale(var(--sc, 1)); }
}
.meteor:nth-child(1) { left: 70%; --dur: 11s; --delay: 1s;   --sc: 1;   }
.meteor:nth-child(2) { left: 88%; --dur: 17s; --delay: 6s;   --sc: 0.8; }
.meteor:nth-child(3) { left: 55%; --dur: 14s; --delay: 9s;   --sc: 1.1; }
.meteor:nth-child(4) { left: 96%; --dur: 23s; --delay: 14s;  --sc: 0.7; }
.meteor:nth-child(5) { left: 40%; --dur: 19s; --delay: 20s;  --sc: 0.9; top: 12%; }

@media (prefers-reduced-motion: reduce) {
  .stars--far, .stars--near { animation: none; }
}

.wrap { width: min(var(--wrap), 91vw); margin-inline: auto; }

a { color: var(--amber-2); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--amber); }

/* ---- Type --------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 500; margin: 0.2em 0 0.3em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 2.4rem 0 0.8rem; font-weight: 500; }
h3 { font-size: 1.15rem; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 60ch; font-weight: 400; }

/* Small mono "scientific label" treatment, reused widely. */
.kicker, .sky-label, .fact-grid dt, .product-cat, .breadcrumbs {
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--faint);
}

/* ---- Header / footer ---------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(7,11,24,0.92), rgba(7,11,24,0.55));
  border-bottom: 1px solid var(--border); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--text); }
.brand:hover { color: var(--text); }
.brand-mark { color: var(--amber); font-size: 1.1rem; filter: drop-shadow(0 0 8px rgba(255,179,71,0.6)); animation: pulse 4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 0.8; } 50% { opacity: 1; } }
.brand-name { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; }
.site-header nav a { font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-left: 1.6rem; }
.site-header nav a:hover { color: var(--amber-2); }

main.wrap { padding: 2.5rem 0 4rem; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.site-footer { border-top: 1px solid var(--border); color: var(--faint); font-size: 0.84rem; padding: 2rem 0 3rem; }
.site-footer .disclosure { margin: 0 0 0.6rem; max-width: 75ch; line-height: 1.6; }
.site-footer .copyright { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; }

/* ---- Breadcrumbs -------------------------------------------------------- */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0 0 1.6rem; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs .sep { margin-left: 0.5rem; color: var(--border-2); }
.breadcrumbs [aria-current] { color: var(--amber-2); }

/* ---- Hero --------------------------------------------------------------- */
.hero { padding: 2.5rem 0 1rem; }
.hero h1 { max-width: 15ch; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.04; padding-bottom: 0.06em;
  background: linear-gradient(180deg, #fff 35%, var(--amber-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { max-width: 54ch; margin-top: 1.2rem; }

/* Entrance reveals are purely additive — gated so content is always visible by
   default (and for reduced-motion users); only animates when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  main.wrap { animation: rise 0.7s ease both; }
  main > section { animation: rise 0.7s ease both; }
  main > section:nth-of-type(1) { animation-delay: 0.05s; }
  main > section:nth-of-type(2) { animation-delay: 0.13s; }
  main > section:nth-of-type(3) { animation-delay: 0.21s; }
  main > section:nth-of-type(4) { animation-delay: 0.29s; }
}

/* ---- Live sky widget (the hero feature) -------------------------------- */
.sky-widget { position: relative; margin: 2rem 0 2.5rem; padding: 1.6rem 1.7rem 1.8rem;
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--panel); backdrop-filter: blur(8px);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.04); }
.sky-widget::before { content: "● LIVE"; position: absolute; top: 1.3rem; right: 1.5rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--amber);
  opacity: 0.85; }
.sky-widget h2 { margin: 0 0 0.2rem; font-size: 1.5rem; }
.sky-widget-sub { color: var(--muted); margin: 0.2rem 0 0; font-size: 0.95rem; }
.sky-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; margin-top: 1.3rem; }
.sky-cell { padding: 1rem 1.05rem 1.1rem; border-radius: 11px;
  background: linear-gradient(180deg, rgba(8,12,28,0.6), rgba(8,12,28,0.2));
  border: 1px solid var(--border); position: relative; overflow: hidden; }
.sky-cell::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,179,71,0.5), transparent); }
.sky-label { display: block; margin-bottom: 0.45rem; }
.sky-value { display: block; font-family: var(--display); font-size: 1.22rem; font-weight: 500; color: var(--star); line-height: 1.2; }
.sky-cell-wide { grid-column: 1 / -1; }
.sky-updated { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); margin-top: 1rem; letter-spacing: 0.03em; }

/* Meteor-shower call-out under the live grid. */
.meteor-strip { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.1rem;
  padding: 0.85rem 1.1rem; border-radius: 11px; border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(110,168,254,0.10), rgba(8,12,28,0.2)); }
.meteor-strip.meteor-strip-good { border-color: rgba(255,179,71,0.4);
  background: linear-gradient(180deg, rgba(255,179,71,0.12), rgba(8,12,28,0.2)); }
.meteor-strip-icon { font-size: 1.6rem; color: var(--amber-2); filter: drop-shadow(0 0 8px rgba(255,179,71,0.6)); }
.meteor-strip-body { display: flex; flex-direction: column; gap: 0.15rem; }
.meteor-strip-title { font-family: var(--display); font-size: 1.05rem; color: var(--star); }
.meteor-strip-detail { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted); }

/* ---- Facts -------------------------------------------------------------- */
.facts .fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.8rem; }
.fact-grid div { padding: 0.95rem 1.05rem; border: 1px solid var(--border); border-radius: 11px; background: rgba(12,18,38,0.4); }
.fact-grid dt { display: block; margin-bottom: 0.35rem; }
.fact-grid dd { margin: 0; font-family: var(--display); font-size: 1.05rem; color: var(--text); }

/* ---- Link card lists (locations / guides) ------------------------------ */
.location-list, .guide-list { list-style: none; padding: 0; display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 1.2rem 0; }
.location-list a, .guide-list a { display: block; padding: 1.15rem 1.25rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  color: var(--text); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.location-list a:hover, .guide-list a:hover { transform: translateY(-3px); border-color: var(--amber-deep);
  box-shadow: 0 20px 40px -28px rgba(255,179,71,0.5); }
.location-list strong, .guide-list strong { font-family: var(--display); font-size: 1.18rem; font-weight: 600; display: block; }
.location-list span, .guide-list span { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 0.35rem; }
.guide-list span { font-family: var(--body); }

/* ---- Products ----------------------------------------------------------- */
.product-list { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1.2rem; }
.product-card { display: flex; gap: 1rem; padding: 1.1rem; border: 1px solid var(--border);
  border-radius: 12px; background: var(--panel); transition: border-color 0.2s, transform 0.2s; }
.product-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.product-card img { border-radius: 9px; object-fit: cover; background: var(--ink-2); flex: 0 0 auto; }
.product-cat { display: block; color: var(--amber); margin-bottom: 0.2rem; }
.product-title { font-family: var(--display); font-size: 1.05rem; font-weight: 600; margin: 0.15rem 0 0.45rem; line-height: 1.2; }
.product-blurb { font-size: 0.9rem; color: var(--muted); margin: 0 0 0.7rem; }
.product-foot { display: flex; align-items: center; justify-content: space-between; margin: 0; }
.product-price { font-family: var(--mono); font-weight: 500; color: var(--text); }
.product-cta { background: linear-gradient(180deg, var(--amber-2), var(--amber)); color: #2a1800;
  font-weight: 700; font-size: 0.85rem; padding: 0.5rem 0.95rem; border-radius: 9px;
  letter-spacing: 0.01em; transition: filter 0.2s, transform 0.15s; }
.product-cta:hover { color: #2a1800; filter: brightness(1.08); transform: translateY(-1px); }

/* ---- Guide article ------------------------------------------------------ */
/* Two-column guide: prose fills the left column (left edge aligned with the
   breadcrumb), "Our picks" is a sticky sidebar filling the right. Single column
   on narrow screens. */
.guide { max-width: none; }
.guide-main > * { max-width: 70ch; }
.guide-aside h2 { margin-top: 0; }
.guide-aside .product-list { grid-template-columns: 1fr; }
@media (min-width: 980px) {
  .guide { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3rem; align-items: start; }
  .guide-aside { position: sticky; top: 5rem; }
}
.guide p { color: #d6ddf2; }
.guide h2 { color: var(--amber-2); }
.guide ul { padding-left: 1.3rem; }
.guide li { margin: 0.5rem 0; }
.guide-foot { margin-top: 2.5rem; font-family: var(--mono); font-size: 0.85rem; }

section > p, .dark-site p { max-width: 66ch; color: #cfd6ee; }

/* ---- Maps & star chart -------------------------------------------------- */
.map-section { margin-top: 2.6rem; }
.star-chart { width: 100%; max-width: 760px; margin-inline: auto; border: 1px solid var(--border-2);
  border-radius: var(--radius); overflow: hidden; background: var(--ink);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8); }
.star-chart svg { display: block; width: 100%; height: auto; }
.lp-map { height: 380px; border: 1px solid var(--border-2); border-radius: var(--radius);
  overflow: hidden; background: #0a0e1c; box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8); }
.map-note { font-family: var(--mono); font-size: 0.72rem; color: var(--faint);
  letter-spacing: 0.04em; margin-top: 0.7rem; text-transform: uppercase; }
.leaflet-container { font-family: var(--body); background: #0a0e1c; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel-solid); color: var(--text); }

/* Star-chart legend */
.chart-legend { list-style: none; padding: 0.9rem 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem;
  max-width: 760px; margin-inline: auto; }
.chart-legend li { display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.03em; }
.chart-legend .lg { width: 16px; height: 0; border-radius: 2px; flex: 0 0 auto; }
.lg-planet { width: 9px; height: 9px; border-radius: 50%; background: var(--amber-2); }
.lg-dso { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #8fb3ff; }
.lg-con { border-top: 2px solid #6ea8fe; }
.lg-ecl { border-top: 2px dashed var(--amber-2); }
.lg-mw { width: 14px; height: 9px; border-radius: 2px; background: rgba(255,255,255,0.16); }
.lg-hor { border-top: 2px solid var(--amber); }