/* ============================================================
   7th Sea — Cronaca di Campagna
   Stile: pergamena / nautico
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Cinzel+Decorative:wght@700;900&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  --paper:        #ecdcbb;
  --paper-2:      #e3cfa3;
  --paper-edge:   #c9ad77;
  --ink:          #2a2014;
  --ink-soft:     #4a3a26;
  --gold:         #9a6b1f;
  --gold-bright:  #c79241;
  --sea:          #2f5d63;
  --sea-deep:     #163436;
  --blood:        #7c2417;
  --shadow:       rgba(30,18,6,.45);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--ink);
  font-family:'EB Garamond', Georgia, serif;
  font-size:20px;
  line-height:1.75;
  background-color:#2c1d10;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,.25), transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(0,0,0,.3), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 39h40M39 0v40' stroke='%23000' stroke-opacity='.05'/%3E%3C/svg%3E");
}

/* ---------- Parchment sheet ---------- */
.sheet{
  max-width:880px;
  margin:0 auto;
  padding:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(120,80,30,.22), transparent 45%),
    radial-gradient(ellipse at 85% 30%, rgba(120,80,30,.18), transparent 45%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  box-shadow:0 0 4px var(--paper-edge), 0 18px 60px var(--shadow), inset 0 0 120px rgba(120,80,30,.25);
  border-left:1px solid rgba(0,0,0,.15);
  border-right:1px solid rgba(0,0,0,.15);
  position:relative;
  overflow:hidden;
}
.sheet::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 80px rgba(70,40,10,.35);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}
.inner{ padding:56px 64px 72px; position:relative; z-index:1; }

/* ---------- Header / titoli ---------- */
.eyebrow{
  text-align:center; letter-spacing:.5em; text-transform:uppercase;
  font-family:'Cinzel', serif; font-size:.72rem; color:var(--gold);
  margin:0 0 6px; padding-left:.5em;
}
.chapter-num{
  text-align:center; font-family:'Cinzel Decorative', serif; font-weight:900;
  color:var(--sea); font-size:1.1rem; letter-spacing:.25em; margin:0;
}
h1.title{
  text-align:center; font-family:'Cinzel Decorative', serif; font-weight:900;
  font-size:clamp(2.1rem, 6vw, 3.4rem); line-height:1.05; margin:.15em 0 .1em;
  color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(60,30,0,.25);
}
.subtitle{ text-align:center; font-style:italic; color:var(--ink-soft); font-size:1.05rem; margin:.2em 0 0; }

