:root{
    --paper: #F1EFE7;
    --paper-alt: #EAE5D6;
    --ink: #262519;
    --ink-soft: #57544A;
    --ink-faint: #8A8674;
    --forest: #3E4A34;
    --forest-dark: #2C3626;
    --oxblood: #6B3430;
    --brass: #9C7F3F;
    --line: #D9D3C0;
    --line-strong: #C7BFA6;
    --tag-new-bg: #DCE6D0;
    --tag-new-text: #3B4A2E;
    --tag-updated-bg: #EEDFB6;
    --tag-updated-text: #6B4F23;
    --max: 1120px;
    --header-h: 84px;
    --c-hero-img: url('/images/hero-background.jpg');
  }

  :root[data-theme="dark"]{
    --paper: #100F0C;
    --paper-alt: #1A1812;
    --ink: #ECE7D8;
    --ink-soft: #B7B29E;
    --ink-faint: #837E6B;
    --forest: #8BA47C;
    --forest-dark: #A3BB94;
    --oxblood: #C98E82;
    --brass: #C7A968;
    --line: #2E2B21;
    --line-strong: #3D3929;
    --tag-new-bg: #2A3524;
    --tag-new-text: #BFE0AA;
    --tag-updated-bg: #3E331C;
    --tag-updated-text: #E8C77E;
  }
  
  :root[data-theme="dark"] .a-audio audio {
    color-scheme: dark;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
    html.share-sheet-open,
  html.share-sheet-open body{
    overflow: hidden;
    overscroll-behavior: none;
  }
  /* iOS / mobile: stop rubber-band scroll behind the sheet */
  html.share-sheet-open body{
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
  }
  
    html{
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
  }
  body{
    transition: background-color .2s ease, color .2s ease;
    margin:0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, .display{
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    color: var(--ink);
    margin: 0;    
  }
  
 h2 {
 font-size: 1.7rem;}
 
 p {
    font-size: 1.15rem;color:var(--ink-soft);}

  a{ color: inherit; text-decoration: none; }
  img{ max-width:100%; display:block; }

  .wrap{
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 28px;
  }

  /* ---------- Header ---------- */
  header{
    position: sticky;
    top: 0;
    background: transparent;
    z-index: 50;
    transition: background-color .25s ease, backdrop-filter .25s ease;
  }
  header.scrolled{
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(6px);
    z-index:5;
  }
  .header-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px;
    max-width: var(--max);
    margin: 0 auto;
  }
  .logo{
    font-family:'Fraunces', serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .site-logo{
    display: block;
    width: auto;
    height: 39px;
    max-width: 220px;
    object-fit: contain;
  }
  .logo-dark{ display: none; }
  :root[data-theme="dark"] .logo-light{ display: none; }
  :root[data-theme="dark"] .logo-dark{ display: block; }
  .logo-mark{
    width: 26px; height: 26px;
    border: 1.4px solid var(--forest);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:'Fraunces',serif;
    font-size: 0.85rem;
    color: var(--forest);
    flex-shrink:0;
  }
  .header-actions{
    display:flex;
    align-items:center;
    gap: 13px;
  }
  nav.primary{
    display:flex;
  }
  .nav-links{
    display:flex;
    gap: 34px;
  }
  nav.primary .nav-links a{
    font-size: 1rem;
    color: var(--ink-soft);
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
  }
  nav.primary .nav-links a:hover{ color: var(--forest); border-color: var(--forest); }
  
  @media (max-width: 640px) {
    body.nav-open .menu-toggle {
        position: fixed;
        top: 30px;
        right: 20px;
    }
}
  /* ---------- Mobile drawer (hidden on desktop) ---------- */
  .nav-scrim{ display: none; }
  .nav-callout{ display: none; }
  body.nav-open{ overflow: hidden; }
  /* book picker open on a phone/tablet: freeze the page behind it (JS sets body top to keep the scroll position) */
  body.picker-locked{ position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

  .theme-toggle{
    background:none;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    cursor:pointer;
    width: 36px; height: 36px;
    display:flex; align-items:center; justify-content:center;
    color: var(--ink-soft);
    flex-shrink:0;
    transition: color .15s ease, border-color .15s ease;
  }
  .theme-toggle:hover{ color: var(--forest); border-color: var(--forest); }
  .theme-toggle .icon-sun{ display:none; }
  [data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
  [data-theme="dark"] .theme-toggle .icon-sun{ display:block; }

  .menu-toggle{
    display:none;
    background:none; border:none; cursor:pointer;
    width: 22px; height: 15px;
    position:relative;
    z-index: 110;
  }
  .menu-toggle span{
    position:absolute; left:0; right:0; height:1.4px;
    background:var(--ink);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease, top .2s ease;
  }
  .menu-toggle span:nth-child(1){ top:0; }
  .menu-toggle span:nth-child(2){ top:6px; }
  .menu-toggle span:nth-child(3){ top:12px; }
  .menu-toggle.open span:nth-child(1){ top:6px; transform: rotate(45deg); }
  .menu-toggle.open span:nth-child(2){ opacity:0; }
  .menu-toggle.open span:nth-child(3){ top:6px; transform: rotate(-45deg); }

  .menu-toggle.open span{ background: var(--paper); }


  /* ---------- Hero ---------- */
  .hero{
    text-align:center;
    padding: calc(92px + var(--header-h)) 28px 120px;
    margin-top: calc(-1 * var(--header-h));
    margin-bottom: -3px;
    background-image:
      linear-gradient(color-mix(in srgb, var(--paper) 82%, transparent) 0%, var(--paper) 100%),
      url('/images/hero-background.jpg');
    background-size: cover;
    background-position: center;
  }
  .hero-inner{
    max-width: 780px;
    margin: 0 auto;
  }
  .hero .kicker{
    font-family:'EB Garamond', serif;
    font-style: italic;
    color: var(--ink-faint);
    margin-bottom: 26px;
  }
  
  .hero .kicker, .a-landing-hero .kicker{  
   font-size: 1.35rem;}
  
  @media (max-width: 720px){
    .hero .kicker, .a-landing-hero .kicker{  
   font-size: 1.15rem;}
  }
  
  
  .hero blockquote{
    margin: 0 0 20px;
    font-family:'Fraunces', serif;
    font-weight: 500;
    font-size: clamp(1.9rem, 4.2vw, 3.5rem);
    line-height: 1.28;
    color: var(--ink);
  }
  .hero cite{
    display:block;
    font-style: normal;
    font-family:'EB Garamond', serif;
    color: var(--oxblood);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    margin-bottom: 34px;
  }
  .hero p.lede{
    color: var(--ink-soft);
    font-size: 1.15rem;
    line-height: 1.65;
    margin: 0 auto 36px;
    max-width: 560px;
  }
  .hero-divider{
    width: 46px;
    height: 1px;
    background: var(--line-strong);
    margin: 0 auto 34px;
  }
  
  /* search */
  
  .nav-search{ position: relative;    padding-left: 14px; }
.nav-search-toggle{
  background:none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor:pointer;
  width: 36px; height: 36px;
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-soft);
  flex-shrink:0;
  transition: color .15s ease, border-color .15s ease;
}
.nav-search-toggle:hover{ color: var(--forest); border-color: var(--forest); }

.nav-search-panel{
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 340px;
  max-width: calc(100vw);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  z-index: 60;
}
.nav-search-panel[hidden]{ display:none; }
.nav-search-panel .hero-search{
  display:flex; align-items:center; height: 46px;
  border: 1px solid var(--line-strong);
  background: var(--paper-alt);
  border-radius: 999px;
  padding: 4px 4px 4px 18px;
}
.nav-search-panel .hero-search input{
  flex:1; height:100%; border:none; background:transparent; outline:none;
  font-family:'EB Garamond', serif; font-size: 1rem; color: var(--ink); min-width:0;
}
.nav-search-panel .hero-search input::placeholder{ color: var(--ink-faint); }
.nav-search-panel .hero-search button{
  background: var(--forest); border:none; cursor:pointer; color: var(--paper);
  display:flex; align-items:center; justify-content:center;
  width: 36px; height:36px; border-radius: 50%; flex-shrink:0;
  transition: background-color .15s ease;
}
.nav-search-panel .hero-search button:hover{ background: var(--forest-dark); }

.nav-search-suggestions{
  list-style:none; margin: 10px 0 0; padding: 4px 0 0;
  max-height: 260px; overflow-y:auto;
  scrollbar-width: thin;
scrollbar-color: var(--line-strong) transparent;
}
.nav-search-suggestions li{
  padding: 9px 10px; font-size: 0.96rem; cursor:pointer; color: var(--ink); border-radius: 8px;
}
.nav-search-suggestions li:hover:not(.is-disabled){ background: var(--paper-alt); }
.nav-search-suggestions li.is-disabled{ color: var(--ink-faint); font-style:italic; cursor:not-allowed; }
.nav-search-suggestions li.is-empty{ color: var(--ink-faint); font-style:italic; cursor:default; }
.nav-search-suggestions li.is-empty:hover{ background:none; }


@media (max-width: 720px){
  .nav-search-panel{ position: fixed; top: var(--header-h); left: 16px; right:16px; width:auto; }
}
  
  
  
  /* =====================================================================
   REPLACE the search block you added to /assets/style.css with this one
   (header dropdown + /search page). Uses your site variables, so dark mode just works.
   ===================================================================== */

/* ---- header dropdown ---- */
.nav-search-suggestions a { display:block; color:inherit; text-decoration:none; padding:.6rem .9rem; }
.nav-search-suggestions li.is-active,
.nav-search-suggestions li:hover { background: var(--paper-alt); }
.nav-search-suggestions li.is-disabled, .nav-search-suggestions li.is-empty { padding:.6rem .9rem; color: var(--ink-faint); }
.nav-search-suggestions .ns-label { display:block; font-family:'Fraunces', serif; font-size:.98rem; color: var(--ink); }
.nav-search-suggestions .ns-label em { font-family:'EB Garamond', serif; font-style:normal; font-size:.76rem; color: var(--ink-faint); margin-left:.45em; text-transform:uppercase; letter-spacing:.08em; }
.nav-search-suggestions .ns-snip { display:block; font-size:.9rem; color: var(--ink-soft); line-height:1.35; margin-top:.15rem; }
.nav-search-suggestions li.ns-all a { font-size:.92rem; color: var(--forest); border-top:1px solid var(--line); }

mark { background: var(--tag-updated-bg); color: var(--tag-updated-text); padding:0 .12em; border-radius:2px; }

/* ---- /search page ---- */
.search-hero { text-align:center; padding: 64px 0 8px; }
.search-hero .kicker { font-family:'EB Garamond', serif; font-style:italic; color: var(--ink-faint); font-size:1.05rem; margin:0 0 14px; }
.search-hero h1 { font-family:'Fraunces', serif; font-weight:500; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height:1.2; color: var(--ink); margin:0 auto 24px; max-width: 18em; }
.search-hero .hero-divider { margin: 0 auto 30px; }
.search-page-form { max-width: 620px; margin: 0 auto; }

.search-filters { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin: 26px 0 0; }
.search-filters a {
  display:inline-flex; align-items:center; gap:8px; padding: 8px 18px; border-radius:999px;
  border:1px solid var(--line-strong); color: var(--ink-soft); font-size:1rem; text-decoration:none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.search-filters a:hover { border-color: var(--forest); color: var(--forest); }
.search-filters a.is-current { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.search-filters .count { font-size:.82rem; opacity:.75; }

.search-count.center {text-align:center;}
.search-body { padding: 40px 0 90px; }
.search-body .wrap { max-width: 760px; }
.search-note, .search-count {  color: var(--ink-soft); margin: 27px 0;  margin-bottom: 32px; }
.search-count { font-style:italic; color: var(--ink-faint); }
.search-note a { color: var(--forest); }
.search-note .ch-link { display:inline-block; min-width:2em; padding:2px 10px; margin:0 3px; border:1px solid var(--line-strong); border-radius:999px; text-align:center; text-decoration:none; }
.search-note .ch-link:hover { background: var(--forest); color: var(--paper); border-color: var(--forest); }

.search-results { list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line); }
.search-results li { padding: 22px 0; border-top:1px solid var(--line); }
.sr-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sr-title { font-family:'Fraunces', serif; font-size:1.18rem; color: var(--ink); text-decoration:none; }
.sr-title:hover { color: var(--forest); }
.sr-kind { font-size:.76rem; padding:3px 11px; border-radius:999px; background: var(--tag-updated-bg); color: var(--tag-updated-text); letter-spacing:.04em; }
.sr-kind.k-commentary { background: var(--tag-new-bg); color: var(--tag-new-text); }
.sr-kind.k-article { background: transparent; border:1px solid var(--oxblood); color: var(--oxblood); }
.sr-snip { margin:.5rem 0 0; color: var(--ink-soft); line-height:1.6; font-size:1.05rem; }

.search-pager { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; margin-top:34px; }
.pg-btn {
  display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 16px; box-sizing:border-box;
  border:1px solid var(--line-strong); border-radius:999px; background:transparent; color: var(--forest);
  font-family:'EB Garamond', serif; font-size:1rem; text-decoration:none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pg-btn.pg-num { padding:0; }
a.pg-btn:hover { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.pg-btn.is-current { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.pg-btn.is-disabled { opacity:.4; cursor:default; color: var(--ink-faint); }
.pg-gap { color: var(--ink-faint); padding:0 2px; }

@media (max-width: 600px) {
  .search-hero { padding-top: 40px; }
  .search-filters a { padding: 7px 14px; }
  .pg-btn { min-width:38px; height:38px; padding:0 12px; }
}




/* ---- /commentary hero: same fade-to-paper treatment as the homepage, different image ---- */
.hero.c-hero {
  background-image:
    linear-gradient(color-mix(in srgb, var(--paper) 82%, transparent) 0%, var(--paper) 100%),
    var(--c-hero-img, none);
  padding-bottom: 146px;
}
.c-hero-title {
  font-family:'Fraunces', serif; font-weight:500; color: var(--ink);
  font-size: clamp(1.9rem, 4.2vw, 3.5rem); line-height:1.1; margin: 0 0 22px; letter-spacing:-.01em;
}

/* ---- updates (homepage list + the two landing-page modules) ---- */
.updates-main { min-width:0; }
.updates-excerpt { margin:.3rem 0 0; font-size:.98rem; line-height:1.5; color: var(--ink-soft); }
.c-updates { padding-top: 70px; border-top: 1px solid var(--line);}
.c-updates-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:start; }
.c-module-title { font-family:'EB Garamond', serif; font-style:italic; font-weight:400; font-size:1.05rem; color: var(--ink-faint); margin:0 0 14px; }
.c-updates-grid .updates-list li { flex-wrap:wrap; align-items:flex-start; }
.c-updates-grid .updates-meta { margin-left:0; }
.c-empty { text-align:left; margin-top:0; }

/* ---- approach row ---- */
.c-approach { padding: 74px 0; text-align: center; background: var(--paper-alt); text-align:center; }
.c-approach h2 { font-family:'Fraunces', serif; font-weight:500; font-size:1.7rem; color: var(--ink); margin:0 0 34px; }
.c-approach-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 44px; text-align:left; padding-top:34px; }
.c-approach-grid h3 { font-family:'Fraunces', serif; font-weight:500; font-size:1.15rem; color: var(--ink); margin:0 0 8px; }
.c-approach-grid p { margin:0; color: var(--ink-soft);}

/* ---- browse index ---- */
.c-index { padding: 60px 0 80px; }
.c-index-count { font-style:italic; color: var(--ink-faint); }
.c-testament { font-family:'EB Garamond', serif; font-style:italic; font-weight:400; font-size:1.05rem; color: var(--ink-faint); margin: 34px 0 14px; }
.c-book-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 36px; border-top:1px solid var(--line); }
.c-book { padding: 20px 0;  }
.c-book h4 { font-family:'Fraunces', serif; font-weight:500; font-size:1.05rem; margin:0; color: var(--ink); }
.c-book h4 a { color: var(--ink); text-decoration:none; }
.c-book h4 a:hover { color: var(--forest); }
.c-chips { margin:.5rem 0 0; display:flex; flex-wrap:wrap; gap:6px; }
.c-chips a { min-width:2em; padding:2px 10px; text-align:center; font-size:.9rem; border:1px solid var(--line-strong); border-radius:999px; color: var(--forest); text-decoration:none; }
.c-chips a:hover { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.c-book.is-soon h4 { color: var(--ink-faint); font-weight:400; }
.c-soon { margin:.2rem 0 0; font-size:.85rem; font-style:italic; color: var(--ink-faint); }

/* ---- book page ---- */
.book-hero .breadcrumb { margin-bottom: 14px; color: var(--ink-faint); }
.book-hero .breadcrumb a { color: var(--ink-soft); }
.c-book-sub { color: var(--ink-faint); font-style:italic; margin:0; }
.book-chapters .sr-kind { white-space:nowrap; }
.c-soon-line { margin-top: 30px; }

/* ---- hero search suggestions on the homepage/landing (li > a links) ---- */
.search-suggestions li.has-link { padding:0; }
.search-suggestions li.has-link a { display:block; padding:10px 20px; color: var(--ink); text-decoration:none; }
.search-suggestions .ns-label { display:block; font-family:'Fraunces', serif; }
.search-suggestions .ns-label em { font-family:'EB Garamond', serif; font-style:normal; font-size:.76rem; color: var(--ink-faint); margin-left:.45em; text-transform:uppercase; letter-spacing:.08em; }
.search-suggestions .ns-snip { display:block; font-size:.9rem; color: var(--ink-soft); line-height:1.35; margin-top:.15rem; }
.search-suggestions li.ns-all a { color: var(--forest); border-top:1px solid var(--line); }

@media (max-width: 800px) {
  .c-updates-grid, .c-approach-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero.c-hero { padding-bottom: 100px;
        padding-top: 120px; }
        
  .hero {padding-bottom: 100px;
        padding-top: 120px;}
        
   .a-landing-hero.a-compact {
    padding-bottom:70px !important;}    
}




/* =====================================================================
   articles
   ===================================================================== */

/* menu turns light (like dark mode) while it sits over an article's dark image hero; goes back to normal once you scroll */
header.on-dark:not(.scrolled) { --ink:#ECE7D8; --ink-soft:#D5D0BD; --ink-faint:#B7B29E; --paper:#100F0C; --line:rgba(255,255,255,.25); }
header.on-dark:not(.scrolled) a, header.on-dark:not(.scrolled) button { color:#ECE7D8; }
header.on-dark:not(.scrolled) .logo-light { display:none; }
header.on-dark:not(.scrolled) .logo-dark { display:block; }

/* cards (homepage + listings) — images inside your existing .article-thumb */
.article-thumb { overflow:hidden; display:block; }
.article-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.article-card:hover .article-thumb img { transform: scale(1.03); }
.article-thumb .article-category { z-index:2; }
.article-card h3 a { color: var(--ink); }
.article-card h3 a:hover { color: var(--forest); }

/* ---------- landing / listing pages ---------- */
.a-landing-hero { text-align:center; padding: 62px 0 34px; background: var(--paper-alt); border-bottom:1px solid var(--line); }
.a-landing-hero[style*="--a-hero-img"] { background-image: linear-gradient(color-mix(in srgb, var(--paper) 80%, transparent), var(--paper)), var(--a-hero-img); background-size:cover; background-position:center; }
.a-landing-hero.a-compact { padding: 38px 0 30px;  }
.a-landing-hero .kicker { font-family:'EB Garamond', serif; font-style:italic; color: var(--ink-faint);margin:0 0 12px; }
.a-landing-hero h1 { font-family:'Fraunces', serif; font-weight:500; font-size: clamp(1.9rem, 4.2vw, 3.5rem); line-height:1.15; color: var(--ink); margin:0 auto 22px; }
.a-landing-hero .hero-divider { margin: 0 auto 26px; }
.a-landing-hero .lede { color: var(--ink-soft); font-size:1.15rem; line-height:1.65; max-width: 620px; margin: 0 auto 8px; }
.a-search { max-width: 560px; margin: 0 auto; }
.a-crumbs { margin: 0 0 18px; font-size:.95rem; color: var(--ink-faint); }
.a-crumbs a { color: var(--ink-soft); text-decoration:none; } .a-crumbs a:hover { color: var(--forest); }
.a-topbar { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top: 26px; }
.a-topbar a { padding: 7px 18px; border:1px solid var(--line-strong); border-radius:999px; color: var(--ink-soft); text-decoration:none; font-size:1rem; transition: all .15s ease; }
.a-topbar a:hover { border-color: var(--forest); color: var(--forest); }
.a-topbar a.is-current { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.a-topbar a.all { border-style:dashed; }
.count { font-size:.82em; color: var(--ink-faint); }

.a-featured-wrap { padding: 66px 0 26px; }
.a-featured { display:grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items:center; }
.a-featured-img { display:block; position:relative; aspect-ratio: 16/10; background: var(--paper-alt); overflow:hidden; border-radius:4px; }
.a-featured-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.a-eyebrow { display:block; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color: var(--oxblood); margin-top: 8px;}
.a-eyebrow a { color: inherit; text-decoration:none; }
.a-featured h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height:1.2; margin: 0 0 7px; }
.a-featured h2 a { color: var(--ink); text-decoration:none; } .a-featured h2 a:hover { color: var(--forest); }
.a-featured p { color: var(--ink-soft); font-size:1.1rem; line-height:1.6; margin: 0 0 14px; }
.a-byline { font-size:.95rem !important; color: var(--ink-faint) !important; }
.a-byline a { color: var(--ink-soft); }
.a-featured-body .btn {margin-top: 8px;}

.a-body-wrap { padding: 44px 0 90px; }
.a-layout { display:grid; grid-template-columns: minmax(0,1fr) 300px; gap: 56px; align-items:start; }
.a-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 34px 36px; }
.a-main .section-head { margin-bottom: 26px; }
.muted-count { color: var(--ink-faint); font-size:.95rem; }
.a-aside section { margin-bottom: 38px; padding-bottom: 30px; border-bottom:1px solid var(--line); }
.a-aside section:last-child { border-bottom:0; }
.a-aside h2 { font-size: 1.05rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); font-family:'EB Garamond', serif; font-weight:600; margin-bottom: 14px; }
.a-topic-list, .a-topic-list ul, .a-author-list, .a-topic-card ul { list-style:none; margin:0; padding:0; }
.a-topic-list > li { padding: 5px 0; } .a-topic-list ul { padding: 4px 0 2px 16px; } .a-topic-list ul li { padding: 2px 0; font-size:.95rem; }
.a-topic-list a, .a-author-list a { color: var(--ink); text-decoration:none; } .a-topic-list a:hover, .a-author-list a:hover { color: var(--forest); }
.a-more { display:inline-block; margin-top:10px; font-size:.95rem; color: var(--forest); }
.a-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.a-tags a { padding: 4px 13px; border:1px solid var(--line-strong); border-radius:999px; font-size:.92rem; color: var(--ink-soft); text-decoration:none; }
.a-tags a:hover { border-color: var(--forest); color: var(--forest); }
.a-author-list li { margin-bottom: 10px; } .a-author-list a { display:flex; align-items:center; gap:12px; }

.a-avatar { display:inline-flex; width:34px; height:34px; border-radius:50%; overflow:hidden; background: var(--paper-alt); border:1px solid var(--line); align-items:center; justify-content:center; font-style:normal; font-family:'Fraunces', serif; color: var(--ink-faint); flex-shrink:0; }
.a-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.a-avatar.big { width:64px; height:64px; font-size:1.5rem; } .a-avatar.xl { width:110px; height:110px; font-size:2.4rem; margin: 0 auto 16px; }

.a-topic-grid { columns: 2 340px; column-gap: 56px; max-width: 980px; margin: 0 auto; }
.a-topic-card { break-inside: avoid; padding: 0 0 26px; margin-bottom: 26px; border-bottom:1px solid var(--line); }
.a-topic-card h2 { font-size:1.35rem; margin-bottom:6px; } .a-topic-card h2 a { color: var(--ink); text-decoration:none; } .a-topic-card h2 a:hover { color: var(--forest); }
.a-topic-card p { color: var(--ink-soft); margin: 0 0 10px; } .a-topic-card li { padding: 3px 0; } .a-topic-card li a { color: var(--forest); }
.a-author-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px; max-width: 1000px; margin:0 auto; }
.a-author-card { text-align:center; padding: 26px 20px; border:1px solid var(--line); border-radius:6px; text-decoration:none; color: inherit; transition: border-color .15s; }
.a-author-card:hover { border-color: var(--forest); } .a-author-card .a-avatar { margin-bottom: 12px; }
.a-author-card h2 { font-size:1.2rem; margin-bottom:2px; color: var(--ink); } .a-author-card p { color: var(--ink-soft); font-size:.98rem; margin: 10px 0 0; }

/* ---------- the article page ---------- */
.a-hero { position:relative; text-align:center; padding: 84px 28px 126px; background: var(--paper-alt); border-bottom:1px solid var(--line); }
.a-hero.has-image { color:#fff; border-bottom:0; margin-top: calc(-1 * var(--header-h, 72px)); padding-top: calc(84px + var(--header-h, 72px));
  background-image: linear-gradient(to bottom, rgba(14,13,10,.82) 0%, rgba(14,13,10,.58) 40%, rgba(14,13,10,.86) 100%), var(--a-img); background-size:cover; background-position:center; }
.a-hero-inner { max-width: 860px; margin: 0 auto; }
.a-hero-cat { display:inline-block; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color: var(--oxblood); margin-bottom:18px; padding-bottom:3px; border-bottom:1px solid currentColor; }
.a-hero h1 { font-family:'Fraunces', serif; font-weight:500; font-size: clamp(2rem, 5.2vw, 3.7rem); line-height:1.14; margin: 0 0 26px; color: var(--ink); text-wrap: balance; }
.a-hero-meta { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px; font-size:1.02rem; color: var(--ink-soft); min-height: 28px;}
.a-hero-author { display:inline-flex; align-items:center; gap:10px; color: inherit; text-decoration:none; font-weight:500; } .a-hero-author .a-avatar { width:38px; height:38px; }
.a-hero .dot { opacity:.5; }
.a-hero.has-image h1, .a-hero.has-image .a-hero-meta, .a-hero.has-image .a-hero-author { color:#fff; text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.a-hero.has-image .a-hero-cat { color:#F3E2B3; }
.a-hero.has-image .a-avatar { border-color: rgba(255,255,255,.5); }

.a-article-wrap { max-width: 780px; padding-top: 60px; padding-bottom: 50px; }
.a-article-wrap .a-crumbs { text-align:left; }
.a-dek { font-family:'Fraunces', serif; font-size: 1.35rem; line-height:1.5; color: var(--ink-soft); margin: 6px 0 30px; padding-bottom: 26px; border-bottom:1px solid var(--line); }
.a-body { font-size: 1.22rem; line-height: 1.8; color: var(--ink); }
.a-body p { margin: 0 0 1.35em; }
.a-body h2 { font-size: 1.7rem; margin: 2em 0 .6em; } .a-body h3 { font-size: 1.3rem; margin: 1.8em 0 .5em; } .a-body h4 { font-size: 1.1rem; margin: 1.6em 0 .4em; }
.a-body a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.a-body blockquote {
    position: relative;
    width: 300px;
    max-width: 100%;
    margin: 1em .7em;
    padding: .8em 1em;
    font-size: 2em;
    text-align: center;
    line-height: 47px;
    float: right;
    font-style: italic;
    color: var(--ink-soft);
}

.a-body blockquote::before {
    content: "“";
    position: absolute;
    top: -30px;
    left: 5px;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 2.5em;
    line-height: 1;
    font-style: normal;
    color: var(--brass);
    opacity: .45;
}

.a-body blockquote::after {
    content: "”";
    position: absolute;
    bottom: -58px;
    right: 5px;
    font-family:  'EB Garamond', Georgia, serif;
    font-size: 2.5em;
    line-height: 1;
    font-style: normal;
    color: var(--brass);
    opacity: .45;
}

@media (max-width: 700px) {
    .a-body blockquote {
        float: none;
        width: 100%;
        max-width: 500px;
        margin: 2em auto;
        padding: .5em 1.2em;
        font-size: 1.6em;
        line-height: 1.5;
        text-align: center;
    }
    .a-body blockquote::before {
        top: -19px;

    }
    
      .a-body blockquote::after {
        bottom: -51px;

    }
    
}

.a-body ul, .a-body ol { margin: 0 0 1.35em; padding-left: 1.5em; } .a-body li { margin-bottom: .45em;color: var(--ink-soft); }
.a-body hr { border:0; border-top:1px solid var(--line); margin: 2.4em auto; width: 80px; }
.a-article-tags { margin: 38px 0 0; }
.a-authorbox { display:flex; gap:20px; align-items:flex-start; margin: 44px 0 0; padding: 30px 0px 30px; border-top:1px solid var(--line); }
.a-authorbox h2 { font-size:1.25rem; margin-bottom:6px; } .a-authorbox h2 a { color: var(--ink); text-decoration:none; } .a-authorbox p { margin:0; color: var(--ink-soft); line-height:1.6; }
.a-related { padding: 60px 0 90px; background: var(--paper-alt); }

@media (max-width: 900px) {
  .a-layout { grid-template-columns: 1fr; gap: 40px; }
  .a-featured { grid-template-columns: 1fr; gap: 24px; }
  .a-hero { padding: 54px 20px 98px; }
}
@media (max-width: 640px) { .a-grid { grid-template-columns: 1fr; } .a-body { font-size:1.12rem; } }


/* ---------- section nav across the top of the Articles pages ---------- */
.a-subnav { border-bottom:1px solid var(--line); background: var(--paper); }
.a-subnav-row { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.a-subnav nav { display:flex; gap:4px; }
.a-subnav nav a { padding: 15px 16px; color: var(--ink-soft); text-decoration:none; font-size:1.05rem; border-bottom:2px solid transparent; margin-bottom:-1px; }
.a-subnav nav a:hover { color: var(--forest); }
.a-subnav nav a.is-current { color: var(--ink); border-bottom-color: var(--forest); }
.a-live-wrap { position:relative; }
.a-subnav .a-live-wrap { width: 260px; max-width:100%; padding: 8px 0; }
.a-subnav input[type=search], .a-dir-tools input[type=search] { width:100%; font: inherit; color: var(--ink); background: transparent; border:1px solid var(--line-strong); border-radius:999px; padding: 8px 16px; }
.a-subnav input:focus, .a-dir-tools input:focus { outline:none; border-color: var(--forest); }
.a-live { list-style:none; margin:0; padding:6px 6px; position:absolute; left:0; right:0; top: 56px; z-index:40; background: var(--paper); border:1px solid var(--line-strong); border-radius:18px; box-shadow: 0 14px 34px rgba(0,0,0,.14); text-align:left; min-width: 280px; }
.a-subnav .a-live { top: calc(100% - 4px); left:auto; right:0; width: 420px; max-width: 92vw; }
.a-live li a { display:block; padding: 10px 16px; color: inherit; text-decoration:none; }
.a-live li a:hover { background: var(--paper-alt); }
.a-live .ns-label { display:block; font-family:'Fraunces', serif; color: var(--ink); }
.a-live .ns-snip { display:block; font-size:.9rem; color: var(--ink-soft); margin-top:2px; line-height:1.35; }
.a-live .all a { color: var(--forest); border-top:1px solid var(--line); }
.a-live .empty { padding: 10px 16px; color: var(--ink-faint); }
.a-search.a-live-wrap { max-width: 560px; margin: 0 auto; }

/* ---------- A–Z directories (topics tree, authors, tags) ---------- */
.a-dir { max-width: 980px; }
.a-dir-tools { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom: 18px; font-size: .9em;}
.a-dir-tools input[type=search] { flex:1; min-width: 220px; }
.a-dir-tools button { font:inherit; background:transparent; border:1px solid var(--line-strong); border-radius:999px; padding: 7px 16px; color: var(--forest); cursor:pointer; }
.a-dir-tools button:hover { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.a-letters { display:flex; flex-wrap:wrap; gap:4px; margin-bottom: 28px; padding-bottom: 18px; border-bottom:1px solid var(--line); }
.a-letters a { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color: var(--forest); text-decoration:none; font-family:'Fraunces', serif; }
.a-letters a:hover { background: var(--forest); color: var(--paper); }
.a-letter { margin-bottom: 34px; scroll-margin-top: 90px; }
.a-letter-h { font-size: 1.9rem; color: var(--brass); border-bottom:1px solid var(--line); padding-bottom: 6px; margin-bottom: 14px; }
.a-tree, .a-tree ul { list-style:none; margin:0; padding:0; }
.a-tree { columns: 2 320px; column-gap: 48px; }
.a-node { break-inside: avoid; padding: 7px 0; border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.a-node summary, .a-leaf { display:flex; align-items:baseline; gap:8px; cursor:pointer; list-style:none; font-family:'Fraunces', serif; font-size:1.08rem; }
.a-node summary::-webkit-details-marker { display:none; }
.a-node summary::before { content:'›'; display:inline-block; width:14px; color: var(--ink-faint); transition: transform .15s ease; font-family:'EB Garamond', serif; font-size:1.3rem; line-height:1; }
.a-node details[open] > summary::before { transform: rotate(90deg); }
.a-leaf { padding-left:14px; cursor:default; }
.a-node a { color: var(--ink); text-decoration:none; } .a-node a:hover { color: var(--forest); }
.a-node ul { padding: 6px 0 4px 22px; } .a-sub { padding: 3px 0; font-size:1rem; } .a-sub a { color: var(--forest); }
.a-people { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 30px; }
.a-people a { display:flex; align-items:center; gap:14px; text-decoration:none; color: var(--ink); padding: 6px 0; }
.a-people a:hover b { color: var(--forest); } .a-people b { display:block; font-family:'Fraunces', serif; font-weight:500; }
.a-people .count { display:block; }
[hidden] { display:none !important; }

@media (max-width: 700px) { .a-subnav nav a { padding: 12px 11px; } .a-subnav .a-live-wrap { width:100%; } .a-subnav .a-live { width:auto; left:0; right:0; } }


/* ===== round 3: menu like the rest of the site, section nav under the hero, full-width grid ===== */
.a-landing-hero { margin-top: calc(-1 * var(--header-h, 72px)); padding-top: calc(62px + var(--header-h, 72px)); background: linear-gradient(var(--paper-alt), var(--paper)); border-bottom: 0; }
.a-landing-hero.a-compact { padding-top: calc(62px + var(--header-h, 72px)); padding-bottom: 100px; }
.a-landing-hero[style*="--a-hero-img"] { background-image: linear-gradient(color-mix(in srgb, var(--paper) 78%, transparent), var(--paper)), var(--a-hero-img); background-size: cover; background-position: center; }
.a-landing-hero .a-search { margin-top: 26px; }
.a-subnav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.a-subnav-row { justify-content: center; }
.a-subnav nav { justify-content: center; }
.a-grid { grid-template-columns: repeat(3, 1fr); }
.a-dir-tools { justify-content: flex-end; }
@media (max-width: 1000px) { .a-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .a-grid { grid-template-columns: 1fr; } }

/* article body: images, captions, quotes */
.a-body figure { margin: 2.2em 0; text-align: center; }
.a-body img { max-width: 100%; height: auto; border-radius: 4px; display: block; margin: 0 auto; }
.a-body figcaption { margin-top: 10px; font-size: .95rem; font-style: italic; color: var(--ink-faint); }
.a-body blockquote.scripture { font-style: normal; background: var(--paper-alt); border-left: 3px solid var(--forest); padding: 1em 1.4em; border-radius: 0 6px 6px 0; color: var(--ink); }
.a-body blockquote.pull { font-family: 'Fraunces', serif; font-size: 1.5rem; line-height: 1.45; border-left: 0; text-align: center; padding: 0 1em; color: var(--forest); }


/* ===== round 4 ===== */
/* section nav lives INSIDE the hero: the hero's own bottom border is the single line under it */
.a-landing-hero { border-bottom: 1px solid var(--line); }
.a-landing-hero.contact {border-bottom:none;}
.a-landing-hero.noborder { border-bottom: none; }
.a-landing-hero.has-subnav { padding-bottom: 0; }
.a-landing-hero .a-subnav { border: 0; background: transparent; margin-top: 74px; }
.a-landing-hero .a-subnav nav a { margin-bottom: -1px; }
.a-landing-hero .a-crumbs { display: none; }

/* previous / next from the same author (article page) */
.a-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 40px 0 6px; }
.a-pn a { display: block; padding: 24px 29px; border: 1px solid var(--line-strong); border-radius: 8px; text-decoration: none; color: var(--ink); transition: border-color .15s ease, background .15s ease; }
.a-pn a:hover { border-color: var(--forest); background: var(--paper-alt); }
.a-pn span { display: block; font-size: .78rem; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: 6px; }
.a-pn b { display: block; font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.05rem; line-height: 1.35; }
.a-pn-next { text-align: right; grid-column: 2; }
@media (max-width: 640px) { .a-pn { grid-template-columns: 1fr; } .a-pn-next { grid-column: 1; } }
.a-article-wrap .breadcrumb-bottom { margin-top: 26px; padding-top: 0; }

/* ===== round 5 ===== */
/* the stray extra line under the menu: with fractional heights the hero image tile was repeating into the last pixel row */
.a-landing-hero[style*="--a-hero-img"], .a-hero.has-image { background-repeat: no-repeat; background-color: var(--paper); }
.a-landing-hero { background-color: var(--paper); }

/* featured label now sits on the image */
.a-featured-media { position: relative; }
.a-featured-media .a-featured-img { display: block; }
.a-featured-tag { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(14,13,10,.74); color: #F3E2B3; padding: 6px 14px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; border-radius: 2px; backdrop-filter: blur(2px); }
.a-featured-tag a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(243,226,179,.5); }
.a-featured-tag a:hover { border-bottom-color: currentColor; }

/* article: drop cap on the first paragraph (same look as the homepage) */
.a-body > p:first-child::first-letter { font-family: 'Fraunces', serif; font-weight: 400; font-size: 3.9rem; line-height: .78; float: left; padding: 4px 10px 0 0; color: var(--forest); }
.a-article { padding-top: 6px; }

/* share + print buttons above the article text */
.a-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 0 0 14px; }

/* ===== printing an article: title, author, date, then the text ===== */
@media print {
  header:not(.a-hero), footer, .a-subnav, .a-actions, .a-pn, .a-related, .a-authorbox, .a-article-tags, .breadcrumb, .share-sheet-overlay, .a-hero-cat, .a-hero .a-avatar { display: none !important; }
  .a-hero, .a-hero.has-image { margin: 0 !important; padding: 0 0 14pt !important; background: none !important; color: #000 !important; text-align: left; border-bottom: 1pt solid #999; }
  .a-hero h1 { color: #000 !important; text-shadow: none !important; font-size: 24pt; margin: 0 0 8pt; }
  .a-hero-meta, .a-hero-meta a, .a-hero-author { color: #333 !important; text-shadow: none !important; justify-content: flex-start; font-size: 11pt; }
  .a-article-wrap { max-width: none; padding: 14pt 0 0; }
  .a-body { font-size: 11.5pt; line-height: 1.55; color: #000; }
  .a-body figure, .a-body blockquote { break-inside: avoid; }
  .a-body a { color: #000; text-decoration: none; }
}

  /* ---------- Passage bar (search + browse, 50/50) ---------- */
  .passage-bar{
    border-top: 1px solid var(--line);
    background: var(--paper-alt);
    padding: 22px 0;
  }
  .passage-bar-inner{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    gap: 32px;
  }
  .passage-search{ position: relative; }
  .passage-search form{ margin:0; }
  .search-suggestions{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 30;
    scrollbar-width: thin;
scrollbar-color: var(--line-strong) transparent;
  }
  .search-suggestions li{
    padding: 10px 20px;
    font-size: 0.98rem;
    cursor: pointer;
    color: var(--ink);
  }
  .search-suggestions li:hover:not(.is-disabled){ background: var(--paper-alt); }
  .search-suggestions li.is-disabled{
    color: var(--ink-faint);
    font-style: italic;
    cursor: not-allowed;
  }
  .search-suggestions li.is-empty{
    color: var(--ink-faint);
    font-style: italic;
    cursor: default;
  }
  .search-suggestions li.is-empty:hover{ background: none; }
  .passage-divider{
    width: 1px;
    align-self: stretch;
    background: var(--line-strong);
  }
  .hero-search{
    display:flex;
    align-items:center;
    height: 48px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    border-radius: 999px;
    padding: 5px 5px 5px 20px;
  }
  .hero-search input{
    flex:1;
    height:100%;
    border:none;
    background:transparent;
    outline:none;
    font-family:'EB Garamond', serif;
    font-size: 1rem;
    color: var(--ink);
    min-width:0;
  }
  .hero-search input::placeholder{ color: var(--ink-faint); }
  .hero-search button{
    background: var(--forest);
    border:none; cursor:pointer;
    color: var(--paper);
    display:flex; align-items:center; justify-content:center;
    width: 38px; height:38px;
    border-radius: 50%;
    flex-shrink:0;
    transition: background-color .15s ease;
  }
  .hero-search button:hover{ background: var(--forest-dark); }

  .passage-browse{
    display:flex;
    align-items:stretch;
    gap: 8px;
  }
  .custom-select{
    position: relative;
    flex: 1;
    min-width: 0;
    padding-bottom: 5px;
  }
  .custom-select-trigger{
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 8px;
    font-family:'EB Garamond', serif;
    font-size: 0.98rem;
    color: var(--ink-soft);
    background-color: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0 18px;
    cursor: pointer;
  }
  .custom-select-trigger:disabled{
    color: var(--ink-faint);
    cursor: not-allowed;
  }
  .custom-select-trigger .chevron{
    flex-shrink:0;
    transition: transform .15s ease;
  }
  .custom-select.open .custom-select-trigger .chevron{ transform: rotate(180deg); }
  .custom-select-list{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 30;
    scrollbar-width: thin;
scrollbar-color: var(--line-strong) transparent;
  }
  .custom-select-list li{
    padding: 10px 20px;
    font-size: 0.98rem;
    color: var(--ink);
    cursor: pointer;
  }
  .custom-select-list li:hover:not(.is-disabled){ background: var(--paper-alt); }
  .custom-select-list li.is-disabled{
    color: var(--ink-faint);
    font-style: italic;
    cursor: not-allowed;
  }
  .btn-small{
    height: 48px;
    box-sizing: border-box;
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0 22px;
    white-space: nowrap;
    flex-shrink:0;
  }
  .btn-small:disabled{
    background: var(--line-strong);
    border-color: var(--line-strong);
    color: var(--ink-faint);
    cursor: not-allowed;
  }

  .btn{
    display:inline-block;
    font-family:'EB Garamond', serif;
    font-size: 1.05rem;
    color: var(--paper);
    background: var(--forest);
    cursor:pointer;
    padding: 13px 30px;
    border: 1px solid var(--forest);
    transition: background .15s ease, color .15s ease;
  }
  .custom-select .btn {cursor:pointer;}
  
  .btn:hover{ background: var(--forest-dark); }
  .btn-outline{
   display:inline-block;
    font-family:'EB Garamond', serif;
    font-size: 1.05rem;
    background: transparent;
    padding: 13px 30px;
    border: 1px solid var(--forest);
    transition: background .15s ease, color .15s ease;
    color: var(--forest);
    margin-left: 14px;
  }
  .btn-outline:hover{ background: var(--forest); color: var(--paper); }

  /* ---------- Mission / About the Ministry ---------- */
  .mission{
    padding: 76px 0;
    border-top: 1px solid var(--line);
  }
  .mission-grid{
    display:grid;
    grid-template-columns: 200px 1px 1fr;
    gap: 44px;
    align-items: start;
    text-align: left;
  }
  .mission-label{
    display:block;
    font-family:'EB Garamond', serif;
    font-style: italic;
    color: var(--ink-faint);
    font-size: 0.95rem;
    margin-bottom: 20px;
  }
  .mission-anchors ul{
    list-style:none;
    margin:0; padding:0;
  }
  .mission-anchors li{
    padding: 16px 0;
    border-top: 1px solid var(--line);
  }
  .mission-anchors li:first-child{ border-top:none; padding-top:0; }
  .mission-anchors .ref{
    display:block;
    font-family:'Fraunces', serif;
    font-weight: 500;
    font-size: 1.08rem;
    color: var(--oxblood);
    margin-bottom: 4px;
  }
  .mission-anchors .phrase{
    display:block;
    font-style: italic;
    font-size: 0.92rem;
    color: var(--ink-soft);
  }
  .mission-divider{
    background: var(--line-strong);
    width: 1px;
    align-self: stretch;
  }
  .mission-body h2{
    font-size: 1.7rem;
    margin-bottom: 26px;
  }
  .mission-body p{
    color: var(--ink-soft);
    line-height: 1.75;
    margin: 0 0 20px;
  }
  .mission-body p.mission-lead{ color: var(--ink); }
  .mission-body p:last-child{ margin-bottom: 0; }
  .drop-cap::first-letter{
    font-family:'Fraunces', serif;
    font-weight: 400;
    font-size: 3.9rem;
    line-height: 0.78;
    float:left;
    padding: 4px 10px 0 0;
    color: var(--forest);
  }

  /* ---------- Section shell ---------- */
  section{
    padding: 64px 0;
    /*border-top: 1px solid var(--line);*/
  }
  .section-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom: 38px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .section-head .view-all{
    font-size: 0.98rem;
    color: var(--forest);
    border-bottom: 1px solid var(--line-strong);
  }
  .section-head .view-all:hover{ border-color: var(--forest); }

  /* ---------- Recent updates ---------- */
  .updates-list{
    list-style:none;
    margin:0; padding:0;
    border-top: 1px solid var(--line);
  }
  .updates-list li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 18px;
    padding: 18px 4px;
  }
  
  
   .updateslist .updates-list li{
    border-bottom: 1px solid var(--line);  }
  
  .updates-list a.title{
    font-family:'Fraunces', serif;
    font-size: 1.12rem;
    color: var(--ink);
  }
  .updates-list a.title:hover{ color: var(--forest); }
  .updates-meta{
    display:flex;
    align-items:center;
    gap: 16px;
    flex-shrink:0;
  }
  .tag{
        font-size: 0.9rem;
    padding: 5px 16px;
    border-radius: 999px;
    display: inline-block;
    background: var(--tag-updated-bg);
    color: var(--tag-updated-text);
  }
  .tag.new{
    background: var(--line);
    color: var(--tag-new-text);
  }
  .updates-date{
    display:flex;
    align-items:center;
    gap: 6px;
    font-size: 0.92rem;
    color: var(--ink-faint);
    white-space: nowrap;
  }
  .updates-date svg{ flex-shrink:0; }

  /* ---------- Articles ---------- */
  .articles-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 40px;
  }
  .article-card{
    padding-bottom: 8px;
  }
  .article-thumb{
    position: relative;
    width:100%;
    aspect-ratio: 4/3;
    background: var(--paper-alt);
    margin-bottom: 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--ink-faint);
    font-size: 0.85rem;
    font-style: italic;
  }
  .article-category{
    position: absolute;
    top: 16px;
    left: 18px;
    font-style: normal;
    font-size: 0.78rem;
    z-index: 2;
    background: rgba(14, 13, 10, .74);
    color: #F3E2B3;
    padding: 6px 14px;
    font-size: .78rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-radius: 2px;
    backdrop-filter: blur(2px);
  }
  .article-card h3{
    font-size: 1.28rem;
    margin-bottom: 5px;
    line-height:1.35;
  }
  .article-card h3 a:hover{ color: var(--forest); }
  .article-card p{
    color: var(--ink-soft);
    font-size: 1rem;
    margin: 0 0 14px;
    line-height: 1.55;
  }
  .article-date{
    font-size: 0.88rem;
    color: var(--ink-faint);
    display: block;
    margin-bottom: 8px;
  }

  /* ---------- Heaven / gospel callout ---------- */
  .gospel-cta{
    padding: 74px 0;
    border-top: none;
    background: var(--paper-alt);
    text-align: center;
  }
  .gospel-inner{
    max-width: 600px;
    margin: 0 auto;
  }
  .gospel-cta h2{
    font-size: 1.9rem;
    margin-bottom: 18px;
  }
  .gospel-cta p{
    color: var(--ink-soft);
    line-height: 1.65;
    margin: 0 0 30px;
  }

  /* ---------- Footer ---------- */
  footer{
    --footer-ink: #ECE6D5;
    --footer-ink-soft: #B6AF98;
    --footer-ink-faint: #857F69;
    --footer-accent: #93AE84;
    --footer-line: #3A3628;
    border-top: none;
    background: #24221A;
    padding: 80px 0 30px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns: 2.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 56px;
  }
  footer .logo{ color: var(--footer-ink); }
  footer .logo-mark{ border-color: var(--footer-accent); color: var(--footer-accent); }
  .footer-brand .logo{ margin-bottom: 14px; }
  .footer-brand p{
    color: var(--footer-ink-soft);
    font-size: 0.98rem;
    max-width: 300px;
    margin-bottom: 20px;
  }
  .footer-col h4{
    font-family:'EB Garamond', serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--footer-ink);
    margin-bottom: 16px;
    letter-spacing: 0.02em;
  }
  .footer-col ul{
    list-style:none; margin:0; padding:0;
  }
  .footer-col li{ margin-bottom: 10px; }
  .footer-col a{
    color: var(--footer-ink-soft);
    font-size: 0.98rem;
  }
  .footer-col a:hover{ color: var(--footer-accent); }
  .social-icons{
    display:flex;
    gap: 14px;
  }
  .social-icons a{
    width: 32px; height:32px;
    border: 1px solid var(--footer-line);
    border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    color: var(--footer-ink-soft);
  }
  .social-icons a:hover{ border-color: var(--footer-accent); color: var(--footer-accent); }
  .footer-legal{
    display:flex;
    gap: 22px;
  }
  .footer-legal a{
    color: var(--footer-ink-faint);
    font-size: 0.88rem;
  }
  .footer-legal a:hover{ color: var(--footer-accent); }
  .footer-bottom{
    border-top: 1px solid var(--footer-line);
    padding-top: 22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--footer-ink-faint);
    font-size: 0.88rem;
    .updates-list li{ flex-direction:column; align-items:flex-start; gap:8px; }
    .passage-browse{ flex-direction:column; }
    .btn-small{ width:100%; }
  }

  /* ---------- Commentary reading page ---------- */
  .commentary-main{
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 28px 100px;
  }
  .breadcrumb{
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    gap: 8px;
    font-size: 0.92rem;
    color: var(--ink-faint);
    margin-bottom: 36px;
  }
  .breadcrumb.breadcrumb-bottom{
    margin: 85px 0 0;

  }
  .breadcrumb a{ color: var(--ink-soft); }
  .breadcrumb a:hover{ color: var(--forest); }

  .chapter-header{
    margin-bottom: 40px;
  }
  .chapter-header .book-name{
    display:block;
    font-family:'EB Garamond', serif;
    font-style: italic;
    color: var(--ink-faint);
    font-size: 1.1rem;
    margin-bottom: 6px;
  }
  .chapter-header h1{
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 4px;
  }
  .chapter-header .version{
    font-size: 0.92rem;
    color: var(--ink-faint);
    letter-spacing: 0.03em;
  }
  .chapter-header-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .wip-notice{
    display: flex;
    align-items: center;
    gap: 25px;
    background: var(--forest);
    border-radius: 10px;
    padding: 21px 25px;
    margin-bottom: 28px;
  }
  .wip-icon{
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--paper);
    width: 24px;
    height: 24px;
  }
  .wip-notice p{
    flex: 1;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--paper);
  }
  .wip-notice a{ color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
  .wip-close{
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--paper);
    opacity: 0.75;
    padding: 2px;
    /* set to flex to allow users to close this notice: display: flex;*/
    display:none;
  }
  .wip-close:hover{ color: var(--ink); }
  .wip-notice.is-hidden{ display: none; }

  .chapter-summary{
    border-left: 3px solid var(--oxblood);
    background: var(--paper-alt);
    padding: 22px 26px;
  }
  .chapter-summary .summary-label{
    display:block;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--ink-faint);
    margin-bottom: 10px;
  }
  .chapter-summary p{
    color: var(--ink-soft);
    font-size: 0.95rem;
    font-family:Arial, Helvetica, sans-serif;
    line-height: 1.7;
    margin: 0;
  }

  .verse{
    font-family:'Fraunces', serif;
    font-weight: 400;
    font-size: 1.28rem;
    line-height: 1.6;
    color: var(--ink);
    margin: 0 0 6px;
  }
  .verse .verse-num{
    font-family:'EB Garamond', serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--oxblood);
    vertical-align: super;
    margin-right: 4px;
  }

  .verse-section{
    position: relative;
    padding: 0;
    border-top: none;
    margin-top: -18px;
    padding-bottom: 22px;
  }
  .sticky-sentinel{
    height: 1px;
  }
  .verse-sticky{
    position: sticky;
    top: var(--header-h);
    background: var(--paper);
    z-index: 4;
    transition: top .2s ease;
  }
  html.header-hidden .verse-sticky{
    top: 0;
  }
  .verse-commentary{
    padding-top: 4px;
  }
  .verse-commentary:empty{
    display: none;
  }
  .commentary{
    margin: 26px 0 16px;
    padding-left: 4px;
    padding-top: 30px;
    font-family: Arial, Helvetica, sans-serif;
  }
  .commentary ol{
    margin: 10px 0;
    padding-left: 0;
    list-style: none;
    counter-reset: l1;
  }
  .verse-commentary > ol{ counter-reset: l1; padding-left: 45px; padding-top: 1px; }
  .commentary ol.level-1 > li{ counter-increment: l1; margin-bottom: 24px; }
  .commentary ol.level-2{ counter-reset: l2; }
  .commentary ol.level-2 > li{ counter-increment: l2; margin-bottom: 18px; }
  .commentary ol.level-3{ counter-reset: l3; }
  .commentary ol.level-3 > li{ counter-increment: l3; margin-bottom: 14px; }
  .commentary ol:last-child{ margin-bottom: 0; }
  .commentary li:last-child{ margin-bottom: 0; }

  .commentary li{
    position: relative;
    padding-left: 34px;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .commentary ol.level-1 > li::before{
    content: counter(l1) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--forest);
  }
  .commentary ol.level-2{ margin-left: 6px; }
  .commentary ol.level-2 > li::before{
    content: counter(l2, lower-alpha) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--ink-soft);
  }
  .commentary ol.level-3{ margin-left: 6px; }
  .commentary ol.level-3 > li::before{
    content: counter(l3, lower-roman) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-style: italic;
    color: var(--ink-soft);
  }
  .commentary li p{
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
  }
  .commentary li p.verse-quote-block{
    margin-left: 24px;
    padding-left: 16px;
    border-left: 2px solid var(--line-strong);
  }
  .commentary .verse-quote-text{
    color: var(--ink);
    font-style: italic;
  }
  .commentary .quote{
    text-decoration: underline;
    text-decoration-color: var(--oxblood);
    text-underline-offset: 3px;
    color: inherit;
  }
  .commentary strong{ color: var(--ink); }

  .chapter-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
  }
  .chapter-nav a{
    font-family:'Fraunces', serif;
    font-size: 1.05rem;
    color: var(--ink);
  }
  .chapter-nav a:hover{ color: var(--forest); }
  .chapter-nav .dir{
    display:block;
    font-family:'EB Garamond', serif;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--ink-faint);
    margin-bottom: 4px;
  }
  .chapter-nav .next{ text-align:right; margin-left:auto; }
