:root{
  --bg0: #07080c;
  --bg1: #0f121a;
  --bg2: #090a0f;

  --panel-dark: rgba(10,12,16,0.92);
  --stage: rgba(14,16,22,0.50);

  --teal: #2fd6c7;
  --purple: #a855f7;

  --cream0: #f4ecd8;
  --cream1: #efe4c9;
  --cream2: #e6d8b8;

  --text: rgba(255,255,255,0.88);
  --muted: rgba(255,255,255,0.64);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: "Cinzel", serif;
  color: var(--text);

  background:
    radial-gradient(1100px 650px at 12% 22%, rgba(47,214,199,0.20), transparent 60%),
    radial-gradient(1000px 600px at 88% 70%, rgba(168,85,247,0.18), transparent 62%),
    radial-gradient(900px 500px at 55% 10%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(135deg, var(--bg0) 0%, var(--bg1) 45%, var(--bg2) 100%);
  background-attachment: fixed;
}

/* =========================
   CONTAINER
========================= */

.container{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0px 12px 8px;
}

/* =========================
   SECTION WRAPPERS
========================= */

.section-wrapper{ width: 100%; }
.section-header{ background: rgba(0,0,0,0); }
.section-main{ background: rgba(0,0,0,0); }
.section-footer{ background: rgba(0,0,0,0); }

/* =========================
   HEADER / MARQUEE
========================= */

.site-header{
  display: flex;
  justify-content: center;
  padding: 8px 16px 8px;
}

.marquee{
  width: 100%;
  max-width: 1600px;

  position: relative;
  overflow: hidden;
  padding: 12px;
  border-radius: 20px;
  background: var(--panel-dark);

  box-shadow:
    0 26px 70px rgba(0,0,0,0.65),
    inset 0 0 0 2px rgba(255,255,255,0.05);
}

/* LED strip ring */
@keyframes marqueePulse{
  0%,100% { filter: blur(0.6px) brightness(0.95); opacity: 0.85; }
  50%     { filter: blur(0.7px) brightness(1.08); opacity: 1; }
}

.marquee::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 14px;
  pointer-events:none;
  z-index: 1;

  background:
    linear-gradient(90deg, rgba(47,214,199,1), rgba(168,85,247,1), rgba(47,214,199,1))
      top left / 100% 16px no-repeat,
    linear-gradient(90deg, rgba(47,214,199,1), rgba(168,85,247,1), rgba(47,214,199,1))
      bottom left / 100% 16px no-repeat,
    linear-gradient(180deg, rgba(47,214,199,1), rgba(168,85,247,1), rgba(47,214,199,1))
      top left / 16px 100% no-repeat,
    linear-gradient(180deg, rgba(47,214,199,1), rgba(168,85,247,1), rgba(47,214,199,1))
      top right / 16px 100% no-repeat;

  box-shadow:
    inset 0 0 0 4px rgba(11,12,16,0.78),
    0 0 18px rgba(47,214,199,0.20),
    0 0 18px rgba(168,85,247,0.18);

  animation: marqueePulse 5.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .marquee::before{ animation: none; }
}

.marquee-panel{
  position: relative;
  z-index: 2;

  background: linear-gradient(180deg, var(--cream0) 0%, var(--cream1) 55%, var(--cream2) 100%);
  border-radius: 2px;
  padding: 12px 40px 12px 16px;

  box-shadow:
    inset 0 0 45px rgba(0,0,0,0.10),
    inset 0 0 90px rgba(255,255,255,0.18);
}

.marquee-content{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}

.marquee-logo{
  width: 185px;
  height: 235px;
  object-fit: fill;
  border-radius: 18px;

  box-shadow:
    0 18px 45px rgba(0,0,0,0.30),
    inset 0 0 0 2px rgba(255,255,255,0.20);
}

.marquee-text{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.site-title{
  margin: -36px 0 0;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 81px;
  letter-spacing: 2px;
  line-height: 2;
  color: #121212;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

.site-tagline{
  margin: 0;
  font-family: "Cinzel", serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 2px;
  line-height: 1.5;
  color: rgba(0,0,0,0.60);
}

/* =========================
   LAYOUT STAGE
========================= */

.layout{
  margin: 18px auto 0;
  padding: 26px;

  display: grid;
  gap: 22px;
  grid-template-columns: 280px 1fr;

  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--stage);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(0,0,0,0.20);

  backdrop-filter: blur(6px);
}

/* =========================
   SIDEBAR / PILLS (LEFT)
========================= */

.sidebar{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 12px;

  background: linear-gradient(
    180deg,
    rgba(20, 26, 38, 0.65) 0%,
    rgba(16, 20, 30, 0.75) 100%
  );

  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;

  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.35),
    0 8px 30px rgba(0,0,0,0.35);
}

