/* ============================================================
   news.css ── お知らせ一覧（news.html 専用）
   出典: 90_OUTPUT/45_配下ページ一覧.md（/news/ = 講習・行事告知）／
         V3設計書§S1（NOW の一覧はお知らせページへ）／V7 T1（「すべてのお知らせを見る」保留の解除）
   思想: 設計原則「細いリンク・静かな帯・薄い罫」。カード化・誇示をしない。
         新聞の「社告」欄のような静けさ。日付＋分類＋一行で読み切れること。
   規範: 色・寸法は tokens.css の var() のみ参照（hex直書き禁止）。site.css の後に読み込む。
   ============================================================ */

/* --- 押せるものの統一様式（v6b.css / portfolio.css の .golink と同一。単独ページ用に再定義） --- */
.golink {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  color: var(--alpe-red);
  transition: color .2s;
}
.golink::before {
  content: '◆';
  font-size: .5em;
  color: color-mix(in srgb, var(--alpe-gold) 90%, transparent);
  transform: translateY(-.2em);
}
.golink span { border-bottom: 1px solid color-mix(in srgb, var(--alpe-gold) 80%, transparent); padding-bottom: .15em; }
.golink:hover { color: var(--alpe-red-deep); }

/* ============ ヒーロー（小さく・静かに） ============ */
.nw-hero { background: var(--alpe-paper); border-bottom: var(--rule-gold); }
/* .head はオーバーレイ（site.css: position:absolute）のため、上余白は portfolio と同じ
   --sp-section-hero でヘッダーを避ける（--sp-section-band だと英字ラベルが隠れる＝実測） */
.nw-hero .container { max-width: 52rem; padding-block: var(--sp-section-hero) calc(var(--sp-section-band) * .7); }
.nw-hero .eyebrow {
  font-family: var(--font-gothic); font-size: var(--fs-small); font-weight: 700;
  letter-spacing: var(--ls-wide); color: var(--alpe-gold); text-transform: uppercase;
}
.nw-hero h1 {
  font-family: var(--font-mincho); font-weight: 700;
  font-size: clamp(22px, 3.4vw, 36px); line-height: var(--lh-head);
  letter-spacing: var(--ls-head); color: var(--alpe-ink);
  margin: .5em 0 .6em;
}
.nw-hero .lead { font-size: var(--fs-small); color: var(--alpe-ink-soft); max-width: 40em; }

/* ============ 一覧（薄い罫で区切る静かなリスト） ============ */
.nw-list-sec { padding-block: calc(var(--sp-section) * .6) var(--sp-section); }
.nw-list-sec .container { max-width: 52rem; }
.nw-year {
  font-family: var(--font-mincho); font-weight: 700;
  font-size: var(--fs-h3); letter-spacing: .1em; color: var(--alpe-red);
  margin-bottom: .6em;
}
.nw-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule-gold); }
.nw-list li { border-bottom: var(--rule-gold); }
.nw-item {
  display: grid;
  grid-template-columns: 7.5em 7em 1fr;
  gap: .4em 1.2em;
  align-items: baseline;
  padding: 1.1em .2em;
  color: var(--alpe-ink);
  transition: background .2s;
}
a.nw-item:hover { background: color-mix(in srgb, var(--alpe-paper-dim) 60%, transparent); color: var(--alpe-ink); }
.nw-date {
  font-family: var(--font-mincho); font-weight: 700;
  font-size: var(--fs-small); letter-spacing: .1em; color: var(--alpe-gold);
  white-space: nowrap;
}
.nw-cat {
  font-family: var(--font-gothic); font-size: calc(var(--fs-small) * .85); font-weight: 700;
  letter-spacing: .12em; color: var(--alpe-ink-faint); white-space: nowrap;
}
.nw-body { display: flex; flex-direction: column; gap: .25em; }
.nw-title {
  font-family: var(--font-gothic); font-size: var(--fs-body); font-weight: 700;
  line-height: 1.7; letter-spacing: .02em;
}
a.nw-item .nw-title { color: var(--alpe-red); }
a.nw-item:hover .nw-title { color: var(--alpe-red-deep); }
.nw-desc { font-size: var(--fs-small); color: var(--alpe-ink-soft); line-height: 1.8; }

@media (max-width: 40em) {
  .nw-item { grid-template-columns: auto 1fr; padding-inline: 0; }
  .nw-item .nw-body { grid-column: 1 / -1; }
}

/* ============ 結び（相談への静かな導線） ============ */
.nw-close { background: var(--alpe-paper-dim); border-top: var(--rule-gold); padding-block: var(--sp-section-band); }
.nw-close .container { max-width: 52rem; display: flex; flex-wrap: wrap; gap: 1.2em 2.4em; align-items: baseline; }
.nw-close p { font-size: var(--fs-small); color: var(--alpe-ink-soft); margin: 0; }