/* 雑多煮 — 和製サイケ「土×枯れ」現代化版。JSなし、CSS1枚＋SVGフィルタ。
   定石: 揺らぎは背景ではなく前景の主役（サイト名）に当てる。背景は静かに。
   紙パネルは廃止。暗い土色の全面背景に文字を直置きし、余白と大タイポで組む。 */

:root {
  --soil: #241708;    /* 全面の土の下地 */
  --sand: #eeddc6;    /* 主字（明るい砂色） */
  --milk: #e4d2b5;    /* 本文（少し落とした砂色） */
  --kraft: #c9a877;   /* 副次の字（枯草ベージュ） */
  --dust: #b09468;    /* 弱い字（フッタなど） */
  --rust: #d96a35;    /* 差し色（明るめのラスト） */
  --amber: #e8a061;   /* 記事タイトル */
  --moss: #9db36f;    /* 締め（明るめのアボカド） */
  --edge: rgba(212, 184, 150, 0.16);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--soil);
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* 背景: くすんだ土色の斑を静かに漂わせる。主役はサイト名なので控えめに */
.bg {
  position: fixed;
  inset: -14%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(42% 50% at 22% 26%, #8b2500, transparent 70%),
    radial-gradient(46% 56% at 78% 30%, #556b2f, transparent 72%),
    radial-gradient(50% 52% at 48% 85%, #5c3317, transparent 74%),
    radial-gradient(58% 62% at 62% 55%, #7a5c38, transparent 82%),
    var(--soil);
  filter: saturate(0.85) brightness(0.62);
  animation: drift 40s ease-in-out infinite alternate;
}

@keyframes drift {
  0%   { transform: translate(-1.5%, -1%) scale(1.05); }
  100% { transform: translate(1.5%, 1%) scale(1.1); }
}

/* ローファイなグレイン（古い印刷の質感） */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.1;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
}

body {
  margin: 0 auto;
  padding: clamp(3rem, 9vh, 6.5rem) clamp(1.25rem, 5vw, 2.5rem) 4rem;
  max-width: 44rem;
  color: var(--sand);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
    "Noto Serif JP", "BIZ UDMincho", serif;
  font-size: 1.0625rem;
  line-height: 2.05;
  overflow-wrap: break-word;
}

a {
  color: var(--rust);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.2s;
}

a:hover {
  color: var(--moss);
}

/* ヘッダ */
.site-header {
  margin-bottom: 4rem;
}

/* サイト名: くっきりした対象がぬめる=ゆらゆらの核。
   SVGフィルタで溶かし、ゆっくり揺らし、版ズレの刷り影を重ねる */
.site-title {
  margin: 0;
  font-size: clamp(3rem, 9vw, 4.6rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
}

.site-title a {
  display: inline-block;
  color: var(--rust);
  text-decoration: none;
  text-shadow:
    0.028em 0.02em 0 rgba(157, 179, 111, 0.45),
    -0.022em -0.012em 0 rgba(212, 184, 150, 0.3);
  filter: url(#warp);
  animation: titlesway 11s ease-in-out infinite;
}

@keyframes titlesway {
  0%, 100% { transform: skewX(-3.5deg) rotate(-0.8deg); }
  50%      { transform: skewX(3.5deg) rotate(0.8deg); }
}

.site-tagline {
  margin: 1.1rem 0 0;
  color: var(--kraft);
  font-size: 0.85rem;
  letter-spacing: 0.32em;
}

.intro {
  margin: 0;
  color: var(--milk);
  font-size: 1rem;
  max-width: 34rem;
}

/* 目次 */
.list-heading {
  margin: 5rem 0 0;
  color: var(--moss);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.34em;
}

.post-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.post-list li {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--edge);
}

.post-list-date {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--moss);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

.post-list a {
  color: var(--sand);
  text-decoration: none;
  font-size: 1.2rem;
  line-height: 1.7;
  transition: color 0.25s;
}

.post-list a:hover {
  color: var(--rust);
  text-shadow: 0.03em 0.02em 0 rgba(157, 179, 111, 0.5);
}

/* 記事 */
h1 {
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  font-weight: 700;
  line-height: 1.55;
  margin: 0 0 0.5rem;
  color: var(--amber);
  text-shadow: 0.02em 0.015em 0 rgba(157, 179, 111, 0.4);
}

h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 2.75rem 0 0.9rem;
  padding-left: 0.7rem;
  border-left: 4px solid var(--rust);
  color: var(--kraft);
}

.post-date {
  margin: 0 0 2.5rem;
  color: var(--moss);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

.post p {
  margin: 1.6rem 0;
  color: var(--milk);
}

blockquote {
  margin: 1.6rem 0;
  padding: 0.4rem 1.25rem;
  border-left: 4px solid var(--moss);
  background: rgba(212, 184, 150, 0.08);
  color: var(--kraft);
}

hr {
  border: none;
  margin: 3rem 0;
  text-align: center;
}

hr::after {
  content: "〜 〜 〜";
  color: var(--rust);
  font-size: 1.1rem;
  letter-spacing: 0.4em;
}

code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  background: rgba(212, 184, 150, 0.14);
  color: #f0dfc4;
}

pre {
  padding: 1rem 1.1rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--edge);
  overflow-x: auto;
  line-height: 1.6;
}

pre code {
  border: none;
  padding: 0;
  background: none;
}

img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--edge);
}

/* フッタ */
.site-footer {
  margin-top: 6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--edge);
  color: var(--dust);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
}

.site-footer a {
  color: var(--dust);
}

.site-footer a:hover {
  color: var(--rust);
}

/* 酔い対策: 揺れ・漂いを止める指定を尊重する */
@media (prefers-reduced-motion: reduce) {
  .bg,
  .site-title a {
    animation: none;
  }
}