/* =========================================================
   こころつむぎ — 草木染めの糸をモチーフにしたテーマ
   ・地の色は和紙、面の色は布。白いカードを載せない
   ・墨は純黒でなく赤みのある墨（文字量が最大の面積なので、ここで温度が決まる）
   ・シグネチャ＝ページを縦に貫く一本の糸と、節ごとの結び目
   ・本文はUDフォント優先。読み手に不調を抱えた方が多いため
   ========================================================= */

*, *::before, *::after { box-sizing: border-box }

:root {
  /* 草木染めの色名から */
  --washi:      #FBF6F0;   /* 生成りの和紙 */
  --cloth:      #F5ECE3;   /* 布。地よりわずかに濃い面 */
  --cloth-warm: #F0E2D6;
  --line:       #E4D6C8;
  --sumi:       #3B2E33;   /* 赤みのある墨 */
  --sumi-soft:  #695860;
  --kuwa:       #96586A;   /* 桑染。リンクの色 */
  --kuwa-lift:  #B06E80;
  --yamabuki:   #C08A2E;   /* 山吹。糸と結び目（装飾）にだけ使う */
  --kogane:     #8A5F16;   /* 小金。数字や見出し記号など「読ませる」金 */

  --radius: 5px;
  --thread: 26px;

  --mincho: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "BIZ UDPMincho",
            "Noto Serif JP", serif;
  --gothic: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", YuGothic,
            "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
  --mono:   ui-monospace, SFMono-Regular, Menlo, "BIZ UDGothic", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --washi:      #221C1F;   /* 夜の和紙。中性の黒にしない */
    --cloth:      #2C2429;
    --cloth-warm: #362C31;
    --line:       #473B41;
    --sumi:       #EDE3DC;
    --sumi-soft:  #AE9DA4;
    --kuwa:       #DD9EAC;
    --kuwa-lift:  #EDB8C4;
    --yamabuki:   #D9A94E;
    --kogane:     #E2B863;
  }
}

html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--gothic);
  font-size: 16.5px;
  line-height: 2.05;          /* ゆったり。急かさない */
  letter-spacing: .03em;
  font-feature-settings: "palt" 1;
}

a { color: var(--kuwa); text-decoration: none;
    text-underline-offset: .28em; text-decoration-thickness: 1px }
a:hover { color: var(--kuwa-lift); text-decoration: underline }
a:focus-visible { outline: 2px solid var(--yamabuki); outline-offset: 3px; border-radius: 2px }
img { max-width: 100%; height: auto }

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 22px }

/* ---------- 上部ナビ ---------- */
nav.util { background: var(--cloth); border-bottom: 1px solid var(--line) }
nav.util ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2px 26px; list-style: none; margin: 0; padding: 13px 22px;
  font-size: 13.5px; letter-spacing: .06em;
}
nav.util a { color: var(--sumi-soft) }
nav.util a:hover { color: var(--kuwa) }

/* ---------- 表紙 ---------- */
header.site { padding: 68px 0 52px; text-align: center }
.kicker {
  margin: 0 0 26px; font-size: 11.5px; letter-spacing: .3em;
  color: var(--sumi-soft); line-height: 2.2;
}
h1.brand {
  margin: 0; font-family: var(--mincho); font-weight: 500;
  font-size: clamp(27px, 5.6vw, 43px); letter-spacing: .16em; line-height: 1.6;
}
h1.brand small {
  display: block; margin-top: 18px; font-family: var(--gothic);
  font-size: 11px; letter-spacing: .34em; color: var(--sumi-soft); font-weight: 400;
}

/* 屋号の言葉そのものを主役に据える */
.tagline {
  margin: 46px auto 0; max-width: 30em;
  font-family: var(--mincho); font-size: clamp(17px, 2.8vw, 22px);
  letter-spacing: .12em; line-height: 2.5; color: var(--sumi);
}
.tagline em { font-style: normal; display: block; color: var(--kuwa); margin-top: .4em }
.lead {
  margin: 30px auto 0; max-width: 34em;
  font-size: 14.5px; color: var(--sumi-soft); line-height: 2.15;
}

