/* R7：研究所からの装いのヒント（記事一覧・記事詳細）。記事があるときだけ読み込む（style.css は変えない） */
.a-card .ti { font-size: 1.12rem; line-height: 1.55; text-wrap: balance; }
.a-card .a-lead { font-size: .92rem; color: var(--ink-2); margin: 0; line-height: 1.75;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.a-draft { display: inline-block; font-size: .75rem; color: var(--sun-ink); border: 1px dashed var(--sun-ink); padding: 0 8px; margin: 4px 0; }
.a-band { background: var(--ink); color: var(--bg); font-size: .86rem; padding: 8px 12px; border-radius: 4px; margin: 0 0 14px; }

/* 記事本文：iPhone で読みやすい大きさ・行間・段落の間 */
.a-art { font-size: 1.0625rem; line-height: 2; }
.a-art p { margin: 0 0 1.1em; max-width: 36em; }
.a-art h1 { line-height: 1.45; text-wrap: balance; }
.a-art h2 { font-size: 1.22rem; line-height: 1.5; margin: 2em 0 .6em; padding-left: 12px; border-left: 3px solid var(--sun); text-wrap: balance; }
.a-date { margin: 6px 0 0; }
.a-leadbig { font-size: 1.08rem; color: var(--ink-2); margin-top: 14px; }
.a-cover { margin: 18px 0 8px; background: var(--photo); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.a-cover img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }

/* この記事の一本：写真と注目点。販売ボタンは置かず、商品詳細への文字の案内だけ */
.a-prods h2 { margin-top: 2.2em; }
.a-prod { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px 6px; margin: 12px 0; }
.a-prod h3 { font-family: var(--serif); font-size: 1.1rem; margin: 8px 0 6px; line-height: 1.5; }
.a-prod .pair { margin: 0; }
.a-try { background: var(--tag); border-radius: 4px; padding: 4px 18px 8px; margin: 24px 0; }
.a-try h2 { border-left: 0; padding-left: 0; margin-top: .9em; }
.a-note { margin-top: 18px; }
.a-src { padding-left: 1.2em; margin: 0; font-size: .95rem; line-height: 1.8; }
.a-src li { margin-bottom: .6em; overflow-wrap: anywhere; }
.a-src .fine { display: block; }
.a-prod .pair.one { grid-template-columns: 1fr; }
.a-prod .pair.one img { aspect-ratio: 4 / 3; }
/* 記事の札はスマホでは1列（題名と紹介文を読めるように） */
.cards.a-cards { grid-template-columns: 1fr; }
@media (min-width: 700px) { .cards.a-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards.a-cards { grid-template-columns: repeat(3, 1fr); } }