
  :root{
    --ink:#23201c;
    --ink-soft:#4d463d;
    --paper:#f7f3ea;
    --paper-deep:#efe8da;
    --card:#fffdf8;
    --accent:#7a2e2e;
    --accent-soft:#a05555;
    --gold:#a8842c;
    --line:#d8cfbd;
    --fact:#2e6b45;
    --interp:#a8842c;
    --debate:#9c4a1f;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
    --sans:"Avenir Next",Avenir,"Segoe UI",Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--serif);
    background:var(--paper);
    color:var(--ink);
    line-height:1.65;
    font-size:17px;
  }
  /* ---- language switching ---- */
  html.lang-fr .en{display:none !important}
  html.lang-en .fr{display:none !important}

  a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(122,46,46,.3)}
  a:hover{border-bottom-color:var(--accent)}

  /* ---- nav ---- */
  nav{
    position:sticky;top:0;z-index:50;
    background:rgba(247,243,234,.95);backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:1rem;
    padding:.6rem 1.2rem;flex-wrap:wrap;
  }
  nav .brand{font-weight:700;letter-spacing:.02em;font-size:.95rem;border:none;color:var(--ink)}
  nav .links{display:flex;gap:.9rem;flex-wrap:wrap;font-family:var(--sans);font-size:.78rem}
  nav .links a{border:none;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
  nav .links a:hover{color:var(--accent)}
  .lang-switch{margin-left:auto;display:flex;gap:.3rem}
  .lang-switch button{
    font-family:var(--sans);font-size:.75rem;letter-spacing:.05em;
    padding:.25rem .6rem;border:1px solid var(--line);background:transparent;
    cursor:pointer;color:var(--ink-soft);border-radius:3px;
  }
  .lang-switch button.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

  /* ---- layout ---- */
  header.hero{
    max-width:880px;margin:0 auto;padding:5rem 1.5rem 3.5rem;text-align:center;
  }
  .hero .kicker{
    font-family:var(--sans);font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;
    color:var(--gold);margin-bottom:1.2rem;
  }
  .hero h1{font-size:clamp(2rem,5.5vw,3.4rem);line-height:1.15;font-weight:600;margin-bottom:1.2rem}
  .hero .subtitle{font-size:1.15rem;color:var(--ink-soft);max-width:640px;margin:0 auto 1.6rem;font-style:italic}
  .hero .promise{
    font-family:var(--sans);font-size:.85rem;color:var(--ink-soft);
    max-width:560px;margin:0 auto;padding-top:1.2rem;border-top:1px solid var(--line);
  }
  main{max-width:880px;margin:0 auto;padding:0 1.5rem 4rem}
  section{padding:3rem 0;border-top:1px solid var(--line)}
  h2{font-size:1.7rem;font-weight:600;margin-bottom:.4rem}
  .section-lede{color:var(--ink-soft);font-style:italic;margin-bottom:1.8rem;max-width:640px}
  h3{font-size:1.15rem;font-weight:700;margin:1.6rem 0 .5rem}
  p{margin-bottom:1rem}
  .section-num{
    font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold);display:block;margin-bottom:.5rem;
  }

  /* ---- epistemic badges ---- */
  .badge{
    display:inline-block;font-family:var(--sans);font-size:.62rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;padding:.14rem .5rem;border-radius:2px;
    vertical-align:middle;margin-right:.45rem;white-space:nowrap;
  }
  .badge.fact{background:rgba(46,107,69,.12);color:var(--fact);border:1px solid rgba(46,107,69,.35)}
  .badge.interp{background:rgba(168,132,44,.12);color:#7c6118;border:1px solid rgba(168,132,44,.4)}
  .badge.debate{background:rgba(156,74,31,.10);color:var(--debate);border:1px solid rgba(156,74,31,.4)}

  .legend{
    background:var(--card);border:1px solid var(--line);border-radius:6px;
    padding:1.2rem 1.4rem;margin:1.5rem 0;font-family:var(--sans);font-size:.85rem;
  }
  .legend div{margin:.45rem 0}

  /* ---- timeline ---- */
  .timeline{list-style:none;margin:2rem 0 0;position:relative;padding-left:1.6rem}
  .timeline:before{content:"";position:absolute;left:.35rem;top:.4rem;bottom:.4rem;width:2px;background:var(--line)}
  .timeline li{position:relative;margin-bottom:2rem;padding-left:.6rem}
  .timeline li:before{
    content:"";position:absolute;left:-1.53rem;top:.5rem;width:.65rem;height:.65rem;border-radius:50%;
    background:var(--gold);border:2px solid var(--paper);
  }
  .timeline .date{font-family:var(--sans);font-weight:700;font-size:.85rem;letter-spacing:.05em;color:var(--accent)}
  .timeline h3{margin:.15rem 0 .3rem;font-size:1.05rem}
  .timeline p{font-size:.95rem;color:var(--ink-soft);margin-bottom:.3rem}
  .why{font-size:.88rem;color:var(--ink);background:var(--paper-deep);border-left:3px solid var(--gold);padding:.5rem .8rem;border-radius:0 4px 4px 0;margin-top:.4rem}
  .why em{font-style:normal;font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.15rem}

  /* ---- force cards ---- */
  .forces{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1.6rem}
  .force{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1.2rem 1.3rem}
  .force h3{margin:0 0 .5rem;font-size:1.02rem}
  .force p{font-size:.9rem;color:var(--ink-soft);margin-bottom:.5rem}

  /* ---- author lenses ---- */
  .lens{
    background:var(--card);border:1px solid var(--line);border-radius:8px;
    padding:1.6rem 1.7rem;margin:1.6rem 0;
  }
  .lens .lens-head{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.3rem}
  .lens h3{margin:0;font-size:1.25rem}
  .lens .lens-tag{font-family:var(--sans);font-size:.75rem;color:var(--ink-soft);font-style:italic}
  .lens .keyidea{
    font-size:1.02rem;border-left:3px solid var(--accent);padding:.4rem .9rem;
    margin:.9rem 0;background:var(--paper-deep);border-radius:0 4px 4px 0;
  }
  .lens p{font-size:.95rem}
  .lens .meta{font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);margin-top:.9rem;padding-top:.8rem;border-top:1px dashed var(--line)}
  .lens .meta strong{color:var(--ink)}
  .lens .critics{font-size:.88rem;color:var(--ink-soft);font-style:italic;margin-top:.6rem}

  /* ---- convergence table ---- */
  .conv{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.6rem}
  @media(max-width:640px){.conv{grid-template-columns:1fr}}
  .conv .col{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1.2rem 1.4rem}
  .conv h3{margin:0 0 .8rem;font-size:1rem;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em}
  .conv ul{list-style:none}
  .conv li{font-size:.92rem;margin-bottom:.8rem;padding-left:1rem;position:relative;color:var(--ink-soft)}
  .conv li:before{content:"·";position:absolute;left:0;color:var(--gold);font-weight:700}

  /* ---- toolbox ---- */
  .tools{counter-reset:tool;margin-top:1.6rem}
  .tool{display:flex;gap:1rem;margin-bottom:1.4rem;align-items:flex-start}
  .tool .n{
    counter-increment:tool;flex:0 0 2rem;height:2rem;border-radius:50%;
    background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;
    font-family:var(--sans);font-weight:700;font-size:.9rem;
  }
  .tool .n:before{content:counter(tool)}
  .tool h3{margin:0 0 .25rem;font-size:1.02rem}
  .tool p{font-size:.92rem;color:var(--ink-soft);margin:0}

  /* ---- glossary ---- */
  .glossary{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1.6rem}
  .term{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1rem 1.1rem}
  .term h3{margin:0 0 .35rem;font-size:.95rem;color:var(--accent)}
  .term p{font-size:.86rem;color:var(--ink-soft);margin:0}

  /* ---- sources ---- */
  .sources{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.6rem}
  @media(max-width:640px){.sources{grid-template-columns:1fr}}
  .src-col h3{font-size:.95rem;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;margin:0 0 .8rem}
  .src-col ul{list-style:none}
  .src-col li{font-size:.9rem;margin-bottom:.55rem;color:var(--ink-soft)}

  footer{
    border-top:1px solid var(--line);background:var(--paper-deep);
    padding:2.5rem 1.5rem;text-align:center;font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);
  }
  footer p{max-width:640px;margin:0 auto .6rem}