/* ---------- 糸（シグネチャ） ---------- */
/* 一本の糸がページを縦に貫き、節ごとに結び目をつくる */
.thread { position: relative; padding-left: var(--thread) }
.thread::before {
  content: ""; position: absolute; left: 3px; top: 4px; bottom: 0; width: 1px;
  background: linear-gradient(180deg,
    transparent 0, var(--yamabuki) 34px,
    var(--yamabuki) calc(100% - 90px), transparent 100%);
  opacity: .42;
}
h2.sec {
  position: relative;
  margin: 74px 0 6px; font-family: var(--mincho); font-weight: 500;
  font-size: 21px; letter-spacing: .13em;
}
.thread h2.sec::before {           /* 結び目 */
  content: ""; position: absolute; left: calc(-1 * var(--thread) + 0px);
  top: .82em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--yamabuki); box-shadow: 0 0 0 4px var(--washi);
}
h2.sec + .sub {
  margin: 0 0 30px; font-size: 13.5px; color: var(--sumi-soft); line-height: 2.1;
}

/* ---------- 見出し（下層ページ） ---------- */
header.page { padding: 42px 0 30px; border-bottom: 1px solid var(--line) }
.crumb { margin: 0; font-size: 12.5px; letter-spacing: .06em; color: var(--sumi-soft) }
.crumb a { color: var(--sumi-soft) }
.crumb a:hover { color: var(--kuwa) }
h1.page {
  margin: 12px 0 0; font-family: var(--mincho); font-weight: 500;
  font-size: clamp(23px, 4.2vw, 32px); letter-spacing: .1em; line-height: 1.7;
}
.count {
  margin: 12px 0 0; font-size: 12.5px; letter-spacing: .12em; color: var(--sumi-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------- 便り（お知らせ） ---------- */
.notice {
  margin: 40px 0 0; padding: 20px 24px;
  background: var(--cloth); border: 1px solid var(--line);
  border-left: 2px solid var(--yamabuki);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13.5px; line-height: 2.05; color: var(--sumi-soft);
}
.notice strong { color: var(--sumi); font-weight: 600 }

/* ---------- カテゴリ ---------- */
.cats {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.cat {
  padding: 22px 24px 24px;
  background: var(--cloth); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cat h3 {
  margin: 0 0 12px; font-family: var(--mincho); font-weight: 500;
  font-size: 16.5px; letter-spacing: .08em;
}
.cat h3 a { color: var(--sumi) }
.cat h3 a:hover { color: var(--kuwa) }
.cat ul { margin: 0; padding: 0; list-style: none; line-height: 2.3 }
.cat li { display: inline; font-size: 13.5px }
.cat li:not(:last-child)::after {
  content: "／"; color: var(--line); margin: 0 .1em;
}
.cat li a { color: var(--sumi-soft) }
.cat li a:hover { color: var(--kuwa) }
.tally {                            /* 掲載数。糸の色で控えめに */
  font-family: var(--gothic); font-size: 10.5px; color: var(--kogane);
  margin-left: .35em; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}

/* ---------- 収録サイト一覧 ---------- */
.entries { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 2px }
.entry {
  padding: 22px 24px;
  background: var(--cloth); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .18s ease, background .18s ease;
}
.entry:hover { border-color: var(--kuwa); background: var(--cloth-warm) }
.entry h3 {
  margin: 0; font-family: var(--mincho); font-weight: 500;
  font-size: 17px; letter-spacing: .05em; line-height: 1.85;
}
.entry p { margin: 10px 0 0; font-size: 14px; color: var(--sumi-soft); line-height: 2 }
.entry .meta {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  font-size: 11.5px;
}
.badge {
  display: inline-block; padding: 2px 11px; border-radius: 99px;
  border: 1px solid var(--line); font-size: 10.5px; letter-spacing: .12em;
  color: var(--sumi-soft);
}
.badge.rec { color: var(--kogane); border-color: var(--kogane) }
.host { font-family: var(--mono); font-size: 11px; color: var(--sumi-soft); opacity: .85 }

.empty {
  margin: 34px 0; padding: 44px 24px; text-align: center;
  background: var(--cloth); border: 1px dashed var(--line);
  border-radius: var(--radius); color: var(--sumi-soft); font-size: 14px; line-height: 2.1;
}

/* ---------- 関連カテゴリ ---------- */
.siblings {
  margin: 60px 0 0; padding: 24px;
  background: var(--cloth); border: 1px solid var(--line); border-radius: var(--radius);
}
.siblings h2 {
  margin: 0 0 12px; font-family: var(--mincho); font-weight: 500;
  font-size: 15.5px; letter-spacing: .1em;
}
.siblings ul { list-style: none; margin: 0; padding: 0; line-height: 2.3 }
.siblings li { display: inline; font-size: 13.5px }
.siblings li:not(:last-child)::after { content: "／"; color: var(--line); margin: 0 .1em }

/* ---------- インタビュー ---------- */
.files {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.file {
  padding: 26px; background: var(--cloth);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.file .no {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; color: var(--kogane);
}
.file h3 {
  margin: 10px 0 10px; font-family: var(--mincho); font-weight: 500;
  font-size: 17px; letter-spacing: .05em; line-height: 1.85;
}
.file p { margin: 0; font-size: 13.5px; color: var(--sumi-soft); line-height: 2 }

/* ---------- 関連サイト ---------- */
.promo {
  margin: 66px 0 0; padding: 26px; text-align: center;
  background: var(--cloth-warm); border-radius: var(--radius);
}
.promo .tag {
  display: inline-block; margin-bottom: 16px; padding: 3px 14px;
  border: 1px solid var(--line); border-radius: 99px;
  font-size: 10.5px; letter-spacing: .18em; color: var(--sumi-soft);
}
.promo .r18 { display: block; margin-top: 12px; font-size: 11.5px; color: var(--sumi-soft) }

.ad { margin: 48px auto; text-align: center }

/* ---------- 文書ページ ---------- */
.doc { max-width: 40em; margin: 0 auto }
.doc h2 {
  margin: 46px 0 16px; padding-bottom: 10px;
  font-family: var(--mincho); font-weight: 500; font-size: 18.5px; letter-spacing: .1em;
  border-bottom: 1px solid var(--line);
}
.doc p { margin: 0 0 18px; font-size: 15px; line-height: 2.15 }
.doc p.li {
  margin: 0 0 10px; padding-left: 1.1em; text-indent: -1.1em;
  font-size: 14.5px; color: var(--sumi-soft);
}
.doc .box {
  margin: 28px 0; padding: 26px;
  background: var(--cloth); border: 1px solid var(--line); border-radius: var(--radius);
}
.doc .box a { font-weight: 600 }

/* ---------- 記事 ---------- */
.article { max-width: 38em; margin: 0 auto }
.article h2 {
  margin: 48px 0 16px; padding-bottom: 10px;
  font-family: var(--mincho); font-weight: 500; font-size: 18.5px; letter-spacing: .1em;
  border-bottom: 1px solid var(--line);
}
.article p { margin: 0 0 20px; font-size: 15.5px; line-height: 2.2 }
.article .q {
  margin-top: 34px; font-family: var(--mincho); font-size: 16px;
  color: var(--kuwa); letter-spacing: .06em;
}
.article figure { margin: 34px 0; text-align: center }
.article figure img { border-radius: var(--radius) }
.article .lead-box {
  margin: 0 0 40px; padding: 24px;
  background: var(--cloth); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 14px; color: var(--sumi-soft); line-height: 2.1;
}

/* ---------- 奥付 ---------- */
footer.site {
  margin-top: 88px; padding: 38px 0 56px;
  border-top: 1px solid var(--line); text-align: center;
  font-size: 12.5px; color: var(--sumi-soft); line-height: 2.3;
}
footer.site a { color: var(--sumi-soft) }
footer.site a:hover { color: var(--kuwa) }

/* ---------- 手元で読むとき ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; line-height: 1.95 }
  header.site { padding: 44px 0 34px }
  .thread { padding-left: 0 }
  .thread::before { display: none }      /* 狭い画面では糸を引かない */
  .thread h2.sec::before { display: none }
  h2.sec { margin-top: 56px }
  .cats { grid-template-columns: 1fr }
  .cat, .entry, .file, .doc .box { padding-left: 20px; padding-right: 20px }
  .tagline { margin-top: 34px; line-height: 2.3 }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important }
}