/* /site.css */
:root{
  --measure: 68ch;      /* readable line length ~60–75 chars */
  --pad: clamp(12px,3vw,24px);
  --gap: 1rem;
}

*{ box-sizing:border-box; }
html{ font-size:18px; }
body{
  margin:0;
  font: 400 1rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
  color:#111; background:#fff;
  text-rendering: optimizeLegibility;
}

/* Layout helpers */
.wrap{ max-width: var(--measure); margin-inline:auto; padding-inline: var(--pad); }

/* Top bar */
.topbar{
  position: sticky; top:0; z-index: 10;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom:1px solid #eee;
}
.topbar .wrap{
  display:flex; flex-direction:column;
  padding-block:1rem;
  gap:.6rem;
}
.topbar-row{
  display:flex; align-items:center; gap:var(--gap);
}
.topbar-meta{
  display:flex; 
  justify-content: space-between; 
  align-items: center;
  padding-top:.4rem;
  border-top:1px solid #f0f0f0;
}
.brand{ font-weight:600; text-decoration:none; color:inherit; }
.back-link{ 
  text-decoration:none; 
  color:#666; 
  font-size:.9rem;
  transition: color .2s ease;
}
.back-link:hover{ color:#007aff; }

/* Audio player controls */
.audio-player{
  display:flex; align-items:center; gap:.75rem;
  margin-left:auto;
}
.play-button{
  width:48px; height:48px;
  border:none; border-radius:50%;
  background:#007aff;
  color:white;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, transform .1s ease;
  padding:0;
  flex-shrink:0;
}
.play-button:hover{ background:#0051d5; }
.play-button:active{ transform:scale(.95); }
.play-button svg{ width:24px; height:24px; }
.play-icon{ margin-left:2px; }
.audio-info{
  display:flex; flex-direction:column; gap:3px;
}
.audio-label{
  font-size:.95rem; font-weight:600; line-height:1.2;
}
.audio-meta{
  font-size:.8rem; color:#666; line-height:1;
}

.meta{ color:#666; font-size:.85rem; }

/* Store badges nav (official badge images) */
.storebadges{ display:flex; gap:.5rem; align-items:center; margin-left:.5rem; }
.storebadges a{ display:inline-flex; line-height:0; }
.storebadges img{ height:36px; width:auto; display:block; }

@media (max-width:768px){
  .topbar .wrap{ padding-block:1.2rem; gap:.75rem; }
  .play-button{ width:56px; height:56px; }
  .play-button svg{ width:28px; height:28px; }
  .audio-label{ font-size:1rem; }
  .audio-meta{ font-size:.85rem; }
  .storebadges{ flex-wrap:wrap; }
}

@media (max-width:520px){
  .topbar-row{ flex-wrap:wrap; }
  .brand{ flex-basis:100%; margin-bottom:.25rem; }
  .audio-player{ 
    flex-basis:100%; 
    margin-left:0; 
    justify-content:center;
    padding:.5rem 0;
  }
  .storebadges{ 
    flex-basis:100%; 
    justify-content:center; 
    margin-left:0;
  }
  .storebadges img{ height:32px; }
  .meta{ font-size:.8rem; }
  .back-link{ font-size:.85rem; }
}

/* Optional text CTA (kept for reuse) */
.cta{
  margin-left:.75rem; padding:.45rem .8rem; border-radius:999px;
  border:1px solid #ddd; text-decoration:none; color:inherit;
}

/* Reader content */
main.wrap{ padding-block: clamp(12px,4vw,28px); }
.reader{
  max-width: var(--measure);
  hyphens: auto;
}
.reader h1:first-child{ margin-top:0; font-size:2.2rem; line-height:1.2; }
.reader .book-author{ font-size:1.3rem; color:#555; margin:.5em 0; font-style:italic; }
.reader .book-translation-info{ font-size:.85rem; color:#666; margin:.5em 0 0.8em; }
.reader .book-year{ font-size:.85rem; color:#666; margin:.5em 0 0.8em; }
.reader .book-other-contributors{ font-size:.85rem; color:#666; margin:.5em 0 0.8em; }
.reader p{ margin:0 0 1em; }
.reader h1,.reader h2,.reader h3{ margin:2em 0 .6em; text-wrap: balance; }
.reader blockquote{ margin:1.2em 0; padding-left:1em; border-left:3px solid #eee; color:#444; }
.reader hr{ border:0; border-top:1px solid #eee; margin:2rem 0; }
.reader img, .reader video{ max-width:100%; height:auto; }

/* Footer note */
.footnote{ color:#666; font-size:.9rem; padding-bottom:2rem; }

/* Tweaks */
@media (min-width:1100px){ :root{ --measure:72ch; } }

/* Dark mode */
@media (prefers-color-scheme: dark){
  body{ background:#0e0e0e; color:#eee; }
  .topbar{ background: rgba(15,15,15,.85); border-bottom-color:#222; }
  .topbar-meta{ border-top-color:#222; }
  .meta,.footnote{ color:#aaa; }
  .audio-meta{ color:#aaa; }
  .back-link{ color:#aaa; }
  .back-link:hover{ color:#007aff; }
  .cta{ border-color:#444; }
  .reader .book-author{ color:#bbb; }
  .reader .book-translation-info{ color:#777; }
  .reader .book-year{ color:#999; }
  .reader .book-other-contributors{ color:#666; }
  .reader blockquote{ border-left-color:#333; color:#bbb; }
}