/* ============ Le Parchemin du Loup Blanc — feuille de style ============ */
:root{
  color-scheme: light;               /* opt out of forced dark-mode inversion */
  --desk:#16110b; --desk2:#2a1d10;
  --parch:#f4ead0; --parch2:#e6d4a9;
  --ink:#3a2b19; --ink-soft:#5b4426;
  --gold:#b98f24; --gold-deep:#8a6d1f; --line:#c2a463;
  --blood:#8a1f1f;
}
*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; padding:28px 12px 60px;
  background:var(--desk);
  background-image:radial-gradient(ellipse at 50% -10%, #33240f 0%, #16110b 60%, #0f0b06 100%);
  color:var(--ink);
  font-family:'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size:18px; line-height:1.72;
}
/* force our palette even if the OS/browser pushes dark */
@media (prefers-color-scheme: dark){
  body{ background:var(--desk); color:var(--ink); }
}

.scroll{
  max-width:768px; width:100%; margin:0 auto;
  background:var(--parch);
  background-image:
    radial-gradient(ellipse at 50% 22%, #f8efd9 0%, #ecdcb6 55%, #ddc899 100%),
    radial-gradient(circle at 12% 8%, rgba(120,80,20,.06), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(120,80,20,.07), transparent 42%);
  border:2px solid #b89b63;
  box-shadow:0 0 0 1px #7a5e14, 0 18px 60px rgba(0,0,0,.55);
  border-radius:4px;
  padding:38px 44px 30px;
}
@media (max-width:600px){ .scroll{ padding:26px 20px 22px; } body{ font-size:17px; } }

.kicker{ font-family:'Cinzel',Georgia,serif; letter-spacing:4px; text-transform:uppercase;
  font-size:11px; color:var(--gold-deep); text-align:center; }
h1{ font-family:'Cinzel',Georgia,serif; font-weight:700; color:#2f2213;
  font-size:clamp(28px,7vw,40px); line-height:1.08; letter-spacing:2px; text-align:center; margin:14px 0 6px; }
.subtitle{ font-style:italic; font-size:clamp(15px,4vw,18px); color:var(--ink-soft); text-align:center; margin:0 auto; max-width:34em; }
.subtitle b, .subtitle .blood{ color:var(--blood); font-style:normal; }
.byline{ font-size:13px; color:#7a6438; text-align:center; margin-top:14px; letter-spacing:.3px; }
.byline b{ color:var(--ink-soft); }

.crest{ display:block; margin:6px auto 2px; }

h2{ font-family:'Cinzel',Georgia,serif; font-weight:700; color:var(--blood);
  font-size:clamp(15px,4.4vw,18px); letter-spacing:1.4px; text-transform:uppercase;
  margin:30px 0 4px; }
h2 .num{ color:var(--gold-deep); }
.note{ font-style:italic; font-size:13px; color:#7a6438; margin:2px 0 0; }

p{ margin:12px 0; }
.lead::first-letter{ font-family:'Cinzel',Georgia,serif; font-size:58px; line-height:.82;
  float:left; color:var(--blood); font-weight:700; padding:6px 10px 0 0; }
b.k{ color:var(--ink-soft); } .blood{ color:var(--blood); }

.divider{ display:flex; align-items:center; gap:12px; margin:26px 2px 6px; }
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }
.divider span{ color:var(--gold-deep); font-size:17px; }

/* ---- character cards ---- */
.cast{ margin-top:6px; }
.card{ display:flex; gap:18px; align-items:center; padding:12px 0; border-bottom:1px dashed #d3bd8b; }
.card:last-child{ border-bottom:0; }
.medallion{ flex:0 0 auto; width:118px; height:118px; border-radius:50%; overflow:hidden;
  position:relative; background:#2a2118;
  box-shadow:0 0 0 4px var(--gold), 0 0 0 6px #7a5e14, 0 6px 14px rgba(0,0,0,.35); }
.medallion svg{ display:block; width:100%; height:100%; }
.medallion img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 12%; }
.medallion .initial{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel',Georgia,serif; font-size:46px; font-weight:700; color:#f0e6cf; }
.bio .name{ font-family:'Cinzel',Georgia,serif; font-weight:700; color:#2f2213; font-size:16px; letter-spacing:.6px; }
.bio .epithet{ color:var(--blood); font-style:italic; font-size:13px; margin:1px 0 5px; }
.bio .desc{ font-size:16.5px; line-height:1.5; }
@media (max-width:600px){
  .medallion{ width:88px; height:88px; box-shadow:0 0 0 3px var(--gold),0 0 0 5px #7a5e14; }
  .medallion .initial{ font-size:34px; }
  .card{ gap:14px; } .bio .desc{ font-size:16px; }
}

/* ---- concepts ---- */
.concept{ margin:10px 0; } .concept b{ color:var(--ink-soft); }
.concept .lat{ font-style:italic; color:#7a6438; }

/* ---- envoi ---- */
.envoi{ text-align:center; font-style:italic; color:var(--ink-soft); font-size:17px; line-height:1.85; margin:26px 0 6px; }
.envoi .blood{ font-style:normal; }
.sig{ text-align:center; margin-top:6px; }
.sig .who{ font-family:'Cinzel',Georgia,serif; color:var(--ink-soft); letter-spacing:1px; margin-top:4px; }
.sig .who b{ color:#2f2213; }

.foot{ border-top:1px solid #cbb583; margin-top:22px; padding-top:12px;
  font-style:italic; font-size:12.5px; color:#8a7448; text-align:center; line-height:1.6; }
.foot a{ color:var(--gold-deep); }

/* ---- index / choose ---- */
.choose{ display:flex; gap:20px; margin-top:26px; }
@media (max-width:600px){ .choose{ flex-direction:column; } }
.edition{ flex:1; text-decoration:none; color:inherit; display:block;
  background:rgba(255,255,255,.35); border:1px solid #cdb583; border-radius:6px;
  padding:18px; text-align:center; transition:transform .15s ease, box-shadow .15s ease; }
.edition:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.22); }
.edition .thumb{ width:104px; height:104px; margin:0 auto 12px; border-radius:50%; overflow:hidden;
  background:#2a2118; box-shadow:0 0 0 4px var(--gold),0 0 0 6px #7a5e14; }
.edition .thumb img, .edition .thumb svg{ width:100%; height:100%; object-fit:cover; object-position:center 12%; display:block; }
.edition .et{ font-family:'Cinzel',Georgia,serif; font-weight:700; color:#2f2213; font-size:16px; letter-spacing:.6px; }
.edition .ed{ font-size:14.5px; color:var(--ink-soft); margin-top:6px; }
.edition .go{ display:inline-block; margin-top:12px; font-family:'Cinzel',Georgia,serif; font-size:12px;
  letter-spacing:2px; text-transform:uppercase; color:var(--blood); border:1px solid var(--blood);
  padding:6px 14px; border-radius:3px; }
.backlink{ text-align:center; margin-top:24px; }
.backlink a{ font-family:'Cinzel',Georgia,serif; font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold-deep); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; }