@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
/* the reading pages set English in a serif; everything else comes from /ui.css */
:root{--en:"Newsreader",Georgia,"Times New Roman",serif}
body{font-family:var(--en); font-size:16px; line-height:1.6}

/* ---------- masthead ---------- */
.head{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
  padding-top:env(safe-area-inset-top, 0px);
}
.head-inner{
  max-width:52rem; margin:0 auto; padding-block:.7rem .55rem; padding-inline:16px;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
}
.brand{display:flex; align-items:baseline; gap:.55rem; margin-right:auto; text-decoration:none}
.brand b{font-family:var(--ja); font-weight:600; font-size:1.05rem; letter-spacing:.06em}
.brand span{font-family:var(--ui); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.controls{display:flex; flex-wrap:wrap; gap:.4rem; font-family:var(--ui)}
.seg{display:flex; border:1px solid var(--rule); border-radius:999px; background:var(--surface); overflow:hidden}
.seg button, .btn{
  font-family:var(--ui); font-size:.72rem; letter-spacing:.03em;
  padding:.3rem .62rem; border:0; background:transparent; color:var(--ink-soft);
  cursor:pointer; line-height:1.5;
}
.seg button[aria-pressed="true"]{background:var(--accent); color:#fff}
.seg-label{
  font-family:var(--ui); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); align-self:center; margin-right:.15rem;
}
.btn{border:1px solid var(--rule); border-radius:999px; background:var(--surface); text-decoration:none; display:inline-block}
.btn[aria-pressed="true"]{background:var(--accent); color:#fff; border-color:var(--accent)}

.index{
  max-width:52rem; margin:0 auto; padding-inline:16px; padding-bottom:.6rem;
  display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none; align-items:center;
}
.index::-webkit-scrollbar{display:none}
.chip{
  display:inline-flex; align-items:center; gap:.42rem; flex:0 0 auto;
  padding:.3rem .7rem .3rem .42rem; border:1px solid var(--rule); border-radius:999px;
  background:var(--surface); color:var(--ink); text-decoration:none;
  font-family:var(--ja); font-size:.82rem; white-space:nowrap;
}
.chip-num{
  font-family:var(--ui); font-size:.66rem; font-weight:600;
  min-width:1.15rem; height:1.15rem; padding:0 .2rem; border-radius:999px;
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink);
}
.chip[aria-current="true"]{border-color:var(--accent); background:var(--accent-soft)}
.chip[aria-current="true"] .chip-num{background:var(--accent); color:#fff}
.chip.nav{font-family:var(--ui); font-size:.72rem; color:var(--ink-soft); padding:.3rem .7rem}

/* ---------- reading column ---------- */
main{max-width:52rem; margin:0 auto; padding-inline:16px; padding-block:1.6rem 4rem}
.lesson-head{max-width:34rem; margin-bottom:2.6rem}
.eyebrow{
  font-family:var(--ui); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 .4rem;
}
.lesson-head h1{font-family:var(--ja); font-weight:600; font-size:1.6rem; line-height:1.9; margin:0; text-wrap:balance}
.lesson-head p{font-family:var(--ui); font-size:.72rem; color:var(--ink-soft); margin:.5rem 0 0; line-height:1.7}

.text{max-width:34rem; scroll-margin-top:var(--head-h, 7.5rem); margin-bottom:3.6rem}
.text-head{display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.5rem}
.marker{flex:0 0 auto; width:2.1rem; height:2.1rem; margin-top:.35rem; display:grid; place-items:center;
  background:var(--accent); transform:rotate(45deg)}
.marker-num{transform:rotate(-45deg); color:#fff; font-family:var(--ui); font-weight:600; font-size:.85rem}
.text-titles{min-width:0}
.text-titles h2{font-family:var(--ja); font-weight:600; font-size:1.5rem; line-height:1.9; margin:0; text-wrap:balance}
.title-en{font-family:var(--en); font-style:italic; color:var(--accent-ink); margin:.1rem 0 .45rem; font-size:1rem}
.meta{font-family:var(--ui); font-size:.68rem; line-height:1.7; color:var(--ink-soft); margin:0}
.meta a{color:var(--ink-soft)}

.para, .note, .terms, .steps, .bullets{margin:0 0 1.35rem}
p.ja{
  font-family:var(--ja); font-size:var(--read); line-height:2.3;
  margin:0; text-align:justify; line-break:strict; overflow-wrap:break-word;
}
p.en{
  font-family:var(--en); font-size:.9rem; line-height:1.62; color:var(--ink-soft);
  margin:.55rem 0 0; padding-left:.85rem; border-left:1px solid var(--rule);
}
rt{font-size:.46em; letter-spacing:.02em}
body.f-off rt, body.f-tap rt{visibility:hidden}
body.f-tap ruby{cursor:pointer}
body.f-tap ruby.on rt{visibility:visible}
@media (hover:hover){body.f-tap ruby:hover rt{visibility:visible}}
body.en-off p.en{display:none}

.sub{display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .7rem;
  margin:2.2rem 0 1.1rem; padding-bottom:.4rem; border-bottom:1px solid var(--rule)}
.sub-ja{font-family:var(--ja); font-weight:600; font-size:1.12rem; line-height:2.1}
.sub-en{font-family:var(--en); font-style:italic; font-size:.92rem; color:var(--accent-ink)}

.steps{list-style:none; padding:0; display:flex; flex-direction:column; gap:1.15rem}
.step{display:flex; gap:.8rem}
.num{flex:0 0 auto; width:1.45rem; height:1.45rem; margin-top:.5rem; border-radius:3px;
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink);
  font-family:var(--ui); font-size:.75rem; font-weight:600; font-variant-numeric:tabular-nums}
.step-body{min-width:0; flex:1}
.bullets{list-style:none; padding:0; display:flex; flex-direction:column; gap:1.15rem}
.bullet{display:flex; gap:.8rem}
.bullet::before{content:""; flex:0 0 auto; width:.42rem; height:.42rem; margin-top:1.05rem;
  background:var(--accent); transform:rotate(45deg)}

.terms{display:flex; flex-direction:column; gap:1.4rem}
.term h4{font-family:var(--ja); font-size:.95rem; font-weight:600; color:var(--accent-ink);
  margin:0 0 .3rem; letter-spacing:.04em}
.note{background:var(--surface-2); border-left:2px solid var(--accent);
  padding:.9rem 1rem; border-radius:0 4px 4px 0}
.note p.en{border-left-color:var(--rule)}

.pager{max-width:34rem; display:flex; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--rule); padding-top:1.2rem; margin-bottom:2rem}
.pager a{font-family:var(--ui); font-size:.78rem; color:var(--accent-ink); text-decoration:none}
.pager a:hover{text-decoration:underline}

footer{max-width:34rem; margin:0 auto; padding:1.6rem 16px 0; border-top:1px solid var(--rule);
  font-family:var(--ui); font-size:.7rem; line-height:1.8; color:var(--ink-soft)}
footer a{color:var(--ink-soft)}

/* ---------- library index ---------- */
.lede{max-width:34rem; font-size:.92rem; color:var(--ink-soft);
  border-left:2px solid var(--accent); padding-left:.85rem; margin:0 0 2.6rem}
.lede b{color:var(--ink)}
.lessons{display:grid; gap:1.6rem 2.4rem; grid-template-columns:repeat(auto-fill, minmax(19rem, 1fr))}
.lesson{border-top:1px solid var(--rule); padding-top:.9rem}
.lesson h2{margin:0 0 .1rem; font-family:var(--ja); font-size:1.02rem; font-weight:600}
.lesson h2 a{text-decoration:none}
.lesson h2 a:hover{color:var(--accent-ink)}
.lesson .topic{font-family:var(--ui); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 .45rem}
.lesson ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.32rem}
.lesson li{display:flex; gap:.55rem; align-items:baseline}
.lesson .n{font-family:var(--ui); font-size:.7rem; font-variant-numeric:tabular-nums;
  color:var(--ink-soft); min-width:1.4rem; text-align:right}
