/* Concept : site sombre, nuit indigo et or du glaive, couverture au centre du héros, texte en colonne étroite. */
:root{
  --night:#0d1033; --night2:#151a4a; --gold:#d9ae45; --goldgrad:linear-gradient(100deg,#8f6a1c 0%,#e9c964 22%,#fff0b3 38%,#d4a43a 55%,#a37a22 75%,#e6c35c 100%); --ivory:#f1ece0; --mist:#b9b7d3; --line:#2e336e;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Spectral",Georgia,"Times New Roman",serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ivory);font-family:var(--body);font-size:1.08rem;line-height:1.75;padding-inline:1rem}
a{color:var(--gold)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:68rem;margin-inline:auto}
header{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:baseline;justify-content:space-between;padding-block:1.1rem}
.brand{font-family:var(--display);font-weight:700;font-size:1.3rem;text-decoration:none;letter-spacing:.02em}
nav{display:flex;flex-wrap:wrap;gap:.2rem 1.5rem}
nav a{color:var(--mist);text-decoration:none;font-size:.98rem}
nav a:hover{color:var(--gold)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:3.5rem;align-items:center;padding-block:2.5rem 4.5rem}
.eyebrow{font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 1.2rem}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0;text-wrap:balance}
h1,h2,.sub,.brand,.panel h3{background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
h1{font-size:clamp(3.4rem,9vw,6rem);font-weight:600;letter-spacing:.04em}
.sub{font-family:var(--display);font-style:italic;font-size:clamp(1.6rem,4vw,2.3rem);padding-bottom:.1em;margin:.5rem 0 2rem}
.hook{font-family:var(--display);font-size:clamp(1.35rem,3vw,1.7rem);line-height:1.4;max-width:30rem;margin:0 0 1.2rem}
.author{color:var(--mist);margin:0 0 2.2rem}
.btns{display:flex;flex-wrap:wrap;gap:.8rem}
.btn{display:inline-block;padding:.85rem 1.6rem;text-decoration:none;font-weight:500;border:1px solid var(--gold);border-radius:2px}
.btn.main{background:var(--goldgrad);color:#1a1405;border-color:#a37a22;font-weight:600}
.btn.alt{color:var(--gold)}
.btn:hover{opacity:.88}
.cover{display:block;width:100%;height:auto;max-width:100%;filter:drop-shadow(0 0 40px rgba(217,174,69,.28)) drop-shadow(0 22px 30px rgba(0,0,0,.55))}
section{padding-block:4.5rem;border-top:1px solid transparent;border-image:var(--goldgrad) 1;border-image-slice:1}
section{border-width:1px 0 0}
h2{font-size:clamp(2.1rem,5vw,3.2rem);font-weight:600;margin-bottom:1.6rem;padding-bottom:.1em}
.text{max-width:40rem}
.text p{margin:0 0 1.3rem}
.lead{font-family:var(--display);font-size:1.6rem;line-height:1.35;font-weight:600;color:var(--ivory)}
.panel{background:var(--night2);border:1px solid var(--line);padding:1.8rem;max-width:40rem}
.panel h3{font-size:1.75rem;margin-bottom:.7rem}
.panel p{margin:.4rem 0}
.muted{color:var(--mist)}
.page{max-width:40rem;background:var(--night2);border:1px solid var(--line);padding:clamp(1.4rem,4vw,2.8rem)}
.page .chap{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);margin:0 0 1rem}
.page h3{font-size:clamp(1.8rem,4vw,2.3rem);margin-bottom:1.4rem;background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.1em}
.page p{margin:0 0 1rem;text-align:left;hyphens:auto}
.page .first::first-letter{font-family:var(--display);font-weight:700;float:left;font-size:4.2rem;line-height:.8;padding:.3rem .5rem 0 0;color:var(--gold)}
.page .flash{font-family:var(--display);font-size:1.7rem;line-height:1.3;font-weight:600;color:var(--gold);margin:1.8rem 0;padding-left:1.2rem;border-left:2px solid var(--gold)}
.page .more{margin:1.8rem 0 0;color:var(--mist);font-style:italic}
.pub{margin:0;max-width:30rem}
.pub img{display:block;width:100%;height:auto;max-width:100%;border:1px solid var(--line)}
.todo{display:inline-block;border:1px dashed var(--gold);padding:.1rem .6rem;color:var(--gold)}
footer{padding-block:2rem 3rem;border-top:1px solid var(--line);color:var(--mist);font-size:.95rem}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:2.5rem;padding-block:1.5rem 3rem}
  .cover-wrap{order:-1;max-width:17rem;margin-inline:auto}
  section{padding-block:3rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

nav a[aria-current="page"]{color:var(--gold);border-bottom:1px solid var(--gold)}
.pagehead{padding-block:3rem 1rem}
.pagehead h1{font-size:clamp(2.4rem,7vw,4.2rem);letter-spacing:.02em}
.pagehead p{max-width:40rem;color:var(--mist);margin:1rem 0 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem;margin-top:1rem}
.card{display:block;background:var(--night2);border:1px solid var(--line);padding:1.5rem;text-decoration:none;color:var(--ivory)}
.card:hover{border-color:var(--gold)}
.card h3{font-size:1.6rem;color:var(--gold);margin-bottom:.5rem}
.card p{margin:0;color:var(--mist);font-size:1rem;line-height:1.55}
.excerpt{margin-bottom:3rem}
.toc{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.5rem 0 0;padding:0;list-style:none}
.toc a{color:var(--mist);text-decoration:none;border-bottom:1px solid var(--line)}
.toc a:hover{color:var(--gold)}
.quote{font-family:var(--display);font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.35;margin:0 0 1.6rem;padding-left:1.2rem;border-left:2px solid var(--gold);max-width:40rem}
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.6rem;margin-top:1rem}
.video iframe{width:100%;aspect-ratio:16/9;border:1px solid var(--line);background:#000}
.video h3{font-size:1.4rem;margin:.7rem 0 .2rem;color:var(--ivory)}
.video p{margin:0;color:var(--mist);font-size:.95rem}
.cta{padding-block:3.5rem}