@charset "UTF-8";
/* ============================================================
   mogblo-2.css ｜ モグブロトップ（/blog）2/2：道のり・柱・記事行・著者・全記事一覧
   mogblo-1.css の続き（トークンは .tx で定義済み）。読み込み順は 1 → 2。
   ============================================================ */

/* ===== 01 JOURNEY「坑道マップ」（2026-07-11 ポップ化＝設計正本 §1-3）
   点線トレイル＋ランプ丸バッジ＝ロードマップ記事の序章タイムラインと同じ視覚言語。 ===== */
.tx-journey { position: relative; display: grid; grid-template-columns: repeat(4, 1fr) 128px; gap: 20px; padding-top: 8px; }
.tx-journey::before { content: ""; position: absolute; top: 31px; left: 32px; right: 48px; height: 2px; background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 20px); animation: pop-trail 12s linear infinite; }
@keyframes pop-trail { to { background-position: 240px 0; } }
.tx-journey__step { display: flex; flex-direction: column; gap: 16px; position: relative; }
.tx-journey__num { position: relative; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 999px; background: var(--pop-lamp); border: 2px solid #fff; box-shadow: var(--shadow-soft); font-family: var(--maru); font-weight: 900; font-size: 1.375rem; color: var(--ink); }
.tx-journey__step > div { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 24px 20px; background: #fff; border: none; border-radius: 24px; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.tx-journey__step:hover > div { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 24px rgba(26, 23, 20, 0.1); }
.tx-journey__title { font-family: var(--maru); font-weight: 700; font-size: 1.125rem; margin: 0; }
.tx-journey__text { font-size: 0.875rem; line-height: 1.9; color: var(--ink-soft); margin: 0; flex: 1; }
.tx-journey__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.875rem; color: var(--pop-teal); border-bottom: 1px solid var(--pop-teal-bright); padding-bottom: 3px; align-self: flex-start; }
.tx-journey__link span { transition: transform 0.3s ease; }
.tx-journey__link:hover { color: var(--pop-teal-bright); opacity: 1; }
.tx-journey__link:hover span { transform: translateX(4px); }
.tx-journey__goal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.tx-journey__goal img { width: 88px; height: auto; }
.tx-journey__goal-label { font-family: var(--maru); font-weight: 700; font-size: 0.8125rem; line-height: 1.6; color: var(--gold-deep); }

/* ===== 波形の上端（paper-2 のセクションが上のセクションへスカラップで食い込む） ===== */
.tx-section--paper2::before, .tx-farewell::before { content: ""; position: absolute; top: -19px; left: 0; right: 0; height: 20px; pointer-events: none; background: radial-gradient(circle at 20px -8px, transparent 18px, var(--paper-2) 19px); background-size: 40px 20px; }
.tx-section + .tx-section--paper2, .tx-section + .tx-farewell { border-top: none; }

/* ===== 03 PICK UP カード（2026-07-11 ポップ化＝設計正本 §1-4） ===== */
.tx-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; list-style: none; padding: 0; margin: 0; }
.tx-card { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 28px 28px 24px; background: #fff; border: none; border-radius: 24px; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.tx-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 28px rgba(26, 23, 20, 0.12); opacity: 1; }
.tx-card:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.tx-card__num { position: absolute; top: 16px; right: 20px; font-family: var(--serif-en); font-size: 2rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--gold); }
.tx-card__cat { align-self: flex-start; padding: 4px 14px; border-radius: 999px; background: var(--pop-teal-tint); color: var(--pop-teal); font-family: var(--maru); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; }
.tx-card__title { font-family: var(--maru); font-weight: 700; font-size: 1.125rem; line-height: 1.7; flex: 1; transition: color 0.3s ease; }
.tx-card:hover .tx-card__title { color: var(--pop-teal); }
.tx-card__foot { display: flex; align-items: center; justify-content: space-between; }
.tx-card__date { font-family: var(--serif-en); font-size: 0.8125rem; color: var(--ink-soft); }
.tx-card__arrow { font-size: 1.125rem; color: var(--gold-deep); transition: transform 0.3s ease; }
.tx-card:hover .tx-card__arrow { transform: translateX(5px); }

/* ===== FEED（記事行＝柱ハブ /keiri /tools で継続使用・削除しない） ===== */
.tx-feed { border-top: 1px solid var(--hair); }
.tx-feed__link { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 24px; padding: 28px 8px; border-bottom: 1px solid var(--hair); transition: background 0.3s ease, padding 0.3s ease; }
.tx-feed__num { font-family: var(--serif-en); font-size: 1.375rem; color: var(--gold-deep); }
.tx-feed__body { display: flex; flex-direction: column; gap: 6px; }
.tx-feed__cat { font-family: var(--serif-en); font-style: italic; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--gold-deep); }
.tx-feed__title { font-family: var(--maru); font-weight: 700; font-size: clamp(1.0625rem, 2vw, 1.375rem); line-height: 1.5; transition: color 0.3s ease; }
.tx-feed__date { font-family: var(--serif-en); font-size: 0.8125rem; color: var(--ink-soft); }
.tx-feed__arrow { font-size: 1.25rem; color: var(--gold-deep); transition: transform 0.3s ease; }
.tx-feed__link:hover { background: var(--paper-2); padding-left: 20px; opacity: 1; }
.tx-feed__link:hover .tx-feed__title { color: var(--gold-deep); }
.tx-feed__link:hover .tx-feed__arrow { transform: translateX(6px); }
.tx-feed__link:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -2px; }
.tx-section__more { margin: 44px 0 0; text-align: center; }

