/* ============================================================
   CanonAtlas — calm-authority editorial design system
   Type: Fraunces (display/serif headings + refs), Newsreader
   (reading serif — Scripture & prose), Spline Sans (UI/labels).
   Palette: Navy / Sand / Sage / Copper.
   ============================================================ */
:root{
  --navy:#132238; --navy-700:#1c3050; --navy-300:#5a6b80;
  --sand:#F4EFE5; --sand-deep:#EAE3D4; --paper:#FBF8F2;
  --sage:#7A8F73; --sage-deep:#5e7158;
  --copper:#B87333; --copper-deep:#9a5f29;
  --ink:#1d2430; --ink-soft:#46505e; --ink-faint:#7e8794;
  --rule:#e2dac9; --rule-soft:#ece5d6;
  --serif:"Newsreader",Georgia,serif;
  --display:"Fraunces","Newsreader",serif;
  --sans:"Spline Sans",system-ui,sans-serif;
  --measure:34rem;
  --shadow-card:0 1px 2px rgba(19,34,56,.04),0 8px 28px -12px rgba(19,34,56,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--serif);color:var(--ink);background:var(--paper);
  line-height:1.65;font-size:1.075rem;font-weight:400;
  display:flex;flex-direction:column;min-height:100vh;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.container{width:100%;max-width:72rem;margin:0 auto;padding:0 1.75rem}
a{color:var(--copper-deep);text-decoration:none}
a:hover{color:var(--copper)}

/* ---------- nav ---------- */
.nav{background:var(--navy);color:var(--sand);border-bottom:3px solid var(--copper)}
.nav-inner{display:flex;align-items:center;height:4.25rem}
.nav-logo{display:flex;align-items:center;gap:.65rem;color:var(--sand)}
.nav-logo-img{height:2.4rem;width:2.4rem}
.nav-logo-text{font-family:var(--display);font-weight:600;font-size:1.3rem;letter-spacing:.01em}
.nav-logo-text span{color:var(--copper)}

/* ---------- footer ---------- */
.footer{margin-top:auto;background:var(--navy);color:#9fb0c2;
  padding:2rem 0;text-align:center;font-family:var(--sans);font-size:.82rem;letter-spacing:.02em}

/* ---------- book hero / overview ---------- */
.book-hero{background:linear-gradient(177deg,var(--navy) 0%,var(--navy-700) 100%);
  color:var(--sand);padding:4.5rem 0 4rem;position:relative;overflow:hidden}
.book-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60rem 30rem at 75% -20%,rgba(184,115,51,.16),transparent 60%);pointer-events:none}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;font-weight:600;color:var(--sage);margin-bottom:1rem}
.book-title{font-family:var(--display);font-weight:600;font-size:clamp(2.8rem,7vw,5rem);
  line-height:1;letter-spacing:-.01em}
.book-core{font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.15rem,2.4vw,1.6rem);color:#d8dfe8;margin-top:1.25rem;max-width:40ch}
.book-body{padding:3.5rem 0 5rem}
.section-label{font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;
  font-size:.74rem;font-weight:600;color:var(--ink-faint);margin-bottom:.6rem}
.book-intro{font-size:1.2rem;color:var(--ink-soft);max-width:var(--measure);margin-bottom:2.5rem}
.chapter-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.85rem}
.chapter-item a{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1.25rem;
  background:#fff;border:1px solid var(--rule);border-radius:.6rem;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.chapter-item a:hover{border-color:var(--copper);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.chapter-num{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--navy)}
.chapter-meta{font-family:var(--sans);font-size:.78rem;color:var(--ink-faint);letter-spacing:.02em}

/* ---------- chapter head ---------- */
.chapter-head{background:var(--navy);color:var(--sand);padding:2.75rem 0 2.5rem;
  border-bottom:3px solid var(--copper)}
.back-link{font-family:var(--sans);font-size:.82rem;color:var(--sage);letter-spacing:.04em}
.back-link:hover{color:var(--copper)}
.chapter-h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,5vw,3.4rem);
  margin-top:.5rem;line-height:1}
.chapter-body{padding:0 1.75rem 5rem;max-width:48rem}

/* ---------- the unit ---------- */
.unit{padding:3.5rem 0;border-bottom:1px solid var(--rule)}
.unit:first-child{padding-top:3rem}
.unit-head{margin-bottom:1.75rem}
.unit-title{font-family:var(--display);font-weight:600;font-size:1.9rem;color:var(--navy);
  line-height:1.12;letter-spacing:-.01em}
.unit-ref{font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper-deep);font-weight:600;margin-top:.45rem}

