:root {
	--bg: #0b0d10;
	--card:#111418;
	--ink:#e7edf4;
	--muted:#a5b0bd;
	--line:#20242b;
	--accent:#3a86ff;
	--chip:#1a1f27;
	--chip-border:#2a3240;
	--link:#7bb1ff;
}
html[data-theme="light"] {
	--bg: #ffffff; 
	--card:#f8fafc;
	--ink:#111827; 
	--muted:#475569; 
	--line:#e5e7eb; 
	--accent:#155eef;
	--chip:#f1f5f9; 
	--chip-border:#e2e8f0; 
	--link:#155eef;
}
*{box-sizing:border-box}
body { 
	max-width:1500px;
	margin:0; 
	font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
	background:var(--bg); 
	color:var(--ink);
}
a { color: var(--link); text-decoration: none }
a:hover { text-decoration: underline }
.container{ max-width:1100px; margin:0 auto; padding: 20px }
header.hero{ display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:center; padding:24px 0; border-bottom:1px solid var(--line)}
@media (max-width: 900px){ header.hero{ grid-template-columns: 1fr } }
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ background:var(--chip); border:1px solid var(--chip-border); padding:.25rem .6rem; border-radius:999px; font-size:.85rem }
.grid{ display:grid; gap:16px }
.grid.cols-2{ grid-template-columns:1fr 1fr }
@media (max-width: 800px){ .grid.cols-2{ grid-template-columns:1fr } }
.muted{ color:var(--muted) }
.row{ display:flex; flex-wrap:wrap; gap:12px }
.btn{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line); background:transparent; color:var(--ink);
	  padding:.55rem .9rem; border-radius:10px; cursor:pointer; text-decoration:none }
.btn.primary{ background:var(--accent); color:white; border-color:transparent }
.btn:hover{ opacity:.9; text-decoration:none }
.list{ padding-left:1.1rem; margin: .25rem 0 0 }
.list li{ margin:.35rem 0 }
.brand-cloud img{ height:28px; opacity:.9; filter: grayscale(40%); }
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.theme-toggle{ border:1px solid var(--line); border-radius:999px; background:var(--card); padding:4px; display:flex; gap:4px }
.theme-toggle button{ border:0; background:transparent; color:var(--ink); padding:.4rem .7rem; border-radius:999px; cursor:pointer }
.theme-toggle button.active{ background:var(--bg); border:1px solid var(--line) }
.logo-link{ display:inline-flex; align-items:center; gap:10px }
.logo-link img{ height:28px }
.photo{
  aspect-ratio: 4/5; width:100%; border-radius:14px; border:1px solid var(--line); object-fit:cover; background:#0b0d10;
}
footer{ border-top:1px solid var(--line); margin-top:32px; padding:16px 0 }
details summary{ cursor:pointer }

 .acronym {
  position: absolute;
  bottom: 0;
  font-weight: bold;
  white-space: nowrap;
  animation-timing-function: linear;
  z-index: -10;
}

@keyframes float {
  from {
    transform: translate(0, 0);
    opacity: .10;
  }
  to {
    transform: var(--translate);
    opacity: 0;
  }
}

.rss-content {
  display: none;
}
.rss-content.active {
  display: block;
}
.nav-btn {
  font-size:12px;
  margin-right: 4px;
  padding: 3px 6px;
  cursor: pointer;
}


/* Carousel                          */
.carousel { margin-bottom: 20px; }             /* make room under it */
/* 2) Push indicators below the image panel */
.carousel .carousel-indicators{
  bottom: -28px !important;   /* move them outside the panel */
}
/* Brighter, always-visible dashes */
.carousel .carousel-indicators [data-bs-target]{
  width: 26px; height: 6px; border-radius: 999px;
  background-color: rgba(255,255,255,.35);  /* brighter for inactive */
  border: 1px solid rgba(000,000,000,.9);   /* outline = visibility */
  opacity: 1;                               /* Bootstrap sets .5 */
}
.carousel .carousel-indicators .active{
  background-color: #000;
  border-color: #000;
}

.carousel { background:#000; max-width: 100%;}
.carousel .slide-bg{
/*  height: 50vh; */              /* tweak height */
  min-height: 230px;          /* floor for laptops */
  background-size: cover;
  background-position: 50% 38%;   /* lift focal point if faces are low */
  filter: brightness(1.06) contrast(1.02) saturate(1.05);
}
.carousel-caption{
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
  bottom: -10px !important;  
}
@media (prefers-reduced-motion: reduce){
  .carousel { animation: none; }
}

.table.table-striped.table-striped-rss {
  --bs-table-striped-bg: #f0f0f0;
  --bs-table-striped-color: inherit;
}

