/* ============================================================
   guide.css — ガイド/読み物ページの体裁（移行原文を躍動感ある枠で展示）
   絨毯=過酷な自然のオアシス・最古のテクノロジー・祈りの空間 を各ページで表現。
   ============================================================ */

/* —— 思想ヒーロー —— */
.guide-hero { padding-block: var(--s-2xl) var(--s-lg); border-block-end: var(--hair); position: relative; overflow: clip; }
.guide-hero .eyebrow { color: var(--red); }
.guide-hero h1 {
  font-family: var(--serif); font-weight: 700; font-size: var(--t-2xl);
  line-height: var(--lh-tight); letter-spacing: var(--ls-jp); margin: var(--s-xs) 0 0; color: var(--ink);
  max-width: 22ch;
}
.guide-hero--rich {
  background:
    radial-gradient(80% 130% at 85% -10%, var(--red-tint), transparent 55%),
    linear-gradient(180deg, var(--paper-2), var(--paper));
}
.guide-lead {
  margin-block-start: var(--s-md); font-family: var(--serif); font-size: var(--t-md);
  line-height: var(--lh-snug); color: var(--ink-2); max-width: 40ch;
  padding-inline-start: var(--s-sm); border-inline-start: 3px solid var(--red);
}

/* —— 本文（移行原文）枠 —— */
.guide-body { max-width: 860px; padding-block: var(--s-xl) var(--s-2xl); }
/* 移行原文は .migrated 配下にスコープCSSで原寸再現。画像だけ現代的に整える */
.guide-body .migrated img { border-radius: 0; box-shadow: var(--shadow); }
.guide-body .migrated { margin-inline: auto; }

/* —— 締めのオアシス帯（思想を毎ページで明示）—— */
.guide-oasis {
  position: relative; overflow: clip; padding-block: var(--s-2xl);
  background:
    radial-gradient(120% 90% at 50% 120%, var(--red-tint), transparent 60%),
    var(--paper-2);
  border-block-start: var(--rule);
  text-align: center;
}
.guide-oasis__thesis {
  font-family: var(--serif); font-size: var(--t-lg); line-height: 1.7; color: var(--ink);
  max-width: 30ch; margin-inline: auto;
}
.guide-oasis__thesis em { font-style: normal; color: var(--red); box-shadow: inset 0 -.3em var(--red-tint); }
.guide-oasis__links {
  margin-block-start: var(--s-lg); display: flex; gap: var(--s-md); flex-wrap: wrap; justify-content: center; align-items: center;
}

/* 生命の糸：オアシス帯の上辺で脈打つ赤い緯糸 */
.guide-oasis::before {
  content: ""; position: absolute; inset-block-start: -1.5px; inset-inline: 0; block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--red) 20%, var(--red-bright) 50%, var(--red) 80%, transparent);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .guide-oasis::before { animation: guideThread 4.5s linear infinite; }
}
@keyframes guideThread { to { background-position: 200% 0; } }

@media (max-width: 640px) {
  .guide-hero { padding-block: var(--s-xl) var(--s-md); }
  .guide-oasis__links { flex-direction: column; gap: var(--s-sm); }
}