.mobile-cta{ display: none; }
  @media (max-width: 640px){
 
  nav.primary.open .mobile-cta{ display: block; }


  
    .menu-toggle{ display:block; }
    nav.primary{
      position: fixed;
      top: 0;
      right: 0;
      height: 100dvh;
      width: min(320px, 84vw);
      background: var(--forest-dark);
      padding: 96px 30px 30px;
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform .3s ease, box-shadow .3s ease;
      z-index: 100;
      overflow-y: auto;
    }
    nav.primary.open{
      transform: translateX(0);
      box-shadow: -12px 0 40px rgba(0,0,0,.25);
    }
    .nav-links{ display: flex; flex-direction: column; }
    nav.primary .nav-links a{
      color: var(--paper);
      padding: 0;
      width: 100%;
      font-size: 1.3rem;
    }

    
    
    .nav-links {
    gap: 20px;}
    
    nav.primary .nav-links a:hover{ color: var(--brass); }

    /* Quiz callout inside the drawer */
   .mobile-cta{

    flex-shrink: 0;
  }
  .mobile-cta-card{
            display: block;
    gap: 14px;
    margin-top:45px;
    align-items: flex-start;
    background: #232B1F;
    /*border: 1px solid rgba(241, 239, 231, 0.15);*/
    padding: 28px;
    transition: background .15s ease;
  }
  .mobile-cta-card:hover{ background: #4E5F41; }
  .mobile-cta-icon{
    flex-shrink: 0;
    width: 38px; height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201,169,104,0.14);
    border: 1px solid rgba(201,169,104,0.45);
    border-radius: 50%;
    color: #C7A968;
  }
  .mobile-cta-title{
    display: block;
    font-family:'Fraunces', serif;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.32;
    color: #F6F3E8;
    margin-top: 21px;
    margin-bottom: 6px;
  }
  .mobile-cta-blurb{
    display: block;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #CFCDB9;
    margin-bottom: 10px;
  }
  .mobile-cta-link{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    color: #D9BC7E;
    border-bottom: 1px solid rgba(201,169,104,0.55);
    }
    
    
   .mobile-cta .btn {
       margin-top: 12px;
    padding: 11px 26px;
    color:#fff;
   }
    

    .nav-scrim{
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.4);
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
      z-index: 10;
    }
    .nav-scrim.open{ opacity: 1; pointer-events: auto; }

    .commentary-main{ padding: 36px 20px 80px; }
    .chapter-header h1{ font-size: 3.5rem; }
    .commentary li{ padding-left: 28px; }
    .footer-grid{ grid-template-columns: 1fr; gap: 30px; }
  }

  /* ---------- Print button ---------- */
  .print-actions{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  .toast{
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%) translateY(-140%);
    background: var(--ink);
    color: var(--paper);
    padding: 12px 22px;
    border-radius: 999px;
    font-family: 'EB Garamond', serif;
    font-size: 0.95rem;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    transition: transform .3s ease;
    white-space: nowrap;
  }
  .toast.is-visible{
    transform: translateX(-50%) translateY(0);
  }
  .print-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    padding: 0;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
  }
  .print-btn:hover{
    background: var(--paper-alt);
    color: var(--ink);
  }
  @media (min-width: 641px){
    #smsBtn{ display: none; }
  }

  /* ---------- Print styles: black & white, content only ---------- */
  
