/* hs2g.com — 静的 1 ページ（Classical トーン / ライト・ダーク） */

:root {
  --bg: #f3f2f2;
  --text: #201f1d;
  --muted: color-mix(in srgb, #201f1d 82%, transparent);
  --divider: color-mix(in srgb, #201f1d 16%, transparent);
  --accent: #b68235;
  --accent-hover: #a06f24;
  --font-gothic: "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
  --font-heading: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Lora", "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDPMincho", "Noto Serif JP", serif;
  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;
  --radius-sm: 2px;
  --radius-md: 4px;
  color-scheme: light;
}

/* ダークテーマ（既定）。prefs.js が html[data-theme] を切り替える */
html[data-theme="dark"] {
  --bg: #1c1a19;
  --text: #eae9e9;
  --muted: color-mix(in srgb, #eae9e9 64%, transparent);
  --divider: color-mix(in srgb, #eae9e9 16%, transparent);
  --accent: #e1ad66;
  --accent-hover: #facb8d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  transition: background .2s, color .2s;
}

/* 言語切替 */
html[data-lang="ja"] .i18n[lang="en"],
html[data-lang="en"] .i18n[lang="ja"] { display: none; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

.wrap { max-width: 60rem; margin: 0 auto; padding: 0 var(--space-6); }

/* ヘッダー */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-6) 0 var(--space-4);
}
.brand {
  font-family: var(--font-heading); font-size: 22px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text); text-decoration: none;
}
.brand:hover { color: var(--text); }
.prefs { display: flex; align-items: center; gap: var(--space-1); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; min-width: 36px; padding: 0;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; line-height: 1.2;
  color: var(--text); background: transparent; border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer;
}
.icon-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.icon-btn:active { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.icon-btn svg { display: block; }
.lang-btn { padding: 0 var(--space-2); }
html[data-theme="dark"] .icon-moon,
html[data-theme="light"] .icon-sun { display: none; }

/* 冒頭 */
.intro {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-8) 0 var(--space-6);
  border-bottom: 1px solid var(--divider);
}
.lead {
  font-family: var(--font-gothic); font-feature-settings: "palt";
  font-weight: 400; font-size: 40px; line-height: 1.15; letter-spacing: 0.01em; margin: 0;
}
.count {
  font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  font-feature-settings: "tnum"; color: var(--muted);
}

/* 作品 */
.works { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0 var(--space-8); }
.work {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0;
  padding: var(--space-4); border: 1px solid var(--divider); border-radius: var(--radius-md);
  transition: border-color .15s;
}
.work:hover { border-color: var(--accent); }
.work-body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.work-shot { display: block; line-height: 0; width: 50%; }
.work-shot img {
  width: 100%; height: auto; aspect-ratio: 16 / 10;
  border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--divider);
}
@media (min-width: 720px) {
  .work { grid-template-columns: minmax(0, 1fr) 12rem; align-items: start; }
  .work-shot { width: auto; }
}
.work-head { display: flex; align-items: center; gap: var(--space-3); }
.work-icon { flex: none; display: block; line-height: 0; }
.work-icon img { width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 0 0 1px var(--divider); }
h2 {
  flex: 1; min-width: 0; margin: 0;
  font-family: var(--font-gothic); font-feature-settings: "palt";
  font-size: 18px; font-weight: 500; line-height: 1.15; letter-spacing: 0;
}
h2 a { display: inline-flex; align-items: center; gap: 4px; color: var(--text); text-decoration: none; }
h2 a:hover { color: var(--accent); }
h2 .arrow { flex: none; opacity: 0.6; }
.src, .src-soon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-md); color: var(--text);
}
.src:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.src-soon { opacity: 0.35; cursor: help; }
.work p {
  margin: 0; font-size: 14px; line-height: 1.75; text-align: justify; text-wrap: pretty;
}
/* span 間の改行を折り返し位置にしない（pretty + justify で最終行が間延びするため） */
.work p .i18n { display: block; }

/* フッター */
.site-footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  border-top: 1px solid var(--divider);
  padding: var(--space-4) 0 var(--space-8);
  font-size: 13px; color: var(--muted);
}
.gh { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.gh:hover { color: var(--accent); }
.copyright { font-feature-settings: "tnum"; }

@media (max-width: 480px) {
  .wrap { padding: 0 var(--space-4); }
  .lead { font-size: 32px; }
}