:root{
  --ground:#0a1220;
  --ground-2:#0e1a2c;
  --line:#1d2b40;
  --line-soft:#162335;
  --ink:#e9e6df;
  --ink-dim:#8798ad;
  --gold:#c9a15e;
  --gold-bright:#e0bd80;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Spectral",Georgia,"Times New Roman",serif;
  --plate:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --measure:64ch;
}
*{box-sizing:border-box}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.75;
  margin:0;
  padding-inline:24px;
  padding-block:0;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:860px;margin-inline:auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-bright)}

/* ---- plates: the small uppercase labels, like a placard on a panel ---- */
.plate{
  font-family:var(--plate);
  font-size:.6875rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-dim);
  font-weight:400;
}

/* ---- masthead ---- */
.masthead{
  padding-block:56px 0;
  border-bottom:1px solid var(--line-soft);
  padding-bottom:20px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  align-items:baseline;
  justify-content:space-between;
}
.masthead .name{
  font-family:var(--plate);
  font-size:.75rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink);
}

/* ---- hero: the thesis ---- */
.hero{padding-block:72px 64px;max-width:var(--measure)}
.hero h1{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2.4rem,6.2vw,3.9rem);
  line-height:1.08;
  margin:20px 0 0;
  text-wrap:balance;
  letter-spacing:-.005em;
}
.hero h1 em{
  font-style:italic;
  color:var(--gold-bright);
}
.hero .lede{
  margin-top:28px;
  font-size:1.1875rem;
  line-height:1.7;
  color:var(--ink);
}
.hero .sub{
  margin-top:18px;
  color:var(--ink-dim);
}

/* ---- section framing ---- */
section{padding-block:60px;border-top:1px solid var(--line-soft)}
.section-head{margin-bottom:8px}
h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.75rem,4vw,2.4rem);
  line-height:1.15;
  margin:10px 0 0;
  text-wrap:balance;
}
.prose{max-width:var(--measure)}
.prose p{margin:1.1em 0}

/* ---- the three books ---- */
.book{
  display:grid;
  grid-template-columns:168px 1fr;
  gap:36px;
  padding-block:48px;
  border-top:1px solid var(--line);
  align-items:start;
}
.book:first-of-type{border-top:none;padding-top:28px}
.book .cover{
  border:1px solid var(--line);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.95);
}
.book h3{
  font-family:var(--display);
  font-weight:600;
  font-size:1.75rem;
  line-height:1.15;
  margin:10px 0 0;
  text-wrap:balance;
}
.book .tagline{
  color:var(--gold);
  font-style:italic;
  margin:6px 0 0;
}
.book .blurb{margin:18px 0 0;max-width:52ch}
.book .pull{
  margin:20px 0 0;
  padding-left:18px;
  border-left:2px solid var(--gold);
  color:var(--ink);
  font-style:italic;
  max-width:50ch;
}
.meta{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  align-items:center;
}
.buy{
  font-family:var(--plate);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ground);
  background:var(--gold);
  text-decoration:none;
  padding:11px 20px;
  border-radius:2px;
  display:inline-block;
  transition:background .18s ease;
}
.buy:hover,.buy:focus-visible{background:var(--gold-bright)}
.fmt{color:var(--ink-dim);font-size:.9375rem}

/* ---- the three principles ---- */
.tenets{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:34px;
}
.tenet h4{
  font-family:var(--display);
  font-size:1.3125rem;
  font-weight:600;
  margin:10px 0 0;
  color:var(--gold-bright);
}
.tenet p{margin:8px 0 0;font-size:1rem;color:var(--ink-dim)}

/* ---- author ---- */
.author p{margin:1.1em 0}
.author .close{
  font-family:var(--display);
  font-size:1.5rem;
  font-style:italic;
  color:var(--gold-bright);
  margin-top:28px;
  line-height:1.4;
}

/* ---- questions ---- */
.qa{margin-top:26px;max-width:var(--measure)}
.qa dt{
  font-family:var(--display);
  font-size:1.3125rem;
  font-weight:600;
  margin-top:30px;
}
.qa dd{margin:8px 0 0;color:var(--ink-dim)}

footer{
  border-top:1px solid var(--line-soft);
  padding-block:44px 64px;
  color:var(--ink-dim);
  font-size:.9375rem;
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  justify-content:space-between;
}

a:focus-visible,.buy:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}

@media (max-width:560px){
  .book{grid-template-columns:1fr;gap:24px}
  .book .cover{max-width:190px}
}

