.spqr {
  --obsidian:   var(--bg);
  --stone:      var(--bg-surface);
  --stone-mid:  var(--bg-elevated);
  --stone-light:var(--bg-elevated);
  --border:     rgba(255,255,255,0.08);
  --gold:       #C9A84C;
  --gold-light: #E8C766;
  --gold-dim:   #8a7430;
  --crimson:    #7a1515;
  --crimson-b:  #a01e1e;
  --ivory:      var(--text);
  --ivory-dim:  var(--text-muted);
  --text-body:  var(--text-muted);
  --green-ok:   #00F5A0;
  --amber-warn: #FFB800;
}
.spqr *{margin:0;padding:0;box-sizing:border-box;}
.spqr {
  font-family:var(--font-body);
  color:var(--text-body);
  position:relative;
}

/* STONE TEXTURE OVERLAY ─────────────────────────────── */


/* HEADER */
.spqr .header {
  position:relative;
  text-align:center;
  padding:60px 40px 50px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(201,162,39,0.04) 0%, transparent 100%);
  overflow:hidden;
}
.spqr .header::before {
  content:'';
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    0deg, transparent, transparent 59px,
    rgba(201,162,39,0.04) 60px
  );
  pointer-events:none;
}

/* SPQR EMBLEM */
.spqr .spqr-wrap {
  position:relative;
  display:inline-block;
  margin-bottom:32px;
  filter:drop-shadow(0 0 25px rgba(201,162,39,0.5)) drop-shadow(0 0 50px rgba(201,162,39,0.2));
  animation:emblemRise 1.4s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes emblemRise {
  from{opacity:0;transform:scale(0.7) translateY(20px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}
.spqr .spqr-wrap:hover {
  filter:drop-shadow(0 0 30px rgba(240,200,74,0.7)) drop-shadow(0 0 60px rgba(201,162,39,0.4));
  transition:filter 0.5s ease;
}

/* TITLES */
.spqr .header-title {
  font-family:var(--font-display);
  font-size:clamp(1.6rem,4vw,3.2rem);
  font-weight:700;
  color:var(--ivory);
  letter-spacing:0.08em;
  line-height:1.15;
  animation:fadeUp 1s 0.4s both;
}
.spqr .header-sub {
  font-family:var(--font-display);
  font-size:clamp(0.75rem,1.5vw,0.95rem);
  letter-spacing:0.25em;
  color:var(--gold);
  margin-top:10px;
  text-transform:uppercase;
  animation:fadeUp 1s 0.6s both;
}
.spqr .header-tagline {
  font-family:var(--font-body);
  
  font-size:1.05rem;
  color:var(--ivory-dim);
  margin-top:18px;
  max-width:640px;
  margin-left:auto;margin-right:auto;
  line-height:1.6;
  animation:fadeUp 1s 0.8s both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* DECORATIVE RULE */
.spqr .rule {
  display:flex;align-items:center;justify-content:center;
  gap:14px;margin:24px auto;max-width:500px;
}
.spqr .rule-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);}
.spqr .rule-diamond{
  width:7px;height:7px;background:var(--gold);
  transform:rotate(45deg);flex-shrink:0;
}

/* KEY INSIGHTS */
.spqr .insights {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;background:var(--border);
  border:1px solid var(--border);
  margin:0 40px 40px;
  animation:fadeUp 1s 1s both;
}
.spqr .insight {
  background:var(--stone);
  padding:22px 24px;
  display:flex;gap:14px;align-items:flex-start;
  transition:background 0.2s;
}
.spqr .insight:hover{background:var(--stone-mid);}
.spqr .insight-icon{
  flex-shrink:0;
  color:var(--gold);
  opacity:0.85;
  margin-top:3px;
}
.spqr .insight-label{
  font-family:var(--font-display);
  font-size:0.7rem;letter-spacing:0.15em;
  color:var(--gold);text-transform:uppercase;
  margin-bottom:6px;
}
.spqr .insight-text{
  font-size:0.9rem;line-height:1.55;
  color:var(--text-body);
}

/* CONTROLS */
.spqr .controls {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--border);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin-bottom:0;
}
.spqr .filter-group{
  background:var(--stone);
  padding:18px 20px;
  display:flex;flex-direction:column;gap:8px;justify-content: center !important;
}
.spqr .filter-group label{
  font-family:var(--font-display);
  font-size:0.65rem;letter-spacing:0.18em;
  color:var(--gold);text-transform:uppercase;
}
.spqr .filter-group select,
.spqr .filter-group input{
  background:var(--stone-mid);
  border:1px solid var(--border);
  color:var(--ivory);
  padding:9px 12px;
  border-radius:0;
  font-family:var(--font-body);
  font-size:0.9rem;
  outline:none;
  transition:border-color 0.2s;
  appearance:none;-webkit-appearance:none;
}
.spqr .filter-group select:focus,
.spqr .filter-group input:focus{border-color:var(--gold);}
.spqr .filter-group select option{background:var(--stone-mid);}
.spqr .duration-row{display:grid;grid-template-columns:1fr;gap:8px;}
.spqr .reset-btn{
  font-family:var(--font-display);
  font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--obsidian);background:var(--gold);
  border:none;padding:10px 18px;cursor:pointer;
  transition:all 0.2s;
}
.spqr .reset-btn:hover{background:var(--gold-light);}

