/* ------------------------------------------------------------
   CCAC observation evening banner
   Each month, just edit the text in the HTML file.
   The moon is a fixed thin crescent.
   ------------------------------------------------------------ */


.obs-banner {
  --night: #0a1230;
  --dusk: #1d2b5e;
  --moon: #f2edd9;
  --torch: #ff6b5b;      /* the red torch light observers use */
  --ink: #eef0f8;
  --soft: #b7bfdc;

  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
  width: 100%;
  min-height: 150px;
  margin: 0;
  /* Full width, but keep the content lined up in a ~1100px column on wide screens */
  padding: 40px max(56px, calc((100% - 1100px) / 2 + 56px)) 42px;
  overflow: hidden;
  border-radius: 0;
  color: var(--ink);
  text-decoration: none;
  font-family: "Figtree", system-ui, sans-serif;
  background: linear-gradient(180deg, var(--night) 0%, #14204a 55%, var(--dusk) 100%);
  isolation: isolate;
}

/* Stars: grouped into loose clusters, as in the real sky. The second layer slowly twinkles */
.obs-banner::before,
.obs-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-repeat: no-repeat;
}
.obs-banner::before {
  background-image:
    radial-gradient(1px 1px at 6.1% 35.3%, #cfd8ff, transparent),
    radial-gradient(1px 1px at 6.0% 38.3%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 7.0% 24.9%, #dfe6ff, transparent),
    radial-gradient(1px 1px at 7.3% 23.5%, #cfd8ff, transparent),
    radial-gradient(1px 1px at 9.6% 43.6%, #dfe6ff, transparent),
    radial-gradient(1px 1px at 7.6% 49.1%, #cfd8ff, transparent),
    radial-gradient(1.5px 1.5px at 31.3% 18.4%, #fff, transparent),
    radial-gradient(1px 1px at 32.5% 6.8%, #cfd8ff, transparent),
    radial-gradient(1px 1px at 34.4% 21.7%, #fff, transparent),
    radial-gradient(1px 1px at 33.0% 15.7%, #fff, transparent),
    radial-gradient(1px 1px at 56.0% 60.1%, #dfe6ff, transparent),
    radial-gradient(1px 1px at 57.1% 46.5%, #fff3dc, transparent),
    radial-gradient(1.5px 1.5px at 56.4% 45.5%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60.8% 50.3%, #fff3dc, transparent),
    radial-gradient(1.5px 1.5px at 79.3% 55.0%, #fff, transparent),
    radial-gradient(1px 1px at 80.4% 26.0%, #dfe6ff, transparent),
    radial-gradient(1.5px 1.5px at 81.2% 27.6%, #fff, transparent),
    radial-gradient(1px 1px at 83.0% 26.9%, #dfe6ff, transparent),
    radial-gradient(1px 1px at 80.1% 40.9%, #cfd8ff, transparent),
    radial-gradient(1.5px 1.5px at 74.7% 34.1%, #cfd8ff, transparent),
    radial-gradient(1px 1px at 96.4% 47.0%, #fff3dc, transparent),
    radial-gradient(1.5px 1.5px at 94.3% 70.0%, #fff, transparent),
    radial-gradient(1px 1px at 93.6% 59.6%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 91.3% 57.3%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 42.8% 36.1%, #cfd8ff, transparent),
    radial-gradient(1px 1px at 47.4% 37.4%, #fff3dc, transparent),
    radial-gradient(1px 1px at 47.3% 36.5%, #cfd8ff, transparent),
    radial-gradient(1px 1px at 44.9% 31.4%, #fff, transparent),
    radial-gradient(1px 1px at 90.2% 50.6%, #fff, transparent),
    radial-gradient(1px 1px at 59.6% 9.9%, #fff3dc, transparent),
    radial-gradient(1px 1px at 31.5% 13.9%, #fff, transparent),
    radial-gradient(1px 1px at 45.4% 28.9%, #fff3dc, transparent),
    radial-gradient(1px 1px at 9.3% 35.8%, #dfe6ff, transparent),
    radial-gradient(1.5px 1.5px at 93.5% 7.0%, #cfd8ff, transparent),
    radial-gradient(1.5px 1.5px at 2.4% 48.0%, #cfd8ff, transparent),
    radial-gradient(1px 1px at 2.2% 9.7%, #fff3dc, transparent),
    radial-gradient(1.5px 1.5px at 33.4% 65.7%, #dfe6ff, transparent),
    radial-gradient(1px 1px at 44.2% 59.5%, #cfd8ff, transparent),
    radial-gradient(1.5px 1.5px at 74.5% 6.9%, #fff, transparent),
    radial-gradient(1px 1px at 48.1% 20.0%, #dfe6ff, transparent),
    radial-gradient(1px 1px at 88.8% 28.9%, #fff3dc, transparent),
    radial-gradient(1px 1px at 61.0% 38.7%, #fff3dc, transparent),
    radial-gradient(1px 1px at 92.2% 37.4%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40.7% 21.3%, #fff, transparent),
    radial-gradient(1px 1px at 21.6% 13.7%, #fff, transparent),
    radial-gradient(1px 1px at 70.7% 66.8%, #fff, transparent),
    radial-gradient(1px 1px at 12.1% 35.6%, #dfe6ff, transparent),
    radial-gradient(1px 1px at 38.5% 38.8%, #fff3dc, transparent);
}
.obs-banner::after {
  background-image:
    radial-gradient(2px 2px at 11.9% 19.8%, #dfe6ff, transparent),
    radial-gradient(1.5px 1.5px at 7.9% 38.0%, #fff3dc, transparent),
    radial-gradient(1px 1px at 11.7% 37.3%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 31.4% 6.0%, #fff, transparent),
    radial-gradient(1px 1px at 32.8% 20.1%, #dfe6ff, transparent),
    radial-gradient(1.5px 1.5px at 26.9% 21.8%, #dfe6ff, transparent),
    radial-gradient(2.5px 2.5px at 55.7% 49.0%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 57.6% 54.3%, #fff, transparent),
    radial-gradient(2px 2px at 81.7% 33.7%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 83.0% 25.6%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 80.9% 28.1%, #fff3dc, transparent),
    radial-gradient(2px 2px at 93.9% 52.8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 92.2% 47.9%, #cfd8ff, transparent),
    radial-gradient(1.5px 1.5px at 88.8% 69.4%, #fff, transparent),
    radial-gradient(2px 2px at 51.5% 21.0%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 47.7% 34.9%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 50.8% 14.5%, #cfd8ff, transparent),
    radial-gradient(1px 1px at 93.8% 43.3%, #dfe6ff, transparent),
    radial-gradient(1px 1px at 73.2% 13.4%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 12.3% 21.7%, #fff3dc, transparent),
    radial-gradient(1.5px 1.5px at 77.4% 47.9%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 87.3% 30.0%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 83.2% 68.8%, #fff, transparent);
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }

/* Hills of the Chase */
.obs-hills {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%; height: 40px;
  z-index: -1;
  display: block;
}

.obs-text {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "title title title"
    "when  where ."
    "note  note  cta";
  align-items: center;
  column-gap: 28px;
  row-gap: 4px;
}
.obs-title { grid-area: title; }
.obs-when  { grid-area: when; }
.obs-where { grid-area: where; }
.obs-note  { grid-area: note; }
.obs-cta   { grid-area: cta; }

.obs-title {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.obs-when {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 600;
}
/* red torch glow */
.obs-when::before {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--torch);
  box-shadow: 0 0 0 4px rgba(255,107,91,.22), 0 0 18px 4px rgba(255,107,91,.55);
}

.obs-where { margin: 0; color: var(--soft); font-size: 1rem; }

.obs-note {
  margin: 0;
  color: var(--soft);
  font-size: .95rem;
  line-height: 1.5;
  white-space: nowrap;
}

.obs-cta {
  justify-self: start;
  margin: 0;
  padding: 6px 16px;
  border: 1.5px solid var(--torch);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: .9rem;
  transition: background .2s, color .2s;
}
.obs-banner:hover .obs-cta { background: var(--torch); color: #2a0d0a; }
.obs-banner:focus-visible { outline: 3px solid var(--torch); outline-offset: 3px; }

/* A thin crescent moon (the moon is always ~1% on observation evenings) */
.obs-moon {
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset -7px 2px 0 0 var(--moon);
  filter: drop-shadow(0 0 5px rgba(242,237,217,.55));
  transform: rotate(var(--tilt, -20deg));
  margin-right: 12px;
  align-self: center;
}

@media (max-width: 680px) {
  .obs-banner {
    grid-template-columns: 1fr;
    padding: 20px 20px 48px;
    gap: 12px;
  }
  .obs-text { display: block; }
  .obs-title { margin-bottom: 6px; padding-right: 56px; }
  .obs-where { margin: 2px 0 8px; }
  .obs-note { white-space: normal; }
  .obs-cta { display: inline-block; margin-top: 10px; }
  .obs-moon { position: absolute; top: 20px; right: 22px; width: 30px; margin: 0; box-shadow: inset -5px 1px 0 0 var(--moon); }
}

@media (prefers-reduced-motion: reduce) {
  .obs-banner::after { animation: none; opacity: .8; }
  .obs-cta { transition: none; }
}