/* 棚 (/writing/ = 公開名「つくったもの」) の CSS。このページだけが読む (ほかのページには配らない)。
   窓枠 1px #7f8b96 / 16:10 を 320px・130px・40px の 3 寸法で使い回し、
   小さくなるごとに情報を 1 層ずつ落とす。色を持つのは作品だけ。
   クラス名が持つのは「並べ方 (grid / list / index)」だけで、段の位置 (上・中・下) は
   持たせない = 並べ替えても名前が嘘にならない。窓の寸法も並べ方に付いている。 */

:root{
  /* 棚で 1 つだけ足した色。白い作品・黒い作品・地の三者すべてに線が立つ
     (白 3.48:1 / 黒 5.2:1 / 紙 3.36:1)。--ink 等は hub.css が宣言する */
  --frame:#7f8b96;
}

/* ---------- 棚のページだけ器を広げる (hub.css の --measure を上書き) ---------- */
body.shelf main{max-width:var(--wide);padding-left:1.25rem;padding-right:1.25rem}
/* 導入文の行長だけ 39.5rem に絞る */
.sb-measure{max-width:39.5rem}

/* hub.css は a に accent 色を与えている (本文の Markdown 用)。`.sb-card` の色を inherit に戻さないと、
   日付・種別・分類まで全部リンク色になる。見出しの飾りは hub.css 側で `main > h2` に絞ってあるので
   (段見出しは main の孫)、ここで打ち消す必要は無い */
.sb-card{color:inherit}

/* ---------- 見出しと文 (kind=note) ---------- */
.sb-note{margin:0 0 1.8rem}
.sb-note-h{margin:0 0 .5rem;font-size:1rem;font-weight:600;line-height:1.6}
.sb-lede{margin:0 0 .6rem;font-size:1rem;line-height:1.85;text-wrap:pretty}

/* ---------- 締め欄 (kind=ledger。棚の規模。ここで幅が開く) ---------- */
.sb-ledger{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.5rem;
  padding:.55rem 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:.8rem;line-height:1.6;letter-spacing:.02em;
  color:var(--ink-muted);
  font-variant-numeric:tabular-nums lining-nums;
}
.sb-n{color:var(--ink);font-weight:600}
.sb-brk{display:flex;flex-wrap:wrap;gap:.3rem 1.05rem}
.sb-upd{margin-left:auto}

/* ---------- 段の見出し ---------- */
.sb-bh{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:1.4rem 0 1.1rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--line);
}
.sb-bh h2{
  margin:0;font-size:.82rem;font-weight:600;line-height:1.6;
  letter-spacing:.03em;color:var(--ink);
}
.sb-count{font-size:.78rem;color:var(--ink-muted);letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* 索引は面が変わる。色を足さず、罫の濃度だけを上げて知らせる */
.sb-bh--strong{border-bottom-color:var(--ink)}

/* ---------- 窓枠 (棚で唯一の輪郭。3 寸法で使い回す) ---------- */
.sb-frame{
  display:block;
  border:1px solid var(--frame);
  border-radius:4px;
  background:var(--surface);
  overflow:hidden;
  transition:border-color 200ms linear;
}
.sb-frame img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;transition:transform .8s var(--ease)}
/* サムネがまだ無い窓。題の頭文字を薄く置くだけで、画の無い窓が
   「壊れている」ではなく「まだ」に見える */
.sb-frame--none{
  display:grid;place-items:center;
  aspect-ratio:16/10;
  background:var(--paper-deep);
}
.sb-initial{
  font-family:var(--serif);
  font-size:2.4rem;font-weight:600;line-height:1;
  color:#bfb3a1;
  user-select:none;
}
.sb-list .sb-initial{font-size:1.4rem}
.sb-index .sb-initial{font-size:.85rem}

.sb-card{display:block;text-decoration:none}

/* ---------- 格子 (窓 320px。画・日付・種別・分類・題・説明) ---------- */
.sb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin:0}
/* 窓・日付・題・説明の 4 段を 3 枚で揃える。min-height で場所を予約すると 1 行題の
   カードに穴が空くので、subgrid で「いちばん高い題の分だけ」揃える */
@supports (grid-template-rows:subgrid){
  .sb-grid{grid-template-rows:auto auto auto auto}
  .sb-grid .sb-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .sb-grid .sb-ttl{min-height:0}
}
.sb-grid .sb-kick{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .85em;
  margin-top:.75rem;
  font-size:.76rem;line-height:1.5;letter-spacing:.02em;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--ink-muted);
}
.sb-grid .sb-kind{color:var(--ink);font-weight:500}
.sb-grid .sb-ttl{
  display:block;min-height:3.18em;margin-top:.25rem;
  font-family:var(--serif);
  font-size:1.08rem;font-weight:600;line-height:1.55;letter-spacing:.03em;
  line-break:strict;word-break:auto-phrase;text-wrap:pretty;
  color:var(--ink);
}
.sb-grid .sb-dsc{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  margin-top:.4rem;
  font-size:.83rem;line-height:1.7;color:var(--ink-muted);
  line-break:strict;word-break:auto-phrase;
}

