/* hs2g.com — 静的 1 ページ。外部フォント・外部リソースは読まない */

:root {
  --paper: #fbfbf9;
  --ink: #23262a;
  --ink-soft: #5b6066;
  --rule: #d9d8d3;
  --blue: #1a6fe8;          /* pdfinked アイコンの青（ボタン背景。テーマで変えない） */
  --link: var(--blue);
  --font-mincho: "BIZ UDPMincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", "Noto Serif JP", serif;
  --font-gothic: "BIZ UDPGothic", "Yu Gothic", "YuGothic", "Hiragino Sans", "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  --measure: 38rem;
  color-scheme: light;
}

/* ダークテーマ（既定）。prefs.js が html[data-theme] を切り替える */
html[data-theme="dark"] {
  --paper: #16181b;
  --ink: #e6e6e3;
  --ink-soft: #a0a5ab;
  --rule: #34373c;
  --link: #6ea8ff;          /* 暗い背景でも読める明るさの青 */
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-gothic);
  font-size: 1rem;
  line-height: 1.9;
  font-feature-settings: "palt";
}

/* 言語切替: html[data-lang] と一致しない lang の要素を隠す */
html[data-lang="ja"] .i18n[lang="en"],
html[data-lang="en"] .i18n[lang="ja"] { display: none; }
html[data-lang="en"] body {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-feature-settings: normal;
  line-height: 1.65;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 2px;
}

.site-header,
main,
.site-footer {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

/* ヘッダー */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.5rem 0 0;
}
.brand {
  font-family: var(--font-mincho);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
}
.prefs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem 1rem; }
.switch { display: flex; gap: 0.25rem; }
.switch button {
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1;
  padding: 0.4em 0.7em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.switch button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  cursor: default;
}

/* 冒頭の一文 */
.intro { padding: 4rem 0 3rem; }
.lead {
  font-family: var(--font-mincho);
  font-size: clamp(1.25rem, 3.2vw, 1.5rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
  margin: 0;
  max-width: 24em;
  text-wrap: balance;
}
.phrase { display: inline-block; }  /* 文節の途中で折り返さない */

/* 作品 */
.works { border-top: 1px solid var(--rule); padding: 2.5rem 0 4rem; }
.work {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1.25rem;
  align-items: start;
}
.work + .work { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.work-icon { border-radius: 14px; display: block; }
html[data-theme="dark"] .work-icon { box-shadow: 0 0 0 1px var(--rule); }  /* 暗いアイコンが背景に溶けないように */
.work-body { min-width: 0; }
h2 {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0.1em 0 0.5em;
}
h2 a { color: var(--ink); text-decoration: none; }
h2 a:hover { text-decoration: underline; }
.work-body > p { margin: 0 0 1em; }
.work-points {
  margin: 0 0 1.5em;
  padding-left: 1.2em;
  color: var(--ink-soft);
}
.work-points li { margin: 0.2em 0; }
.work-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.button {
  display: inline-block;
  padding: 0.55em 1.2em;
  background: var(--blue);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
}
.button:hover { background: #155fc9; text-decoration: none; }
.work-meta { color: var(--ink-soft); font-size: 0.875rem; }

/* フッター */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0 3rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.site-footer p { margin: 0.25em 0; }
.copyright { font-size: 0.8125rem; }

@media (max-width: 480px) {
  .intro { padding-top: 3rem; }
  .work { grid-template-columns: 48px 1fr; gap: 1rem; }
  .work-icon { width: 48px; height: 48px; border-radius: 10px; }
}