/*
  THE COMPLETE ENCYCLOPEDIA OF ANCIENT ROME
  Distinct "imperial Roman" design.
  Palette: imperial purple/maroon, bronze-gold, toga parchment, Pompeii red.
*/

:root{
  --toga:#f2ede2;          /* aged parchment background */
  --stone:#e8dfd0;
  --ink:#2b211c;           /* dark sepia text */
  --ink-soft:#5c4f42;
  --purple:#5b1f36;        /* imperial maroon/purple */
  --purple-deep:#3f1223;
  --bronze:#a8792b;        /* bronze gold */
  --bronze-deep:#7d5619;
  --pompeii:#a3242b;       /* Pompeii red accent */
  --border:#d6c8ae;
  --rule:#c6b593;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  font-family:'Palatino Linotype','Book Antiqua',Georgia,'Times New Roman',serif;
  line-height:1.85;
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 0%, rgba(168,121,43,0.10), transparent 40%),
    radial-gradient(circle at 90% 8%, rgba(91,31,54,0.10), transparent 40%),
    var(--toga);
  font-size:17px;
}

a{color:var(--purple);}
a:hover{color:var(--pompeii);text-decoration:underline;}

/* ── Top brow ─────────────────────────────── */
.library-brow{
  background:linear-gradient(90deg,#2a1420 0%, var(--purple) 55%, #541927 100%);
  color:#f2ede2;
  padding:10px 28px;
  font-size:0.78rem;
  letter-spacing:2.5px;
  text-transform:uppercase;
  font-family:'Trebuchet MS',Verdana,sans-serif;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
}
.library-brow .gold{color:#e0c07a;font-weight:700;}

/* ── Hero ─────────────────────────────────── */
.hero{
  position:relative;
  text-align:center;
  padding:84px 26px 66px;
  color:#f2ede2;
  background:
    linear-gradient(rgba(63,18,35,0.90), rgba(80,20,40,0.93)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 12px);
  border-bottom:6px solid var(--bronze);
}
.hero::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-3px;
  height:3px;background:var(--pompeii);
}
.hero .eyebrow{
  display:inline-block;
  border:1px solid rgba(224,192,122,0.5);
  border-radius:40px;
  padding:7px 20px;
  letter-spacing:3px;
  font-size:0.8rem;
  text-transform:uppercase;
  color:#e0c07a;
  font-family:'Trebuchet MS',Verdana,sans-serif;
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(2.3rem,5vw,3.6rem);
  font-weight:800;
  line-height:1.1;
  margin:0 auto 18px;
  max-width:920px;
  text-shadow:0 2px 10px rgba(0,0,0,0.35);
}
.hero p{
  max-width:760px;
  margin:0 auto 26px;
  opacity:0.94;
  font-size:1.12rem;
}
.pdf-btn{
  display:inline-block;
  background:var(--bronze);
  color:#231a0d;
  border:none;
  border-radius:8px;
  padding:12px 26px;
  font-weight:700;
  font-family:'Trebuchet MS',Verdana,sans-serif;
  cursor:pointer;
  font-size:0.95rem;
  box-shadow:0 6px 18px rgba(0,0,0,0.3);
}
.pdf-btn:hover{background:#c89a3f;}

/* ── Nav on non-hero pages ────────────────── */
.topnav{
  background:linear-gradient(90deg,#2a1420, var(--purple));
  padding:12px 26px;
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.topnav .brand{color:#e0c07a;font-weight:800;letter-spacing:1px;margin-right:8px;font-size:0.95rem;}
.topnav a{color:#f2ede2;font-weight:600;font-size:0.92rem;font-family:'Trebuchet MS',Verdana,sans-serif;}
.topnav a:hover{color:#e0c07a;text-decoration:none;}

/* ── Container & content ──────────────────── */
.container{max-width:1000px;margin:0 auto;padding:44px 26px 80px;}

h2{
  color:var(--purple);
  font-size:1.85rem;
  margin:52px 0 16px;
  padding-bottom:10px;
  border-bottom:2px double var(--bronze);
}
h2 .num{
  color:var(--bronze-deep);
  font-size:1.5rem;
  margin-right:8px;
  font-family:'Trebuchet MS',Verdana,sans-serif;
}
h3{color:var(--pompeii);font-size:1.35rem;margin:30px 0 10px;}
h4{color:var(--ink-soft);font-size:1.1rem;margin:22px 0 8px;}
p{margin:15px 0;}
strong{color:var(--ink);}
ul,ol{margin:16px 0;padding-left:28px;}
li{margin:8px 0;}

blockquote{
  margin:26px 0;
  padding:18px 26px;
  border-left:5px solid var(--bronze);
  background:rgba(168,121,43,0.10);
  border-radius:0 10px 10px 0;
  font-style:italic;
}
blockquote cite{display:block;margin-top:8px;font-style:normal;font-size:0.9rem;color:var(--ink-soft);}

table{
  width:100%;border-collapse:collapse;margin:20px 0;
  background:#faf6ee;box-shadow:0 2px 10px rgba(0,0,0,0.06);
}
th{background:var(--purple);color:#fff;text-align:left;padding:12px 14px;font-family:'Trebuchet MS',Verdana,sans-serif;font-size:0.9rem;}
td{border:1px solid var(--border);padding:11px 14px;vertical-align:top;}
tr:nth-child(even) td{background:#f0e7d6;}

/* ── Cards (hub pages) ────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin:28px 0;}
.card{
  background:linear-gradient(160deg,#faf6ee,#efe6d4);
  border:1px solid var(--border);
  border-left:6px solid var(--bronze);
  border-radius:10px;
  padding:26px 28px;
  box-shadow:0 6px 22px rgba(0,0,0,0.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,0.14);}
.card .level{display:inline-block;background:var(--purple);color:#fff;font-size:0.72rem;letter-spacing:1.5px;text-transform:uppercase;padding:4px 12px;border-radius:20px;margin-bottom:12px;font-family:'Trebuchet MS',Verdana,sans-serif;}
.card h3{color:var(--ink);font-size:1.4rem;margin-bottom:8px;}
.card p{color:var(--ink-soft);font-size:0.98rem;}
.btn{display:inline-block;background:var(--pompeii);color:#fff;border-radius:8px;padding:11px 20px;font-weight:700;font-family:'Trebuchet MS',Verdana,sans-serif;font-size:0.95rem;margin-top:12px;}
.btn:hover{background:#7c181d;text-decoration:none;}

/* ── Citation & source styling ────────────── */
.cite{
  font-size:0.82rem;
  color:var(--ink-soft);
  font-style:italic;
}
.sources{
  margin:30px 0;
  padding:20px 24px;
  background:rgba(91,31,54,0.06);
  border:1px solid var(--border);
  border-radius:10px;
}
.sources h4{color:var(--purple);}
.sources ol li{margin:9px 0;font-size:0.95rem;word-break:break-word;}
.sources code{background:#ece3d1;padding:2px 6px;border-radius:4px;font-size:0.85rem;}

.callout{
  padding:16px 22px;margin:24px 0;border-radius:10px;
  border-left:6px solid var(--purple);
  background:rgba(91,31,54,0.08);
}
.callout.warn{border-left-color:var(--pompeii);background:rgba(163,36,43,0.07);}
.callout.warn strong{color:var(--pompeii);}

/* ── Footer ───────────────────────────────── */
footer{
  text-align:center;
  color:var(--ink-soft);
  padding:34px 20px;
  border-top:5px double var(--bronze);
  background:linear-gradient(#f2ede2,#ece2d0);
  font-size:0.95rem;
  font-family:'Trebuchet MS',Verdana,sans-serif;
}
footer a{color:var(--purple);}

.quote-fade{opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .8s ease;}
.quote-fade.visible{opacity:1;transform:none;}

/* ── Collapsible sections ─────────────────── */
details.sec{
  border:1px solid var(--rule);
  border-left:6px solid var(--bronze);
  border-radius:10px;
  padding:4px 20px 6px;
  margin:28px 0;
  background:rgba(255,255,255,0.30);
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
details.sec>summary{
  cursor:pointer;
  list-style:none;
  font-weight:700;
  outline:none;
  user-select:none;
}
details.sec>summary::-webkit-details-marker{display:none;}
details.sec>summary::after{
  content:"\25BC"; /* down triangle */
  float:right;
  font-size:0.8em;
  color:var(--bronze-deep);
  margin-top:20px;
}
details.sec:not([open])>summary::after{content:"\25B6"; /* right triangle */}
details.sec>summary:hover{color:var(--pompeii);}
details.sec .num{color:var(--bronze-deep);}

@media (max-width:640px){
  body{font-size:16px;}
  .hero{padding:58px 18px 46px;}
  .container{padding:32px 16px 60px;}
  h2{font-size:1.5rem;}
}