/* ===========================================================
   L'Epopea di Gilgameš — identità visiva
   blu petrolio / verde salvia / terracotta
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root{
  --petrol-900:#0c2b34;
  --petrol-800:#123c48;
  --petrol-700:#1a4e5c;
  --petrol-600:#246474;
  --sage-500:#7c9473;
  --sage-400:#9bb28f;
  --sage-100:#eef2e9;
  --terracotta-600:#b45a34;
  --terracotta-500:#c1683e;
  --terracotta-100:#f5e4d8;
  --parchment:#f7f2e7;
  --parchment-dark:#efe6d3;
  --ink:#20302f;
  --ink-soft:#4a5a58;
  --line:#d9cfb8;
  --max:1080px;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Source Sans 3', -apple-system, Segoe UI, Roboto, sans-serif;
  --shadow: 0 12px 30px -14px rgba(12,43,52,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--parchment);
  line-height:1.65;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(196,104,62,.05), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(18,60,72,.06), transparent 45%);
  pointer-events:none; z-index:0;
}

img{max-width:100%; display:block}
a{color:inherit}

h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--petrol-900);
  line-height:1.15;
  font-weight:600;
  letter-spacing:.01em;
}

.container{max-width:var(--max); margin:0 auto; padding:0 28px; position:relative; z-index:1}

/* ---------- header / nav ---------- */
header.site{
  background:var(--petrol-900);
  color:#f3ede0;
  position:sticky; top:0; z-index:50;
  border-bottom:3px solid var(--terracotta-600);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--max); margin:0 auto; padding:14px 28px;
}
.brand{
  font-family:var(--serif); font-size:1.5rem; font-weight:700;
  color:#f3ede0; text-decoration:none; display:flex; align-items:baseline; gap:.5rem;
}
.brand small{font-family:var(--sans); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-400); font-weight:600}
nav.primary{display:flex; gap:2px; flex-wrap:wrap}
nav.primary a{
  font-size:.86rem; font-weight:600; text-decoration:none; color:#e7e0cf;
  padding:8px 12px; border-radius:6px; transition:background .15s,color .15s;
  white-space:nowrap;
}
nav.primary a:hover, nav.primary a.active{ background:rgba(196,104,62,.28); color:#fff }
#nav-toggle{display:none}
.burger{display:none; cursor:pointer; color:#f3ede0; font-size:1.5rem; background:none; border:0}

@media(max-width:860px){
  .nav-wrap{flex-wrap:wrap}
  nav.primary{
    flex-basis:100%; max-height:0; overflow:hidden; flex-direction:column;
    transition:max-height .25s ease;
  }
  #nav-toggle:checked ~ nav.primary{max-height:600px; padding-top:10px}
  .burger{display:block}
}

/* ---------- hero ---------- */
.hero{
  position:relative; color:#f3ede0;
  background:
    linear-gradient(160deg, rgba(12,43,52,.86), rgba(12,43,52,.72) 55%, rgba(180,90,52,.55)),
    var(--petrol-900);
  background-size:cover; background-position:center;
  padding:86px 0 74px;
}
.hero .container{display:flex; flex-direction:column; gap:18px}
.hero .kicker{
  text-transform:uppercase; letter-spacing:.22em; font-size:.78rem; font-weight:700;
  color:var(--terracotta-500); background:rgba(247,242,231,.08);
  padding:6px 14px; border-radius:999px; width:max-content;
  border:1px solid rgba(247,242,231,.25);
}
.hero h1{color:#fdf9ee; font-size:clamp(2.2rem,5vw,3.6rem); margin:0; max-width:16ch}
.hero p.lead{font-size:1.18rem; max-width:62ch; color:#e7e0cf; margin:0}
.hero .meta{font-family:var(--serif); font-style:italic; color:var(--sage-400); font-size:1.05rem}

.page-hero{padding:56px 0 46px}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.7rem)}

/* breadcrumb */
.crumbs{font-size:.82rem; color:var(--sage-400); display:flex; gap:6px; flex-wrap:wrap}
.crumbs a{text-decoration:none; color:var(--sage-400)}
.crumbs a:hover{color:#fff}
.crumbs span{color:rgba(247,242,231,.5)}

/* ---------- generic sections ---------- */
main{position:relative; z-index:1}
.section{padding:56px 0}
.section.tight{padding:34px 0}
.prose{max-width:74ch}
.prose p, .content p{margin:0 0 1.15em; font-size:1.05rem; color:var(--ink)}
.content h2{font-size:1.7rem; margin:2.4em 0 .7em; padding-top:.2em; border-top:1px solid var(--line)}
.content h2:first-child{border-top:0; margin-top:0}
.content h3{font-size:1.3rem; margin:1.6em 0 .5em; color:var(--terracotta-600)}
.content ul, .content ol{margin:0 0 1.2em; padding-left:1.3em}
.content li{margin-bottom:.4em}
.content strong{color:var(--petrol-800)}
.content em{color:var(--ink-soft)}

figure.inline-fig{
  margin:1.6em 0; text-align:center;
}
figure.inline-fig img{
  margin:0 auto; border-radius:4px; box-shadow:var(--shadow);
  border:1px solid var(--line);
}
figure.inline-fig figcaption{
  font-family:var(--serif); font-style:italic; font-size:.92rem; color:var(--ink-soft);
  margin-top:.6em;
}

/* ---------- verse / poem ---------- */
.verse-block{
  background:#fffdf6; border:1px solid var(--line); border-left:4px solid var(--sage-500);
  border-radius:6px; padding:22px 26px; margin:0 0 20px;
}
.verse-line{
  display:grid; grid-template-columns:1fr 34px; gap:10px; align-items:start;
  font-family:var(--serif); font-size:1.18rem; color:var(--ink);
}
.verse-line + .verse-line{margin-top:.55em}
.verse-line .vnum{
  font-family:var(--sans); font-size:.72rem; color:var(--sage-500); font-weight:600;
  text-align:right; padding-top:.3em;
}

.commentario{
  background:var(--sage-100); border:1px solid #dbe4d3; border-radius:8px;
  padding:8px 28px 22px; margin:2.4em 0 1.4em;
}
.commentario > .comm-label{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem;
  font-weight:700; color:var(--sage-500); display:block; padding-top:20px;
}
.commentario h3, .commentario h4{
  font-size:1.15rem; color:var(--petrol-800); margin:1em 0 .4em; font-style:italic;
}
.commentario p{font-size:.98rem; color:var(--ink-soft)}

/* ---------- cards / grids ---------- */
.grid{display:grid; gap:22px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.tavole{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){ .grid.cols-3,.grid.cols-2{grid-template-columns:1fr 1fr} .grid.tavole{grid-template-columns:repeat(3,1fr)} }
@media(max-width:640px){ .grid.cols-3,.grid.cols-2,.grid.tavole{grid-template-columns:1fr} }

.card{
  background:#fffdf6; border:1px solid var(--line); border-radius:10px;
  padding:22px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s; display:flex; flex-direction:column; gap:8px;
}
.card:hover{transform:translateY(-3px)}
.card .eyebrow{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--terracotta-600); font-weight:700}
.card h3{margin:0; font-size:1.28rem}
.card p{margin:0; font-size:.92rem; color:var(--ink-soft)}

.tavola-card{
  text-align:center; padding:20px 14px; gap:6px;
}
.tavola-card .num{
  font-family:var(--serif); font-size:2.1rem; color:var(--terracotta-500); font-weight:700;
}
.tavola-card .ttl{font-size:.92rem; color:var(--ink-soft)}

/* ---------- intro / feature blocks on section landing pages ---------- */
.intro-block{
  background:linear-gradient(180deg,#fffdf6,var(--parchment-dark));
  border:1px solid var(--line); border-radius:10px; padding:30px 34px; margin-bottom:36px;
}

/* ---------- pagination (prev/next tavole) ---------- */
.tavola-pager{
  display:flex; justify-content:space-between; gap:16px; margin-top:48px;
  border-top:1px solid var(--line); padding-top:26px;
}
.tavola-pager a{
  text-decoration:none; color:var(--petrol-800); font-weight:600; font-size:.95rem;
  display:flex; flex-direction:column; max-width:46%;
}
.tavola-pager a .dir{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--sage-500)}
.tavola-pager a.next{text-align:right; margin-left:auto}
.tavola-pager a:hover{color:var(--terracotta-600)}

.toc-box{
  background:var(--terracotta-100); border:1px solid #e6c9ae; border-radius:8px;
  padding:16px 22px; margin-bottom:34px; font-size:.92rem;
}
.toc-box .lbl{font-weight:700; text-transform:uppercase; font-size:.72rem; letter-spacing:.1em; color:var(--terracotta-600); display:block; margin-bottom:8px}
.toc-box ul{margin:0; padding-left:1.1em; columns:2; column-gap:24px}
.toc-box a{text-decoration:none; color:var(--petrol-800)}
.toc-box a:hover{color:var(--terracotta-600)}

/* ---------- footer ---------- */
footer.site{
  background:var(--petrol-900); color:#cfd8c9; padding:40px 0 30px; margin-top:70px;
  border-top:3px solid var(--terracotta-600); font-size:.86rem;
}
footer.site a{color:#e7e0cf; text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site .foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px}
footer.site .credit{color:#93a396; max-width:60ch; margin-top:18px; font-size:.8rem; line-height:1.6}

/* misc */
.back-link{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--sage-500);
  font-weight:600; font-size:.88rem; margin-bottom:22px;
}
.back-link:hover{color:var(--terracotta-600)}

blockquote.pull{
  font-family:var(--serif); font-style:italic; font-size:1.35rem; color:var(--petrol-800);
  border-left:4px solid var(--terracotta-500); margin:1.8em 0; padding:.2em 0 .2em 22px;
}