@media print {

  .chapter-summary,   
  .chapter-summary * {
    font-size: 10pt !important;
  }
  
  .verse,
  .verse * {
    font-size: 10pt !important;
    font-weight:bold;
  }

  .verse-commentary,   
  .verse-commentary * {
    font-size: 9pt !important;
    line-height:1.25 !important;
  }
}
  
  
  @media print{
    @page{
      margin: 0.85in 0.75in 0.9in;
      @bottom-left{
        content: "Forever Word \2014 foreverword.org";
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 9pt;
        color: #666;
      }
      @bottom-right{
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 9pt;
        color: #666;
      }
    }
    header, footer, .breadcrumb, .chapter-nav, .print-actions, .toast, .wip-notice,
    .menu-toggle, .theme-toggle{
      display: none !important;
    }
    html, body{
      background: #fff !important;
      color: #000 !important;
    }
    .commentary-main{
      max-width: 100%;
      padding: 0;
      margin: 0;
    }
    .chapter-header .book-name,
    .chapter-header .version,
    .verse .verse-num,
    .commentary ol.level-1 > li::before,
    .commentary ol.level-2 > li::before,
    .commentary ol.level-3 > li::before{
      color: #000 !important;
    }
    .chapter-header h1{ color: #000; }
    .chapter-summary{
      border-left: 2px solid #000;
      background: none;
    }
    .chapter-summary .summary-label,
    .chapter-summary p{ color: #000 !important; }
    .verse{ color: #000 !important; }
    .commentary li, .commentary li p{ color: #000 !important; }
    .commentary .verse-quote-text{ color: #000 !important; }
    .commentary li p.verse-quote-block{ border-left: 2px solid #000; }
    .commentary .quote{ text-decoration-color: #000; }
    .commentary strong{ color: #000 !important; }
    .verse-section{ margin-top: 0 !important; padding-bottom: 0 !important; }
    .verse-sticky{ position: static !important; background: none !important; }
    .sticky-sentinel{ display: none; }
    a{ color: #000 !important; text-decoration: none !important; }
    .verse-sticky{ page-break-inside: avoid; }
    .chapter-summary{ page-break-inside: avoid; }
    .bottom-nav, .nav-picker-overlay, .scroll-top-btn{ display: none !important; }
  }
  
.verse, .verse-commentary { transition: opacity .35s ease; }
body.verse-focus .verse:not(.is-target) { opacity: .5; }
body.verse-focus .verse-section:not(.is-target-section) .verse-commentary { opacity: .5; }

/* --- tap / click a verse to share it: a small icon at the end of each verse; the whole verse is clickable --- */
.verse.is-shareable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.verse.is-shareable:hover {text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-thickness: 1px;
text-underline-offset: 4px;}
.verse-end { white-space: nowrap; }
.verse-share {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: 0px; margin-left: .4em;
  width: 26px; height: 26px; padding: 0; font: inherit; color: var(--ink-faint); background: transparent;
  border: 0; border-radius: 50%; cursor: pointer; opacity: .45; transition: opacity .2s ease, color .2s ease, background-color .2s ease;
}
.verse-share:hover, .verse-share:focus-visible { opacity: 1; color: var(--forest); background: var(--paper-alt); }
.verse-share:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }
/* desktop: the icon firms up while you're over its verse */
@media (hover: hover) and (pointer: fine) { .verse.is-shareable:hover .verse-share { opacity: 1; color: var(--forest); } }
/* never in print */
@media print { .verse-share { display: none !important; } }

  /* ---------- Bottom floating chapter nav ---------- */
  .commentary-main{ padding-bottom: 50px; }
  .bottom-nav{
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--forest);
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.24);
    z-index: 60;
  }
  html[data-theme="dark"] .bottom-nav{
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  }
  .bottom-nav-arrow{
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--paper);
    flex-shrink: 0;
    transition: background-color .15s ease;
  }
  .bottom-nav-arrow:hover{ background: rgba(255,255,255,0.18); }
  .bottom-nav-arrow:disabled{
    opacity: 0.3;
    cursor: not-allowed;
  }
  .bottom-nav-arrow:disabled:hover{ background: none; }
  .bottom-nav-center{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
    min-width: 190px;
    padding: 4px 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Fraunces', serif;
    color: var(--paper);
  }
  .bottom-nav-center .ref-label{
    white-space: nowrap;
    text-align: center;
  }
  .bottom-nav-center:hover .ref-label{ opacity: 0.8; }
  .bottom-nav-center .book-label{
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: 0.68rem;
    color: var(--ink-faint);
  }
  .bottom-nav-center .ref-label{
    font-size: 1.05rem;
    font-weight: 600;
    transition: color .15s ease;
  }
  
    .bottom-nav{
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--forest);
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.24);
    z-index: 60;
    /* animation */
    opacity: 1;
    pointer-events: auto;
    transition: opacity .28s ease, transform .28s ease;
  }
  .bottom-nav.is-hidden{
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(24px); /* slides down a bit as it fades */
  }
  
    .bottom-nav-arrow .font-size-label{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: inherit;
  }

  /* Optional: slightly tighter center when the bar is wider */
  .bottom-nav-center{
    min-width: 150px; /* was 190px; nudge if it feels too wide */
  }



  /* Picker sheet */
  .nav-picker-overlay{
    position: fixed;
    inset: 0;
    background: rgba(20,18,12,0.45);
    z-index: 70;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  html[data-theme="dark"] .nav-picker-overlay{
    background: rgba(90,85,68,0.5);
  }
  .nav-picker-overlay.is-open{
    opacity: 1;
    pointer-events: auto;
  }
  .nav-picker-sheet{
    background: var(--paper);
    width: 100%;
    max-width: 480px;
    height: 72vh;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform .25s ease;
  }
  .nav-picker-overlay.is-open .nav-picker-sheet{
    transform: translateY(0);
  }
  .nav-picker-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 67px;
    padding: 9px 14px 0px 25px;
    flex-shrink: 0;
  }
  .nav-picker-header-actions{
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .nav-picker-search{
    padding: 12px 24px;
    flex-shrink: 0;
  }
  .nav-picker-search input{
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 999px;
    padding: 0 25px;
    font-family: 'EB Garamond', serif;
    font-size: 1.1rem;
    color: var(--ink);
    background: color-mix(in srgb, var(--paper-alt) 88%, #000 2%);
    outline: none;
  }
  html[data-theme="dark"] .nav-picker-search input{
    background: color-mix(in srgb, var(--paper-alt) 80%, #fff 4%);
  }
  .nav-picker-search input:focus{ outline: 2px solid var(--forest); outline-offset: 1px; }
  .nav-picker-search input::placeholder{ color: var(--ink-faint); }
  .nav-picker-sort, .nav-picker-close{
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-soft);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color .12s ease, color .12s ease;
  }
  .nav-picker-sort:hover, .nav-picker-close:hover{
    background: var(--paper-alt);
    color: var(--forest);
  }
  .nav-picker-sort.is-active{ color: var(--forest); }
  .az-icon{
    font-family: 'EB Garamond', serif;
    font-weight: 700;
    font-size: 0.62rem;
    line-height: 0.85;
    text-align: center;
  }
  .nav-picker-sort svg{ display: block; }
  .nav-picker-title{
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ink);
  }
  .nav-picker-list{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;   /* reaching the end of the list never scrolls the page behind it */
    padding: 8px 0;
  }
  .nav-picker-book-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 29px;
    cursor: pointer;
    font-family: 'EB Garamond', serif;
    font-size: 1.2rem;
    color: var(--ink);
    transition: background-color .12s ease;
  }
  .nav-picker-book-item:hover{ background: var(--paper-alt); }
  .nav-picker-book-item.is-expanded{ background: var(--paper-alt); }
  .nav-picker-book-item.is-unwritten{
    opacity: 0.42;
    cursor: default;
  }
  .nav-picker-book-item.is-unwritten:hover{ background: none; }
  .nav-picker-book-item.is-current{ color: var(--forest); font-weight: 600; }
  .nav-picker-book-item .chevron{
    transition: transform .2s ease;
    color: var(--ink-faint);
    opacity:0;
    flex-shrink: 0;
  }
  .nav-picker-book-item.is-expanded .chevron{ transform: rotate(180deg); }
  .nav-picker-chapter-wrap{
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .nav-picker-chapter-grid{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 4px 27px 20px;
    background: var(--paper-alt);
  }
  .nav-picker-chapter{
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--paper);
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ink);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
  }
  .nav-picker-chapter:hover{ background: var(--forest); color: var(--paper); }
  .nav-picker-chapter.is-unwritten{
    opacity: 0.4;
    cursor: default;
  }
  .nav-picker-chapter.is-unwritten:hover{ background: var(--paper); color: var(--ink); }
  .nav-picker-chapter.is-current{
    background: var(--forest);
    color: var(--paper);
  }
  @media (max-width: 640px){
    .bottom-nav{ bottom: 14px; }
    .nav-picker-chapter-grid{ grid-template-columns: repeat(5, 1fr); }
    .scroll-top-btn{ right: 16px; bottom: 84px; }
    .nav-picker-sheet{ height: 97vh; height: 97dvh; }   /* dvh = the visible area, so the browser's toolbar can't cover the bottom */
  }

  .scroll-top-btn{
    position: fixed;
    right: 22px;
    bottom: 20px; /* same as .bottom-nav on desktop */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--forest); /* match bottom bar */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--paper);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, background-color .15s ease, transform .25s ease;
  }
   .scroll-top-btn.is-footer-hidden{
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  .scroll-top-btn.is-visible{
    opacity: 1;
    pointer-events: auto;
  }
  .scroll-top-btn:hover{ background: var(--forest-dark); }

  @media (max-width: 640px){
    .bottom-nav{ bottom: 14px; }
    .nav-picker-chapter-grid{ grid-template-columns: repeat(5, 1fr); }
    /* Centered above the bottom nav */
    .scroll-top-btn{
      right: auto;
      left: 50%;
      transform: translateX(-50%);
      bottom: 80px; /* sits above the bar (~42px + padding + gap) */
    }
    .scroll-top-btn.is-visible{
      transform: translateX(-50%);
    }
  }
  
    @media (max-width: 640px){
    .scroll-top-btn.is-footer-hidden{
      transform: translateX(-50%) translateY(16px);
    }
  }
  @media (min-width: 641px){
    .scroll-top-btn.is-footer-hidden{
      transform: translateY(16px);
    }
  }
  
  
  
  
 /* custom scrollbar */
 
 
   /* Thin scrollbar for the book/chapter picker list */
  .nav-picker-list{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0;

    /* Hide scrollbar, keep scrolling */
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* Older Edge/IE */
}

.nav-picker-list::-webkit-scrollbar {
    display: none;               /* Chrome, Safari, newer Edge */
}

  .nav-picker-list::-webkit-scrollbar-track{
    background: transparent;
    margin: 8px 0;
  }
  .nav-picker-list::-webkit-scrollbar-thumb{
    background: var(--line-strong);
    border-radius: 999px;
  }
  .nav-picker-list::-webkit-scrollbar-thumb:hover{
    background: var(--ink-faint);
  }

  /* Dark theme: slightly brighter thumb so it stays visible */
  html[data-theme="dark"] .nav-picker-list{
    scrollbar-color: var(--line-strong) transparent;
  }
  html[data-theme="dark"] .nav-picker-list::-webkit-scrollbar-thumb{
    background: var(--line-strong);
  }
  html[data-theme="dark"] .nav-picker-list::-webkit-scrollbar-thumb:hover{
    background: var(--ink-faint);
  } 
  
    .share-sheet{
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .share-sheet::-webkit-scrollbar{ width: 6px; }
  .share-sheet::-webkit-scrollbar-thumb{
    background: var(--line-strong);
    border-radius: 999px;
  }
  
  
  
 /* share box popup */
 
   /* ---------- Share sheet ---------- */
  .share-sheet-overlay{
    position: fixed;
    inset: 0;
    background: rgba(20,18,12,0.45);
    z-index: 80;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  html[data-theme="dark"] .share-sheet-overlay{
    background: rgba(90,85,68,0.5);
  }
  .share-sheet-overlay.is-open{
    opacity: 1;
    pointer-events: auto;
  }
  .share-sheet{
    background: var(--paper);
    width: 100%;
    max-width: 420px;
    border-radius: 20px 20px 0 0;
    padding:17px 30px 28px;
    transform: translateY(100%);
    transition: transform .25s ease;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.12);
  }
  .share-sheet-overlay.is-open .share-sheet{
    transform: translateY(0);
  }
  .share-sheet-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    margin-bottom: 13px;
  }
  .share-sheet-title{
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.12rem;
    color: var(--ink);
  }
  .share-sheet-close{
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-soft);
    width: 40px;
    height: 40px;
    right: -10px;
    top: -1px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color .12s ease, color .12s ease;
  }
  .share-sheet-close:hover{
    background: var(--paper-alt);
    color: var(--forest);
  }
  .share-sheet-preview{
    background: var(--paper-alt);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 22px;
  }
  .share-sheet-preview-text{
    margin: 0 0 4px;
    font-family: 'Fraunces', serif;
    font-size: 1.02rem;
    color: var(--ink);
    line-height: 1.35;
  }
  .share-sheet-preview-meta{
    font-size: 0.88rem;
    color: var(--ink-faint);
    font-style: italic;
  }
  .share-sheet-apps{
    display: flex;
    flex-wrap: wrap;
    gap: 12px 8px;
    justify-content: flex-start;
  }
  .share-app{
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    color: var(--ink);
    text-decoration: none;
    font-family: 'EB Garamond', serif;
  }
  .share-app-icon{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--forest);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--paper);
    transition: background-color .12s ease;
  }
  .share-app:hover .share-app-icon{
    background: var(--forest-dark);
    color: var(--paper);
  }
  .share-app-label{
    font-size: 0.78rem;
    color: var(--ink-soft);
    text-align: center;
    line-height: 1.2;
  }

  /* Text link only on small screens (same idea as old #smsBtn) */
  .share-app-sms{ display: none; }
  @media (max-width: 640px){
    .share-app-sms{ display: flex; }
    .share-sheet{
      max-width: 100%;
    }
  }

  /* Optional: desktop centered modal instead of bottom sheet */
  @media (min-width: 641px){
    .share-sheet-overlay{
      align-items: center;
      padding: 24px;
    }
    .share-sheet{
      border-radius: 18px;
      transform: translateY(12px) scale(0.98);
      opacity: 0;
      transition: transform .22s ease, opacity .22s ease;
    }
    .share-sheet-overlay.is-open .share-sheet{
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  } 
  
  
  
 /* ---------- Statement of Faith content ---------- */
  .faith{
    padding: 0px 0;
    padding-bottom: 50px;
    border-top: none;
    background: var(--paper);
    position: relative;

  }
  .faith-intro{
    max-width: 720px;
    margin: 0 auto 56px;
    text-align: center;
  }
  .faith-intro .mission-label{
    display:block;
    font-family:'EB Garamond', serif;
    font-style: italic;
    color: var(--ink-faint);
    font-size: 0.95rem;
    margin-bottom: 20px;
  }
  .faith-intro h2{
    font-size: 1.9rem;
    margin-bottom: 18px;
  }
  .faith-intro p{
    color: var(--ink-soft);
    font-size: 1.08rem;
    line-height: 1.75;
    margin: 0;
    
  }

  .faith-list{
    max-width: 760px;
    margin: 0 auto;
  }
  .faith-item{
    padding: 40px 0;
   /*    border-top: 1px solid var(--line);*/
  }
  .faith-item:first-child{
    border-top: none;
    padding-top: 0;
  }
  .faith-item-head{
    display:flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 18px;
  }
  .faith-num{
    font-family:'Fraunces', serif;
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--forest);
    flex-shrink:0;
  }
  .faith-item-head h3{
    font-size: 2.5rem;
    line-height: 1.3;
  }
  .faith-item-body{
    padding-left: 0;
  }
  .faith-item-body p{
    color: var(--ink);
    line-height: 1.8;
    margin: 0 0 20px;
  }
  .faith-item-body p:first-child::first-letter{
    font-family:'Fraunces', serif;
    font-weight: 400;
    font-size: 3.6rem;
    line-height: 0.78;
    float:left;
    padding: 4px 10px 0 0;
    color: var(--forest);
  }
  .faith-refs{
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--ink-faint);
    font-style: italic;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: 8px;
  }
  .faith-refs span{
    display: inline;
  }
  .faith-refs sup{
    font-style: normal;
    color: var(--oxblood);
    font-size: 0.78rem;
    margin-right: 2px;
  }
  
  .faith-divider {
    width: 46px;
    height: 1px;
    background: var(--line-strong);
    margin: 32px 0px 41px;
}
  
  
.about-content{padding:10px 0 96px;background: var(--paper);}
.about-column{max-width:760px;margin:0 auto;}
.about-section{padding:0 0 52px;margin:0 0 52px;}
.about-section.last {border-bottom:1px solid var(--line);}
.about-section:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0;}
.about-section h2{line-height:1.18;margin:0 0 20px;}
.about-section p{line-height:1.78;margin:0 0 20px;}
.about-section p:last-child{margin-bottom:0;}
.about-section ul{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:10px;}
.about-section li{color:var(--ink-soft);font-size:1.12rem;padding-left:22px;position:relative;}
.about-section li::before{content:'—';position:absolute;left:0;color:var(--brass);}
.about-closing{color:var(--forest-dark)!important;font-style:italic;margin-top:28px!important;}
.study-note{margin:30px 0 0;padding:26px 28px 24px;border-left:3px solid var(--brass);background:var(--paper-alt);}
.study-note h3{font-size:1.28rem;line-height:1.25;margin:0 0 12px;color:var(--forest-dark);}
.study-note p{font-size:1.1rem;line-height:1.7;margin:0 0 14px;}
.study-note p:last-child{margin-bottom:0;}
.study-note .scripture-refs{font-size:1rem;color:var(--ink-faint);font-style:italic;}
@media (max-width:640px){.about-content{padding:54px 0 68px;}.about-section{padding-bottom:40px;margin-bottom:40px;}} 