.pill{
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 14px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;

  color: rgba(255,255,255,0.90);
  border: 1px solid rgba(255,255,255,0.14);

  background: linear-gradient(
    90deg,
    rgba(47,214,199,0.28),
    rgba(168,85,247,0.28)
  );

  box-shadow:
    0 10px 24px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.08);

  transition: transform 160ms ease, filter 160ms ease, border-color 160ms ease;
}

.pill:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  border-color: rgba(255,255,255,0.22);
}

.sidebar-widget {
  margin-top: 24px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: center;
}

.sidebar-widget iframe {
  width: 190px;
  height: 302px;
  border: none;
}

.sidebar-event {
  margin-top: 20px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: center;
}

.sidebar-event img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  transition: transform 180ms ease, filter 180ms ease;
}

.sidebar-event img:hover {
  transform: scale(1.03);
  filter: brightness(1.08);
}

/* =========================
   PANELS (RIGHT)
========================= */

.content{
  border-radius: 18px;
  padding: 22px;
  background: rgba(10,12,16,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22);
}

.panel{
  display: none;
  padding: 28px;
  border-radius: 16px;

  background: rgba(18,20,26,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,0.40);
}

/* Default (no hash): show About */
#about{ display: block; }

/* If ANY panel is targeted, hide About unless About targeted */
.content:has(.panel:target) #about{ display: none; }
.content:has(#about:target) #about{ display: block; }

/* Show targeted panel */
.panel:target{ display: block; }

/* Active pill highlight */
body:has(#about:target)   .sidebar a[href="#about"],
body:has(#services:target) .sidebar a[href="#services"],
body:has(#events:target)  .sidebar a[href="#events"],
body:has(#hours:target)   .sidebar a[href="#hours"],
body:has(#links:target)   .sidebar a[href="#links"]{
  filter: brightness(1.12);
  border-color: rgba(255,255,255,0.30);
}

body:not(:has(.panel:target)) .sidebar a[href="#about"]{
  filter: brightness(1.12);
  border-color: rgba(255,255,255,0.30);
}

/* Panel typography */
.panel h2{
  margin: 0 0 12px;
  letter-spacing: 2px;
}

.panel p{
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

/* =========================
   ABOUT BLOCKS
========================= */

.about-panel .panel-title{ font-size: 32px; }

.about-panel .about-block{
  padding: 18px;
  border-radius: 16px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 18px 40px rgba(0,0,0,0.35);
}

.about-panel .about-row{
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 18px;
  align-items: start;
}

.about-panel .panel-copy p{
  margin: 0;
  line-height: 1.35;
  text-indent: 2rem;
  font-size: 16px;
}

.about-panel .about-bullets{
  margin: 0.75rem 0 0.75rem;
  padding-left: 4rem;
}

.about-panel .about-bullets li{
  margin: 0.35rem 0;
  line-height: 1.2;
}

.about-panel a{
  color: rgba(168,85,247,0.95);
  text-decoration: none;
}
.about-panel a:hover{ text-decoration: underline; }

.about-panel .panel-media{
  align-items: end;
  padding: 24px;
  max-width: 180px;
  min-height: 180px;
  border-radius: 14px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.55),
    0 10px 22px rgba(0,0,0,0.35);
  overflow: hidden;
}

/* =========================
   ABOUT — FORCE 2 COLUMN LAYOUT
========================= */

.about-panel {
  display: grid;
  grid-template-columns: 1fr 1fr; /* left column | right column */
  gap: 40px;
}

/* Make intro span full width */
.about-panel .panel-intro {
  grid-column: 1 / -1;
}

/* All about blocks go in left column */
.about-panel .about-block,
.about-panel .about-row {
  grid-column: 1;
}

/* All media inside about goes to right column */
.about-panel .panel-media {
  grid-column: 2;
}

/* =========================
   SERVICES — Art Deco 3-column board
========================= */

.services-panel .services-stage{
  margin-top: 16px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
}

/* 3 columns */
.services-panel .services-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  grid-auto-rows: 1fr; /* makes each row equal height */
}

/* each “board section” */
.services-panel .services-card{
  padding: 18px;
  border-radius: 16px;
  background: rgba(10,12,16,0.62);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 16px 34px rgba(0,0,0,0.35);
}

/* art-deco-ish header */
.services-panel .services-head{
  margin: 0 0 10px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 20px;
  color: rgba(255,255,255,0.90);
}

/* divider line under header */
.services-panel .services-head::after{
  content: "";
  display: block;
  margin-top: 10px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(47,214,199,0.55),
    rgba(168,85,247,0.55)
  );
  opacity: 0.9;
}

/* list styling */
.services-panel .services-list{
  margin: 12px 0 14px;
  padding-left: 18px;
  color: rgba(255,255,255,0.70);
  line-height: 1.6;
  font-size: 15px;
}

.services-panel .services-card .services-head::after{
  content: "";
  display: block;
  margin-top: 10px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(47,214,199,0.55),
    rgba(168,85,247,0.55)
  );
  opacity: 0.9;
}

/* media slot */
.services-panel .services-media{
  min-height: 150px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.45);
  overflow: hidden;
}

/* if you drop an image/video in */
.services-panel .services-media img,
.services-panel .services-media video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* responsive: 2 columns then 1 */
@media (max-width: 1100px){
  .services-panel .services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .services-panel .services-grid{ grid-template-columns: 1fr; }
}

.wheel-image {
  display: flex;
  justify-content: start;
  margin-top: 20px;
}

.wheel-image img {
  max-width: 45%;
  height: auto;
  border-radius: 36px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
/* =========================
   PANEL BASE TYPOGRAPHY (PER SECTION)
========================= */

.services-panel .panel-title,
.events-panel .panel-title,
.links-panel .panel-title{ font-size: 22px; }

.services-panel .panel-copy p,
.events-panel .panel-copy p,
.links-panel .panel-copy p{ font-size: 15px; }

.hours-panel .panel-title{ font-size: 44px; }
.hours-panel .panel-copy p{ font-size: 20px; line-height: 2.0; }

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px){
  .site-title{ font-size: 52px; }
  .marquee-logo{ width: 220px; height: 260px; }
  .site-tagline{ letter-spacing: 3px; }
  .layout{ grid-template-columns: 220px 1fr; }
}

@media (max-width: 900px){
  .marquee-content{
    flex-direction: column;
    gap: 18px;
  }

  .marquee-panel{ padding: 24px 26px; }

  .site-title{ font-size: 44px; text-align: center; }
  .site-tagline{ text-align: center; letter-spacing: 2px; }

  .layout{ grid-template-columns: 1fr; }

  .sidebar{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .pill{ width: 160px; }
}

/* =========================
   FOOTER
========================= */

.section-footer {
  background: transparent;
}

.site-footer {
  text-align: center;
  padding: 0px 0 8px;
  color: rgba(47,214,199,0.55);
  font-size: 14px;
  letter-spacing: 1px;
}

/* Sidebar badge (Jeeps Jams 4 Jugs) */
.sidebar-badge{
  display: block;
  margin-top: 14px;       /* space below last pill */
  padding: 10px;
  border-radius: 14px;

  border: 1px solid rgba(5, 5, 5, 0.55);
  background: rgba(28, 133, 124, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 10px 22px rgba(0,0,0,0.35);

  text-decoration: none;
}

.sidebar-badge-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.sidebar-badge-title{
  display: block;
  margin-bottom: 8px;
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
}

/* ===== Moon widget ===== */
.moon-widget{
  margin-top: 18px;
  padding: 14px 12px;
  border-radius: 14px;
  background: rgba(86, 43, 126, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 10px 22px rgba(0,0,0,0.35);
}

.moon-title{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.82);
}

.moon-row{
  display: flex;
  align-items: center;
  gap: 12px;
}

.moon-icon{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(95, 93, 93, 0.25);
  border: 1px solid rgba(255,255,255,0.10);
}

.moon-icon svg{ display:block; width:100%; height:100%; }

.moon-meta{ line-height: 1.25; }
.moon-name{
  font-weight: 700;
  font-size: 14px;
  color: rgba(255,255,255,0.88);
}
.moon-date{
  font-size: 12px;
  color: rgba(255,255,255,0.62);
  margin-top: 4px;
}

.moon-illumination,
.moon-next-full{
  font-size: 10px;
  opacity: 0.7;
  margin-top: 4px;
}


/*----EVENTS----*/

/*---Left-Column---*/

.events-panel .panel-title{
  font-size: 36px;
}

/* two column layout */
.events-panel .events-layout{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* LEFT COLUMN */
.events-panel .events-left{
  display: flex;
  flex-direction: column;
  align-items: center;     /* centers both image and widget */
  gap: 20px;
}

/* wheel image */
.events-panel .events-left img{
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
}

/* date + countdown block */
.events-panel .season-widget{
  width: 100%;
  max-width: 500px;
}

/* date styling */
.events-panel .season-date{
  font-size: 30px;
  letter-spacing: 1px;
  opacity: 0.8;
  text-align: center;
}

.events-panel .season-date span{
  font-size: 30px;
  font-weight: 700;
}

/* countdown */
.events-panel .season-countdown{
  font-size: 40px;
  text-align: center;
  margin-top: 10px;
}

/* "until Ostara" line */
.events-panel .season-until{
  margin-top: 10px;
  font-size: 20px;        /* adjust size */
  text-align: center;     /* center under countdown */
  opacity: 0.8;
  letter-spacing: 1px;
}

/* Holiday name inside it */
.events-panel .season-until span{
  font-weight: 700;
  font-size: 28px;        /* make name slightly larger */
  opacity: 1;
}

/* Glowy divider under "Date of" */
.events-panel .season-date{
  position: relative;
  padding-bottom: 14px;   /* space for the bar */
}

.events-panel .season-date::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 80%;             /* adjust width */
  height: 4px;            /* thickness */
  border-radius: 4px;

  background: linear-gradient(
    90deg,
    var(--teal),
    var(--purple)
  );

  box-shadow:
    0 0 10px var(--teal),
    0 0 18px var(--purple);
}

/*--RIGHT COLUMN--*/

.events-right {
  display: grid;
  grid-template-rows: 1fr 1fr;  /* two equal sections */
  gap: 20px;
}

/* --- EVENTS: right column media box --- */
.events-right .media-box{
  width: 100%;
  height: 100%;
  min-height: 320px;              /* tweak */
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.45);
  overflow: hidden;
  display: flex;
}

/* placeholder text (delete when you embed real calendar) */
.events-right .media-placeholder{
  width: 100%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.70);
  font-size: 16px;
  letter-spacing: 1px;
  text-align: center;
  padding: 18px;
}

/* =========================
   EVENTS RIGHT COLUMN FONT CONTROL
========================= */

/* Section titles: "Calendar" / "Upcoming" */
.events-right .block-title{
  font-family: "Cinzel", serif;
  font-size: 24px;        /* change size here */
  letter-spacing: 2px;
  font-weight: 700;
  padding-bottom: 6px;
}

.events-right .events-upcoming { margin-top: 48px; }

/* Body text inside both blocks */
.events-right .block-body{
  font-family: "Inter", sans-serif;
  font-size: 16px;        /* change size here */
  line-height: 1.6;
}

/* Upcoming list items */
.events-right .upcoming-list li{
  font-size: 16px;        /* change size here */
  letter-spacing: 0.5px;
}

/* Media placeholder text (calendar area before embed) */
.events-right .media-placeholder{
  font-family: "Inter", sans-serif;
  font-size: 15px;        /* change size here */
  letter-spacing: 1px;
}

/* ===== Open/Closed widget (sidebar) ===== */
.open-status{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(17, 99, 92, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 10px 22px rgba(0,0,0,0.35);
}

.open-status__row{
  display: flex;
  align-items: center;
  gap: 10px;
}

.open-status__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.425);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
  flex: 0 0 auto;
}

