/*
  THE COMPLETE ENCYCLOPEDIA OF ANCIENT GREECE
  Distinct "classical library" design.
  Deliberately different from the StudyHub burgundy/green palette.
  Colours: marble, gold, deep Aegean blue, terracotta.
*/

:root{
  --marble:#f4efe6;          /* aged parchment / marble background */
  --stone:#e7dfcf;           /* secondary panel */
  --ink:#2b2620;             /* near-black sepia text */
  --ink-soft:#5c5141;        /* muted text */
  --gold:#b98a2f;            /* laurel/bronze gold */
  --gold-deep:#8a6720;
  --aegean:#14566f;          /* deep Mediterranean blue */
  --aegean-light:#3d7d95;
  --terracotta:#a8462f;      /* roof-tile terracotta */
  --border:#d8ccb4;
  --rule:#c9bb9e;
}

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

body{
  font-family:Georgia,'Times New Roman','Palatino Linotype',serif;
  line-height:1.85;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(184,138,47,0.08), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(20,86,111,0.08), transparent 40%),
    var(--marble);
  font-size:17px;
}

a{color:var(--aegean);}
a:hover{color:var(--terracotta);text-decoration:underline;}

/* ── Top brow ─────────────────────────────── */
.library-brow{
  background:linear-gradient(90deg,#2a2320 0%, var(--aegean) 55%, #0e3c50 100%);
  color:#f4efe6;
  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:#e5c677;font-weight:700;}

/* ── Hero ─────────────────────────────────── */
.hero{
  position:relative;
  text-align:center;
  padding:84px 26px 66px;
  color:#f4efe6;
  background:
    linear-gradient(rgba(18,47,60,0.88), rgba(18,47,60,0.92)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 12px);
  border-bottom:6px solid var(--gold);
}
.hero::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-3px;
  height:3px;background:var(--terracotta);
}
.hero .eyebrow{
  display:inline-block;
  border:1px solid rgba(229,198,119,0.5);
  border-radius:40px;
  padding:7px 20px;
  letter-spacing:3px;
  font-size:0.8rem;
  text-transform:uppercase;
  color:#e5c677;
  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:900px;
  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(--gold);
  color:#241d12;
  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:#d3a545;}

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

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

h2{
  color:var(--aegean);
  font-size:1.85rem;
  margin:52px 0 16px;
  padding-bottom:10px;
  border-bottom:2px double var(--gold);
}
h2 .num{
  color:var(--gold-deep);
  font-size:1.5rem;
  margin-right:8px;
  font-family:'Trebuchet MS',Verdana,sans-serif;
}
h3{color:var(--terracotta);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(--gold);
  background:rgba(184,138,47,0.09);
  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:#fbf7ef;box-shadow:0 2px 10px rgba(0,0,0,0.06);
}
th{background:var(--aegean);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:#f1eadc;}

/* ── 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,#fbf7ef,#f0e8d6);
  border:1px solid var(--border);
  border-left:6px solid var(--gold);
  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(--aegean);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(--terracotta);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:#8c3623;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(20,86,111,0.06);
  border:1px solid var(--border);
  border-radius:10px;
}
.sources h4{color:var(--aegean);}
.sources ol li{margin:9px 0;font-size:0.95rem;word-break:break-word;}
.sources code{background:#ece5d3;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(--aegean);
  background:rgba(20,86,111,0.08);
}
.callout.warn{border-left-color:var(--terracotta);background:rgba(168,70,47,0.08);}
.callout.warn strong{color:var(--terracotta);}

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

.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(--gold);
  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(--gold-deep);
  margin-top:20px;
}
details.sec:not([open])>summary::after{content:"\25B6"; /* right triangle */}
details.sec>summary:hover{color:var(--terracotta);}
details.sec .num{color:var(--gold-deep);}

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