.terms-content{padding:10px 0 96px;    background: var(--paper);}
.terms-column{max-width:760px;margin:0 auto;}
.terms-intro{font-size:1.24rem!important;color:var(--ink)!important;}
.terms-section{padding:0 0 48px;margin:0 0 48px;}
.terms-section:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0;}
.terms-section h2{line-height:1.2;margin:0 0 18px;}
.terms-section p{line-height:1.76;margin:0 0 18px;}
.terms-section p:last-child{margin-bottom:0;}
.terms-section ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:11px;}
.terms-section li{color:var(--ink-soft);font-size:1.1rem;line-height:1.6;padding-left:22px;position:relative;}
.terms-section li::before{content:'—';position:absolute;left:0;color:var(--brass);}
.terms-callout{margin:30px 0 0;padding:25px 28px;border-left:3px solid var(--brass);background:var(--paper-alt);}
.terms-callout h3{font-size:1.25rem;line-height:1.25;margin:0 0 10px;color:var(--forest-dark);}
.terms-callout p{font-size:1.08rem;line-height:1.7;margin:0;}
.terms-license{font-size:1rem!important;color:var(--ink-faint)!important;font-style:italic;}
@media (max-width:640px){.terms-content{padding:54px 0 68px;}.terms-section{padding-bottom:38px;margin-bottom:38px;}}

