:root{
  --bg:#f3f5f6;
  --paper:#ffffff;
  --text:#0b1216;
  --muted:#5b6770;
  --accent:#0f5a5a;
  --pad:clamp(1rem,4vw,2.25rem);
  --maxch:70ch;
  --radius:12px;
  --shadow:0 10px 30px rgba(8,18,28,0.06);
}
*{box-sizing:border-box}
html,body{height:auto;min-height:100%;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.65}
body{
  margin:0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size:clamp(1rem, 1rem + 0.4vw, 1.0625rem);
  -webkit-text-size-adjust:100%;
  padding:clamp(1rem,2.5vw,2rem);
}
.reading-container{
  width:min(94%, var(--maxch));
  max-width:var(--maxch);
  margin:clamp(1.25rem,4vw,3.5rem) auto;
  background:var(--paper);
  padding:var(--pad);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:var(--text);
}
.reading-container h1{
  margin:0 0 .45em 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:700;
  font-size:clamp(1.5rem,4.5vw,2.25rem);
  line-height:1.05;
  text-align:center;
  color:var(--accent);
  letter-spacing:0.01em;
}
.reading-container h2{
  margin:2.1em 0 .6em 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:clamp(1rem,2.5vw,1.125rem);
  font-weight:600;
  color:var(--text);
  letter-spacing:0.01em;
  border-top:1px solid rgba(11,18,22,0.06);
  padding-top:.65em;
}
.reading-container p{
  margin:0 0 1.15em 0;
  color:var(--text);
  font-size:1em;
  line-height:1.7;
  text-rendering:optimizeLegibility;
  hyphens:auto;
  word-break:break-word;
}
.reading-container p + p{ text-indent:0 }
.reading-container a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:.12em;
  -webkit-text-decoration-skip-ink:none;
}
.reading-container a:focus,
.reading-container a:hover{
  outline:none;
  text-decoration:underline;
}
.reading-container img{max-width:100%;height:auto;display:block;margin:1em auto}
.reading-container blockquote{
  margin:1.2em 0;
  padding-left:1em;
  border-left:3px solid rgba(15,90,90,0.08);
  color:var(--muted);
  font-style:italic;
}
.reading-container small{color:var(--muted);font-size:.92em}
@media (max-width:480px){
  .reading-container{width:min(96%, calc(var(--maxch) - 3rem))}
  .reading-container h1{font-size:1.5rem}
  body{padding:clamp(.6rem,3vw,1rem)}
}