/* ---- book pages ---- */
.crumb{padding-block:34px 0}
.crumb a{color:var(--ink-dim);text-decoration:none;font-family:var(--plate);
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase}
.crumb a:hover{color:var(--gold-bright)}
.bookhead{
  display:grid;grid-template-columns:230px 1fr;gap:44px;
  padding-block:44px 56px;align-items:start;
}
.bookhead .cover{border:1px solid var(--line);box-shadow:0 22px 50px -24px rgba(0,0,0,.95)}
.bookhead h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2rem,5vw,2.9rem);line-height:1.1;
  margin:12px 0 0;text-wrap:balance;
}
.bookhead .tagline{color:var(--gold);font-style:italic;font-size:1.125rem;margin:10px 0 0}
.bookhead .facts{
  margin-top:20px;display:flex;flex-wrap:wrap;gap:6px 20px;
  color:var(--ink-dim);font-size:.9375rem;
}
.pitch p{margin:1.15em 0}
.pitch .open{
  font-family:var(--display);font-size:1.5rem;line-height:1.35;
  color:var(--ink);font-style:italic;margin-top:0;
}
/* the claims: what the book actually answers */
.answers{list-style:none;padding:0;margin:30px 0 0;max-width:var(--measure)}
.answers li{
  padding:18px 0 18px 26px;border-top:1px solid var(--line-soft);
  position:relative;
}
.answers li:first-child{border-top:none}
.answers li::before{
  content:"";position:absolute;left:0;top:29px;
  width:9px;height:1px;background:var(--gold);
}
.answers strong{font-weight:600;color:var(--gold-bright);font-style:normal}
/* the other two books */
.alsoin{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:32px;margin-top:30px}
.alsoin a{text-decoration:none;color:inherit;display:block}
.alsoin img{width:96px;border:1px solid var(--line);margin-bottom:14px}
.alsoin h3{font-family:var(--display);font-size:1.3125rem;font-weight:600;margin:0}
.alsoin p{margin:4px 0 0;color:var(--ink-dim);font-size:.9375rem}
.alsoin a:hover h3{color:var(--gold-bright)}
.backhome{margin-top:12px}
@media (max-width:620px){
  .bookhead{grid-template-columns:1fr;gap:26px}
  .bookhead .cover{max-width:210px}
}

.book h3 a{color:inherit;text-decoration:none}
.book h3 a:hover,.book h3 a:focus-visible{color:var(--gold-bright)}
.more{font-family:var(--plate);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-bright);text-decoration:none}
.more:hover{text-decoration:underline}

.disclaimer{
  border-top:1px solid var(--line-soft);
  padding-block:26px 0;margin-top:0;
  max-width:var(--measure);
  color:var(--ink-dim);font-size:.875rem;line-height:1.65;
}
.disclaimer + footer{border-top:none;padding-block:18px 64px}

/* un seul mot mis en avant dans un paragraphe courant */
.key{color:var(--gold-bright);font-weight:400;font-style:italic}

/* ---- pages de questions ---- */
.artichead{padding-block:40px 0;max-width:var(--measure)}
.artichead h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2rem,5vw,2.9rem);line-height:1.12;
  margin:12px 0 0;text-wrap:balance;
}
.artichead .standfirst{margin-top:18px;color:var(--ink-dim);font-size:1.0625rem}
.opening{max-width:var(--measure);padding-block:26px 0}
.opening p{margin:1.05em 0;font-size:1.1875rem;line-height:1.7}
.opening p:first-child{
  font-family:var(--display);font-size:1.6rem;line-height:1.35;
  font-style:italic;color:var(--gold-bright);margin-top:0;
}
.qa-long{padding-block:16px 48px;max-width:var(--measure)}
.qa-long h2{
  font-family:var(--display);font-weight:600;
  font-size:1.5rem;line-height:1.2;
  margin:44px 0 0;color:var(--gold-bright);
  text-wrap:balance;
}
.qa-long h2:first-child{margin-top:26px}
.qa-long p{margin:1.05em 0}
.fromthebook{
  display:grid;grid-template-columns:120px 1fr;gap:28px;
  align-items:start;
  border-top:1px solid var(--line);
  padding-block:36px 8px;
}
.fromthebook img{border:1px solid var(--line)}
.fromthebook p{margin:10px 0 0;color:var(--ink-dim);font-size:.9375rem;max-width:52ch}
.fromthebook .meta{margin-top:20px}
@media (max-width:560px){
  .fromthebook{grid-template-columns:1fr;gap:20px}
  .fromthebook img{max-width:110px}
}

/* ---- liste des lectures gratuites ---- */
.reads{list-style:none;padding:0;margin:26px 0 0;max-width:var(--measure)}
.reads li{border-top:1px solid var(--line-soft)}
.reads li:first-child{border-top:none}
.reads a{display:block;padding:20px 0;text-decoration:none;color:inherit}
.reads strong{
  display:block;font-family:var(--display);font-weight:600;
  font-size:1.3125rem;color:var(--ink);line-height:1.2;
}
.reads span{display:block;margin-top:6px;color:var(--ink-dim);font-size:.9375rem}
.reads a:hover strong,.reads a:focus-visible strong{color:var(--gold-bright)}

.qa-long h3{
  font-family:var(--display);font-weight:600;font-size:1.1875rem;
  margin:30px 0 0;color:var(--ink);
}

/* ---- renvois entre articles ---- */
.nextread,.prevread{
  max-width:var(--measure);margin:0;
  border-top:1px solid var(--line-soft);
  padding-block:22px;
}
.prevread{border-top:none;border-bottom:1px solid var(--line-soft);margin-bottom:8px}
.nextread a,.prevread a{font-family:var(--display);font-size:1.25rem;font-weight:600}
.nextread span,.prevread span{display:inline-block;margin-top:6px;color:var(--ink-dim);font-size:.9375rem}

.extract-note{
  max-width:var(--measure);margin:14px 0 0;
  color:var(--ink-dim);font-size:.9375rem;font-style:italic;
}

.qa-long blockquote{
  margin:26px 0;padding:2px 0 2px 20px;
  border-left:2px solid var(--gold);
  color:var(--ink);
}
.qa-long blockquote p{margin:.7em 0;font-size:1rem}

/* ---- note Amazon ---- */
.rating{
  margin:14px 0 0;font-size:.9375rem;color:var(--ink-dim);
  display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline;
}
.rating .stars{color:var(--gold);letter-spacing:.12em;font-size:.875rem}
.rating .count{color:var(--ink-dim)}
.book .rating{margin-top:18px}

.rating.series{margin-top:18px;font-size:1rem}
.rating.series .stars{font-size:1rem}