.privacy-content{padding:10px 0 96px;}
.privacy-column{max-width:760px;margin:0 auto;}
.privacy-intro{font-size:1.24rem!important;color:var(--ink)!important;}
.privacy-effective{font-size:1rem!important;color:var(--ink-faint)!important;font-style:italic;margin-top:-4px!important;}
.privacy-section{padding:0 0 48px;margin:0 0 48px;}
.privacy-section:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0;}
.privacy-section h2{line-height:1.2;margin:0 0 18px;}
.privacy-section p{line-height:1.76;margin:0 0 18px;}
.privacy-section p:last-child{margin-bottom:0;}
.privacy-section ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:11px;}
.privacy-section li{color:var(--ink-soft);font-size:1.1rem;line-height:1.6;padding-left:22px;position:relative;}
.privacy-section li::before{content:'—';position:absolute;left:0;color:var(--brass);}
.privacy-callout{margin:30px 0 0;padding:25px 28px;border-left:3px solid var(--brass);background:var(--paper-alt);}
.privacy-callout h3{font-size:1.25rem;line-height:1.25;margin:0 0 10px;color:var(--forest-dark);}
.privacy-callout p{font-size:1.08rem;line-height:1.7;margin:0;}
@media (max-width:640px){.privacy-content{padding:54px 0 68px;}.privacy-section{padding-bottom:38px;margin-bottom:38px;}}


 /* ----------
   Books
  ---------- */
  
  .book-page .wrap {
    padding-top: 50px;
    padding-bottom: 50px;}
  
  .books-hero{
    min-height:750px;
    display:flex;
    align-items:center;
    text-align:left;
    padding:calc(72px + var(--header-h)) 0 76px;
    margin-top:calc(-1 * var(--header-h));
    margin-bottom:-3px;
    background-image:
      linear-gradient(color-mix(in srgb, var(--paper) 82%, transparent) 0%, var(--paper) 100%),
      url('../images/hero-background.jpg');
    background-size:cover;
    background-position:center;
  }
  .books-hero-inner{
    width:100%;
    max-width:920px;
    margin:0 auto;
    display:grid;
    grid-template-columns:300px minmax(0, 480px);
    justify-content:center;
    gap:clamp(42px, 8vw, 90px);
    align-items:center;
  }
  .books-hero-copy{ max-width:480px; }
  .books-hero-copy .tag{ display:inline-block; margin:0 0 13px; }
  .books-hero-copy .eyebrow{
    display: block;
    color: var(--oxblood);
    font-size: 1.06rem;
    letter-spacing: .035em;
    margin-bottom: 36px;
  }
  .books-hero-copy h1{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:clamp(1.9rem, 4.2vw, 3.5rem);
    line-height:1.28;
    margin:0 0 12px;
  }
  .books-hero-copy .subtitle{
    font-size:clamp(1.15rem, 2vw, 1.15rem);
    font-weight:400;
    color:var(--ink-soft);
    line-height:1.38;
    margin:0 0 15px;
  }
  .books-hero-copy .description{
    color:var(--ink-soft);
    font-size:1.08rem;
    line-height:1.7;
    margin:0 0 30px;
  }
  .books-hero-cover{
    justify-self:center;
    width:100%;
    max-width:300px;
    aspect-ratio:2 / 3;
    background:var(--forest-dark);
    box-shadow:3px 5px 40px color-mix(in srgb, var(--brass) 58%, transparent), 0 18px 30px rgba(0,0,0,.16);
    overflow:hidden;
  }
  
