:root{
  --amarelo-bg: #fff7d6;
  --amarelo-bg-2: #ffefb0;
  --amarelo-ink: #2b2400;
  --amarelo-accent: #b58900;
  --amarelo-border: #e5c34d;
}

.amarelo-body{
  background: linear-gradient(180deg, var(--amarelo-bg) 0%, #ffffff 55%);
  color: var(--amarelo-ink);
}

.amarelo-navbar{
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
}

.amarelo-brand{
  letter-spacing: .2px;
}

.amarelo-kicker{
  display: inline-block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--amarelo-accent);
  font-weight: 700;
}

.amarelo-title{
  color: var(--amarelo-ink);
}

.amarelo-lead{
  color: #4b3c00;
  max-width: 72ch;
}

.amarelo-card{
  border: 1px solid var(--amarelo-border);
  box-shadow: 0 8px 18px rgba(0,0,0,0.05);
}

.nav-link.active{
  font-weight: 700;
}

/* Plotly chart slots */
.chart-slot{
  height: 340px;
  min-height: 340px;
  padding: .5rem .75rem;
}

/* Make Plotly fill the slot instead of collapsing */
.chart-slot .plotly-chart,
.chart-slot .js-plotly-plot,
.chart-slot .plot-container{
  width: 100% !important;
  height: 100% !important;
}