/* compass / rule divider */
.rule{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:30px 0; color:var(--gold);
}
.rule::before, .rule::after{
  content:""; height:1px; flex:1; max-width:230px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.rule .star{ font-size:1.2rem; filter:drop-shadow(0 1px 0 rgba(255,255,255,.4)); }

/* ---------- Body text ---------- */
.section{ margin:42px 0; }
h2.scene{
  font-family:'Cinzel', serif; font-weight:700; color:var(--sea-deep);
  font-size:1.5rem; letter-spacing:.02em; margin:0 0 .2em;
  display:flex; align-items:baseline; gap:.5em;
}
h2.scene .ord{
  font-family:'Cinzel Decorative', serif; color:var(--gold); font-size:1.1rem;
}
h2.scene + .lede{ margin-top:0; }
p{ margin:0 0 1.05em; text-align:justify; hyphens:auto; }
.lede{ font-size:1.05rem; }
.dropcap::first-letter{
  float:left; font-family:'Cinzel Decorative', serif; font-weight:900;
  font-size:4.1rem; line-height:.78; padding:.05em .12em 0 0; color:var(--blood);
  text-shadow:1px 1px 0 rgba(255,255,255,.3);
}

/* in-world voice / GM read-aloud */
blockquote.voice{
  margin:1.6em 0; padding:.6em 1.4em; font-style:italic; color:var(--sea-deep);
  border-left:3px solid var(--gold); background:rgba(154,107,31,.08);
}
blockquote.lich{
  border-color:var(--blood); color:#5a1c12; background:rgba(124,36,23,.07);
  font-style:italic;
}
.spoken{ font-variant:small-caps; letter-spacing:.03em; }

/* ---------- Figure / immagini ---------- */
figure{
  margin:30px 0; padding:10px 10px 0; background:#f6ecd3;
  border:1px solid var(--paper-edge); box-shadow:0 8px 22px var(--shadow);
  transform:rotate(-.5deg);
}
figure.r{ transform:rotate(.6deg); }
figure img{ width:100%; height:auto; display:block; filter:sepia(.12) saturate(1.02); }
figure figcaption{
  font-family:'Cinzel', serif; font-size:.78rem; letter-spacing:.04em;
  text-align:center; color:var(--ink-soft); padding:10px 6px 12px; text-transform:uppercase;
}
.img-missing{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:220px; padding:24px; color:var(--ink-soft); font-family:'Cinzel',serif;
  font-size:.8rem; letter-spacing:.05em; line-height:1.6;
  background:repeating-linear-gradient(45deg,#e7d6b2,#e7d6b2 12px,#ddc89c 12px,#ddc89c 24px);
  border:1px dashed var(--gold);
}

/* ---------- Crew roster ---------- */
.roster{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  gap:18px; margin:26px 0 8px;
}
.crew{
  background:#f6ecd3; border:1px solid var(--paper-edge);
  box-shadow:0 5px 14px var(--shadow); padding:8px; text-align:center;
}
.crew .frame{ aspect-ratio:3/4; overflow:hidden; background:#ddc89c; border:1px solid var(--paper-edge); }
.crew .frame img{ width:100%; height:100%; object-fit:cover; filter:sepia(.15) saturate(1.05); }
.crew .ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-family:'Cinzel',serif; font-size:.7rem; padding:8px; text-align:center;
  background:repeating-linear-gradient(45deg,#e7d6b2,#e7d6b2 10px,#ddc89c 10px,#ddc89c 20px); }
.crew .coming{ width:100%; height:100%; display:flex; flex-direction:column; gap:4px;
  align-items:center; justify-content:center; color:var(--ink-soft);
  font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:.08em; text-align:center; padding:6px;
  background:radial-gradient(circle at 50% 34%, #d8c498, #c9b083); }
.crew .coming .silh{ font-size:1.6rem; color:#b39a6a; line-height:1; }
.roster-label{ font-family:'Cinzel',serif; text-align:center; text-transform:uppercase;
  letter-spacing:.14em; font-size:.78rem; color:var(--gold); margin:24px 0 4px; }
.roster-label.png{ color:var(--sea); }
.crew h3{ font-family:'Cinzel', serif; font-size:1rem; margin:.55em 0 .05em; color:var(--ink); }
.crew .role{ font-size:.82rem; font-style:italic; color:var(--sea); margin:0 0 .3em; }

/* ---------- Aside: log / scheda ---------- */
.log{
  margin:34px 0; padding:18px 22px; background:rgba(47,93,99,.08);
  border:1px solid rgba(47,93,99,.3); border-radius:2px;
}
.log h4{
  font-family:'Cinzel', serif; margin:0 0 .4em; color:var(--sea-deep);
  font-size:.95rem; letter-spacing:.08em; text-transform:uppercase;
}
.log ul{ margin:0; padding-left:1.2em; }
.log li{ margin:.2em 0; }

/* ---------- Vision list ---------- */
ol.visions{ counter-reset:v; list-style:none; padding:0; margin:1.2em 0; }
ol.visions li{
  position:relative; padding:.5em 0 .7em 3.2em; border-bottom:1px dashed rgba(120,80,30,.3);
}
ol.visions li::before{
  counter-increment:v; content:counter(v, upper-roman);
  position:absolute; left:0; top:.45em; width:2.4em; text-align:right;
  font-family:'Cinzel Decorative', serif; color:var(--gold); font-weight:700;
}
ol.visions b{ font-variant:small-caps; color:var(--sea-deep); letter-spacing:.02em; }

/* ---------- Nav / footer ---------- */
.topnav{
  max-width:880px; margin:0 auto; display:flex; justify-content:space-between;
  align-items:center; padding:14px 8px; color:var(--paper);
  font-family:'Cinzel', serif; font-size:.8rem; letter-spacing:.15em; text-transform:uppercase;
}
.topnav a{ color:var(--gold-bright); text-decoration:none; }
.topnav a:hover{ color:#fff; }
.chapfoot{
  display:flex; justify-content:space-between; gap:14px; margin-top:46px;
  padding-top:22px; border-top:1px solid var(--paper-edge);
  font-family:'Cinzel', serif; font-size:.8rem; letter-spacing:.06em;
}
.chapfoot a{ color:var(--sea); text-decoration:none; }
.chapfoot a:hover{ color:var(--blood); }
.chapfoot .next{ text-align:right; }
.muted{ color:var(--ink-soft); }
.sitefoot{ text-align:center; color:#b9a173; font-size:.78rem; padding:26px 12px 40px; font-family:'Cinzel',serif; letter-spacing:.1em; }

/* clickable crew card */
a.crew{ text-decoration:none; color:inherit; transition:transform .12s ease, box-shadow .12s ease; }
a.crew:hover{ transform:translateY(-3px); box-shadow:0 12px 24px var(--shadow); }
a.crew:hover h3{ color:var(--blood); }

/* cover group image */
.cover-img{ margin:24px 0 6px; }
.cover-img img{ width:100%; height:auto; display:block; filter:sepia(.12) saturate(1.03); }

/* ============================================================
   Character page
   ============================================================ */
.char-hero{ display:flex; gap:30px; align-items:flex-start; margin:8px 0 18px; }
.char-hero .portrait{ flex:0 0 250px; background:#f6ecd3; border:1px solid var(--paper-edge);
  box-shadow:0 8px 22px var(--shadow); padding:9px; transform:rotate(-.6deg); }
.char-hero .portrait img{ width:100%; height:auto; display:block; filter:sepia(.14) saturate(1.04); }
.char-hero .portrait figcaption{ font-family:'Cinzel',serif; font-size:.72rem; text-align:center;
  color:var(--ink-soft); padding:8px 4px 4px; text-transform:uppercase; letter-spacing:.04em; }
.char-hero .intro{ flex:1; min-width:0; }
.char-hero .intro h1{ text-align:left; margin:.1em 0 .05em; font-size:clamp(2rem,5vw,3rem); }
.char-meta{ font-family:'Cinzel',serif; color:var(--sea); letter-spacing:.04em; margin:.1em 0 .6em; }
.char-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:.4em 0 0; }
.char-tags span{ font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.05em; color:var(--ink-soft);
  border:1px solid var(--paper-edge); background:rgba(154,107,31,.08); padding:3px 10px; border-radius:2px; }
.wip{ text-align:center; font-style:italic; color:var(--ink-soft);
  border:1px dashed var(--gold); background:rgba(154,107,31,.06); padding:18px; margin:24px 0; }

@media (max-width:640px){
  .char-hero{ flex-direction:column; gap:16px; }
  .char-hero .portrait{ flex:0 0 auto; align-self:center; max-width:280px; transform:none; }
  .char-hero .intro h1{ text-align:center; }
}

/* ============================================================
   Index page
   ============================================================ */
.cover{ text-align:center; padding:30px 0 8px; }
.cover .crest{ font-size:2.6rem; color:var(--gold); }
.toc{ margin:18px 0; }
.toc a.entry{
  display:flex; align-items:baseline; gap:14px; text-decoration:none; color:var(--ink);
  padding:14px 10px; border-bottom:1px dashed rgba(120,80,30,.35);
}
.toc a.entry:hover{ background:rgba(154,107,31,.08); }
.toc a.entry.disabled{ color:#9c8a6a; pointer-events:none; }
.toc .n{ font-family:'Cinzel Decorative',serif; color:var(--gold); font-weight:700; min-width:2.4em; }
.toc .t{ font-family:'Cinzel', serif; font-size:1.05rem; flex:1; }
.toc .dots{ flex:1; border-bottom:1px dotted rgba(120,80,30,.5); transform:translateY(-4px); }
.toc .st{ font-style:italic; font-size:.85rem; color:var(--sea); }

@media (max-width:640px){
  body{ font-size:18px; }
  .inner{ padding:34px 24px 50px; }
  figure{ transform:none; }
}