/* STATS BAR */
.spqr .stats {
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--border);
}
.spqr .stat{
  padding:22px 20px;
  text-align:center;
  border-right:1px solid var(--border);
  background:var(--stone);
  transition:background 0.2s;
}
.spqr .stat:last-child{border-right:none;}
.spqr .stat:hover{background:var(--stone-mid);}
.spqr .stat-n{
  font-family:var(--font-display);
  font-size:2.2rem;font-weight:700;
  color:var(--gold);line-height:1;
  margin-bottom:6px;
}
.spqr .stat-l{
  font-family:var(--font-display);
  font-size:0.62rem;letter-spacing:0.18em;
  color:var(--ivory-dim);text-transform:uppercase;
}

/* SECTION WRAPPER */
.spqr .section{
  padding:36px 40px;
  border-bottom:1px solid var(--border);
}
.spqr .section-title{
  font-family:var(--font-display);
  font-size:0.7rem;letter-spacing:0.22em;
  color:var(--gold);text-transform:uppercase;
  margin-bottom:6px;
  display:flex;align-items:center;gap:10px;
}
.spqr .section-title::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--gold-dim),transparent);
}
.spqr .section-desc{
  font-size:0.95rem;
  color:var(--ivory-dim);margin-bottom:24px;
  line-height:1.6;
}

/* CHART CONTAINERS */
.spqr .charts-row{
  display:grid;grid-template-columns:2fr 1fr;
  gap:1px;background:var(--border);
  margin:0 40px 1px;
}
.spqr .chart-box{
  background:var(--stone);
  padding:28px 24px;
}
.spqr .chart-box-title{
  font-family:var(--font-display);
  font-size:0.68rem;letter-spacing:0.2em;
  color:var(--gold);text-transform:uppercase;
  margin-bottom:4px;
}
.spqr .chart-box-desc{
  font-size:0.85rem;
  color:var(--ivory-dim);margin-bottom:20px;
  line-height:1.5;
}
.spqr .chart-canvas-wrap{position:relative;height:340px;}

