/*
  Calm & Intellectual CSS
  - understated palette, subtle elegance, scholarly feel
  - mobile-first, accessible, and typography-forward
  - supports light/dark via prefers-color-scheme
*/

/* ------------------------------
   1) Design tokens
------------------------------ */
:root {
  /* Base scale */
  --radius: 12px;
  --shadow-1: 0 1px 3px rgba(0,0,0,.08);
  --shadow-2: 0 6px 20px rgba(0,0,0,.08);
  --content-max: 86ch;

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Yu Gothic", "Hiragino Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-serif: "Noto Serif JP", Georgia, Cambria, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Noto Sans Mono", "Source Code Pro", monospace;
  --leading: 1.7;
  --tracking: .01em;

  /* Color palette (light) – muted ink on soft paper */
  --bg: #F7F7F5;            /* off-white with warmth */
  --bg-elev: #FFFFFF;       /* surface */
  --ink: #232323;           /* main text */
  --ink-dim: #4A4A48;       /* secondary text */
  --muted: #E6E6E2;         /* subtle borders */
  --accent: #6B7FA1;        /* desaturated slate blue */
  --accent-ink: #102038;    /* for solid accent surfaces */
  --accent-soft: #EAF0F7;   /* soft background tint */
  --positive: #577C60;      /* quiet green */
  --warning: #8C6A3F;       /* tea brown */
  --danger: #8A4B55;        /* muted rose */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1215;          /* graphite */
    --bg-elev: #14181D;     /* card surface */
    --ink: #E8E9EB;         /* main text */
    --ink-dim: #B7BDC5;     /* secondary */
    --muted: #2A3138;       /* borders */
    --accent: #91A8C7;      /* slightly brighter slate */
    --accent-ink: #0C1624;
    --accent-soft: #101720;  /* tinted block backgrounds */
    --positive: #7FA58C;
    --warning: #C5A26F;
    --danger: #C48690;
  }
}

/* ------------------------------
   2) Base reset & typography
------------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  line-height: var(--leading);
  letter-spacing: var(--tracking);
  color: var(--ink);
  background: radial-gradient(1200px 800px at 10% -10%, rgba(107,127,161,.06), transparent 70%),
              radial-gradient(800px 600px at 120% 10%, rgba(87,124,96,.05), transparent 60%),
              var(--bg);
}

/* Comfortable reading measure */
main, .container, .prose {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: clamp(16px, 3vw, 32px);
}

/* Headings: quiet authority */
h1, h2, h3, h4 { line-height: 1.25; color: var(--ink); }
h1 { font-size: clamp(1.75rem, 3.2vw, 2.3rem); font-weight: 700; }
h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); font-weight: 650; margin-top: 2.2em; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 600; margin-top: 1.8em; }
h4 { font-size: 1.05rem; font-weight: 600; margin-top: 1.4em; color: var(--ink-dim); }

p { margin: 0 0 1.05em; }
small, .muted { color: var(--ink-dim); }

/* Seriffed pull-quotes & long-form option */
.prose.serif { font-family: var(--font-serif); }

/* ------------------------------
   3) Links & focus states
------------------------------ */
a {
  color: var(--accent);
  text-decoration: none;
  background: linear-gradient(transparent 60%, color-mix(in oklab, var(--accent) 22%, transparent) 0);
  transition: background-size .2s ease, color .2s ease, text-underline-offset .2s ease;
}

a:hover { text-decoration: underline; text-underline-offset: .18em; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent), white 15%);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------
   4) Layout helpers
------------------------------ */
.grid {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  grid-template-columns: 1fr;
}
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.stack > * + * { margin-top: var(--stack-gap, 1em); }

.card {
  background: var(--bg-elev);
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: clamp(14px, 2.6vw, 22px);
}
.card:hover { box-shadow: var(--shadow-2); transition: box-shadow .2s ease; }

/* ------------------------------
   5) Navigation & header/footer
------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(120%) blur(8px);
  background: color-mix(in oklab, var(--bg), transparent 10%);
  border-bottom: 1px solid var(--muted);
}
.site-header .inner {
  max-width: calc(var(--content-max) + 2*clamp(16px, 3vw, 32px));
  margin: 0 auto; padding: .6rem clamp(16px, 3vw, 32px);
  display: flex; align-items: center; justify-content: space-between;
}

.nav a { padding: .4rem .6rem; border-radius: 8px; }
.nav a:hover { background: color-mix(in oklab, var(--accent-soft), transparent 30%); }

.site-footer {
  margin-top: 4rem; padding: 2rem clamp(16px, 3vw, 32px);
  border-top: 1px solid var(--muted);
  color: var(--ink-dim); font-size: .95rem;
  background: linear-gradient(0deg, color-mix(in oklab, var(--bg-elev), transparent 70%), transparent);
}

/* ------------------------------
   6) Buttons & badges
------------------------------ */
.button, button, [type="submit"], [role="button"] {
  appearance: none; cursor: pointer; user-select: none;
  font: inherit; color: var(--bg-elev);
  background: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent), black 10%);
  padding: .55rem .9rem; border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.button:hover, button:hover { filter: brightness(1.05); }