[data-theme="dark"] .books-hero-cover{
    box-shadow:0 10px 20px rgba(0, 0, 0, 0.65),
        0 20px 45px rgba(0, 0, 0, 0.55),
        0 0 14px color-mix(in srgb, var(--brass) 14%, transparent);
}
  
  
  .books-hero-cover img{ width:100%; height:100%; object-fit:cover; }
  .books{
    padding:76px 0 86px;
  
    background:var(--paper-alt);
  }
  .more-books h2{ margin:0 0 32px; }
  .books-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; }
  .book-card{ min-width:0; }
  .book-card-link{ display:block; }
  .book-card-link:hover .book-placeholder{ border-color:var(--forest); }
  .book-card-link:hover h3{ color:var(--forest); }
  .book-placeholder{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color:var(--ink-soft);
    font-size: .9em;
    aspect-ratio:2 / 3;
    margin-bottom:35px;
    background:var(--paper-alt);
    border:1px solid var(--line-strong);
    box-shadow:0px 15px 30px color-mix(in srgb, var(--brass) 17%, transparent);
    transition:border-color .15s ease;
  }
  
[data-theme="dark"] .book-placeholder {
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.65),
        0 18px 35px rgba(0, 0, 0, 0.45),
        0 0 10px color-mix(in srgb, var(--brass) 8%, transparent);
}
  
  
  .book-card .book-author{ display:block; font-size:.92rem; color:var(--oxblood); letter-spacing:.035em; }
  .book-card h3{ font-size:1rem; line-height:1.3; margin:5px 0 0; transition:color .15s ease; }
  
    /* ---------- Responsive ---------- */
  @media (max-width: 860px){
    .books-hero{ min-height:0; }
    .books-hero-inner{ grid-template-columns:250px minmax(0, 420px); gap:46px; }
    .books-grid{ gap:24px; }
    .footer-grid{ grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 640px){

    .books-hero{ padding:calc(54px + var(--header-h)) 0 60px; }
    .books-hero-inner{ grid-template-columns:1fr; gap:38px; text-align:center; }
    .books-hero-copy{ max-width:480px; margin:0 auto; }
    .books-hero-cover{ width:min(72vw, 280px); }
    .books{ padding:58px 0 64px; }
    .books-grid{ grid-template-columns:repeat(2, 1fr); gap:32px 20px; }
    .footer-grid{ grid-template-columns: 1fr; gap: 30px; }
    .faith-item-head{ flex-direction: column; gap: 4px; }
    .faith-num{ font-size: 2rem; }
    .faith-item-head h3{ font-size: 1.9rem; }
  }
  
  
  /* cover image inside the existing .book-card (same look as .book-placeholder) */
.book-cover-card { width: 100%; aspect-ratio: 2 / 3; margin-bottom: 35px; overflow: hidden; background: var(--forest-dark);
  border: 1px solid var(--line-strong); box-shadow: 0 15px 30px color-mix(in srgb, var(--brass) 17%, transparent); transition: border-color .15s ease; }
.book-cover-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-card-link:hover .book-cover-card { border-color: var(--forest); }
[data-theme="dark"] .book-cover-card { box-shadow: 0 8px 16px rgba(0,0,0,.65), 0 18px 35px rgba(0,0,0,.45), 0 0 10px color-mix(in srgb, var(--brass) 8%, transparent); }
.book-card.is-soon { opacity: .85; } .book-card.is-soon .book-card-link { cursor: default; }
.book-card.is-soon .book-placeholder { border-style: dashed; }

/* ---------- one book: cover stays put on the left, text scrolls on the right ---------- */
.book-back { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; color: var(--ink-soft); text-decoration: none; font-size: 1.02rem; }
.book-round { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-style: normal; transition: background .18s, border-color .18s, color .18s; }
.book-back:hover { color: var(--forest); } .book-back:hover .book-round { background: var(--paper-alt); border-color: var(--forest); color: var(--forest); }

.book-detail { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); align-items: start; padding: 34px 0 90px; }
.book-detail-cover { position: sticky; top: calc(var(--header-h, 72px) + 28px); transition: top .25s ease; }
html.header-hidden .book-detail-cover { top: 32px; }
.book-cover-frame { aspect-ratio: 2 / 3; background: var(--forest-dark); overflow: hidden; box-shadow: 3px 5px 40px color-mix(in srgb, var(--brass) 58%, transparent), 0 18px 30px rgba(0,0,0,.16); }
[data-theme="dark"] .book-cover-frame { box-shadow: 0 10px 20px rgba(0,0,0,.65), 0 20px 45px rgba(0,0,0,.55), 0 0 14px color-mix(in srgb, var(--brass) 14%, transparent); }
.book-cover-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-nocover { display: flex; align-items: center; justify-content: center; height: 100%; padding: 24px; text-align: center; color: #F1EFE7; font-family: 'Fraunces', serif; font-size: 1.5rem; line-height: 1.3; }

.book-detail-copy { max-width: 640px;     margin-top: -15px; }
.book-detail-copy h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.22; margin: 0 0 14px; }
.book-detail-copy .subtitle { font-size: 1.22rem; color: var(--ink-soft); line-height: 1.45; margin: 0 0 16px; }
.book-detail-copy .eyebrow { font-size: 1.06rem; letter-spacing: .035em; margin-bottom: 26px; }
.book-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 34px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.btn.secondary { background: transparent; color: var(--forest); }
.btn.secondary:hover { background: var(--paper-alt); }