.open-status__label{
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,0.88);
}

.open-status__sub{
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.5px;
}

/* states */
.open-status[data-state="open"] .open-status__dot{
  background: #3dff7a;
  box-shadow: 0 0 10px rgba(61,255,122,0.55), 0 0 0 2px rgba(255,255,255,0.10);
}
.open-status[data-state="closed"] .open-status__dot{
  background: #ff3d5a;
  box-shadow: 0 0 10px rgba(255,61,90,0.50), 0 0 0 2px rgba(255,255,255,0.10);
}

/* ===== HOURS (2-column layout) ===== */
.hours-panel .hours-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* card styling matches your events blocks */
.hours-panel .hours-card{
  border-radius: 16px;
  background: rgba(10,12,16,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
  padding: 18px;
}

/* TITLES */
.hours-panel .hours-card-title{
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 12px;
  font-size: 30px;
}

/* ===== HOURS divider lines under titles ===== */
.hours-panel .hours-card-title::after{
  content: "";
  display: block;
  margin-top: 10px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--purple));
  box-shadow: 0 0 8px var(--teal), 0 0 14px var(--purple);
}

/* ===== EXCEPTIONS PANEL CONTROLS ===== */
/* use this on your Exceptions card wrapper (same element that also has .hours-card) */
.hours-panel .hours-exceptions{
  margin-top: 0px;         /* move the whole exceptions card DOWN/UP */
  padding-top: 0px;        /* add internal top padding if you want just the content lower */
}