.button:active, button:active { transform: translateY(1px); }

.button.ghost { color: var(--accent); background: transparent; border-color: var(--accent); }
.button.ghost:hover { background: color-mix(in oklab, var(--accent-soft), transparent 20%); }

.badge {
  display: inline-block; font-size: .8rem; padding: .2rem .5rem;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent), var(--bg) 80%);
}

/* ------------------------------
   7) Forms
------------------------------ */
label { display: block; margin: .6rem 0 .25rem; color: var(--ink-dim); }
input, textarea, select {
  width: 100%;
  background: var(--bg-elev);
  color: var(--ink);
  border: 1px solid var(--muted);
  border-radius: 10px;
  padding: .55rem .7rem;
}
input::placeholder, textarea::placeholder { color: color-mix(in oklab, var(--ink-dim), var(--bg) 15%); }

/* ------------------------------
   8) Tables
------------------------------ */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .6rem .7rem; text-align: left; }
.table thead th { font-weight: 650; color: var(--ink-dim); }
.table tbody tr { border-top: 1px solid var(--muted); }
.table tbody tr:hover { background: color-mix(in oklab, var(--accent-soft), transparent 40%); }

/* ------------------------------
   9) Code & pre
------------------------------ */
code, kbd, samp { font-family: var(--font-mono); font-size: .95em; }
pre {
  background: var(--accent-soft); color: var(--ink);
  border: 1px solid var(--muted);
  border-radius: 10px; padding: .9rem 1rem; overflow: auto;
}
pre > code { background: transparent; padding: 0; border: 0; }

/* Inline code */
code { background: color-mix(in oklab, var(--accent-soft), transparent 20%); padding: .15em .35em; border-radius: 6px; }

/* ------------------------------
   10) Blockquotes & callouts
------------------------------ */
blockquote {
  margin: 1.2rem 0; padding: .9rem 1rem;
  border-left: 3px solid var(--accent);
  background: color-mix(in oklab, var(--accent-soft), transparent 10%);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-dim);
}

.callout {
  display: grid; gap: .5rem; align-items: start;
  grid-template-columns: 28px 1fr;
  padding: .9rem 1rem; border: 1px solid var(--muted); border-radius: var(--radius);
  background: var(--bg-elev); box-shadow: var(--shadow-1);
}
.callout.info { border-color: color-mix(in oklab, var(--accent), var(--bg) 70%); }
.callout.success { border-color: color-mix(in oklab, var(--positive), var(--bg) 70%); }
.callout.warn { border-color: color-mix(in oklab, var(--warning), var(--bg) 65%); }
.callout.danger { border-color: color-mix(in oklab, var(--danger), var(--bg) 65%); }

/* ------------------------------
   11) Media, figures, lists
------------------------------ */
img, svg, video { max-width: 100%; height: auto; border-radius: 10px; }
figure { margin: 1.2rem 0; }
figcaption { color: var(--ink-dim); font-size: .9rem; text-align: center; margin-top: .4rem; }

ul, ol { padding-inline-start: 1.2rem; }
li { margin: .3rem 0; }

/* ------------------------------
   12) Utilities
------------------------------ */
.accent { color: var(--accent); }
.dim { color: var(--ink-dim); }
.hr { height: 1px; background: var(--muted); border: 0; margin: 2rem 0; }

/* Subtle animated underline for headings with links */
.h-link { position: relative; }
.h-link::after {
  content: "";
  position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: color-mix(in oklab, var(--accent), var(--bg) 10%);
  transition: width .25s ease;
}
.h-link:hover::after { width: 100%; }

/* ------------------------------
   13) Article styling (optional)
------------------------------ */
.article header { margin-bottom: 1.2rem; }
.article time { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.article .meta { display: flex; gap: .6rem; flex-wrap: wrap; color: var(--ink-dim); }
.article p { text-align: justify; hyphens: auto; }

/* ------------------------------
   14) Print styles
------------------------------ */
@media print {
  body { background: white; }
  .site-header, .site-footer { display: none; }
  a { text-decoration: underline; }
}


/* ------------------------------
   Headings Styling
------------------------------ */

/* h1: ページ全体のタイトル */
h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3vw, 2.2rem); /* 少し小さめ */
  font-weight: 650;                       /* 太さも少し軽く */
  color: var(--accent);
  letter-spacing: 0.01em;
  margin: 2rem 0 1.2rem;
  border-bottom: 2px solid color-mix(in oklab, var(--accent), transparent 40%);
  padding-bottom: 0.2em;
}

/* h2: セクションタイトル */
h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 650;
  color: var(--ink);
  margin: 2rem 0 1rem;
  padding-left: 0.6rem;
  border-left: 5px solid color-mix(in oklab, var(--accent), transparent 30%);
}

/* h3: 小見出し */
h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--ink-dim);
  margin: 1.5rem 0 0.8rem;
  position: relative;
}
h3::before {
  content: "◆";
  color: var(--accent);
  margin-right: 0.4em;
}

/* h4 以下はシンプル */
h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-dim);
  margin: 1.2rem 0 0.6rem;
}