:root{
  --text:#111; --bg:#fff; --muted:#666; --link:#0a5; --maxw:860px;
  --wm-text:"Sample — Not for distribution";
}
*{box-sizing:border-box}
body{margin:0;color:var(--text);background:var(--bg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.62}
.container{max-width:860px;margin:0 auto;padding:1.25rem}
header.container{padding-top:1.5rem;padding-bottom:.5rem;border-bottom:1px solid #eee}
h1{font-size:1.6rem;margin:.5rem 0}
h2{font-size:1.25rem;margin:1.25rem 0 .5rem}
.subtitle{color:#666;margin:.25rem 0 .75rem}
p{margin:.9rem 0}
figure{margin:1rem 0;text-align:center}
figure img{max-width:100%;height:auto;border-radius:.25rem}
.pager{display:flex;gap:.75rem;justify-content:space-between;border-top:1px solid #eee;padding-top:1rem;margin-top:2rem}
.pager a{padding:.5rem .75rem;border:1px solid #ddd;border-radius:.5rem;text-decoration:none;color:#0a5}
.index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem}
.index-item{border:1px solid #eee;border-radius:.5rem;padding:.75rem}
footer.footer{color:#666;font-size:.9rem;margin-top:1rem}
.nocopy, .nocopy *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
@media print{body::before{content:var(--wm-text);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-30deg);font-size:48pt;opacity:.12;z-index:9999;color:#000;pointer-events:none;white-space:nowrap;}}