/* fragment of view — コンクリートグレー × ゴシック体テーマ
 *
 * 【設計意図】
 *
 * 背景色 #d7d8d6 ：純白でなく、コンクリート・古紙・無漂白リネンを想起させる
 * 中性グレー。R:215 G:216 B:214——Gがわずかに高く、かすかなセージがかった
 * ニュアンスを持つ。「人の手が触れた素材」としての質感を紙面に与える。
 * Mujiの棚板、東京の現代ギャラリーの壁、と同じ系統の色。
 *
 * ゴシック体：明朝体は「読む文学」のフォント。ゴシック体は「見る文書」の
 * フォント。写真と並置されることの多いこのブランドでは、文字が写真に対して
 * 主張しすぎない「フラットな観察者」であることが求められる。
 * Zen Kaku Gothic New は和文ゴシックの中でも字間が美しく、light〜medium
 * ウェイトでの余白感が際立つ。
 *
 * リンク色 #344e3c (ダークフォレストグリーン)：ブランド名「view（眺め）」の
 * 連想から、緑を基軸に。騒がしくなく、でも「これがリンクだ」と確実に機能する。
 */

/* ── Base ── */
html body {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
               'Yu Gothic Medium', 'YuGothic', 'Meiryo', -apple-system,
               BlinkMacSystemFont, sans-serif;
  background-color: #d7d8d6;
  color: #1c1c1a;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* リンク：ダークフォレスト。背景の sage undertone と呼応させる */
html body a {
  color: #344e3c;
  text-decoration: none;
}

html body a:hover {
  color: #4d7060;
  text-decoration: none;
}

/* ── Header ── */
/* 1px border は「線が刻まれた」感でなく「素材の境界」として認識される濃さ */
body header {
  border-bottom: 1px solid #bfc0bd;
  padding: 1.25rem 0;
  margin-bottom: 3rem;
}

/* サイト名：雑誌マストヘッドの処理。
   小さく・細く・トラッキング広めで、コンテンツに主役を譲る。
   "fragment of view" という名前自体がアイデンティティなので大きく主張しない */
body header .site-name {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: #7a7b78;
}

/* ── Footer ── */
body footer {
  border-top: 1px solid #bfc0bd;
  color: #9a9b98;
}

/* ── Post list ── */
body .post-item {
  border-bottom: 1px solid #cacbc8;
}

/* リスト見出しは「キャプション」の温度感で。bold にしない */
body .post-title {
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.65;
}

body .post-title a {
  color: #1c1c1a;
}

body .post-title a:hover {
  color: #344e3c;
  text-decoration: none;
}

/* 日付・メタは一歩引かせる */
body .post-meta {
  color: #7a7b78;
  font-size: 0.8rem;
}

/* タグ：背景よりわずかに暗いチップ。border は付けない——線を減らす */
body .tag {
  background: #c8c9c5;
  color: #5a5b58;
  border: none;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

/* ── Post detail ── */
/* 記事タイトル：weight 500（medium）で品よく存在感を出す。
   letter-spacing: -0.01em でゴシック体の詰まり感を解消 */
body .post-header h1 {
  font-size: 1.65rem;
  font-weight: 500;
  color: #1c1c1a;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* サブタイトル */
body .post-subtitle {
  font-size: 1rem;
  color: #5a5b58;
  font-weight: 400;
}

/* 本文：色は body より少しだけ暗い #262624 で印字感を強調。
   行間 2.05 は日本語縦組みを横組みに展開したときの適正値 */
body .post-content {
  color: #262624;
  line-height: 2.05;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

body .post-content p {
  margin-bottom: 1.9em;
}

/* HR：素材の分節。線は細く、余白で「間」を作る */
body .post-content hr {
  border: none;
  border-top: 1px solid #bfc0bd;
  margin: 2.5rem 0;
}

/* 画像：角を立てすぎない。2px でやわらかに */
body .post-cover {
  border-radius: 2px;
}

body .post-thumb {
  border-radius: 2px;
}

/* ── Type badges ── */
/* ライト背景向けに再設計。背景色に tint を加えて分類を表現——
   photo: olive tint（暖） / text: slate tint（冷） / hybrid: sage tint（中）
   彩度を低く保ちコンテンツと競合しない */
body .type-photo  { background: #d0d1cc; color: #484c30; border: none; }
body .type-text   { background: #ced0d5; color: #303550; border: none; }
body .type-hybrid { background: #ced2ce; color: #2a4535; border: none; }

/* ── Series badge ── */
body .series-badge {
  background: #c8c9c5;
  color: #5a5b58;
  border: none;
}

/* ── Photo gallery ── */
body .photo-item {
  opacity: 0.97;
  border-radius: 2px;
}

/* ── Syndication note ── */
body .syndication-note {
  border-top: 1px solid #bfc0bd;
  color: #8a8b88;
}

body .syndication-note a {
  color: #456050;
}