:root{ scroll-behavior: smooth; }
.reader-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.reader-header .meta{ display:flex; gap:10px; flex-wrap:wrap; font-weight:800; color: var(--ink-muted); }
.progress{ position:sticky; top:0; height:4px; background:#e9eef8; border-radius:999px; overflow:hidden; }
.progress > span{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .15s linear; }
.article{ line-height:2; color: var(--ink); }
.article h1{ margin: 0 0 10px; }
.article p{ margin: 0 0 12px; }
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.toolbar .btn{ padding:10px 12px; }
@media (max-width:680px){
  .reader-header{ flex-direction:column; align-items:flex-start; }
  .toolbar .btn{ width:100%; justify-content:center; }
}


/* Intro (lede) paragraph for articles */
.lede{ font-size: 1.05rem; line-height: 2.1; margin: 8px 0 16px; color: var(--ink); font-weight: 600; }


/* ===== Reader tweaks for better phone experience ===== */
.section{ max-width: 860px; }
.article{ line-height: 2.1; color: var(--ink); font-size: 1.02rem; }
.article img, .article iframe{ max-width:100%; height:auto; border-radius:12px; }
.lede{ font-size: 1.05rem; line-height: 2.1; margin-bottom: 14px; }

@media (max-width:680px){
  .section{ padding: 28px 16px !important; }
  .section-title{ font-size: 22px; }
  .reader-header{ gap:12px; }
  .lede{ font-size: 1rem; line-height: 2; margin-bottom: 12px; }
  .article{ font-size: 1rem; line-height: 2.1; }
  .toolbar{ flex-direction: column; gap:8px; }
  .toolbar .btn{ width:100%; justify-content:center; }
  /* extra breathing room for bottom nav if present */
  body{ padding-bottom: 80px; }
}


/* ===== Title underline & meta/date tweaks ===== */
.reader-header h1.section-title{
  margin: 0 0 8px !important;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
}
.reader-header .meta time{
  font-size: .9rem;
  color: #9aa3b2; /* light gray for date */
  font-weight: 700;
}

/* ===== Toolbar: two buttons side-by-side and full width on phone ===== */
@media (max-width:680px){
  .toolbar{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .toolbar .btn{
    width: 100%;
    justify-content: center;
  }
}