/* ===== 04 AUTHOR（著者＝モグラ） ===== */
.tx-section--paper2 { background: var(--paper-2); border-top: none; }
.tx-author { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: start; }
.tx-author__side { position: sticky; top: 100px; }
.tx-author__photo { width: 180px; height: 180px; margin: 24px 0 20px; border-radius: 4px; background: linear-gradient(150deg, var(--gold), var(--espresso)); }
/* 著者肖像＝探検モグラ（2026-07-11 ポップ化＝設計正本 §1-5・ペンネーム運用と整合） */
.tx-author__photo--mole { display: grid; place-items: end center; overflow: hidden; border-radius: 16px; border: 1px solid var(--hair); background: radial-gradient(circle at 50% 28%, var(--pop-lamp-tint), var(--paper-2) 78%); }
.tx-author__photo--mole img { display: block; width: 128px; height: auto; }
.tx-author__role { font-family: var(--serif-en); font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 4px; }
.tx-author__name { font-family: var(--maru); font-weight: 900; font-size: 1.5rem; margin: 0; }
.tx-author__note { margin: 8px 0 0; font-size: 0.8125rem; color: var(--ink-soft); }
.tx-author__lead { font-size: 1.0625rem; line-height: 2; margin: 24px 0 32px; }
.tx-author__facts { display: grid; gap: 16px; margin: 0 0 28px; padding: 24px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.tx-author__facts div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; }
.tx-author__facts dt { font-family: var(--serif-en); font-size: 0.9375rem; color: var(--gold-deep); }
.tx-author__facts dd { margin: 0; font-size: 0.9375rem; line-height: 1.8; }
.tx-author__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.tx-author__tags li { padding: 6px 14px; font-size: 0.8125rem; color: var(--ink-soft); border: 1px solid var(--hair); border-radius: 999px; }
.tx-author__actions { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 32px 0 0; }

/* ===== 05 ALL ARTICLES（全記事一覧＝既存の一覧＋サイドバーを内包） ===== */
.tx-articles .blog-layout { margin-top: 0; }
.tx-articles .blog-widget__title { color: var(--gold-deep); }

/* ===== 見送り（新設 2026-07-11＝設計正本 §1-7） ===== */
.tx-farewell { text-align: center; background: var(--paper-2); }
.tx-farewell__mole { display: block; width: 112px; height: auto; margin: 0 auto; }
.tx-farewell__note { font-family: var(--maru); font-weight: 700; font-size: clamp(1.125rem, 2.4vw, 1.375rem); margin: 24px 0 32px; }
.tx-farewell__actions { justify-content: center; }

/* ===== レスポンシブ（本ファイル分） ===== */
@media (max-width: 1023px) {
  .tx-journey { grid-template-columns: 1fr 1fr; }
  .tx-journey::before { display: none; }
  .tx-journey__goal { grid-column: span 2; padding: 8px 0; }
  .tx-author { grid-template-columns: 1fr; gap: 40px; }
  .tx-author__side { position: static; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 24px; }
  .tx-author__photo { margin: 8px 0; grid-row: span 4; }
}

@media (max-width: 767px) {
  .tx-head { margin-bottom: 40px; }
  .tx-lead { font-size: 0.9375rem; line-height: 1.95; }

  /* JOURNEY：1列・バッジとカードを横並びに近い縦積み・タップしやすいリンク */
  .tx-journey { grid-template-columns: 1fr; gap: 24px; }
  .tx-journey__goal { grid-column: auto; }
  .tx-journey__link { padding: 8px 0 4px; }

  /* PICK UP カード：1列 */
  .tx-cards { grid-template-columns: 1fr; gap: 16px; }
  .tx-card { padding: 24px 20px; }

  /* FEED（柱ハブ用）：番号列を詰めて本文を最大化 */
  .tx-feed__link { grid-template-columns: 40px 1fr; gap: 14px; padding: 24px 4px; }
  .tx-feed__link:hover { padding-left: 4px; }
  .tx-feed__arrow { display: none; }
  .tx-feed__num { font-size: 1.125rem; }

  /* AUTHOR：肖像カードを中央・事実は縦積み */
  .tx-author__side { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .tx-author__photo { width: 148px; height: 148px; margin: 20px 0 16px; }
  .tx-author__lead { font-size: 1rem; }
  .tx-author__facts div { grid-template-columns: 1fr; gap: 4px; }
  .tx-author__tags { justify-content: flex-start; }
  .tx-author__actions { flex-direction: column; align-items: stretch; }

  /* 見送り */
  .tx-farewell__mole { width: 96px; }
  .tx-farewell__actions { flex-direction: column; align-items: stretch; }
}

/* ===== モーション配慮 ===== */
@media (prefers-reduced-motion: reduce) {
  .tx-journey::before { animation: none; }
  .tx-journey__step > div, .tx-card { transition: none; }
}