/* optional: nudge ONLY the Exceptions title down inside the card */
.hours-panel .hours-exceptions .hours-card-title{
  margin-top: 0px;         /* move title down without moving the whole card */
}

/* optional: nudge ONLY the bullet list down inside the exceptions card */
.hours-panel .hours-exceptions .hours-bullets{
  margin-top: 0px;         /* adds space between title and bullets */
}

/* tighten bullets for this panel only */
.hours-panel .hours-bullets{
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 900px){
  .hours-panel .hours-grid{ grid-template-columns: 1fr; }
}

/* =========================
   HOURS: subtle glow message
========================= */
@keyframes subtleGlow {
  0%,100% {
    text-shadow:
      0 0 8px rgba(47,214,199,0.35),
      0 0 14px rgba(168,85,247,0.28);
  }
  50% {
    text-shadow:
      0 0 12px rgba(47,214,199,0.55),
      0 0 22px rgba(168,85,247,0.45);
    }
}

.hours-message{
  margin-top: 22px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(10,12,16,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22);
  text-align: center;
}

.hours-message-text{
  font-size: 26px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  animation: subtleGlow 6.5s ease-in-out infinite;
}


/* =========================
   LINKS GRID
========================= */
.links-panel .links-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.links-panel .links-card{
  border-radius: 16px;
  background: rgba(10,12,16,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
  padding: 18px;
}

.links-panel .links-card-title{
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 18px;
  margin-bottom: 12px;
}

.links-panel .links-card-title::after{
  content: "";
  display: block;
  margin-top: 8px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--purple));
  box-shadow: 0 0 8px var(--teal), 0 0 14px var(--purple);
}