/* ---------- 2 列リスト (窓 130px。説明を落とす) ---------- */
.sb-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 2rem;margin:0}
.sb-list .sb-card{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:.7rem 0;
  border-bottom:1px solid var(--line);
}
.sb-list .sb-card:nth-last-child(-n+2){border-bottom:0}
.sb-list .sb-frame{flex:0 0 130px;width:130px}
.sb-body{flex:1 1 auto;min-width:0}
.sb-ser{
  display:block;
  font-size:.75rem;line-height:1.5;color:var(--ink-muted);letter-spacing:.02em;
}
.sb-ser b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.sb-list .sb-ttl{
  display:block;margin-top:.1rem;
  font-size:.97rem;font-weight:600;line-height:1.55;letter-spacing:-.003em;
  line-break:strict;word-break:auto-phrase;text-wrap:pretty;
  color:var(--ink);
}
.sb-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .8em;
  margin-top:.3rem;
  font-size:.74rem;line-height:1.5;letter-spacing:.02em;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--ink-muted);
}
.sb-meta .sb-kind{color:var(--ink);font-weight:500}

/* ---------- 索引 (窓 40px。説明と種別を落とし、日付を年月に) ---------- */
/* 段組は CSS の段 (columns) に任せる。束の数が本人の分類次第で変わるので、
   template 側で 2 つの列に振り分けない (振り分けると片側だけ長い日が必ず来る) */
.sb-index{columns:2;column-gap:2.2rem}
.sb-index section{break-inside:avoid;margin:0 0 1.4rem}
.sb-index h3{
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  margin:0 0 .35rem;padding-bottom:.4rem;
  border-bottom:1px solid var(--line);
  font-size:.85rem;font-weight:600;line-height:1.6;letter-spacing:.02em;
}
.sb-index h3 span{font-size:.74rem;font-weight:400;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.sb-index .sb-card{
  display:flex;align-items:center;gap:.6rem;
  padding:.45rem 0;
  border-bottom:1px solid var(--line);
}
.sb-index section > .sb-card:last-child{border-bottom:0}
.sb-index .sb-frame{flex:0 0 40px;width:40px}
.sb-index .sb-ttl{
  flex:1 1 auto;min-width:0;
  font-size:.8rem;font-weight:500;line-height:1.5;
  line-break:strict;word-break:auto-phrase;
  color:var(--ink);
}
.sb-no{
  display:inline-block;width:1.15em;
  color:var(--ink-muted);font-weight:400;
  font-variant-numeric:tabular-nums lining-nums;
}
.sb-dt{
  flex:0 0 auto;
  font-size:.74rem;line-height:1.5;color:var(--ink-muted);letter-spacing:.02em;
  font-variant-numeric:tabular-nums lining-nums;
}

/* ---------- ホバー (浮き上がらせない。輪郭の濃度と下線だけ) ---------- */
@media (hover:hover){
  .sb-card:hover .sb-frame{border-color:var(--ink)}
  /* 窓の中の画だけがゆっくり寄る (カードごと浮かせない = 並びの静けさは保つ) */
  .sb-card:hover .sb-frame img{transform:scale(1.035)}
  .sb-card:hover .sb-ttl{
    text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;
  }
}
.sb-card:focus-visible .sb-frame{border-color:var(--ink)}

/* ---------- 〜1060px: 幅が流動に変わる。3 段の役割は変えない ---------- */
@media (max-width:1060px){
  .sb-grid{gap:1.4rem}
  .sb-list .sb-frame{flex-basis:118px;width:118px}
}

/* ---------- 〜860px: 格子 2 列 / リスト 1 列 / 索引 1 列 ---------- */
@media (max-width:860px){
  .sb-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem 1.4rem}
  .sb-list{grid-template-columns:1fr;gap:0}
  .sb-list .sb-card:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .sb-list .sb-card:last-child{border-bottom:0}
  .sb-index{columns:1}
}

/* ---------- 〜560px: すべて 1 列。窓の 3 寸法だけは保つ ---------- */
@media (max-width:560px){
  .sb-grid{grid-template-columns:1fr;gap:1.6rem}
  .sb-grid .sb-ttl{min-height:0}
  .sb-list .sb-card{gap:.7rem;padding:.65rem 0}
  .sb-list .sb-frame{flex-basis:92px;width:92px}
  .sb-list .sb-ttl{font-size:.94rem}
  .sb-upd{margin-left:0;flex-basis:100%}
  .sb-index .sb-card{gap:.55rem}
  .sb-index .sb-frame{flex-basis:36px;width:36px}
}

/* スクロール連動に対応したブラウザでは、カードが見えたときに 1 枚ずつ上がる (hub.css の hub-rise を使う。
   視差効果を減らす設定では hub.css の `*` の規則が窓の動きごと止める) */
@supports (animation-timeline:view()){
  .sb-card{animation:hub-rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}