:root{
  --paper:#e8e0d6; --ink:#111; --muted:#444; --panel:#ffffffcc;
  --shadow:0 10px 30px rgba(0,0,0,.12); --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Times New Roman', Georgia, 'Noto Serif SC', serif;color:var(--ink);background:var(--paper);}
.hero{
  min-height: 58vh;
  background-image: radial-gradient(ellipse at center, rgba(0,0,0,0.04) 0, rgba(0,0,0,0) 60%), url('assets/bg.jpg');
  background-size: cover; background-position: center;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top: 24px; text-align:center; position: relative;
}
.top-left-badge.single{ position:absolute; left:20px; top:20px; }
.top-left-badge.single img{ height:110px; object-fit:contain; background:transparent; }

h1{ font-size:56px; letter-spacing:2px; margin:16px 0 6px; }
.subrow{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
  align-items:center; width:min(960px, 92vw);
}
.subtitle{ margin:0; font-size:20px; color:var(--muted); text-align:left; }
.tagline{ margin:0; font-size:16px; color:#333; text-align:right; opacity:.95; }

@media (max-width:860px){
  .subrow{ grid-template-columns: 1fr; }
  .subtitle, .tagline{ text-align:center; }
}

.search-wrap{
  margin-top: 12px;
  background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(6px);
  border-radius: var(--radius); padding: 14px; display:flex; gap:12px; align-items:center;
  width: min(680px, 90vw);
}
.search-wrap input{ flex:1; padding:14px 16px; border-radius:14px; border:1px solid #d5cfc6; font-size:17px; background:#fff; outline:none; }
.search-wrap button{ padding:12px 18px; border-radius:14px; border:none; background:#111; color:#fff; font-weight:700; cursor:pointer; }

.filters{ margin-top:10px; display:flex; gap:18px; align-items:center; color:#222; }
.filters label{ display:flex; gap:6px; align-items:center; background:#ffffffbb; padding:6px 10px; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.filters select{ border:1px solid #d5cfc6; border-radius:10px; padding:6px 8px; background:#fff; }

.results{ max-width:1100px; margin:24px auto 48px; padding:0 16px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:960px){ .results{ grid-template-columns:1fr; } }
.card{ background:#fff; border-radius:16px; box-shadow: var(--shadow); padding:16px 16px 10px; display:flex; flex-direction:column; gap:10px; }
.card .name{ font-size:20px; font-weight:700; }
.badges{ display:flex; gap:8px; flex-wrap:wrap; color:#333; }
.badge{ padding:2px 8px; border:1px solid #ccc; border-radius:999px; font-size:12px; background:#f8f5f0; }
.summary{ white-space: pre-wrap;  font-size:16px; line-height:1.6; }
.kv{ display:grid; grid-template-columns:86px 1fr; gap:4px; font-size:14px; }
.kv .k{ color:#555; } .kv .v{ color:#222; }

.credits{ text-align:center; color:#333; font-size:14px; padding:8px 16px 22px; }
.credits a{ color:#000; }

/* --- Quotes Rotator (non-invasive) --- */
.quotes-rotator{
  margin: 10px auto 6px;
  max-width: 900px;
  text-align: center;
  min-height: 1.4em; /* avoid layout jump */
}
.quotes-rotator .quote{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
  line-height: 1.4;
}
.quotes-rotator .quote.show{
  opacity: 1;
  transform: translateY(0);
}