/* ---- multi-page additions ---- */
nav .links a.active{color:var(--accent);border-bottom:1px solid var(--accent)}
main.page{max-width:880px;margin:0 auto;padding:0 1.5rem 3rem}
main.page > section{border-top:none;padding-top:2.5rem}
.page-intro{
  max-width:880px;margin:0 auto;padding:2.5rem 1.5rem 0;
}
.crumb{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
}
.crumb a{color:var(--ink-soft);border:none}
.crumb a:hover{color:var(--accent)}

/* home page */
.home-lede{max-width:880px;margin:0 auto;padding:0 1.5rem}
.home-lede h2{font-size:1.35rem;margin-bottom:.6rem}
.home-lede p{color:var(--ink-soft)}
.cards{
  max-width:880px;margin:0 auto;padding:2rem 1.5rem 1rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;
}
a.card{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:1.3rem 1.4rem;text-decoration:none;border-bottom:1px solid var(--line);
  transition:border-color .15s ease, transform .15s ease;
}
a.card:hover{border-color:var(--accent-soft);transform:translateY(-2px)}
a.card .card-num{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:.45rem;
}
a.card h3{margin:0 0 .4rem;font-size:1.1rem;color:var(--ink)}
a.card p{margin:0;font-size:.9rem;color:var(--ink-soft)}

/* start-here banner */
.start{
  max-width:880px;margin:1.5rem auto 0;padding:0 1.5rem;
}
.start-inner{
  background:var(--paper-deep);border-left:3px solid var(--gold);border-radius:0 6px 6px 0;
  padding:1.1rem 1.3rem;font-family:var(--sans);font-size:.9rem;color:var(--ink);
}
.start-inner a{font-weight:600}

/* pager */
.pager{
  max-width:880px;margin:0 auto;padding:1.5rem 1.5rem 3rem;
  display:flex;gap:1rem;justify-content:space-between;align-items:stretch;
  border-top:1px solid var(--line);
}
.pager a{
  flex:1 1 0;background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:.9rem 1.1rem;text-decoration:none;font-family:var(--sans);
}
.pager a:hover{border-color:var(--accent-soft)}
.pager .dir{
  display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.25rem;
}
.pager .ttl{font-size:.95rem;color:var(--ink)}
.pager a.next{text-align:right}
@media(max-width:560px){.pager{flex-direction:column}.pager a.next{text-align:left}}

@media(max-width:640px){
  header.hero{padding:2.5rem 1.5rem 2rem}
  nav{padding:.5rem .9rem}
  nav .links{gap:.6rem;font-size:.72rem}
}

/* ---- auto-hiding header on mobile ---- */
@media(max-width:640px){
  nav{transition:transform .25s ease}
  nav.hide{transform:translateY(-100%)}
}
@media(prefers-reduced-motion:reduce){
  nav{transition:none}
}