.book-description { font-size: 1.14rem; line-height: 1.75; color: var(--ink); }
.book-description p { margin: 0 0 1.3em; }
.book-description h2 { font-size: 1.55rem; margin: 1.8em 0 .5em; } .book-description h3 { font-size: 1.25rem; margin: 1.6em 0 .4em; } .book-description h4 { font-size: 1.08rem; margin: 1.4em 0 .4em; }
.book-description ul, .book-description ol { margin: 0 0 1.3em; padding-left: 1.5em; } .book-description li { margin-bottom: .4em; }
.book-description a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.book-description blockquote { margin: 1.6em 0; padding: .2em 0 .2em 1.3em; border-left: 3px solid var(--brass); font-style: italic; color: var(--ink-soft); }
.book-description blockquote.scripture { font-style: normal; background: var(--paper-alt); border-left-color: var(--forest); padding: 1em 1.3em; border-radius: 0 6px 6px 0; color: var(--ink); }
.book-description figure { margin: 2em 0; text-align: center; } .book-description img { max-width: 100%; height: auto; border-radius: 4px; }
.book-description figcaption { margin-top: 8px; font-size: .92rem; font-style: italic; color: var(--ink-faint); }

.book-facts { margin: 38px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 26px; }
.book-facts div { min-width: 0; } .book-facts dt { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 3px; }
.book-facts dd { margin: 0; color: var(--ink); }
.book-detail-copy .a-actions { justify-content: flex-start; margin: 30px 0 0; }

@media (max-width: 860px) {
  .book-detail { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 56px; }
  .book-detail-cover { position: static; width: min(72vw, 300px); margin: 0 auto; }
  .book-detail-copy { max-width: none; text-align: left; }
}
@media print {
  .book-back, .book-actions, .a-actions, .books, .breadcrumb, .share-sheet-overlay { display: none !important; }
  .book-detail { display: block; padding: 0; } .book-detail-cover { position: static; width: 180px; margin: 0 0 16pt; box-shadow: none; }
  .book-cover-frame { box-shadow: none; } .book-description { font-size: 11.5pt; }
}
  
  
 /* =====================================================================
Tracts (listing, tract page, digital reader)
   ===================================================================== */
.btn.secondary { background: transparent; color: var(--forest); }
.btn.secondary:hover { background: var(--paper-alt); color: var(--forest-dark, var(--forest)); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.small { font-size: .92rem; color: var(--ink-soft); }
.status { min-height: 24px; color: var(--oxblood); font-size: .92rem; }
.eyebrow { display: block; color: var(--oxblood); letter-spacing: .08em; font-size: .92rem; }
:root:has(.detail-layout) { scrollbar-gutter: stable; }       /* the page doesn't jump when the enlarged image opens */

/* ---------- the Tracts page ---------- */
.tract-list { padding-top: 15px; }
.tract-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 70px; padding-bottom: 110px; }
.tract-image { display: flex; justify-content: center; align-items: center; background: var(--paper-alt); padding: 60px; border: 1px solid var(--line); margin-bottom: 23px; overflow: hidden; position:relative;}
.tract-image img { height: 340px; width: 100%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0,0,0,.14)); transition: transform .25s;}
.tract-image:hover img { transform: translateY(-4px); }
.tract-card h2 { font-size: 1.4rem; margin: 12px 0 8px; }
.tract-card h2 a { color: var(--ink); text-decoration: none; } .tract-card h2 a:hover { color: var(--forest); }
.tract-card p { color: var(--ink-soft); margin: 0 0 20px; }

/* ---------- round arrow / icon buttons (same family as your search + light/dark buttons) ---------- */
.t-round { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; font: inherit;
  transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease; }
.t-round:hover:not(:disabled) { background: var(--paper-alt); border-color: var(--forest); color: var(--forest); }
.t-round:disabled { opacity: .35; cursor: default; }
.t-round:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
i.t-round { pointer-events: none; width: 38px; height: 38px; font-style: normal; }

/* ---------- one tract ---------- */
.t-back { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; color: var(--ink-soft); text-decoration: none; font-size: 1.02rem; position: relative;}
.t-back:hover { color: var(--forest); } .t-back:hover .t-round { border-color: var(--forest); color: var(--forest); background: var(--paper-alt); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 70px; align-items: start; padding: 30px 0 70px; }
.detail-copy h1 { font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.18; margin: 18px 0 16px; }
.t-about p { color: var(--ink-soft); margin: 0 0 1em; line-height: 1.65; } .t-about p:last-child { margin-bottom: 0; }
.tracts-page.inner .wrap {padding-top:50px;padding-bottom:50px;}


/* gallery: big image with round arrows on it, then a thumbnail strip that slides (no scrollbar) */
.main-stage { position: relative; }
.main-preview { positino:relative; display: block; width: 100%; padding: 63px 75px; background: var(--paper-alt); border: 1px solid var(--line); cursor: zoom-in; }
.main-preview.is-empty { cursor: default; text-align: center; padding: 120px 34px; }
.main-preview img { width: 100%; height: 440px; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0,0,0,.14)); transition: opacity .17s ease; }
.tract-image .tag {position:absolute;top:15px;left:15px;}
.image-fading { opacity: 0 !important; }
.t-stage-btn { position: absolute; top: 50%; transform: translateY(-50%); }
.t-stage-prev { left: 22px; } .t-stage-next { right: 22px; }
.t-count { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; font-size: .85rem; color: var(--ink-soft); }

