/* 色：写真の ETERNA ブリーチバイパスのような、彩度を落としたアクセント */
:root {
  --color-l-accent: #5f7470;
  --color-d-accent: #9fb3ae;

  /* 書体：本文も見出しもゴシック体（英字は Inter、日本語は OS のゴシック体） */
  --font-body: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --font-heading: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;

  /* 紙っぽい背景色 */
  --color-l-background: #f3efe6;
  --color-d-background: #1c1b18;

  /* ざらつき（SVG のノイズ） */
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-noise-opacity: 0.22;
}
:root[data-theme="dark"] {
  --paper-noise-opacity: 0.35;
}

/* 画面全体にノイズを2枚重ねる（クリックは素通り）
   大きさ・動く周期・飛ぶ位置が違う2枚を重ねるので、
   模様の繰り返しが見えにくく、ランダムに近いざらつきになる */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: var(--paper-noise);
  opacity: calc(var(--paper-noise-opacity) * 0.6);
  mix-blend-mode: multiply;
}
body::before {
  background-size: 240px 240px;
  animation: paper-grain-a 2.4s steps(1) infinite;
}
body::after {
  background-size: 173px 173px;
  animation: paper-grain-b 3.7s steps(1) infinite;
}

/* ざらつきを動かす（フィルムグレインのように位置を飛ばす） */
@keyframes paper-grain-a {
  0%   { background-position: 0 0; }
  12%  { background-position: -37px 81px; }
  25%  { background-position: 113px -24px; }
  37%  { background-position: -92px -133px; }
  50%  { background-position: 58px 147px; }
  62%  { background-position: -151px 33px; }
  75%  { background-position: 129px 96px; }
  87%  { background-position: -18px -167px; }
}
@keyframes paper-grain-b {
  0%   { background-position: 41px -63px; }
  9%   { background-position: -118px 22px; }
  21%  { background-position: 77px 139px; }
  30%  { background-position: -9px -101px; }
  43%  { background-position: 152px 57px; }
  55%  { background-position: -64px -158px; }
  66%  { background-position: 26px 94px; }
  79%  { background-position: -141px -12px; }
  90%  { background-position: 103px -127px; }
}

/* 動きを減らす設定の人には止める */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; }
}
:root[data-theme="dark"] body::before,
:root[data-theme="dark"] body::after {
  filter: invert(1);
  mix-blend-mode: screen;
}

/* トップのプロフィール写真：幅 360px まで
   （Flowershow が img に直接付ける max-width を上書きするため !important） */
.rendered-mdx img[alt="profile"] {
  width: 100% !important;
  max-width: 360px !important;
  margin: 0 !important;
}
/* 広い画面では写真を右に置き、紹介文を左に流す */
@media (min-width: 768px) {
  .rendered-mdx img[alt="profile"] {
    float: right;
    width: 40% !important;
    margin: 0.25rem 0 1.5rem 2rem !important;
  }
  /* 次のセクション（## 見出し）からは回り込みを解除（プロフィール写真のあるトップだけ） */
  .rendered-mdx:has(img[alt="profile"]) h2 {
    clear: both;
  }
}

/* 日本語本文の行間と字間 */
.rendered-mdx {
  line-height: 1.9;
  letter-spacing: 0.02em;
}
.rendered-mdx h1,
.rendered-mdx h2,
.rendered-mdx h3 {
  font-feature-settings: "palt";
  letter-spacing: 0.04em;
}

/* ギャラリー：1つの段落に画像が2枚以上並んだら横一列にする（Ghost のギャラリー風）
   写真は切り抜かず、縦横比をそのまま保つ */
.rendered-mdx p:has(> img + img) {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.rendered-mdx p:has(> img + img) > img {
  /* 古いブラウザ向け：同じ幅で並べる（高さは写真ごとに変わる） */
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  /* 対応ブラウザ：幅を縦横比に比例させ、行の高さを揃える
     （Flowershow が付ける data-fs-intrinsic-width / height を使う） */
  flex-grow: calc(attr(data-fs-intrinsic-width type(<number>), 1) / attr(data-fs-intrinsic-height type(<number>), 1));
}
/* ギャラリー直後の斜体1行はキャプションとして小さく中央に */
.rendered-mdx p:has(> img + img) + p:has(> em:only-child) {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-foreground-500);
}

/* ナビバー
   背景を少し透かしてぼかし、境目は線ではなく薄い影で分ける */
.site-navbar {
  background-color: color-mix(in oklab, var(--color-background) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.site-navbar-inner {
  max-width: 80rem;
  padding: 0 1.5rem;
}

/* ロゴと名前 */
.site-navbar-site-logo {
  border-radius: 999px;
}
.site-navbar-site-name {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* リンク：普段は薄いグレー、マウスを乗せると濃くなり丸い背景が付く */
.site-navbar-link {
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-foreground-500);
  transition: color 0.2s, background-color 0.2s;
}
.site-navbar-link:hover {
  color: var(--color-foreground-900);
  background-color: var(--color-foreground-50);
}

/* Photography：wiki の元ページと同じ表示（中央寄せ＋幅指定、クレジットは中央） */
.rendered-mdx img[data-fs-resolved-file-path="/assets/photography/photography.png"] {
  display: block;
  width: 24rem !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}
.rendered-mdx img[data-fs-resolved-file-path="/assets/photography/gr-iiix_1.jpg"] {
  display: block;
  width: 100% !important;
  max-width: 42rem !important;
  margin: 0 auto !important;
}
/* 1枚だけの画像は <p> に包まれず直接置かれるので、両方の形に対応する */
.rendered-mdx p:has(> img[data-fs-resolved-file-path^="/assets/photography/"]) + p:has(> em:only-child),
.rendered-mdx > img[data-fs-resolved-file-path^="/assets/photography/"] + p:has(> em:only-child) {
  text-align: center;
}