/* steps share a quiet label system */
.step{margin:2rem 0}
.step-label{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;
  font-size:.7rem;font-weight:700;color:var(--ink-faint);
  display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.step-label::after{content:"";flex:1;height:1px;background:var(--rule-soft)}

/* READ — the verbatim, set like a study edition */
.verbatim{font-family:var(--serif);font-size:1.22rem;line-height:1.85;color:var(--ink)}
.verse{margin-bottom:.5rem;text-indent:0}
.verse sup{font-family:var(--sans);font-size:.62rem;font-weight:600;color:var(--copper);
  vertical-align:super;margin-right:.15rem;letter-spacing:0}

/* prose: summary + context + structure */
.unit-prose{margin:1.75rem 0 .5rem;max-width:var(--measure)}
.summary{font-size:1.12rem;color:var(--ink);margin-bottom:1rem}
.meta{font-family:var(--serif);font-size:1rem;color:var(--ink-soft);margin-top:.6rem;
  padding-left:1rem;border-left:2px solid var(--rule)}
.meta span{font-family:var(--sans);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;color:var(--ink-faint)}

/* TEST */
.checkpoints{list-style:none;counter-reset:cp}
.checkpoints li{counter-increment:cp;position:relative;padding:.7rem 0 .7rem 2.4rem;
  border-bottom:1px solid var(--rule-soft);font-size:1.05rem;color:var(--ink-soft)}
.checkpoints li::before{content:counter(cp);position:absolute;left:0;top:.7rem;
  width:1.5rem;height:1.5rem;border-radius:50%;background:var(--sand);
  font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--navy);
  display:flex;align-items:center;justify-content:center}

/* DISCOVER — the payload, slightly elevated */
.step-discover{background:#fff;border:1px solid var(--rule);border-radius:.7rem;
  padding:1.5rem 1.6rem;margin:2.25rem 0}
.step-discover .step-label{color:var(--sage-deep)}
.step-discover .step-label::after{background:var(--sage);opacity:.25}
.themes{list-style:none;display:flex;flex-direction:column;gap:1rem}
.theme{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline}
.theme-name{font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--navy);white-space:nowrap}
.theme .badge{font-style:normal;font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--copper-deep);background:rgba(184,115,51,.1);padding:.1rem .4rem;border-radius:.25rem;margin-left:.3rem}
.theme-secondary .theme-name{color:var(--ink-faint);font-weight:500}
.theme-expr{font-family:var(--serif);font-size:1.02rem;color:var(--ink-soft);line-height:1.5}

/* CONNECT — relationships, the atlas in miniature */
.step-connect{margin:2.25rem 0}
.step-connect .step-label{color:var(--copper-deep)}
.step-connect .step-label::after{background:var(--copper);opacity:.25}
.connect-intro{font-family:var(--sans);font-size:.9rem;color:var(--ink-faint);margin-bottom:.85rem}
.connections{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.connections li{padding:.7rem .9rem;background:var(--sand);border-radius:.5rem;
  font-size:1rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
  border-left:3px solid var(--copper)}
.connections a{font-family:var(--display);font-weight:500;color:var(--navy)}
.connections a:hover{color:var(--copper-deep)}
.connections .via{font-family:var(--sans);font-size:.74rem;color:var(--ink-faint);letter-spacing:.02em}

/* reflection — the quiet pause */
.reflection{font-family:var(--display);font-style:italic;font-size:1.15rem;color:var(--sage-deep);
  margin-top:2rem;padding:1.25rem 0 0;text-align:center;max-width:38ch;margin-inline:auto}

/* chapter nav */
.chapter-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;
  font-family:var(--display);font-weight:500}
.chapter-nav a{padding:.85rem 1.3rem;border:1px solid var(--rule);border-radius:.5rem;color:var(--navy);
  transition:border-color .18s,background .18s}
.chapter-nav a:hover{border-color:var(--copper);background:#fff}
.nav-next{margin-left:auto}

/* ---------- landing hero (home) ---------- */
.hero{flex:1;display:flex;align-items:center;
  background:linear-gradient(170deg,var(--navy-700) 0%,var(--navy) 75%);color:var(--sand);
  position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(50rem 28rem at 70% -10%,rgba(184,115,51,.18),transparent 60%);pointer-events:none}
.hero-inner{text-align:center;padding:5.5rem 1.5rem}
.hero-logo{height:6.5rem;width:6.5rem;margin-bottom:2rem;filter:drop-shadow(0 8px 28px rgba(0,0,0,.4))}
.hero-title{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,5.5vw,3.8rem);
  line-height:1.08;max-width:18ch;margin-inline:auto;letter-spacing:-.01em}
.hero-title em{font-style:italic;color:var(--copper)}
.hero-tagline{font-size:clamp(1.1rem,2vw,1.35rem);color:#cfd8e3;max-width:46ch;margin:1.5rem auto 2rem}
.hero-soon{display:inline-block;font-family:var(--sans);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:.74rem;color:var(--sage);
  border:1px solid var(--sage);padding:.55rem 1.2rem;border-radius:2rem}

/* responsive */
@media(max-width:640px){
  body{font-size:1.02rem}
  .verbatim{font-size:1.12rem}
  .theme{grid-template-columns:1fr;gap:.2rem}
  .chapter-body{padding-left:1.25rem;padding-right:1.25rem}
}