.links-panel .links-list{
  margin: 0;
  padding-left: 18px;
}

.links-panel .links-list li{
  margin: 8px 0;
}

.links-panel .links-list a{
  text-decoration: none;
  color: rgba(255,255,255,0.85);
}

.links-panel .links-list a:hover{
  text-decoration: underline;
}

.links-credits,
.links-sources{
  opacity: 0.88;
}

/* LINKS: make Credits & Sources span both columns */
.links-panel .links-grid .links-card.credits-sources{
  grid-column: 1 / -1;
}

@media (max-width: 900px){
  .links-panel .links-grid{
    grid-template-columns: 1fr;
  }
}

/* ===== ABOUT MEDIA (Joy Theater Section) ===== */

.about-media{
  margin: 20px 0 px 0;
  flex-direction: column;
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
}

/* CONTROL WIDTH & HEIGHT HERE */
.about-media-joy img{
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: cover;  /* keeps images clean */
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}

.links-social-row{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.links-social-text{
  font-size: 14px;
  opacity: 0.75;
}

.social-icon{
  width: 24px;
  height: 24px;
  display: inline-flex;
  color: rgba(255,255,255,0.75);
  transition: 160ms ease;
}

.social-icon:hover{
  color: var(--teal);
}

.links-review-row{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

.links-review-text{
  font-size: 14px;
  opacity: 0.75;
}

.google-icon:hover{
  color: var(--purple); /* differentiate slightly from socials if you want */
}

/* ===== PANEL VISIBILITY (ONLY ONE AT A TIME) ===== */
.panel { display: none; }

/* default page (no hash) */
#about { display: block; }

/* when a panel is targeted, show ONLY that panel */
.panel:target { display: block; }
body:has(.panel:target) #about { display: none; }
body:has(#about:target) #about { display: block; }

@media (max-width: 600px){

  .site-title{
    font-size: 32px;
    text-align: center;
  }

  .site-tagline{
    font-size: 14px;
    letter-spacing: 1px;
    text-align: center;
  }

  .marquee-logo{
    width: 160px;
    height: auto;
  }

  .marquee-panel{
    padding: 16px;
  }

  .pill{
    width: 100%;
    max-width: 280px;
  }

  .sidebar{
    flex-direction: column;
    align-items: center;
  }

  .layout{
    grid-template-columns: 1fr;
    padding: 10px;
  }
}

@media (max-width: 600px){

  .about-panel{
    grid-template-columns: 1fr;
  }

  .about-panel .panel-media{
    grid-column: 1;
  }

}

@media (max-width: 600px){

  .events-panel .events-layout{
    grid-template-columns: 1fr;
  }

}