/* ---------- bar ---------- */
.bar{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule); padding-top:env(safe-area-inset-top,0px)}
.bar-in{max-width:56rem; margin:0 auto; padding:.6rem 16px; display:flex; gap:.7rem; align-items:center; flex-wrap:wrap}
.brand{text-decoration:none; display:flex; flex-direction:column; line-height:1.15}
.brand b{font-family:var(--ja); font-size:1rem; font-weight:600}
.brand span{font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.search{position:relative; flex:1 1 14rem; min-width:10rem}
#q-clear{position:absolute; right:.35rem; top:50%; transform:translateY(-50%); border:0;
  background:transparent; color:var(--ink-soft); font-size:1.1rem; cursor:pointer; padding:.1rem .4rem}
.tools{display:flex; gap:.3rem; align-items:center}
.tool{width:2rem; height:2rem; justify-content:center; padding:0; font-family:var(--ja); font-size:.85rem}
#t-font{border:1px solid var(--rule); border-radius:6px; background:var(--surface); color:var(--ink-soft);
  font-size:.78rem; padding:.3rem .35rem}

/* ---------- list ---------- */
main{max-width:56rem; margin:0 auto; padding:1.4rem 16px 3rem}
.day{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin:1.6rem 0 .7rem; padding-bottom:.3rem; border-bottom:1px solid var(--rule)}
.day:first-child{margin-top:0}
.cards{display:grid; gap:.8rem; align-items:start;   /* a card without a photo keeps its own height */
  grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}
.card{display:flex; flex-direction:column; text-decoration:none; background:var(--surface);
  border:1px solid var(--rule); border-radius:10px; overflow:hidden}
.card:hover{border-color:var(--accent)}
.card:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.card .thumb{aspect-ratio:16/9; width:100%; object-fit:cover; background:var(--accent-soft); display:block}
body:not(.images-on) .card .thumb{display:none}
.card .body{padding:.75rem .9rem .9rem}
.card h3{margin:0; font-family:var(--ja); font-size:.98rem; font-weight:600; line-height:1.85}
.card time{display:block; margin-top:.4rem; font-size:.7rem; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.card p.snip{margin:.45rem 0 0; font-size:.82rem; color:var(--ink-soft); line-height:1.6}

.empty{color:var(--ink-soft); padding:2rem 0}
.count{font-size:.78rem; color:var(--ink-soft); margin:0 0 1rem}

/* ---------- article ---------- */
.article{max-width:36rem; margin:0 auto}
.back{display:inline-block; font-size:.8rem; color:var(--accent); text-decoration:none; margin-bottom:1.2rem}
.back:hover{text-decoration:underline}
.article h2{font-family:var(--ja); font-size:1.5rem; font-weight:600; line-height:2; margin:0 0 .4rem}
.article .when{font-size:.75rem; color:var(--ink-soft); margin:0 0 1.2rem; font-variant-numeric:tabular-nums}
.article img.hero{width:100%; border-radius:10px; margin-bottom:1.4rem; display:block}
body:not(.images-on) .article img.hero{display:none}
.article audio.voice{width:100%; margin-bottom:1.4rem; display:block}
.article p.para{font-family:var(--ja); font-size:var(--read); line-height:2.3; margin:0 0 1.2rem;
  text-align:justify; line-break:strict}
body:not(.furigana-on) rt{visibility:hidden}
body.vertical .article{max-width:none}
body.vertical .article .text{writing-mode:vertical-rl; text-orientation:upright;
  max-height:min(78vh, 46rem); overflow-x:auto; padding:1rem 0 1.4rem}
body.vertical .article p.para{margin:0 1.6rem 0 0; text-align:start}
.pager{display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; padding-top:1rem;
  border-top:1px solid var(--rule); font-size:.82rem}
.pager a{color:var(--accent); text-decoration:none; max-width:45%}
.pager a:hover{text-decoration:underline}

.foot{max-width:56rem; margin:0 auto; padding:1rem 16px 2rem; display:flex; justify-content:space-between;
  border-top:1px solid var(--rule); color:var(--ink-soft); font-size:.72rem}
.foot a{color:var(--ink-soft)}

@media (max-width:520px){
  .bar-in{padding:.5rem 12px; gap:.5rem}
  .brand span{display:none}
  main{padding-top:1rem}
  .article h2{font-size:1.25rem}
}