.lesson a.t{font-family:var(--ja); font-size:.92rem; text-decoration:none; line-height:1.7}
.lesson a.t:hover{color:var(--accent-ink); text-decoration:underline}
.lesson a.t i{font-family:var(--en); font-style:italic; font-size:.82rem; color:var(--ink-soft)}

@media (max-width:520px){
  .head-inner{padding-block:.6rem .45rem}
  .brand span{display:none}
  .text-titles h2{font-size:1.3rem}
  .lessons{gap:1.4rem}
}
@media print{
  .head, .pager{display:none} body{background:#fff}
}

/* Pictures printed with the text. A strip that wraps: one picture takes the
   width, several share it, and the browser holds their space from the width and
   height attributes so the text does not jump as they arrive. */
.shots{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:0 0 var(--sp-4)}
.shots .shot{flex:1 1 15rem; margin:0; min-width:0}
.shots img{width:100%; height:auto; display:block; border-radius:var(--r);
           border:1px solid var(--rule); background:var(--surface)}
.shots figcaption{margin-top:.4rem; font-size:.8rem; color:var(--ink-soft); line-height:1.5}
.shots figcaption .ja{display:block; font-family:var(--ja)}
.shots figcaption .en{display:block}
@media (max-width:40rem){ .shots .shot{flex:1 1 100%} }