:root {
  --forest: #1c3a2e;
  --forest-2: #24503c;
  --ochre: #c9772e;
  --ochre-2: #e0913f;
  --sand: #f4e6cf;
  --sand-2: #efd9b4;
  --clay: #a8442a;
  --leaf: #6fae5b;
  --ink: #2a1c12;
  --cream: #fbf3e4;
  --shadow: rgba(28, 20, 12, 0.25);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--cream);
  background: #0e1c15;
  min-height: 100vh;
  overflow-x: hidden;
  /* Reserve room for the fixed bottom player bar (brand strip + controls). */
  padding-bottom: 140px;
}

/* ---------- Full-screen rotating screensaver backdrop ---------- */
#backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #0e1c15;
}

.scene {
  position: absolute;
  inset: -4%;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  background-size: cover;
  background-position: center;
}

/* Keep the full-screen art static between occasional cross-fades. Continuous
   transforms keep the GPU awake and cost battery even when the radio is idle. */
.scene.active {
  opacity: 1;
}

/* Jharkhand-themed gradient "photos" — swap for real images via BACKDROPS in script.js */
.scene-1 { /* dawn over sal forest */
  background:
    radial-gradient(80% 55% at 50% 12%, #ffd68a 0%, #e08a3f 26%, transparent 60%),
    linear-gradient(180deg, #f3b56b 0%, #6b7c4a 42%, #24402b 72%, #16281c 100%);
}
.scene-2 { /* golden-hour hills */
  background:
    radial-gradient(70% 60% at 78% 30%, #ffcf7a 0%, transparent 55%),
    linear-gradient(180deg, #caa15a 0%, #a8722f 38%, #5c4a2a 70%, #241a10 100%);
}
.scene-3 { /* Sarhul festival dusk */
  background:
    radial-gradient(75% 55% at 30% 22%, #ff9d5c 0%, #c9452a 34%, transparent 62%),
    linear-gradient(180deg, #b8462b 0%, #7a2f28 44%, #38201f 76%, #1c1113 100%);
}
.scene-4 { /* starry tribal night */
  background:
    radial-gradient(60% 40% at 50% 8%, #3a5f77 0%, transparent 55%),
    linear-gradient(180deg, #14304a 0%, #142238 45%, #0e1524 78%, #080b12 100%);
}
.scene-4::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 65% 18%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 42%, #ffe9c2, transparent),
    radial-gradient(1px 1px at 82% 36%, #fff, transparent),
    radial-gradient(1px 1px at 12% 55%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 60%, #fff, transparent);
  opacity: 0.8;
}
.scene-5 { /* monsoon green paddy */
  background:
    radial-gradient(70% 50% at 50% 16%, #cfe7a6 0%, transparent 55%),
    linear-gradient(180deg, #7fae52 0%, #3f7a3c 40%, #244f2c 72%, #142a19 100%);
}

.backdrop-grain {
  position: absolute; inset: 0;
  opacity: 0.06;
  background-image: repeating-conic-gradient(#fff 0 0.0006turn, #000 0 0.0012turn);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.backdrop-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(8,12,10,0.55) 100%),
    linear-gradient(180deg, rgba(8,12,10,0.35), rgba(8,12,10,0.72));
  pointer-events: none;
}

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

#yt-player {
  position: absolute;
  width: 1px;
  height: 1px;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- In-app browser popup ---------- */
.browser-modal[hidden] { display: none !important; }

.browser-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(6, 12, 9, 0.78);
  backdrop-filter: blur(6px);
}

.bm-card {
  width: 100%;
  max-width: 360px;
  text-align: center;
  background: linear-gradient(160deg, #223f31, #16281c);
  border: 1px solid #ffffff24;
  border-radius: 22px;
  padding: 2rem 1.6rem 1.6rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.bm-icon { font-size: 2.6rem; margin-bottom: 0.6rem; }

.bm-title {
  font-family: "Baloo 2", cursive;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--cream);
  margin: 0 0 0.6rem;
}

.bm-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--sand);
  opacity: 0.92;
  margin: 0 0 1.3rem;
}
.bm-text b { color: var(--ochre-2); }

.bm-open {
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: "Baloo 2", cursive;
  font-weight: 700;
  font-size: 1.15rem;
  color: #2a1c12;
  padding: 0.9rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ochre-2), var(--ochre));
  box-shadow: 0 8px 20px #c9772e66, inset 0 1px 0 #ffffff55;
}
.bm-open:active { transform: scale(0.98); }

.bm-hint {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--sand-2);
  opacity: 0.8;
  margin: 1.1rem 0 0.4rem;
}
.bm-hint b { color: var(--cream); }
.bm-hint.pulse {
  animation: hintPulse 1s ease-in-out 3;
  opacity: 1;
}
@keyframes hintPulse {
  0%, 100% { color: var(--sand-2); }
  50% { color: var(--ochre-2); }
}

.bm-stay {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sand-2);
  opacity: 0.55;
  font-size: 0.8rem;
  text-decoration: underline;
  margin-top: 0.4rem;
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(180deg, rgba(8, 16, 12, 0.55), rgba(8, 16, 12, 0));
}

.hdr-left { display: flex; align-items: center; gap: 0.6rem; }

.brand { display: inline-flex; align-items: center; }

.brand-logo {
  width: 34px;
  height: 34px;
  display: block;
  border-radius: 50%;
  box-shadow: 0 2px 10px #0007;
}

/* Glassy floating pill — shared by clock, online badge and nav links */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(20, 30, 24, 0.55);
  border: 1px solid #ffffff1f;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--cream);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s, border-color 0.2s;
}

a.pill:hover {
  background: rgba(34, 50, 40, 0.85);
  border-color: #ffffff36;
  transform: translateY(-1px);
}

.pill .ic { display: inline-flex; flex: none; }

.clock-pill { font-variant-numeric: tabular-nums; letter-spacing: 0.3px; }

/* State picker: a custom searchable dropdown dressed as a header pill. */
.state-picker { position: relative; display: inline-flex; }

.state-selector {
  cursor: pointer;
  border: 1px solid var(--ochre-2, #e0913f);
  background: rgba(20, 30, 24, 0.55);
  padding: 0.5rem 0.7rem 0.5rem 0.72rem;
  max-width: 13rem;
}
.state-selector .sp-pin { color: var(--ochre-2, #e0913f); flex: none; }
.state-selector .sp-kicker {
  flex: none;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ochre-2, #e0913f);
  padding-right: 0.5rem;
  margin-right: 0.15rem;
  border-right: 1px solid #ffffff2e;
}
.state-selector .sp-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.state-selector .sp-caret {
  color: var(--sand-2);
  flex: none;
  transition: transform 0.2s ease;
}
.state-selector[aria-expanded="true"] {
  background: rgba(34, 50, 40, 0.9);
  box-shadow: 0 0 0 2px rgba(224, 145, 63, 0.35), 0 4px 16px rgba(0, 0, 0, 0.25);
}
.state-selector[aria-expanded="true"] .sp-caret { transform: rotate(180deg); }
.state-selector:hover {
  background: rgba(34, 50, 40, 0.85);
  border-color: var(--ochre-1, #f0a95a);
  transform: translateY(-1px);
}
.state-selector:focus-visible { outline: 2px solid var(--ochre-2); outline-offset: 1px; }
.state-selector:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Floating panel */
.state-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: 15rem;
  max-width: min(15rem, calc(100vw - 2rem));
  padding: 0.55rem;
  border-radius: 16px;
  background: rgba(18, 28, 22, 0.92);
  border: 1px solid #ffffff26;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  animation: sp-pop 0.16s ease-out;
  transform-origin: top left;
}
@keyframes sp-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sp-heading {
  margin: 0.15rem 0.15rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sand-2);
}

.sp-search-wrap { position: relative; margin-bottom: 0.5rem; }
.sp-search-ic {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sand-2);
  pointer-events: none;
}
.sp-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.7rem 0.5rem 2.1rem;
  border-radius: 999px;
  border: 1px solid #ffffff24;
  background: rgba(0, 0, 0, 0.28);
  color: var(--cream);
  font-family: inherit;
  font-size: 0.86rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sp-search::placeholder { color: #ffffff66; }
.sp-search:focus {
  border-color: var(--ochre-2);
  box-shadow: 0 0 0 2px rgba(224, 145, 63, 0.25);
}

.sp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #ffffff40 transparent;
}
.sp-list::-webkit-scrollbar { width: 8px; }
.sp-list::-webkit-scrollbar-thumb { background: #ffffff33; border-radius: 8px; }

.sp-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  color: var(--cream);
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.12s;
}
.sp-opt:hover,
.sp-opt.is-active { background: rgba(255, 255, 255, 0.08); }
.sp-opt.is-selected { color: var(--ochre-1, #f0a95a); font-weight: 600; }
.sp-opt .sp-opt-label { flex: 1 1 auto; }
.sp-opt .sp-check { flex: none; opacity: 0; color: var(--ochre-1, #f0a95a); }
.sp-opt.is-selected .sp-check { opacity: 1; }

.sp-empty {
  margin: 0;
  padding: 0.7rem 0.6rem;
  text-align: center;
  color: #ffffff88;
  font-size: 0.85rem;
}

.online-pill { color: var(--sand-2); font-weight: 500; }
.online-pill b { color: var(--cream); font-weight: 700; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 0 3px #6fae5b33;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 2.5rem 1.5rem;
  overflow: hidden;
  min-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-art { display: none; }

.hero-art .sun {
  position: absolute;
  top: 6%; left: 50%;
  transform: translateX(-50%);
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd88a 0%, #e0913f 45%, transparent 72%);
  filter: blur(2px);
  opacity: 0.55;
}

.hero-art .hills {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 46%;
  background:
    radial-gradient(60% 120% at 20% 100%, #2c5a44 0%, transparent 60%),
    radial-gradient(60% 120% at 80% 100%, #24503c 0%, transparent 60%);
  opacity: 0.7;
}

.hero-art .trees {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 90px;
  background-image:
    radial-gradient(circle at 10% 100%, #14261d 0 14px, transparent 15px),
    radial-gradient(circle at 25% 100%, #16302655 0 22px, transparent 23px),
    radial-gradient(circle at 45% 100%, #14261d 0 18px, transparent 19px),
    radial-gradient(circle at 70% 100%, #16302655 0 24px, transparent 25px),
    radial-gradient(circle at 88% 100%, #14261d 0 16px, transparent 17px);
  opacity: 0.8;
}

.sohrai-band {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 26px;
  background:
    repeating-linear-gradient(90deg, var(--clay) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(90deg, transparent 0 7px, var(--ochre) 7px 21px, transparent 21px 28px);
  opacity: 0.5;
}

/* 3D particle galaxy behind the hero (canvas; brief play-start motion, then static) */
.galaxy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* Branding block — top of the About section */
.about-brand {
  max-width: 720px;
  margin: 0 auto 1.6rem;
  text-align: center;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.72rem;
  color: var(--ochre-2);
  font-weight: 600;
  margin: 0 0 0.4rem;
}

.brand-title {
  font-family: "Baloo 2", cursive;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.12;
  margin: 0 0 0.6rem;
  color: var(--cream);
}

.brand-title .hl { color: var(--ochre-2); }

.tagline {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--sand);
  max-width: 620px;
  margin: 0 auto;
  opacity: 0.9;
}

/* ---------- Player (fixed bottom bar) ---------- */
.player-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: rgba(14, 24, 18, 0.82);
  border-top: 1px solid #ffffff24;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.4);
  padding: 0.55rem 1.1rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
}

.player {
  max-width: 1040px;
  margin: 0 auto;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.player-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

/* Logo disc doubling as album art */
.player-art {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, #ffffff2b, #ffffff0d);
  border: 1px solid #ffffff30;
  box-shadow: inset 0 1px 0 #ffffff33, 0 6px 16px #0004;
  overflow: hidden;
}
.player-art img { width: 34px; height: 34px; object-fit: contain; transform: none; }

.now-playing { flex: 1 1 12rem; min-width: 0; }

.np-title {
  font-family: "Baloo 2", cursive;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.np-sub {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
  min-height: 1.1em;
  flex-wrap: wrap;
}

.np-label {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.62rem;
  color: var(--ochre-2);
  font-weight: 600;
}

.progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.progress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #ffffff1f;
  overflow: hidden;
  cursor: pointer;
}

.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ochre-2), var(--leaf));
}

.p-time {
  flex: 0 0 auto;
  min-width: 2.6em;
  text-align: center;
  font-size: 0.72rem;
  color: var(--sand-2);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

.np-controls {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 0 0 auto;
}

.ctrl {
  background: #ffffff12;
  border: 1px solid #ffffff26;
  color: var(--cream);
  width: 46px; height: 46px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
  transition: background 0.2s, transform 0.1s;
}

.ctrl:hover { background: #ffffff26; }
.ctrl:active { transform: scale(0.94); }

/* Central play/pause — the big amber disc */
.play-btn {
  flex: 0 0 auto;
  width: 62px; height: 62px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #2a1c12;
  background: linear-gradient(135deg, var(--ochre-2), var(--ochre));
  box-shadow: 0 8px 20px #c9772e66, inset 0 1px 0 #ffffff55;
  transition: transform 0.15s, box-shadow 0.2s;
}

.play-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px #c9772e88; }
.play-btn:active { transform: translateY(0); }
.play-btn .play-icon { font-size: 1.25rem; line-height: 1; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.volume-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  opacity: 0.85;
}
.volume-wrap .vol-ico { font-size: 0.9rem; }

#volume {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 5px;
  border-radius: 999px;
  background: #ffffff2e;
  outline: none;
}

#volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ochre-2);
  cursor: pointer;
  box-shadow: 0 1px 4px #0006;
}

#volume::-moz-range-thumb {
  width: 16px; height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--ochre-2);
  cursor: pointer;
}

/* ---------- Chatter ---------- */
.chatter { margin-top: 2rem; padding: 0; display: flex; justify-content: center; }

.chatter-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 480px;
  width: 100%;
  background: linear-gradient(135deg, #ffffff12, #ffffff08);
  border: 1px solid #ffffff1f;
  border-left: 4px solid var(--ochre);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  transition: opacity 0.4s;
}

.chatter-avatar { font-size: 2rem; }
.chatter-who { font-weight: 600; color: var(--ochre-2); font-size: 0.85rem; }
.chatter-line { font-size: 1.02rem; color: var(--sand); font-style: italic; }

/* ---------- Info sections ---------- */
.info {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem;
}

.info-kicker {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ochre-2);
  margin-bottom: 0.6rem;
}
.info-kicker.center { display: block; text-align: center; }

.info h1,
.info h2 {
  font-family: "Baloo 2", cursive;
  color: var(--cream);
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.info p { line-height: 1.75; color: var(--sand); opacity: 0.92; margin: 0; }

.info-back { margin-top: 1.6rem !important; text-align: center; }
.info-back a { color: var(--ochre-2); text-decoration: none; font-weight: 600; }
.info-back a:hover { text-decoration: underline; }

.pill.pill-active { border-color: var(--ochre-2); color: var(--ochre-2); }

/* About — glassy card */
.info-card {
  background: linear-gradient(135deg, #ffffff12, #ffffff07);
  border: 1px solid #ffffff1f;
  border-radius: 20px;
  padding: 1.8rem 1.8rem;
  box-shadow: 0 18px 44px var(--shadow);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.info-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--ochre-2), var(--leaf));
}

/* FAQ — grid of cards */
.faq-heading { text-align: center; }

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 0.4rem;
}

.faq-item {
  background: #ffffff0d;
  border: 1px solid #ffffff17;
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  transition: transform 0.18s, border-color 0.2s, background 0.2s;
}
.faq-item:hover {
  transform: translateY(-3px);
  border-color: #e0913f66;
  background: #ffffff14;
}

.faq-q {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--cream);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.q-mark {
  flex: none;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ochre-2), var(--ochre));
  color: #2a1c12;
  font-weight: 800;
  font-size: 0.8rem;
}

.faq-item p { font-size: 0.92rem; opacity: 0.85; }

@media (max-width: 620px) {
  .faq-grid { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer {
  text-align: center;
  padding: 2rem 1.5rem 3rem;
  color: var(--sand-2);
  opacity: 0.6;
  font-size: 0.85rem;
  border-top: 1px solid #ffffff12;
  margin-top: 1rem;
}

.site-footer .contact { margin-top: 0.5rem; font-size: 0.82rem; }
.site-footer .contact a { color: var(--ochre-2); text-decoration: none; }
.site-footer .contact a:hover { text-decoration: underline; }

.site-footer .credit { margin-top: 0.4rem; font-size: 0.78rem; }
.site-footer .credit a { color: var(--ochre-2); text-decoration: none; }
.site-footer .credit a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .site-header { justify-content: center; }
  .hdr-left { justify-content: center; }
  .nav-links { margin-left: 0; justify-content: center; }
  .pill { font-size: 0.82rem; padding: 0.42rem 0.75rem; }
}

/* Bottom player bar: keep it compact on phones. */
@media (max-width: 640px) {
  body { padding-bottom: 120px; }
  .player-bar { padding: 0.45rem 0.7rem calc(0.45rem + env(safe-area-inset-bottom, 0px)); }
  .brand-title { font-size: 1.5rem; }
  .player-row { gap: 0.6rem; }
  /* Keep the galaxy subtle on phones. */
  .galaxy { opacity: 0.7; }
  .player-art { width: 46px; height: 46px; }
  .player-art img { width: 30px; height: 30px; }
  .np-title { font-size: 1rem; }
  .np-controls { gap: 0.45rem; }
  .ctrl { width: 40px; height: 40px; }
  .play-btn { width: 54px; height: 54px; }
  /* The volume slider drops out on small screens (device volume covers it). */
  .volume-wrap { display: none; }
}

/* ---------- Collaborative Rooms ---------- */
.pill-rooms {
  background: linear-gradient(135deg, #2a4a38, #1c3a2e);
  border-color: #6fae5b55;
}
a.pill-rooms:hover { background: linear-gradient(135deg, #35604a, #24503c); }

.rooms { max-width: 760px; margin: 0 auto; padding: 1.6rem 1.5rem 2.4rem; }

.rooms-inner {
  position: relative;
  background: linear-gradient(135deg, #ffffff12, #ffffff07);
  border: 1px solid #ffffff1f;
  border-radius: 20px;
  padding: 1.8rem 1.6rem;
  box-shadow: 0 18px 44px var(--shadow);
  backdrop-filter: blur(8px);
}

.rooms-close {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid #ffffff26;
  background: #ffffff12;
  color: var(--cream);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s;
}
.rooms-close:hover { background: #ffffff26; }

.rooms-heading { text-align: center; font-family: "Baloo 2", cursive; color: var(--cream); margin: 0.2rem 0 0.3rem; }
.rooms-tag { text-align: center; color: var(--sand); opacity: 0.85; font-size: 0.95rem; margin: 0 0 1.4rem; }
.rooms-sub { text-align: center; color: var(--sand); opacity: 0.9; margin: 0.4rem 0 1.2rem; }

.rooms-view { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.gis-btn { display: flex; justify-content: center; margin: 0.6rem 0; }

.rooms-note { text-align: center; font-size: 0.86rem; color: var(--ochre-2); min-height: 1.2em; margin: 0.6rem 0 0; }

/* Lobby */
.room-user { text-align: center; color: var(--sand-2); font-size: 0.88rem; margin-bottom: 1rem; }

/* Your rooms — quick re-entry so a forgotten code is never a dead end */
.my-rooms { margin-bottom: 1.4rem; }
.my-rooms-title {
  margin: 0 0 0.6rem;
  font-family: "Baloo 2", cursive;
  color: var(--ochre-2);
  font-size: 1.05rem;
}
.my-rooms-list { display: flex; flex-direction: column; gap: 0.5rem; }

.my-room {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: #ffffff0d;
  border: 1px solid #ffffff17;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  color: var(--cream);
  transition: transform 0.15s, border-color 0.2s, background 0.2s;
}
.my-room:hover {
  transform: translateY(-1px);
  border-color: #e0913f66;
  background: #ffffff14;
}
.my-room-info { min-width: 0; }
.my-room-name {
  font-weight: 600;
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-room-meta { color: var(--sand-2); font-size: 0.76rem; margin-top: 0.15rem; }
.my-room-code {
  flex: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  font-size: 0.8rem;
  color: var(--ochre-2);
  background: #e0913f1a;
  border: 1px solid #e0913f33;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
}

.lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.lobby-card {
  background: #ffffff0d;
  border: 1px solid #ffffff17;
  border-radius: 16px;
  padding: 1.2rem;
}
.lobby-card h3 { margin: 0 0 0.8rem; font-family: "Baloo 2", cursive; color: var(--ochre-2); font-size: 1.1rem; }

.lobby-card label,
.limit-row label {
  display: block;
  font-size: 0.78rem;
  color: var(--sand-2);
  margin-bottom: 0.7rem;
}

.limit-row { display: flex; gap: 0.7rem; }
.limit-row label { flex: 1; }

.rooms input[type="text"],
.rooms input[type="number"],
.rooms select {
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  border: 1px solid #ffffff26;
  background: #ffffff12;
  color: var(--cream);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
}
.rooms input:focus, .rooms select:focus { border-color: var(--ochre-2); }
.rooms select option { color: #1c1c1c; }

.rooms-btn {
  border: none;
  cursor: pointer;
  font-family: "Baloo 2", cursive;
  font-weight: 700;
  font-size: 1rem;
  color: #2a1c12;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ochre-2), var(--ochre));
  box-shadow: 0 6px 16px #c9772e55;
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}
.rooms-btn:hover { transform: translateY(-1px); }
.rooms-btn:active { transform: translateY(0); }
.rooms-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.rooms-btn.small {
  font-size: 0.85rem;
  padding: 0.5rem 0.9rem;
  min-height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rooms-btn.ghost {
  background: #ffffff12;
  color: var(--cream);
  border: 1px solid #ffffff26;
  box-shadow: none;
}
.rooms-btn.ghost:hover { background: #ffffff20; }

.rooms-link {
  display: block;
  margin: 1.2rem auto 0;
  background: none;
  border: none;
  color: var(--sand-2);
  opacity: 0.7;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
}
.rooms-link:hover { opacity: 1; }

/* Room view */
.room-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.room-name { font-family: "Baloo 2", cursive; font-size: 1.3rem; color: var(--cream); }
.room-code-line { font-size: 0.85rem; color: var(--sand-2); margin-top: 0.4rem; display: flex; align-items: center; gap: 0.4rem; }
.room-code-line b {
  color: var(--ochre-2);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  background: #e0913f1a;
  border: 1px solid #e0913f33;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
}
.room-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.room-head-actions .rooms-btn.small { flex: 1 1 auto; min-width: 8.5rem; }

.quota-indicator {
  display: block;
  width: fit-content;
  margin: 0 auto 1rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--leaf);
  background: #6fae5b14;
  border: 1px solid #6fae5b2b;
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
}
.quota-indicator:empty { display: none; }
.quota-indicator.maxed { color: var(--ochre-2); background: #e0913f14; border-color: #e0913f3d; }

.room-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: flex-end;
  background: #ffffff08;
  border: 1px solid #ffffff1a;
  border-radius: 14px;
  padding: 0.8rem;
  margin-bottom: 1rem;
}
.room-edit-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--sand-2); }
.room-edit-field span { font-weight: 600; }
.room-edit-field input,
.room-edit-field select { min-width: 0; margin-top: 0; }
.room-edit-field:first-child { flex: 1 1 12rem; }
.room-edit-actions { display: flex; gap: 0.5rem; align-items: flex-end; }
.room-edit .rooms-note { flex-basis: 100%; margin: 0; min-height: 0; text-align: left; }
.room-edit .rooms-note:empty { display: none; }

.add-song { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.add-song #admin-url { flex: 1 1 100%; }
.admin-select,
.admin-year {
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
}
.admin-year { width: 6.5rem; }
.admin-select { flex: 1; min-width: 10rem; }
.admin-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  opacity: 0.85;
}
.admin-filter .admin-select { flex: 0 1 14rem; }

/* ---- Admin panel revamp ---- */
.admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1.1rem;
}
.admin-user { margin: 0; color: var(--sand-2); font-size: 0.88rem; text-align: left; }
.admin-add-card {
  background: #ffffff08;
  border: 1px solid #ffffff17;
  border-radius: 16px;
  padding: 1.1rem 1.1rem 0.9rem;
}
.admin-sub {
  margin: 0 0 0.9rem;
  font-family: "Baloo 2", cursive;
  font-size: 1.05rem;
  color: var(--cream);
}
.admin-field { display: flex; flex-direction: column; gap: 0.35rem; }
.admin-field > span { font-size: 0.75rem; color: var(--sand-2); opacity: 0.85; }
.admin-field-full { margin-bottom: 0.8rem; }
.admin-field-full input { width: 100%; }
.admin-field input[type="text"],
.admin-field input[type="number"] {
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
}
.admin-add-row { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; }
.admin-field-grow { flex: 1 1 12rem; }
.admin-field-grow .admin-select { width: 100%; min-width: 0; }
.admin-add-row .admin-year { width: 6rem; }
.admin-add-btn { align-self: flex-end; padding: 0.6rem 1.3rem; }
.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1.4rem;
  flex-wrap: wrap;
}
.admin-toolbar .admin-filter { margin-top: 0; }
.admin-count { font-size: 0.82rem; color: var(--sand-2); opacity: 0.8; white-space: nowrap; }
.admin-thumb {
  flex: none;
  width: 54px; height: 32px;
  border-radius: 6px;
  object-fit: cover;
  background: #ffffff10;
}
.admin-num {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid #ffffff14;
  background: #ffffff14;
  color: var(--sand-2);
  font-size: 0.78rem;
  font-weight: 700;
}
.admin-row-sub { margin-top: 0.25rem; }
.admin-year-badge {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: #e0913f22;
  border: 1px solid #e0913f55;
  color: var(--ochre-2);
  font-size: 0.72rem;
  font-weight: 600;
}

#add-note { min-height: 0; margin: 0.5rem 0 0; }
#add-note:not(:empty) { animation: fadeIn 0.3s ease; }
#add-note:empty { display: none; }

.queue { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }

.queue-empty {
  text-align: center;
  color: var(--sand-2);
  opacity: 0.7;
  font-size: 0.9rem;
  padding: 1.2rem;
}

.queue-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: #ffffff0d;
  border: 1px solid #ffffff17;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  transition: background 0.2s, border-color 0.2s;
}
/* Number badge that turns into a ▶ play button on hover / when playing. */
.q-play {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid #ffffff14;
  background: #ffffff14;
  color: var(--sand-2);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.q-play::before { content: attr(data-num); }
.q-play:hover { background: var(--ochre); color: #1c150e; border-color: transparent; }
.q-play:hover::before { content: "▶"; }

.queue-row.q-playing { background: #e0913f18; border-color: #e0913f55; }
.queue-row.q-playing .q-title { color: var(--ochre-2); }
.queue-row.q-playing .q-play { background: var(--ochre); color: #1c150e; border-color: transparent; }
.queue-row.q-playing .q-play::before { content: "▶"; }

.q-meta { flex: 1; min-width: 0; }
.q-title {
  color: var(--cream);
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.q-by {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ochre-2);
  font-size: 0.78rem;
  margin-top: 0.2rem;
}

/* Round profile avatar (Google photo or colored initial fallback). */
.avatar {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, #e0913f, #c56a2e);
  color: #1c150e;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-fallback { text-transform: uppercase; }

/* Now Playing: "added by <name>" line under the title. */
.np-added-by {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ochre-2);
  font-size: 0.78rem;
  font-weight: 500;
}
.np-added-by .avatar { width: 20px; height: 20px; font-size: 0.68rem; }
.q-remove {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid #ffffff20;
  background: #ffffff10;
  color: var(--sand-2);
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.2s, color 0.2s;
}
.q-remove:hover { background: #a8442a55; color: var(--cream); border-color: #a8442a; }

/* Admin playlist manager: static number badge on each row. */
.admin-num {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid #ffffff14;
  background: #ffffff14;
  color: var(--sand-2);
  font-size: 0.78rem;
  font-weight: 700;
}

/* Create-room "make public" toggle */
.create-public {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  margin: 0.2rem 0 0.9rem !important;
  cursor: pointer;
}
.create-public input { width: auto; margin: 0; flex: none; accent-color: var(--ochre-2); }
.create-public span { font-size: 0.8rem; color: var(--sand-2); }

/* Public-rooms browser */
.browse-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.browse-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: #ffffff0d;
  border: 1px solid #ffffff17;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
}
.browse-info { min-width: 0; }
.browse-name {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browse-meta { color: var(--sand-2); font-size: 0.76rem; margin-top: 0.15rem; }
.browse-by {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--sand-2);
  font-size: 0.76rem;
  margin-top: 0.3rem;
}
.browse-card .rooms-btn.small { flex: none; }

.browse-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.browse-page-info { color: var(--sand-2); font-size: 0.82rem; }

/* Creator's pending join-requests panel */
.room-requests {
  background: #e0913f12;
  border: 1px solid #e0913f33;
  border-radius: 14px;
  padding: 0.8rem 0.9rem;
  margin-bottom: 1rem;
}
.room-requests-title {
  font-family: "Baloo 2", cursive;
  color: var(--ochre-2);
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}
.room-requests-list { display: flex; flex-direction: column; gap: 0.5rem; }
.request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.request-who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--cream);
  font-size: 0.9rem;
}
.request-who span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.request-actions { display: flex; gap: 0.4rem; flex: none; }

/* Themed confirm dialog */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: #0a0705cc;
  backdrop-filter: blur(3px);
  animation: fadeIn 0.2s ease;
}
/* `display:flex` above beats the default [hidden] rule, so reset it explicitly
   or the (empty) dialog stays visible. */
.modal-overlay[hidden] { display: none !important; }
.modal-card {
  width: min(420px, 100%);
  background: linear-gradient(180deg, #241a12, #1a130d);
  border: 1px solid #ffffff1f;
  border-radius: 18px;
  padding: 1.4rem;
  box-shadow: 0 20px 60px #0000007a;
}
.modal-text {
  margin: 0 0 1.3rem;
  color: var(--cream);
  font-size: 1rem;
  line-height: 1.5;
}
.modal-text b { color: var(--ochre-2); font-weight: 600; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
.modal-actions .rooms-btn { padding: 0.55rem 1.2rem; font-size: 0.95rem; }
.rooms-btn.danger {
  background: linear-gradient(135deg, #c9552e, #a8442a);
  box-shadow: 0 6px 16px #a8442a55;
  color: #fff;
}

@media (max-width: 560px) {
  .lobby-grid { grid-template-columns: 1fr; }
  .room-head { flex-direction: column; }
}

/* =====================================================================
   Blog — public list, single post, and the admin editor
   ===================================================================== */

/* Wider container for the editor page. */
.info-wide { max-width: 900px; }

/* ---------- Public list (blog.html) ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  margin-top: 1.2rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: #ffffff0d;
  border: 1px solid #ffffff17;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s, border-color 0.2s, background 0.2s;
}
.blog-card:hover {
  transform: translateY(-3px);
  border-color: #e0913f66;
  background: #ffffff14;
}
.blog-card-cover {
  aspect-ratio: 16 / 9;
  background: #00000030;
  overflow: hidden;
}
.blog-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.blog-card-title {
  font-family: "Baloo 2", cursive;
  color: var(--cream);
  font-size: 1.1rem;
  line-height: 1.25;
  margin: 0;
}
.blog-card-excerpt { font-size: 0.9rem; color: var(--sand); opacity: 0.85; line-height: 1.5; margin: 0; }
.blog-card-date { font-size: 0.74rem; color: var(--ochre-2); text-transform: uppercase; letter-spacing: 1px; margin-top: 0.2rem; }

@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ---------- Single post (post.html) — full-bleed article ---------- */
.blog-article { width: 100%; }
.blog-loading { text-align: center; color: var(--sand); opacity: 0.7; padding: 4rem 1.5rem; }

/* Full-width hero: cover image behind the title, gradient into the page bg. */
.blog-hero {
  position: relative;
  width: 100%;
  min-height: 56vh;
  display: flex;
  align-items: flex-end;
  padding: 3rem 1.5rem 2.4rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.blog-hero-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11,31,20,0.35) 0%, rgba(11,31,20,0.55) 45%, rgba(11,31,20,0.96) 100%);
}
.blog-hero.no-cover {
  min-height: 0;
  padding: 2.6rem 1.5rem 0.6rem;
}
.blog-hero.no-cover::after { display: none; }
.blog-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.blog-post-title {
  font-family: "Baloo 2", cursive;
  color: var(--cream);
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.12;
  margin: 0.6rem 0 0.5rem;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.blog-post-meta {
  font-size: 0.86rem;
  color: var(--ochre-2);
  margin: 0 !important;
  font-weight: 500;
}

/* Reading column below the hero. */
.blog-body {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.4rem 1.5rem 3.5rem;
}
.blog-body .info-back { text-align: left; margin-top: 2.4rem !important; }

/* Rendered admin HTML. Kept scoped so it can't leak into site chrome. */
.blog-content { color: var(--sand); line-height: 1.85; font-size: 1.08rem; }
.blog-content > *:first-child { margin-top: 0; }
/* Guard: never let pasted inline highlights show on the public page. */
.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4,
.blog-content p, .blog-content span, .blog-content strong,
.blog-content em, .blog-content a, .blog-content li {
  background-color: transparent !important;
}
.blog-content h2, .blog-content h3 {
  font-family: "Baloo 2", cursive;
  color: var(--cream);
  line-height: 1.25;
  margin: 2rem 0 0.7rem;
}
.blog-content h2 { font-size: 1.5rem; }
.blog-content h3 { font-size: 1.2rem; }
.blog-content p { margin: 0 0 1rem; }
.blog-content a { color: var(--ochre-2); }
.blog-content ul, .blog-content ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.blog-content li { margin: 0.3rem 0; }
.blog-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 0.6rem 0; }
.blog-content blockquote {
  margin: 1.2rem 0;
  padding: 0.6rem 1.1rem;
  border-left: 4px solid var(--ochre-2);
  background: #ffffff0d;
  border-radius: 0 10px 10px 0;
  color: var(--cream);
  font-style: italic;
}
.blog-content pre {
  background: #00000045;
  border: 1px solid #ffffff17;
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  overflow-x: auto;
  font-size: 0.9rem;
}
.blog-content code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; }
/* Quill alignment/indent classes, so alignment renders on public pages. */
.blog-content .ql-align-center { text-align: center; }
.blog-content .ql-align-right { text-align: right; }
.blog-content .ql-align-justify { text-align: justify; }
.blog-content .ql-indent-1 { padding-left: 3em; }
.blog-content .ql-indent-2 { padding-left: 6em; }
.blog-content .ql-indent-3 { padding-left: 9em; }

/* ---------- Status badge ---------- */
.blog-status {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}
.blog-status.published { background: #6fae5b33; color: #a6d896; border: 1px solid #6fae5b66; }
.blog-status.draft { background: #e0913f22; color: var(--ochre-2); border: 1px solid #e0913f55; }

/* ---------- Admin editor (admin-blog.html) ---------- */
.admin-hint { font-style: normal; opacity: 0.7; font-weight: 400; }
.editor-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.rooms-btn.primary {
  background: linear-gradient(135deg, var(--ochre-2), var(--ochre));
  color: #1c150e;
  border-color: transparent;
}
.cover-picker { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.cover-preview { max-height: 90px; border-radius: 10px; border: 1px solid #ffffff1f; }

/* Quill: light editing surface on the dark card for legibility. */
#editor { background: #fff; border-radius: 0 0 10px 10px; }
.ql-toolbar.ql-snow { background: var(--sand); border-radius: 10px 10px 0 0; border-color: #0002; }
.ql-container.ql-snow { border-color: #0002; font-family: "Poppins", sans-serif; font-size: 1rem; }
.ql-editor { min-height: 300px; color: #261c12; }
.ql-editor.ql-blank::before { color: #00000099; font-style: normal; }
/* Keep the editor readable even if legacy content carried pasted
   color/highlight inline styles (normalized away on next save). */
.ql-editor p, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4,
.ql-editor li, .ql-editor span, .ql-editor strong, .ql-editor em {
  background-color: transparent !important;
  color: #261c12 !important;
}

/* Blog post rows in the admin list: title grows, buttons sit at the end. */
#blog-posts .admin-row .rooms-btn.small { flex: none; }