/* sabaneko - 茶色系「ノートに書いた」風 + スチームパンク/近世の趣。モバイル最優先。 */
:root {
  color-scheme: light;
  --paper: #f3ecda;        /* 古紙のベース（白寄りのクリーム） */
  --paper-lit: #faf5e9;    /* 明るい紙面 */
  --panel: #ece0c6;        /* 枠・コード地 */
  --ink: #3a2a17;          /* 本文（濃いセピアのインク） */
  --ink-soft: #5c4630;     /* やや薄いインク */
  --muted: #6f5836;        /* 補助テキスト */
  --dim: #8a7247;          /* 日付など */
  --line: #cdba93;         /* 罫線 */
  --brass: #a9803f;        /* 真鍮のアクセント */
  --brass-dark: #6f5327;
  --rust: #9c4a1a;         /* リンク・強調の錆色 */
  --rust-deep: #7c3410;
  --maxw: 720px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Georgia, "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  line-height: 1.9;
  color: var(--ink);
  background-color: var(--paper);
  /* 古紙の陰影 + うっすら罫線（ノート感） + 微細な繊維ノイズ風グラデーション */
  background-image:
    radial-gradient(1200px 800px at 78% -12%, rgba(255, 251, 240, 0.6) 0%, rgba(243, 236, 218, 0) 55%),
    radial-gradient(900px 900px at 8% 108%, rgba(120, 88, 44, 0.10) 0%, rgba(120, 88, 44, 0) 60%),
    repeating-linear-gradient(0deg, rgba(90, 66, 34, 0) 0px, rgba(90, 66, 34, 0) 30px, rgba(90, 66, 34, 0.07) 31px, rgba(90, 66, 34, 0) 32px),
    linear-gradient(180deg, #f6f0e0 0%, var(--paper) 55%, #ece1c8 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
main, .site-head, .site-foot { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.15rem; }

/* ---------- ロード画面（歯車がかみ合って回る） ---------- */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  background:
    radial-gradient(700px 500px at 50% 40%, #faf5e9 0%, #efe6d1 60%, #ddceb0 100%);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#loader svg { width: min(46vw, 190px); height: auto; filter: drop-shadow(0 3px 4px rgba(60, 40, 15, 0.35)); }
.loading-text {
  margin: 0; font-size: 0.72rem; letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase; color: var(--brass-dark);
}
body.loaded #loader { opacity: 0; visibility: hidden; }

/* ---------- ヘッダ ---------- */
.site-head { padding-top: 2.6rem; padding-bottom: 1.2rem; border-bottom: 2px solid var(--brass); position: relative; }
.site-head::after {
  content: ""; position: absolute; left: 1.15rem; right: 1.15rem; bottom: -6px; height: 1px;
  background: var(--brass); opacity: 0.5;
}
.brand {
  display: inline-block;
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 248, 228, 0.6);
}
.brand:hover { color: var(--rust-deep); }
.tagline { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.95rem; font-style: italic; }
.site-nav { margin-top: 0.9rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.site-nav a {
  text-decoration: none; color: var(--ink-soft);
  padding: 0.2em 0.85em; border: 1px solid var(--brass); border-radius: 4px;
  background: rgba(169, 128, 63, 0.12); font-size: 0.92rem;
}
.site-nav a:hover { background: rgba(169, 128, 63, 0.28); color: var(--rust-deep); }
.site-nav a.current { background: var(--brass); color: #f4ead0; border-color: var(--brass-dark); }

/* プロフィールページ用に本文幅を少し広げる（ヒーローの見栄え） */
main.wide { max-width: 860px; }

/* ---------- プロフィール ---------- */
.profile { padding-top: 0.4rem; }
/* ヒーロー画像: コンテナ幅を超えて画面を横断（フルブリード） */
.hero {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  min-height: clamp(180px, 42vw, 380px);
  display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  border-top: 3px solid var(--brass); border-bottom: 3px solid var(--brass);
  box-shadow: inset 0 -80px 90px -40px rgba(40, 26, 8, 0.75);
}
.hero--placeholder {
  background-image:
    repeating-linear-gradient(135deg, rgba(90, 66, 34, 0.10) 0 14px, rgba(90, 66, 34, 0) 14px 28px),
    linear-gradient(160deg, #caa86a 0%, #a9803f 45%, #6f5327 100%);
}
/* 複数ヒーロー: クロスフェードのスライドショー */
.hero--slides { background: #6f5327; }
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero--slides::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(0deg, rgba(40, 26, 8, 0.78) 0%, rgba(40, 26, 8, 0) 55%);
}
.hero--slides .hero-cap { position: relative; z-index: 1; }
.hero-cap {
  width: 100%; max-width: 860px; margin-inline: auto; padding: 1.2rem 1.15rem 1rem;
  color: #f6ecd4; text-shadow: 0 2px 6px rgba(30, 18, 4, 0.85);
}
.hero-cap h1 { margin: 0; font-size: clamp(1.8rem, 7vw, 2.8rem); line-height: 1.2; }
.hero-cap p { margin: 0.3rem 0 0; font-style: italic; color: #f0e2c2; }

.profile-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1.2rem 0 0.4rem; }
.avatar {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--brass); background: var(--paper-lit);
  box-shadow: 0 2px 8px rgba(60, 40, 15, 0.35); margin-top: -3.4rem;
}
.social { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.social-link {
  text-decoration: none; color: var(--ink);
  padding: 0.28em 0.9em; border: 1px solid var(--brass-dark); border-radius: 4px;
  background: linear-gradient(180deg, #cdae74, #b7995f); font-size: 0.9rem;
  box-shadow: 0 1px 2px rgba(60, 40, 15, 0.3);
}
.social-link:hover { background: linear-gradient(180deg, #d7ba82, #c1a469); color: var(--rust-deep); }
.profile-body { margin-top: 1rem; }

/* ---------- 記事一覧 ---------- */
.entries { display: flex; flex-direction: column; gap: 1.4rem; padding: 1.1rem 0 1rem; }
.entry { border-bottom: 1px dashed var(--line); padding-bottom: 1.4rem; }
.entry:last-child { border-bottom: 0; }
.entry time, .post-head time { display: block; color: var(--dim); font-size: 0.8rem; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
.entry h2 { margin: 0.25rem 0 0.35rem; font-size: 1.25rem; line-height: 1.45; }
.entry h2 a { color: var(--ink); text-decoration: none; }
.entry h2 a:hover { color: var(--rust-deep); }
.entry .summary { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.empty { color: var(--muted); padding: 1.5rem 0; font-style: italic; }

/* ---------- 記事本文 ---------- */
.post-head { padding: 0.4rem 0 0.7rem; border-bottom: 2px solid var(--brass); margin-bottom: 1.5rem; }
.post-head h1 { margin: 0.3rem 0 0; font-size: clamp(1.6rem, 6vw, 2.1rem); line-height: 1.35; }
.post h2 { margin: 2rem 0 0.6rem; font-size: 1.35rem; border-bottom: 1px solid var(--line); padding-bottom: 0.2rem; }
.post h3 { margin: 1.6rem 0 0.5rem; font-size: 1.12rem; }
.post p { margin: 1rem 0; }
.post a { color: var(--rust); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post a:hover { color: var(--rust-deep); }
.post strong { color: var(--rust-deep); }
.post del { color: var(--muted); }
.post ul, .post ol { padding-left: 1.4rem; margin: 1rem 0; }
.post li { margin: 0.35rem 0; }
.post li::marker { color: var(--brass-dark); }
.post img {
  max-width: 100%; height: auto; border-radius: 4px;
  border: 1px solid var(--brass); padding: 5px; background: var(--paper-lit);
  box-shadow: 0 2px 6px rgba(60, 40, 15, 0.25);
}
/* 画像の配置（![alt](src){center} などで付く）。サイズは style="width:..." で個別指定。 */
.post img.img-center { display: block; margin-inline: auto; }
.post img.img-left { display: block; margin-right: auto; }
.post img.img-right { display: block; margin-left: auto; }
.post code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em; background: var(--panel); border: 1px solid var(--line);
  padding: 0.1em 0.4em; border-radius: 4px; color: var(--ink);
}
.post pre {
  background: #ece0c4; border: 1px solid var(--brass); border-radius: 6px;
  padding: 1rem 1.1rem; overflow-x: auto; line-height: 1.6;
  box-shadow: inset 0 1px 3px rgba(60, 40, 15, 0.2);
}
.post pre code { background: none; border: 0; padding: 0; font-size: 0.88em; }
.post blockquote {
  margin: 1.2rem 0; padding: 0.3rem 1rem; color: var(--ink-soft);
  border-left: 4px solid var(--brass); background: rgba(169, 128, 63, 0.10); font-style: italic;
}
.post hr { border: 0; border-top: 2px solid var(--brass); opacity: 0.55; margin: 2rem 0; }

/* 添付ファイル [[file:...]] は真鍮のプレート風のダウンロードリンク */
.post a.attach {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.25em 0.7em; margin: 0.15em 0;
  border: 1px solid var(--brass-dark); border-radius: 4px;
  background: linear-gradient(180deg, #cdae74, #b7995f);
  color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 2px rgba(60, 40, 15, 0.3);
}
.post a.attach::before {
  content: ""; width: 0.6em; height: 0.6em; transform: rotate(45deg);
  background: var(--brass-dark); box-shadow: 0 0 0 2px rgba(255, 248, 228, 0.4) inset;
}
.post a.attach:hover { background: linear-gradient(180deg, #d7ba82, #c1a469); color: var(--rust-deep); }

.back { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px dashed var(--line); }
.back a { color: var(--muted); text-decoration: none; }
.back a:hover { color: var(--rust-deep); }

.site-foot { padding: 2.6rem 1.15rem 3rem; color: var(--dim); font-size: 0.78rem; letter-spacing: 0.03em; }

@media (prefers-reduced-motion: reduce) {
  #loader svg animateTransform { display: none; }
  #loader { transition: none; }
}