/* LEGEND */
.spqr .legend{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:16px;
}
.spqr .legend-item{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-body);font-size:0.85rem;
  color:var(--text-body);
}
.spqr .leg-dot{
  width:11px;height:11px;
  border-radius:2px;flex-shrink:0;
}
.spqr .leg-dot.legit{background:var(--green-ok);}
.spqr .leg-dot.usurp{background:var(--amber-warn);opacity:0.7;border:1px dashed #888;}
.spqr .leg-dot.contest{background:#5a8fa0;border:1px solid #4a7080;}

/* REGION INFO PANEL */
.spqr .region-panel{
  display:none;
  background:var(--stone-mid);
  border:1px solid var(--border);
  border-left:3px solid var(--gold);
  margin:0 40px;
  padding:26px 28px;
  animation:slideIn 0.4s ease;
}
.spqr .region-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.spqr .region-panel-name{
  font-family:var(--font-display);font-size:1.3rem;
  color:var(--ivory);margin-bottom:12px;
  display:flex;align-items:center;gap:12px;
}
.spqr .region-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.spqr .rsn{font-family:var(--font-display);font-size:1.6rem;color:var(--gold);}
.spqr .rsl{font-size:0.75rem;letter-spacing:0.1em;color:var(--ivory-dim);text-transform:uppercase;font-family:var(--font-display);}
.spqr .region-desc{font-size:0.92rem;line-height:1.65;color:var(--text-body);}
.spqr .emperor-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.spqr .etag{
  font-family:var(--font-display);font-size:0.72rem;
  color:var(--gold);
  border:1px solid var(--gold-dim);
  padding:4px 10px;
  background:rgba(201,162,39,0.07);
}

/* GANTT TIMELINE */
.spqr .timeline-section{
  padding:30px 40px;
  background:var(--stone);
  border-top:1px solid var(--border);
}
.spqr .timeline-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;flex-wrap:wrap;gap:12px;
}
.spqr .tl-legend{
  display:flex;gap:16px;flex-wrap:wrap;
  font-family:var(--font-body);font-size:0.85rem;
  color:var(--ivory-dim);
}
.spqr .tl-legend span{display:flex;align-items:center;gap:7px;}
.spqr .tl-legend .dot{width:12px;height:10px;border-radius:2px;display:inline-block;}
.spqr #timelineSvgWrap{
  overflow-x:auto;overflow-y:auto;
  max-height:540px;
  border:1px solid var(--border);
  border-radius:2px;
  background:var(--stone-mid);
}

/* CRITICAL NOTE */
.spqr .crit-note{
  background:var(--stone);
  border-top:1px solid var(--border);
  padding:36px 40px;
}
.spqr .crit-note-title{
  font-family:var(--font-display);
  font-size:0.68rem;letter-spacing:0.22em;
  color:var(--crimson-b);text-transform:uppercase;
  margin-bottom:16px;
  display:flex;align-items:center;gap:10px;
}
.spqr .crit-note-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--crimson),transparent);}
.spqr .crit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.spqr .crit-item{
  border-left:2px solid var(--gold-dim);
  padding-left:16px;
}
.spqr .crit-item strong{
  display:block;font-family:var(--font-display);font-size:0.75rem;
  letter-spacing:0.1em;color:var(--ivory);text-transform:uppercase;
  margin-bottom:6px;
}
.spqr .crit-item p{font-size:0.9rem;line-height:1.65;color:var(--text-body);}

/* FOOTER */
.spqr-unused footer{
  text-align:center;
  padding:28px 20px;
  font-family:var(--font-display);font-size:0.62rem;
  letter-spacing:0.2em;color:var(--gold-dim);text-transform:uppercase;
  border-top:1px solid var(--border);
  background:var(--obsidian);
}

/* SCROLLBAR ──*/
.spqr ::-webkit-scrollbar{width:6px;height:6px;}
.spqr ::-webkit-scrollbar-track{background:var(--stone);}
.spqr ::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:3px;}
.spqr ::-webkit-scrollbar-thumb:hover{background:var(--gold);}

/* RESPONSIVE ─*/
@media(max-width:900px){
  .spqr .charts-row{grid-template-columns:1fr;}
  .spqr .region-panel.active{grid-template-columns:1fr;}
  .spqr .stats{grid-template-columns:repeat(2,1fr);}
  .spqr .insights,.spqr .controls,.spqr .section,.spqr .timeline-section,.spqr .crit-note{padding-left:16px;padding-right:16px;}
  .spqr .charts-row,.spqr .region-panel,.spqr .insights{margin-left:16px;margin-right:16px;}
  .spqr .controls { grid-template-columns: repeat(2, 1fr); }
  .spqr .controls .filter-group:last-child { grid-column: 1 / 0; }
  /*.duration-row { display: grid;grid-template-columns: 1fr 1fr;gap: 8px;}*/
}