.t-carousel { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.thumbnails { flex: 1; min-width: 0; display: flex; gap: 12px; overflow-x: auto; padding: 3px; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.thumbnails::-webkit-scrollbar { display: none; width: 0; height: 0; }
.thumbnails button { flex: 0 0 88px; scroll-snap-align: start; padding: 8px; background: var(--paper-alt); border: 2px solid transparent; outline: 1px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s; }
.thumbnails button:hover { border-color: var(--line-strong); }
.thumbnails button[aria-pressed=true] { border-color: var(--forest); }
.thumbnails img { width: 100%; height: 78px; object-fit: contain; display: block; }
.t-car-btn { width: 36px; height: 36px; }

/* Read / Print / QR */
.t-resources { margin-top: 45px; }
.resource-tabs { display: flex; gap: 13px; background: var(--paper); margin-bottom: -1px; }
.resource-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 10px;    padding-bottom: 12px; border: 0;     color: var(--paper);
    background: var(--forest); font: inherit; cursor: pointer; transition: color .18s, background .18s; border:1px solid transparent;}
.resource-tabs button svg { flex: 0 0 auto; opacity: .8; }
.resource-tabs button:hover { color: var(--forest); background: var(--paper-alt); }
.resource-tabs button[aria-selected=true] {    color: var(--ink-soft); background: var(--paper-alt); border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);}
.resource-tabs button[aria-selected=true] svg { opacity: 1; }
.resource-tabs button:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.resource-tabs button:hover{border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);}
.resource { padding: 26px 28px;border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);border-left: 1px solid var(--line);border-right: 1px solid var(--line); background: var(--paper-alt); }
.resource + .resource {}                          /* (only matters if JavaScript is off and all panels show) */
.resource h2 { font-size: 1.2rem; margin: 0 0 8px; }
.resource p { color: var(--ink-soft); margin: 0 0 18px; line-height: 1.6;font-size: .9em; }
.resource > .btn { margin-top: 2px; }
.t-empty { font-style: italic; margin: 0 !important; }
.t-field { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.t-field label { display: block; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.copy-row { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 18px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); }
.copy-row input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .95rem; padding: 8px 0; text-overflow: ellipsis; }
.copy-row input:focus { outline: none; }
.copy-row .btn { padding: 9px 18px; white-space: nowrap;    border-color: transparent; border-radius: 12px;}
.btn svg { vertical-align: -3px; margin-right: 7px; }
.btn.sm { padding: 8px 16px; font-size: .95rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

.t-downloads { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.t-downloads li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }

.t-downloads .btn {border:none;border-radius: 12px;}
.t-file-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--paper-alt); color: var(--forest); flex: 0 0 auto; }
.t-file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .t-file-meta b { font-weight: 600; } .t-file-meta small { color: var(--ink-faint); font-size: .85rem; }
.t-note { padding: 8px 0px;  border-radius: 0 12px 12px 0; margin-bottom: 18px;    margin-top: 18px; }
.t-note b { display: block; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; } .t-note p { margin: 0; }
.t-ext { display: inline-flex; align-items: center; gap: 6px; color: var(--forest); font-size: .98rem; }
.qr-layout { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: flex-start;margin-top: 15px; }
.qr-preview { background: #fff; padding: 14px; border-radius: 12px; border: 1px solid var(--line); line-height: 0; }
.qr-preview canvas { width: 168px !important; height: 168px !important; display: block; }
.qr-side p { margin: 0 0 16px; }
#qrStatus {padding-top: 9px;}

@media (max-width: 640px) {
.qr-preview {width:100%;}
.qr-preview canvas {height:unset !important;width:100% !important;}
}


/* ---------- enlarged image (dialog) ---------- */
.lightbox { position: fixed; width: min(96vw, 1100px); max-height: 94vh; padding: 40px 74px 40px; overflow: hidden; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 18px;
  opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .22s ease, transform .22s ease; }
.lightbox.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.lightbox::backdrop { background: #000; opacity: 0; transition: opacity .22s ease; }
.lightbox.is-visible::backdrop { opacity: .78; }
.lightbox-bar { margin: 0; display: block; }
.lightbox #modalPrev, .lightbox #modalNext { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.lightbox #modalPrev { left: 22px; } .lightbox #modalNext { right: 22px; }
.lightbox .nav-picker-close { position: absolute; top: 18px; right: 20px; z-index: 3; width: 40px; height: 40px; }
.lightbox .zoom-scroll { max-height: calc(90dvh - 90px); overflow: hidden; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.lightbox .zoom-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.lightbox .zoom-scroll img { display: block; margin: auto; max-width: 100%; max-height: calc(90dvh - 100px); object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-select: none; transition: opacity .17s ease; }
.lightbox .zoom-scroll.zoomed { overflow: auto; touch-action: pan-x pan-y; }
.lightbox .zoom-scroll.zoomed img { max-height: none; max-width: none; width: 1400px; cursor: zoom-out; }

/* search results */
.sr-kind.k-tract { background: transparent; border: 1px solid var(--forest); color: var(--forest); }

@media (max-width: 800px) { .detail-layout { grid-template-columns: 1fr; gap: 35px; padding-top: 22px; } .main-preview img { height: 340px; } }
@media (max-width: 640px) {
  .tract-grid { grid-template-columns: 1fr; gap: 80px; } .tract-image { padding: 36px; } .tract-image img { height: 260px; }
  .detail-layout { padding-bottom: 50px; } .detail-copy h1 { font-size: 2.3rem; }
  .resource { padding: 32px 27px; } .resource-tabs button span { font-size: .95rem; } .qr-layout { grid-template-columns: 1fr; justify-items: start; }
  .t-downloads li { flex-wrap: wrap; } .copy-row { padding-left: 14px; }
  .lightbox { padding: 56px 58px 16px; border-radius: 14px; } .lightbox #modalPrev, .lightbox #modalNext, .lightbox .nav-picker-close { width: 36px; height: 36px; } .lightbox #modalPrev { left: 10px; } .lightbox #modalNext { right:10px; }
  .lightbox .nav-picker-close { top: 12px; right: 12px; } .lightbox .zoom-scroll { max-height: calc(90dvh - 80px); } .lightbox .zoom-scroll img { max-height: calc(90dvh - 90px); }
}
@media print { .t-back, .t-resources, .lightbox { display: none !important; } }
  
  
/* Tract page: stop the grid stretching to fit the thumbnail strip (fixes the mobile carousel) and remove the global section padding */
.detail-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.t-gallery, .detail-copy { min-width: 0; padding: 0; }
.t-carousel, .thumbnails { max-width: 100%; }
@media (max-width: 800px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .t-back {top: -7px;}
}
}  
  
 /* font resizer */
 

html[data-font-size="md"] .commentary-main {
  font-size: 1.12em;
}

html[data-font-size="md"] .verse {
  font-size: 1.38rem;
}

html[data-font-size="md"] .commentary li,
html[data-font-size="md"] .commentary li p {
  font-size: 1.06rem;
}

/* Large: largest reading size */
html[data-font-size="lg"] .commentary-main {
  font-size: 1.25em;
}

html[data-font-size="lg"] .verse {
  font-size: 1.52rem;
}

html[data-font-size="lg"] .commentary li,
html[data-font-size="lg"] .commentary li p {
  font-size: 1.18rem;
}

html[data-font-size="md"] .font-size-label {
  font-size: 1.1rem;
}

html[data-font-size="lg"] .font-size-label {
  font-size: 1.22rem;
}


 /* ---------- Responsive ---------- */
  @media (max-width: 860px){
    .articles-grid{ grid-template-columns: 1fr 1fr; gap: 0 28px; }
    .footer-grid{ grid-template-columns: 1fr 1fr; }
    .passage-bar-inner{ grid-template-columns: 1fr; gap: 12px; }
    .passage-divider{ display:none; }
    .passage-browse{ flex-wrap: wrap; }
    .mission-grid{ grid-template-columns: 1fr; gap: 30px; }
    .mission-divider{ display:none; }
    .mission-anchors ul{ display:flex; flex-wrap:wrap; gap: 24px; }
    .mission-anchors li{ border-top:none; padding:0; flex:1; min-width: 160px; }
  }

  @media (max-width: 640px){
    body{ font-size: 17px; }
    .header-row{ padding: 18px 20px; }
    .articles-grid{ grid-template-columns: 1fr; gap: 40px; }
    .footer-grid{ grid-template-columns: 1fr; gap: 30px; }
    .updates-list li{ flex-direction:column; align-items:flex-start; gap:8px; }
    .passage-browse{ flex-direction:column; }
    .btn-small{ width:100%; }
  }
  
  /* ===== append to /assets/style.css — verse highlight on jump + share-a-verse ===== */
.verse, .verse-commentary { transition: opacity .35s ease; }
body.verse-focus .verse:not(.is-target) { opacity: .5; }
body.verse-focus .verse-section:not(.is-target-section) .verse-commentary { opacity: .5; }

/* --- tap / click a verse to share it: a small icon at the end of each verse; the whole verse is clickable --- */
.verse.is-shareable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.verse-end { white-space: nowrap; }
.verse-share {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; margin-left: .4em;
  width: 26px; height: 26px; padding: 0; font: inherit; color: var(--ink-faint); background: transparent;
  border: 0; border-radius: 50%; cursor: pointer; opacity: .45; transition: opacity .2s ease, color .2s ease, background-color .2s ease;
}
.verse-share:hover, .verse-share:focus-visible { opacity: 1; color: var(--forest); background: var(--paper-alt); }
.verse-share:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }
/* desktop: the icon firms up while you're over its verse */
@media (hover: hover) and (pointer: fine) { .verse.is-shareable:hover .verse-share { opacity: 1; color: var(--forest); } }
/* never in print */
@media print { .verse-share { display: none !important; } }

/* the browser's own anchor scroll is replaced by script.js, so drop the old spacing rule if you added it:
   .verse { scroll-margin-top: 130px; }   <- delete this line from style.css */


/* ===== verse navigation inside the bottom menu (tap a chapter -> pick a verse) ===== */
.nav-picker-verse-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 29px;background:var(--paper-alt); }
.nav-picker-back, .nav-picker-whole { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: transparent; box-shadow: none;
  font: inherit; font-size: 1.2rem; color: var(--ink-soft); cursor: pointer; transition: color .18s ease; -webkit-tap-highlight-color: transparent; }
.nav-picker-back:hover, .nav-picker-whole:hover, .nav-picker-back:focus-visible, .nav-picker-whole:focus-visible { color: var(--forest); }
.nav-picker-back svg, .nav-picker-whole svg { flex: 0 0 auto; transition: transform .18s ease; }
.nav-picker-back:hover svg { transform: translateX(-2px); } .nav-picker-whole:hover svg { transform: translateX(2px); }
.nav-picker-verse-view { animation: navVerseIn .22s ease; }
/* closing: the verses slide back out to the right, the chapters slide in from the left */
.nav-picker-verse-view.is-leaving { animation: navVerseOut .2s ease forwards; }
.nav-picker-chapter-grid.slide-back { animation: navChaptersBack .22s ease; }
@keyframes navVerseOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(22px); } }
@keyframes navChaptersBack { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes navVerseIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .nav-picker-verse-view, .nav-picker-verse-view.is-leaving, .nav-picker-chapter-grid.slide-back { animation: none; } }


/* verses that have no commentary: shown lighter in the verse picker, full strength on hover */
.nav-picker-chapter.is-nocomment { opacity: .3; transition: opacity .18s ease; }
.nav-picker-chapter.is-nocomment:hover, .nav-picker-chapter.is-nocomment:focus-visible { opacity: 1; }



/*  APPEND to /assets/style.css — the Contact page  */
.contact-body { padding: 14px 0 90px; }
.contact-body .wrap { max-width: 680px; }
.c-card { background: var(--paper-alt); border: 1px solid var(--line);padding: 34px 34px 30px; }
.c-thanks { text-align: center; padding: 50px 34px; } .c-thanks h2 { font-size: 1.7rem; margin-bottom: 12px; } .c-thanks p { color: var(--ink-soft); }
.c-field { margin-bottom: 22px; }
.c-field label { display: block; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.c-field input, .c-field select, .c-field textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 13px 16px; transition: border-color .15s ease, box-shadow .15s ease; }
.c-field textarea { resize: vertical; min-height: 170px; line-height: 1.55; }
.c-field input:focus, .c-field select:focus, .c-field textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 18%, transparent); }
.c-field [aria-invalid="true"] { border-color: var(--oxblood); }
.c-field small { display: block; margin-top: 6px; color: var(--ink-faint); font-size: .9rem; }
.c-error { margin: 7px 0 0; color: var(--oxblood); font-size: .95rem; }
.c-alert { background: color-mix(in srgb, var(--oxblood) 10%, transparent); border: 1px solid color-mix(in srgb, var(--oxblood) 40%, transparent); color: var(--oxblood); border-radius: 12px; padding: 12px 16px; margin-bottom: 22px; }
.c-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.c-card .btn { min-width: 170px; justify-content: center; }
@media (max-width: 600px) { .c-card { padding: 24px 18px; border-radius: 14px; } }



/* ---------- Homepage: intro text + four ways in ---------- */

.mission-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 84px); align-items: center; }
.mission-split .mission-body p { margin-bottom: 28px; }
.explore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.explore-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 27px;
  border: 1px solid var(--line); background: var(--paper-alt);
  text-decoration: none; color: var(--ink); transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}
.explore-card:hover { border-color: var(--forest); transform: translateY(-3px); }
.explore-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 14px;
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); color: var(--forest);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.explore-icon svg { width: 26px; height: 26px; }
.explore-card:hover .explore-icon { background: var(--forest); color: var(--paper); border-color: var(--forest); }
.explore-card h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.28rem; margin: 0; }
.explore-card p { margin: 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.45; }
@media (max-width: 900px) { .mission-split { grid-template-columns: 1fr; gap: 44px; } }
@media (max-width: 440px) { .explore { gap: 12px; } .explore-card { padding: 18px 16px; } .explore-icon { width: 46px; height: 46px; margin-bottom: 10px; } .explore-card h3 { font-size: 1.12rem; } .explore-card p { font-size: .9rem; } }

/* ---------- Articles pages: back-to-top with a ring that shows how far down the page you are ---------- */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 55; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: var(--paper); color: var(--forest); cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, background-color .15s ease, color .15s ease;
}
.to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { background: var(--forest); color: var(--paper); }
.to-top:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.to-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.to-top-ring circle { fill: none; stroke-width: 2; }
.to-top-ring .bg { stroke: var(--line-strong); }
.to-top-ring .fg { stroke: var(--forest); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .12s linear, stroke .15s ease; }
.to-top:hover .fg { stroke: var(--brass); }
.to-top-arrow { position: relative; }
@media (max-width: 640px) { .to-top { right: 16px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top-ring .fg { transition: none; } }
@media print { .to-top { display: none !important; } }



/* headphones badge on top of an article's image (lists, homepage, featured) */
.article-audio { position: absolute;     top: 13px; right: 14px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, #000  72%, transparent); color: #F1EFE7; border: box-shadow: 0 2px 8px rgba(0,0,0,.18); backdrop-filter: blur(3px); }
.a-featured-media .article-audio { top: 14px; right: 14px; width: 36px; height: 36px; }

/* the "Listen to this article" box at the top of an article */
.a-audio { margin: 0 0 34px; padding: 18px 22px 20px; background: var(--paper-alt); border: 1px solid var(--line); border-radius: 16px; }
.a-audio-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 25px; }
.a-audio-title { display: inline-flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif; font-size: 1.1rem; color: var(--ink); }
.a-audio-title svg { color: var(--forest); }
.a-audio-dl { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--forest); text-decoration: none; font-size: .97rem; transition: background .15s ease, border-color .15s ease; }
.a-audio-dl:hover { background: var(--paper); border-color: var(--forest); }
.a-audio audio { display: block; width: 100%; height: 44px; accent-color: var(--forest); color-scheme: light; }

/* subscribe bar (only present when podcast links are set in the admin) */
.a-podcast { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.a-podcast-label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: .98rem; }
.a-podcast-label svg { color: var(--forest); }
.a-podcast-links { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.a-podcast-links a { padding: 5px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .92rem; color: var(--ink-soft); text-decoration: none; background: var(--paper); transition: border-color .15s ease, color .15s ease; }
.a-podcast-links a:hover { border-color: var(--forest); color: var(--forest); }
@media (max-width: 560px) { .a-audio { padding: 16px 16px 18px; border-radius: 14px; } }
@media print { .a-audio, .article-audio { display: none !important; } }


/* progress ring around the up arrow in the commentary bottom menu  */

#scrollTopBtn { position: relative; }
.bn-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bn-ring circle { fill: none; stroke-width: 2; }
.bn-ring .bg { stroke: color-mix(in srgb, var(--paper) 26%, transparent); }
.bn-ring .fg { stroke: var(--paper); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .12s linear; }
@media (prefers-reduced-motion: reduce) { .bn-ring .fg { transition: none; } }
@media print { .bn-ring { display: none; } }


/* extra draw styles */
@media (min-width: 641px){
    .nav-callout, .nav-scrim{ display: none !important; }
  }
  
/* ---------- Drawer background: always dark ---------- */
@media (max-width: 640px){
  nav.primary#primaryNav{
    background: #1B2119;
    color:#fff;
  }
  .menu-toggle.open span {background:#fff;}
   nav.primary#primaryNav a {    color:#fff;}
  
  nav.primary.open{
    box-shadow: -12px 0 40px rgba(0,0,0,.5);
  }
}