:root {
  --shadow-color: 220 3% 15%;
  /* 紙を重ねた程度の影。輪郭は 1px の線が担うので、影は気配だけにする。 */
  --shadow-2: 0 1px 1px hsl(var(--shadow-color) / 0.04), 0 2px 6px -2px hsl(var(--shadow-color) / 0.06);
  --shadow-4: 0 1px 2px hsl(var(--shadow-color) / 0.05), 0 8px 20px -10px hsl(var(--shadow-color) / 0.16);
  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);

  --page: oklch(98.75% 0.004 90);
  --page-dot: oklch(14.5% 0 0 / 0.014);
  --surface: #ffffff;
  --surface-elevated: oklch(98% 0.003 90);
  --surface-recessed: oklch(96.4% 0.005 90);
  --ink: oklch(21% 0.012 230);
  --ink-strong: oklch(14.5% 0.01 230);
  --ink-soft: oklch(45% 0.012 230);
  --ink-faint: oklch(55.6% 0.01 230);
  --accent: #1788a0;
  --accent-deep: #0f6d81;
  --accent-bright: #3aa7b8;
  --accent-soft: oklch(95% 0.025 210);
  --line: oklch(14.5% 0 0 / 0.1);
  --line-strong: oklch(14.5% 0 0 / 0.16);
  --line-accent: color-mix(in oklab, var(--accent) 45%, var(--line));
  --hairline: oklch(93.5% 0.004 90);

  /*
   * 表紙の三色（明・中・暗）。kiln は配色そのまま、ink は墨寄せ、moss は苔寄せ。
   * どの配色でも accent を混ぜるので、切り替えても表紙だけ浮かない。
   */
  --hero-kiln-hi: color-mix(in oklab, var(--accent-bright) 86%, white);
  --hero-kiln-mid: var(--accent);
  --hero-kiln-lo: var(--accent-deep);
  --hero-ink-hi: color-mix(in oklab, var(--ink-soft) 55%, var(--accent));
  --hero-ink-mid: color-mix(in oklab, var(--ink) 72%, var(--accent));
  --hero-ink-lo: var(--ink-strong);
  --hero-moss-hi: color-mix(in oklab, #4e8b6a 62%, var(--accent-bright));
  --hero-moss-mid: color-mix(in oklab, #2f6f4e 66%, var(--accent));
  --hero-moss-lo: color-mix(in oklab, #1c4a34 70%, var(--accent-deep));
  --hero-a: linear-gradient(150deg, var(--hero-kiln-hi), var(--hero-kiln-mid) 52%, var(--hero-kiln-lo));
  --hero-b: linear-gradient(150deg, var(--hero-ink-hi), var(--hero-ink-mid) 52%, var(--hero-ink-lo));
  --hero-c: linear-gradient(150deg, var(--hero-moss-hi), var(--hero-moss-mid) 52%, var(--hero-moss-lo));
  /* 紙の粒子。SVG の乱流ノイズをデータ URI で持つので通信は要らない。 */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.42 0'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>");

  /*
   * 部品の色は配色の accent を少し混ぜる。意味色（良・悪・注意）は色相を保ちつつ、
   * 別テーマに見えない程度に馴染ませる。
   */
  --tone-ink: color-mix(in oklab, var(--ink-strong) 80%, var(--accent));
  --tone-moss: color-mix(in oklab, #2f6f4e 80%, var(--accent));
  --tone-moss-soft: color-mix(in oklab, #2f6f4e 9%, var(--surface));
  --sem-info: color-mix(in oklab, #3d5a80 78%, var(--accent));
  --sem-good: color-mix(in oklab, #2f6f4e 82%, var(--accent));
  --sem-alert: color-mix(in oklab, #b85c38 84%, var(--accent));
  --sem-bad: color-mix(in oklab, #9c3a3a 86%, var(--accent));
  --sem-question: color-mix(in oklab, #5e5a8a 80%, var(--accent));
  --sem-neutral: color-mix(in oklab, var(--ink-soft) 86%, var(--accent));
  --paper-warm: color-mix(in oklab, #fbf4e3 92%, var(--accent-soft));
  --paper-warm-line: color-mix(in oklab, #e6d6ae 88%, var(--accent));
  --paper-warm-deep: color-mix(in oklab, #f0e1b4 90%, var(--accent));
  --mark-lemon: color-mix(in oklab, #ffe39a 90%, var(--accent-soft));
  --mark-amber: color-mix(in oklab, #ffc99a 90%, var(--accent-soft));
  --mark-moss: color-mix(in oklab, #cde8c8 84%, var(--accent-soft));
  --mark-sky: color-mix(in oklab, var(--accent) 20%, white);

  --shadow: var(--shadow-2);
  --shadow-hover: var(--shadow-4);
  --ease: var(--ease-3);
  --move: 180ms;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --header-h: 4.25rem;
  --content: 75rem;
  --sidebar: 18.75rem;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --tracking-caps: 0.14em;

  /*
   * 余白は 4px 基点・8px 刻み（Material / Apple HIG と同じ UI グリッド）。
   * 本文は 16px × 行間 1.75。WCAG 1.4.8 は 1.5 以上、和文ゴシックは 1.7–1.8 が読みやすい。
   * リズム 28px。関連は 8–16、部品同士は 24、見出し前は 48。
   */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --lead: 1.75;
  --lead-tight: 1.35;
  --lead-heading: 1.45;
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.25rem;
  --step-3: 1.5rem;
  --step-4: 1.875rem;
  --step-5: 2.25rem;
  --gutter: var(--space-4);
  --gap-card: var(--space-5);
  --gap-col: var(--space-7);
  --bleed-x: var(--space-6);
  --block-gap: var(--space-5);
}

@media (min-width: 960px) {
  :root {
    --gutter: var(--space-6);
  }
}

/* 狭い幅ではヘッダーが二段（銘＋ナビ）になるので、固定ヘッダー分の高さも合わせる。 */
@media (max-width: 960px) {
  :root {
    --header-h: 6.25rem;
    --bleed-x: var(--space-4);
  }
}

[data-palette="kiln"] {
  --page: oklch(98.75% 0.004 90);
  --page-dot: oklch(14.5% 0 0 / 0.014);
  --accent: #1788a0;
  --accent-deep: #0f6d81;
  --accent-bright: #3aa7b8;
  --accent-soft: oklch(95% 0.025 210);
  --ink: oklch(21% 0.012 230);
  --ink-strong: oklch(14.5% 0.01 230);
  --ink-soft: oklch(45% 0.012 230);
}

[data-palette="ink"] {
  --page: oklch(98.4% 0.006 250);
  --page-dot: oklch(18% 0.02 250 / 0.018);
  --accent: #3d5a80;
  --accent-deep: #243656;
  --accent-bright: #6b8cae;
  --accent-soft: oklch(95.5% 0.02 250);
  --ink: oklch(22% 0.02 250);
  --ink-strong: oklch(16% 0.02 250);
  --ink-soft: oklch(42% 0.02 250);
}

[data-palette="moss"] {
  --page: oklch(98.6% 0.008 150);
  --page-dot: oklch(18% 0.03 150 / 0.016);
  --accent: #2f6f4e;
  --accent-deep: #1c4a34;
  --accent-bright: #4e8b6a;
  --accent-soft: oklch(95.5% 0.03 150);
  --ink: oklch(22% 0.02 150);
  --ink-strong: oklch(16% 0.02 150);
  --ink-soft: oklch(40% 0.02 150);
}

[data-palette="clay"] {
  --page: oklch(98.8% 0.01 70);
  --page-dot: oklch(28% 0.04 55 / 0.016);
  --accent: #b85c38;
  --accent-deep: #8a3f24;
  --accent-bright: #d4895c;
  --accent-soft: oklch(96% 0.03 55);
  --ink: oklch(23% 0.02 50);
  --ink-strong: oklch(16% 0.02 50);
  --ink-soft: oklch(42% 0.02 50);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--page);
  /* 紙の目。存在を意識させない濃さで、24px 間隔。 */
  background-image: radial-gradient(var(--page-dot) 0.6px, transparent 0.7px);
  background-size: var(--space-5) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--lead);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-break: strict;
}

/* 詰めは見出しと小さな見出し語だけ。本文は全角送りのままにして読み疲れを避ける。 */
h1,
h2,
h3,
h4,
.brand-name,
.card-title,
.kicker,
.section-title,
.widget-title {
  font-feature-settings: "palt" 1;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-deep);
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: var(--space-1);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}