/* 読みもの（一覧）（v1。2026-11-12）。共通の部品は va.css、決まりは DESIGN.md。接頭辞は rd-（記事のページ read.css と同じ接頭辞。同じ名前のクラスは作らない）。
   並び：題名の段 → いま読める1本（大きな1枚。タレントの小さなサムネイルつき）→ 準備中の題名（点線の札）→ 読みものの決まり。
   演出は rise だけ。黄緑は使わない。広告は置かない。 */

/* ============ 1. いま読める：大きな1枚（左に小さなサムネイル。右に題名） ============ */
a.rd-feat{display:grid;grid-template-columns:minmax(0,1fr);box-shadow:var(--sh-l);max-width:1180px}
a.rd-feat:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--ink)}
.rd-feat+.rd-feat{margin-top:28px}
/* 小さなサムネイル（16:9のまま・無加工。上に文字を重ねない。名前は下に書く） */
.rd-feat-th{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 12px;align-content:center;padding:16px;background:var(--ink)}
.rd-feat-th .c{display:block;min-width:0}
.rd-feat-th .va-mini{width:100%;border-color:var(--paper2)}
.rd-feat-th .va-ini{width:100%;height:auto;aspect-ratio:16/9;clip-path:none}
.rd-feat-th small{display:block;margin-top:5px;font-family:var(--px);font-size:11px;line-height:1.4;color:var(--paper2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-feat-b{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:22px 20px 26px;min-width:0}
.rd-feat-b .ttl{font-weight:900;color:var(--ink);font-size:clamp(25px,3.2vw,44px);line-height:1.22;letter-spacing:-.04em;font-feature-settings:"palt"}
.rd-feat-b .ttl span{display:inline-block}
.rd-feat-b .ttl span:first-child{background:linear-gradient(transparent 60%,rgba(238,90,54,.4) 60%,rgba(238,90,54,.4) 94%,transparent 94%)}
.rd-feat-b .d{font-size:15px;line-height:1.8;color:var(--ink2);max-width:34em}
.rd-feat-b .va-btn{margin-top:4px}
a.rd-feat:hover .va-btn i{transform:translateX(3px)}
.rd-upd{margin-top:22px}
@media (min-width:860px){
  a.rd-feat{grid-template-columns:minmax(0,440px) minmax(0,1fr)}
  .rd-feat-th{padding:22px;gap:16px 14px}
  .rd-feat-b{padding:30px 36px 34px;justify-content:center}
}

/* ============ 2. 準備中：題名と切り口だけ。点線の札（押せない。押せるものの形＝線とずらした影は付けない） ============ */
.rd-soons{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.rd-soon{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 18px 16px;border:2px dashed var(--mute);
  background:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(21,21,21,.03) 9px 10px)}
.rd-soon .va-tag:first-child{background:var(--mute)}
.rd-soon h3{font-weight:900;color:var(--ink);font-size:clamp(20px,1.9vw,25px);line-height:1.4;letter-spacing:-.03em;font-feature-settings:"palt"}
.rd-soon h3 span{display:block}
.rd-soon h3 small{display:block;margin-top:4px;font-weight:700;font-size:14px;line-height:1.6;letter-spacing:0;color:var(--ink2)}
.rd-soon .d{font-family:var(--px);font-size:12px;line-height:1.6;color:var(--mute)}
.rd-soon .ep{display:flex;flex-direction:column;gap:3px;width:100%;margin-top:auto;padding-top:11px;border-top:1.5px dashed var(--mute);font-size:13.5px;line-height:1.6}
.rd-soon .ep span{font-family:var(--px);font-size:11px;color:var(--mute)}
.rd-soon .ep a{font-weight:900;color:var(--ink);text-decoration:none}
.rd-soon .ep a small{font-family:var(--px);font-weight:400;font-size:11.5px;color:var(--mute);margin-left:8px;white-space:nowrap}
.rd-soon .ep a i{display:inline-block;font-style:normal;font-family:var(--px);font-weight:400;color:var(--coral);margin-left:6px;transition:transform .2s var(--ease)}
.rd-soon .ep a:hover{color:var(--coral-d)}
.rd-soon .ep a:hover i{transform:translateX(4px)}
@media (min-width:860px){.rd-soons{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

/* ============ 3. 読みものの決まり：貼り紙の見出し＋一文。3つを縦の線で区切って並べる。右にフクロウ ============ */
.rd-rules-w{display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
.rd-rules{display:grid;grid-template-columns:minmax(0,1fr);border-top:var(--bd);border-bottom:var(--bd)}
.rd-rules li{padding:22px 0 20px}
.rd-rules li+li{border-top:1.5px dashed var(--ink)}
.rd-rules .va-stick{font-size:13px}
.rd-rules h3 span{display:inline-block}
.rd-rules h3{margin-top:12px;font-weight:900;font-size:clamp(19px,1.8vw,23px);line-height:1.45;letter-spacing:-.02em;color:var(--ink);font-feature-settings:"palt"}
.rd-rules p{margin-top:6px;font-size:14.5px;line-height:1.8;color:var(--ink2)}
.rd-owl>div{display:flex;flex-direction:column;align-items:flex-start}
.rd-owl .va-say{font-size:14.5px;line-height:1.75;padding:12px 15px;margin-bottom:22px;background:var(--paper)}
.rd-owl .va-say::before{left:44px;top:auto;bottom:-12px;border:0;border-right:var(--bd);border-bottom:var(--bd);background:var(--paper)}
.rd-owl .who{position:relative;width:96px;padding-bottom:14px;margin-left:8px}
.rd-owl .who img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 0 rgba(21,21,21,.14))}
.rd-owl .who .va-plate{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%) rotate(3deg)}
.rd-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:36px}
.rd-go span{font-weight:900;font-size:17px;color:var(--ink);margin-right:6px}
@media (min-width:860px){
  .rd-rules-w{grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:end}
  .rd-rules{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rd-rules li{padding:26px 26px 24px 0}
  .rd-rules li+li{border-top:0;border-left:1.5px dashed var(--ink);padding-left:26px}
  .rd-owl .who{width:112px}
}

/* 2026-11-15：8人の記事は、サムネイルを4列に（札の高さを本文にそろえる） */
.rd-feat-th.n8{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px}
.rd-feat-th.n8 small{font-size:10px}