/* ============================================================
   目次（ホーム）
   ------------------------------------------------------------
   index.md の並びをそのまま出すページ。色と書体は design.css から。
   ============================================================ */

*{box-sizing:border-box}

body{
  background:var(--bg); color:var(--ink);
  font-family:var(--serif);
  font-size:16px; line-height:1.9; margin:0; padding:0 1.2rem 6rem;
  font-feature-settings:"palt"; -webkit-text-size-adjust:100%;
}
.wrap{max-width:42rem; margin:0 auto;}
a{color:inherit;}

/* ---- 表紙 ---- */
header.home{padding:4.5rem 0 2.4rem; border-bottom:1px solid var(--rule);}
/* 太さではなくサイズで見出しにする（明朝に太字ウェイトが無いため）。
   書体は body から --serif を継承しているので、ここでは指定しない。 */
header.home h1{
  font-size:2.1rem; font-weight:400; margin:0 0 1.8rem;
  letter-spacing:.04em; line-height:1.5;
}
header.home p{margin:0 0 1.3rem;}
header.home ul{margin:0 0 1.3rem; padding-left:1.3rem; color:var(--ink-soft);}
header.home li{margin:0 0 .3rem;}
.home__hint{
  margin:1.8rem 0 0 !important;
  font-family:var(--ui); font-size:.82rem; letter-spacing:.04em;
  color:var(--ink-soft);
}

/* ---- 章（畳んである。章題を押すと開く） ---- */
.sec{margin:3.6rem 0 0;}

.sec__head{
  display:block; cursor:pointer;
  list-style:none;                 /* 既定の三角は消して、自前の矢羽根を出す */
  -webkit-tap-highlight-color:transparent;
}
.sec__head::-webkit-details-marker{display:none;}
.sec__head:focus-visible{outline:2px solid var(--mark); outline-offset:.4rem;}

.sec h2{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--ui); font-size:1.12rem; font-weight:600;
  letter-spacing:.03em; color:var(--ink);
  margin:0 0 1rem; padding-bottom:.6rem; border-bottom:1px solid var(--rule);
  transition:color .15s, border-color .15s;
}
/* 何本入っているか。閉じたままでも量が分かる */
.sec__count{
  margin-left:auto; flex:none;
  font-size:.78rem; font-weight:400; letter-spacing:.02em; color:var(--ink-faint);
}
/* 矢羽根。閉じているとき下向き、開くと上向き。
   開閉の操作点なので機能色（DESIGN.md §6-2）を当てる */
.sec__mark{
  flex:none; width:.5rem; height:.5rem; margin-bottom:.18rem;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  color:var(--mark); transform:rotate(45deg);
  transition:transform .18s ease, color .15s;
}
.sec__mark:only-child{margin-left:auto;}   /* 件数が無い章は矢羽根だけ右端へ */
.sec[open] .sec__mark{transform:rotate(-135deg); margin-bottom:0; margin-top:.18rem;}

.sec__head:hover h2{color:var(--ink); border-color:var(--rule);}
.sec__head:hover .sec__mark{color:var(--mark);}

.sec__lede{margin:0 0 1.6rem; color:var(--ink-soft); font-size:.95rem;}
.sec__lede p{margin:0;}
.sec__body{margin-top:.2rem;}

/* 章の中の小見出し（index.md の url を持たない ###）。
   章題より一段小さくし、太字は書体をゴシックに替えて出す */
.sec__body h3{
  font-family:var(--ui); font-size:.95rem; font-weight:600;
  letter-spacing:.04em; color:var(--ink);
  margin:2rem 0 .6rem;
}
.sec__body h3:first-child{margin-top:0;}
.sec__body ul{margin:0 0 1.4rem; padding-left:1.3rem;}
.sec__body li{margin:0 0 .3rem; line-height:1.85;}
/* 章の中から記事へ送るリンク。一覧の見出しと同じ印を付ける */
.sec__body p a,
.sec__body li a{
  color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--mark);
  text-underline-offset:4px; text-decoration-thickness:1px;
}
.sec__body p a:hover,
.sec__body li a:hover{color:var(--mark); text-decoration-thickness:1.5px;}

/* ---- 項目 ---- */
.entry{
  display:block; text-decoration:none;
  padding:1.1rem 0; border-bottom:1px solid var(--rule-soft);
}
.entry:hover,
.entry:focus-visible{background:var(--mark-wash); box-shadow:0 0 0 6px var(--mark-wash);}
.entry:focus-visible{outline:2px solid var(--mark); outline-offset:0;}
/* リンクだと分かるように色と下線を付ける。
   字数（.entry__len）は下線の対象外にしたいので、flex ではなく float で右へ出す。
   下線は浮動要素には伝播しないという規定に乗っている。
   長いタイトルは字数の下に回り込み、入らなければ字数が次の行へ落ちる。 */
.entry__title{
  display:block;
  font-size:1.12rem; font-weight:400;
  letter-spacing:.01em; line-height:1.6;
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--mark);
  text-underline-offset:5px;
  text-decoration-thickness:1px;
}
.entry:hover .entry__title,
.entry:focus-visible .entry__title{color:var(--mark); text-decoration-thickness:1.5px;}
/* だいたいの長さ。直すたびに動くので丸めた数を出している */
.entry__len{
  float:right; margin-left:.9rem;
  font-family:var(--ui); font-size:.78rem; font-weight:400;
  letter-spacing:.02em; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.entry__desc{
  display:block; clear:right; margin-top:.3rem;
  font-size:.94rem; color:var(--ink-soft); line-height:1.8;
}
.entry--todo{color:var(--ink-faint);}
.entry--todo span{
  font-family:var(--ui); font-size:.7rem; letter-spacing:.08em;
  border:1px dashed var(--rule); padding:.1rem .4rem; margin-left:.6rem;
}

/* 閉じているときだけ見せる、その章の中身の予告。
   押せる場所ではないので機能色は当てない。段落と役割を分けるためゴシックにする。
   マークアップは <summary> の内側にある（details は閉じている間、
   summary 以外の子要素をすべて隠すため、summary の外に置くと出てこない）。 */
.sec__peek{
  margin:.7rem 0 0;
  font-family:var(--gothic); font-size:.82rem; line-height:1.85;
  color:var(--ink-soft); letter-spacing:.02em;
  text-wrap:pretty;
}
.sec[open] .sec__peek{display:none;}

footer.page{
  margin:4.5rem 0 0; padding-top:1.6rem; border-top:1px solid var(--rule);
  font-family:var(--ui); font-size:.82rem; letter-spacing:.06em; color:var(--ink-soft);
}
footer.page a{text-decoration:none;}

@media (max-width:480px){
  body{font-size:15.5px; padding:0 1rem 4rem;}
  header.home{padding:3rem 0 2rem;}
  header.home h1{font-size:1.8rem;}
}