@import url('https://fonts.googleapis.com/css2?family=Jost:wght@500;600;700&family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap');

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-black: #111111;
  --bg-cream: #f4f3ef;
  --ink: #111111;
  --ink-soft: #4a4a4a;
  --ink-faint: #8a8a8a;
  --line: #dcdcdc;
  --paper-on-black: #f2efe8;

  /* 流動スペーシングスケール(BRUTUS方式、index.htmlと共通の考え方) */
  --space-base: clamp(14px, 12.59px + 0.376vw, 18px);
  --space-xs: calc(var(--space-base) * 0.75);
  --space-s: var(--space-base);
  --space-m: calc(var(--space-base) * 1.5);
  --space-l: calc(var(--space-base) * 2);
  --space-xl: calc(var(--space-base) * 2.5);
  --space-2xl: calc(var(--space-base) * 3);
  --space-3xl: calc(var(--space-base) * 4);
}
* { box-sizing: border-box; }
body {
  font-family: "Hiragino Sans", -apple-system, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
}
.en-title, .brand-mark { font-family: "Jost", "Hiragino Sans", sans-serif; }
h1, h2 { font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; }
a { color: var(--ink); }

header.site-header {
  padding: var(--space-m) var(--space-m); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--space-xs);
}
header.site-header .masthead-link {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: inherit; width: fit-content;
}
header.site-header .masthead-link:hover { opacity: 0.7; }
header.site-header .brand-mark {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
header.site-header .brand-mark .brand-mark-tld { text-transform: lowercase; }
header.site-header h1 { font-size: 18px; margin: 0; font-weight: 900; }
header.site-header p { margin: 0; font-size: 13px; color: var(--ink-faint); }
header.site-header nav { margin-top: var(--space-xs); display: flex; gap: var(--space-s); font-size: 13px; }
header.site-header nav a {
  font-weight: 700; text-decoration: none; padding: var(--space-xs) var(--space-m);
  border-radius: 999px; border: 1px solid var(--ink); color: var(--ink);
}
header.site-header nav a:hover { background: var(--ink); color: var(--bg); }

.divider { height: 6px; background: var(--bg-black); }

.page-body { max-width: 680px; margin: 0 auto; padding: var(--space-2xl) var(--space-m) var(--space-3xl); }
.page-body h2 { font-size: 24px; line-height: 1.5; margin-bottom: var(--space-xs); font-weight: 900; }
.page-body .meta { font-size: 13px; color: var(--ink-faint); margin-bottom: var(--space-l); }
.page-body .meta .tag { display: inline-block; background: var(--bg); border: 1px solid var(--ink); color: var(--ink); padding: 3px 10px; border-radius: 999px; margin-right: 6px; }
.page-body p { font-size: 16px; line-height: 1.95; color: var(--ink-soft); margin: 0 0 var(--space-m); }
.page-body .draft-note { font-size: 13px; color: #8a5a1e; background: #faf1e0; border: 1px solid #e5d0a8; border-radius: 8px; padding: var(--space-s) var(--space-m); margin-bottom: var(--space-l); }
.page-body .footnote { font-size: 13px; color: var(--ink-faint); border-top: 1px solid var(--line); padding-top: var(--space-s); margin-top: var(--space-l); }

.column-list { list-style: none; margin: 0; padding: 0; }
.column-list li {
  border: 1px solid var(--ink); background: var(--bg);
  border-radius: 8px; padding: var(--space-m) var(--space-m); margin-bottom: var(--space-s);
}
.column-list a { color: var(--ink); font-size: 17px; font-weight: 700; text-decoration: none; }
.column-list .summary { font-size: 14px; color: var(--ink-faint); margin-top: 6px; line-height: 1.6; }