/* ── Integrazione con il portfolio ─────────────────────── */
.spqr { padding-top: 5.5rem; padding-bottom: var(--space-12, 4rem); }
.spqr .spqr-crumb { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--space-4,1rem); }
.spqr .spqr-crumb a { color: var(--accent); text-decoration: none; }
.spqr .header { text-align:left; padding: var(--space-8,2rem) 0 var(--space-8,2rem); background:none; border-bottom:1px solid var(--border); }
.spqr .header::before { display:none; }
.spqr .header-title { font-family: var(--font-display); font-weight:800; letter-spacing:-0.02em; font-size: var(--text-4xl); animation:none; }
.spqr .header-sub { font-family: var(--font-mono); letter-spacing:.12em; animation:none; }
.spqr .header-tagline { margin-left:0; max-width:720px; animation:none; font-style:normal; }
.spqr .rule { justify-content:flex-start; margin:var(--space-4,1rem) 0; }
.spqr .controls, .spqr .stats-row, .spqr .charts-row, .spqr .region-panel, .spqr .timeline-section, .spqr .crit-note { padding-left:0; padding-right:0; }
.spqr select, .spqr input[type=number] { font-family: var(--font-body); }
.spqr .btn-reset, .spqr button { font-family: var(--font-mono); }
.spqr .author-note { display:flex; gap:20px; align-items:flex-start; padding:20px 24px; margin:var(--space-6,1.5rem) 0; background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; }
.spqr .author-note p { line-height:1.7; max-width:860px; }
.spqr .author-note em { font-style:normal; color:var(--text); }
.spqr .spqr-loading { text-align:center; padding:2rem; font-family:var(--font-mono); color:var(--text-muted); }
@media (max-width:720px){ .spqr { padding-top:4.5rem; } .spqr .author-note { flex-direction:column; } }

/* layout fixes: i blocchi originali avevano margini/padding da pagina intera */
.spqr .insights, .spqr .charts-row, .spqr .region-panel, .spqr .stats-row, .spqr .controls,
.spqr .timeline-section, .spqr .crit-note { margin-left:0; margin-right:0; max-width:100%; }
.spqr .charts-row { grid-template-columns: minmax(0,2fr) minmax(0,1fr); margin-top:var(--space-6,1.5rem); }
.spqr .charts-row > *, .spqr .chart-canvas-wrap { min-width:0; }
.spqr .chart-canvas-wrap { overflow:hidden; }
.spqr .insights { margin-top:var(--space-6,1.5rem); }
.spqr .timeline-section { margin-top:var(--space-6,1.5rem); overflow-x:auto; }
.spqr .crit-note { margin-top:var(--space-6,1.5rem); }
@media (max-width:900px){ .spqr .charts-row { grid-template-columns: minmax(0,1fr); } }

@media (max-width:720px){
  .spqr .controls { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .spqr .controls .filter-group { min-width:0; border-right:0; }
  .spqr .controls .filter-group:last-child { grid-column: 1 / -1; }
  .spqr .controls select, .spqr .controls input, .spqr .controls .reset-btn { width:100%; min-width:0; }
  .spqr .stats-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .spqr .insights { grid-template-columns: minmax(0,1fr); }
  .spqr .timeline-section { padding-left:12px; padding-right:12px; }
}

.spqr .spqr-articles { margin-top: var(--space-8,2rem); }
.spqr .spqr-art-title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--text); margin-bottom: var(--space-4,1rem); }
.spqr .spqr-art-card { display:flex; flex-direction:column; gap:.5rem; padding:1.5rem; background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; text-decoration:none; color:var(--text-muted); max-width:640px; transition:border-color .2s, transform .2s; }
.spqr .spqr-art-card:hover { border-color:var(--gold); transform:translateY(-2px); }
.spqr .spqr-art-card strong { font-family:var(--font-display); font-size:var(--text-xl); color:var(--text); }
.spqr .spqr-art-kicker, .spqr .spqr-art-cta { font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }