/* # uchū color palette (expanded) */

/*
 * REF: https://github.com/NeverCease/uchu
 * License: UNLICENSE（パブリックドメイン相当）
 *
 * 原典の`definitions/style/color_expanded.css`から値を転記したもの．
 * 色はOKLCH色空間で定義されている．
 *
 * 各色は`--uchu-<name>-raw`（`oklch()`の引数）と`--uchu-<name>`（色そのもの）の2つの形で提供される．
 * 前者は，透明度を付けて使う場合（例: `oklch(var(--uchu-blue-8-raw) / 0.5)`）に用いる．
 */

:root {

  /* ## gray */

  --uchu-gray-1-raw: 95.57% 0.003 286.35;
  --uchu-gray-1: oklch(var(--uchu-gray-1-raw));
  --uchu-gray-2-raw: 92.04% 0.002 197.12;
  --uchu-gray-2: oklch(var(--uchu-gray-2-raw));
  --uchu-gray-3-raw: 88.28% 0.003 286.34;
  --uchu-gray-3: oklch(var(--uchu-gray-3-raw));
  --uchu-gray-4-raw: 84.68% 0.002 197.12;
  --uchu-gray-4: oklch(var(--uchu-gray-4-raw));
  --uchu-gray-5-raw: 80.73% 0.002 247.84;
  --uchu-gray-5: oklch(var(--uchu-gray-5-raw));
  --uchu-gray-6-raw: 75.03% 0.002 247.85;
  --uchu-gray-6: oklch(var(--uchu-gray-6-raw));
  --uchu-gray-7-raw: 69.01% 0.003 286.32;
  --uchu-gray-7: oklch(var(--uchu-gray-7-raw));
  --uchu-gray-8-raw: 63.12% 0.004 219.55;
  --uchu-gray-8: oklch(var(--uchu-gray-8-raw));
  --uchu-gray-9-raw: 56.82% 0.004 247.89;
  --uchu-gray-9: oklch(var(--uchu-gray-9-raw));

  /* ## red */

  --uchu-red-1-raw: 88.98% 0.052 3.28;
  --uchu-red-1: oklch(var(--uchu-red-1-raw));
  --uchu-red-2-raw: 78.78% 0.109 4.54;
  --uchu-red-2: oklch(var(--uchu-red-2-raw));
  --uchu-red-3-raw: 69.86% 0.162 7.82;
  --uchu-red-3: oklch(var(--uchu-red-3-raw));
  --uchu-red-4-raw: 62.73% 0.209 12.37;
  --uchu-red-4: oklch(var(--uchu-red-4-raw));
  --uchu-red-5-raw: 58.63% 0.231 19.6;
  --uchu-red-5: oklch(var(--uchu-red-5-raw));
  --uchu-red-6-raw: 54.41% 0.214 19.06;
  --uchu-red-6: oklch(var(--uchu-red-6-raw));
  --uchu-red-7-raw: 49.95% 0.195 18.34;
  --uchu-red-7: oklch(var(--uchu-red-7-raw));
  --uchu-red-8-raw: 45.8% 0.177 17.7;
  --uchu-red-8: oklch(var(--uchu-red-8-raw));
  --uchu-red-9-raw: 41.17% 0.157 16.58;
  --uchu-red-9: oklch(var(--uchu-red-9-raw));

  /* ## pink */

  --uchu-pink-1-raw: 95.8% 0.023 354.27;
  --uchu-pink-1: oklch(var(--uchu-pink-1-raw));
  --uchu-pink-2-raw: 92.14% 0.046 352.31;
  --uchu-pink-2: oklch(var(--uchu-pink-2-raw));
  --uchu-pink-3-raw: 88.9% 0.066 354.39;
  --uchu-pink-3: oklch(var(--uchu-pink-3-raw));
  --uchu-pink-4-raw: 85.43% 0.09 354.1;
  --uchu-pink-4: oklch(var(--uchu-pink-4-raw));
  --uchu-pink-5-raw: 82.23% 0.112 355.33;
  --uchu-pink-5: oklch(var(--uchu-pink-5-raw));
  --uchu-pink-6-raw: 76.37% 0.101 355.37;
  --uchu-pink-6: oklch(var(--uchu-pink-6-raw));
  --uchu-pink-7-raw: 70.23% 0.092 354.96;
  --uchu-pink-7: oklch(var(--uchu-pink-7-raw));
  --uchu-pink-8-raw: 64.11% 0.084 353.91;
  --uchu-pink-8: oklch(var(--uchu-pink-8-raw));
  --uchu-pink-9-raw: 57.68% 0.074 353.14;
  --uchu-pink-9: oklch(var(--uchu-pink-9-raw));

  /* ## purple */

  --uchu-purple-1-raw: 89.1% 0.046 305.24;
  --uchu-purple-1: oklch(var(--uchu-purple-1-raw));
  --uchu-purple-2-raw: 78.68% 0.091 305;
  --uchu-purple-2: oklch(var(--uchu-purple-2-raw));
  --uchu-purple-3-raw: 68.5% 0.136 303.78;
  --uchu-purple-3: oklch(var(--uchu-purple-3-raw));
  --uchu-purple-4-raw: 58.47% 0.181 302.06;
  --uchu-purple-4: oklch(var(--uchu-purple-4-raw));
  --uchu-purple-5-raw: 49.39% 0.215 298.31;
  --uchu-purple-5: oklch(var(--uchu-purple-5-raw));
  --uchu-purple-6-raw: 46.11% 0.198 298.4;
  --uchu-purple-6: oklch(var(--uchu-purple-6-raw));
  --uchu-purple-7-raw: 42.77% 0.181 298.49;
  --uchu-purple-7: oklch(var(--uchu-purple-7-raw));
  --uchu-purple-8-raw: 39.46% 0.164 298.29;
  --uchu-purple-8: oklch(var(--uchu-purple-8-raw));
  --uchu-purple-9-raw: 36.01% 0.145 298.35;
  --uchu-purple-9: oklch(var(--uchu-purple-9-raw));

  /* ## blue */

  --uchu-blue-1-raw: 89.66% 0.046 260.67;
  --uchu-blue-1: oklch(var(--uchu-blue-1-raw));
  --uchu-blue-2-raw: 80.17% 0.091 258.88;
  --uchu-blue-2: oklch(var(--uchu-blue-2-raw));
  --uchu-blue-3-raw: 70.94% 0.136 258.06;
  --uchu-blue-3: oklch(var(--uchu-blue-3-raw));
  --uchu-blue-4-raw: 62.39% 0.181 258.33;
  --uchu-blue-4: oklch(var(--uchu-blue-4-raw));
  --uchu-blue-5-raw: 54.87% 0.222 260.33;
  --uchu-blue-5: oklch(var(--uchu-blue-5-raw));
  --uchu-blue-6-raw: 51.15% 0.204 260.17;
  --uchu-blue-6: oklch(var(--uchu-blue-6-raw));
  --uchu-blue-7-raw: 47.36% 0.185 259.89;
  --uchu-blue-7: oklch(var(--uchu-blue-7-raw));
  --uchu-blue-8-raw: 43.48% 0.17 260.2;
  --uchu-blue-8: oklch(var(--uchu-blue-8-raw));
  --uchu-blue-9-raw: 39.53% 0.15 259.87;
  --uchu-blue-9: oklch(var(--uchu-blue-9-raw));

  /* ## green */

  --uchu-green-1-raw: 93.96% 0.05 148.74;
  --uchu-green-1: oklch(var(--uchu-green-1-raw));
  --uchu-green-2-raw: 88.77% 0.096 147.71;
  --uchu-green-2: oklch(var(--uchu-green-2-raw));
  --uchu-green-3-raw: 83.74% 0.139 146.57;
  --uchu-green-3: oklch(var(--uchu-green-3-raw));
  --uchu-green-4-raw: 79.33% 0.179 145.62;
  --uchu-green-4: oklch(var(--uchu-green-4-raw));
  --uchu-green-5-raw: 75.23% 0.209 144.64;
  --uchu-green-5: oklch(var(--uchu-green-5-raw));
  --uchu-green-6-raw: 70.03% 0.194 144.71;
  --uchu-green-6: oklch(var(--uchu-green-6-raw));
  --uchu-green-7-raw: 64.24% 0.175 144.92;
  --uchu-green-7: oklch(var(--uchu-green-7-raw));
  --uchu-green-8-raw: 58.83% 0.158 145.05;
  --uchu-green-8: oklch(var(--uchu-green-8-raw));
  --uchu-green-9-raw: 52.77% 0.138 145.41;
  --uchu-green-9: oklch(var(--uchu-green-9-raw));

  /* ## yellow */

  --uchu-yellow-1-raw: 97.05% 0.039 91.2;
  --uchu-yellow-1: oklch(var(--uchu-yellow-1-raw));
  --uchu-yellow-2-raw: 95% 0.07 92.39;
  --uchu-yellow-2: oklch(var(--uchu-yellow-2-raw));
  --uchu-yellow-3-raw: 92.76% 0.098 92.58;
  --uchu-yellow-3: oklch(var(--uchu-yellow-3-raw));
  --uchu-yellow-4-raw: 90.92% 0.125 92.56;
  --uchu-yellow-4: oklch(var(--uchu-yellow-4-raw));
  --uchu-yellow-5-raw: 89% 0.146 91.5;
  --uchu-yellow-5: oklch(var(--uchu-yellow-5-raw));
  --uchu-yellow-6-raw: 82.39% 0.133 91.5;
  --uchu-yellow-6: oklch(var(--uchu-yellow-6-raw));
  --uchu-yellow-7-raw: 75.84% 0.122 92.21;
  --uchu-yellow-7: oklch(var(--uchu-yellow-7-raw));
  --uchu-yellow-8-raw: 69.14% 0.109 91.04;
  --uchu-yellow-8: oklch(var(--uchu-yellow-8-raw));
  --uchu-yellow-9-raw: 62.29% 0.097 91.9;
  --uchu-yellow-9: oklch(var(--uchu-yellow-9-raw));

  /* ## orange */

  --uchu-orange-1-raw: 93.83% 0.037 56.93;
  --uchu-orange-1: oklch(var(--uchu-orange-1-raw));
  --uchu-orange-2-raw: 88.37% 0.07258208750520016 55.80328658240742;
  --uchu-orange-2: oklch(var(--uchu-orange-2-raw));
  --uchu-orange-3-raw: 83.56% 0.10753627570574478 56.492594564236946;
  --uchu-orange-3: oklch(var(--uchu-orange-3-raw));
  --uchu-orange-4-raw: 78.75% 0.14163582809066333 54.32911089172009;
  --uchu-orange-4: oklch(var(--uchu-orange-4-raw));
  --uchu-orange-5-raw: 74.61% 0.171 51.56;
  --uchu-orange-5: oklch(var(--uchu-orange-5-raw));
  --uchu-orange-6-raw: 69.33% 0.157 52.18;
  --uchu-orange-6: oklch(var(--uchu-orange-6-raw));
  --uchu-orange-7-raw: 63.8% 0.142 52.1;
  --uchu-orange-7: oklch(var(--uchu-orange-7-raw));
  --uchu-orange-8-raw: 58.28% 0.128 52.2;
  --uchu-orange-8: oklch(var(--uchu-orange-8-raw));
  --uchu-orange-9-raw: 52.49% 0.113 51.98;
  --uchu-orange-9: oklch(var(--uchu-orange-9-raw));

  /* ## yin */

  --uchu-yin-1-raw: 91.87% 0.003 264.54;
  --uchu-yin-1: oklch(var(--uchu-yin-1-raw));
  --uchu-yin-2-raw: 84.61% 0.004 286.31;
  --uchu-yin-2: oklch(var(--uchu-yin-2-raw));
  --uchu-yin-3-raw: 76.89% 0.004 247.87;
  --uchu-yin-3: oklch(var(--uchu-yin-3-raw));
  --uchu-yin-4-raw: 69.17% 0.004 247.88;
  --uchu-yin-4: oklch(var(--uchu-yin-4-raw));
  --uchu-yin-5-raw: 61.01% 0.005 271.34;
  --uchu-yin-5: oklch(var(--uchu-yin-5-raw));
  --uchu-yin-6-raw: 52.79% 0.005 271.32;
  --uchu-yin-6: oklch(var(--uchu-yin-6-raw));
  --uchu-yin-7-raw: 43.87% 0.005 271.3;
  --uchu-yin-7: oklch(var(--uchu-yin-7-raw));
  --uchu-yin-8-raw: 35.02% 0.005 236.66;
  --uchu-yin-8: oklch(var(--uchu-yin-8-raw));
  --uchu-yin-9-raw: 25.11% 0.006 258.36;
  --uchu-yin-9: oklch(var(--uchu-yin-9-raw));

  /* ## 汎用 */

  --uchu-yang-raw: 99.4% 0 0;
  --uchu-yang: oklch(var(--uchu-yang-raw));
  --uchu-yin-raw: 14.38% 0.007 256.88;
  --uchu-yin: oklch(var(--uchu-yin-raw));
}
/* # SOCCULUS サイトのスタイル */

/* ## デザイントークン */

/*
 * 色・書体・寸法はすべてカスタムプロパティ経由で参照し，個々の規則に直接値を書かない．
 * 色については，`vendor/uchu.css`で定義されたパレットの色名（`--uchu-*`）を
 * 用途別の名前（`--color-*`）に割り当て，個々の規則からは用途別の名前だけを参照する．
 *
 * ダークモードを導入する際は，このファイルの末尾に用途別の名前の割り当てを差し替えるブロックを足す．
 *
 * ```css
 * @media (prefers-color-scheme: dark) {
 *   :root {
 *     color-scheme: dark;
 *     --color-bg: var(--uchu-yin);
 *     --color-surface: var(--uchu-yin-9);
 *     --color-text: var(--uchu-gray-1);
 *   }
 * }
 * ```
 */
:root {
  color-scheme: light;

  /* ### 色 */

  --color-bg: var(--uchu-gray-1);             /* 地色 */
  --color-surface: var(--uchu-yang);          /* カードなど，地色の上に載る面 */
  --color-text: var(--uchu-yin-9);            /* 本文 */
  --color-text-muted: var(--uchu-yin-7);      /* 補助的なテキスト */
  --color-border: var(--uchu-gray-3);         /* 罫線（通常時） */
  --color-border-strong: var(--uchu-gray-7);  /* 罫線（ホバー時など） */
  --color-accent: var(--uchu-blue-8);         /* リンク，フォーカスリング */

  /* ### 書体 */

  --font-base: "Noto Sans", "Noto Sans JP", sans-serif;
  --font-mono: "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Montserrat", sans-serif;    /* 欧文の短い文字列に限る */

  /* ### 文字サイズ */

  /* おおむね比率 1.2 で段階を作る． */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 1rem;     /* 16px */
  --text-md: 1.1875rem;  /* 19px */
  --text-lg: 1.4375rem;  /* 23px */
  --text-xl: 1.75rem;    /* 28px */

  /* ### 字間 */

  --tracking-base: 0.02em;
  --tracking-display: 0.12em;

  /* ### 行送り */

  --leading-ui: 1.7;
  --leading-prose: 1.9;    /* 文書中（広めに取る） */
  --leading-heading: 1.4;  /* 見出し */
  --leading-list: 1.7;     /* リスト */

  /* ### ウェイト */

  --weight-display: 500;  /* `--font-display`と組で使う */
  --weight-strong: 700;   /* 本文の見出しと太字 */

  /* ### 寸法 */

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;

  /* 本文の縦のリズムを作る余白は，`rem`ではなく`em`で指定し，適用先の要素の文字サイズに比例させる． */
  --space-para: 1.5em;            /* 段落と段落の間 */
  --space-heading-before: 2.3em;  /* 見出しの前 */
  --space-heading-after: 0.5em;   /* 見出し（`h2`を除く）の後 */

  --measure: 52rem;     /* 本文の最大幅 */
  --radius: 0.25rem;    /* 角丸の半径 */
  --icon-size: 1.5rem;  /* アイコンのサイズ（24px，Material Symbolsの基準サイズ） */
}

/* ## 設定 */

/* ### 共通設定 */

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

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-base);
  text-autospace: normal;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/*
 * 本文の最大幅を`--measure`とし，ウィンドウがそれより広いときは左右均等の余白で中央寄せする．
 * ウィンドウが`--measure`以下のときは幅いっぱいに広がるが，内容が画面端に接しないように，左右のパディングだけは残す．
 */
.container {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

/* ### ヘッダ */

.site-header {
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
}

.site-header__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
}

.site-header__link {
  color: inherit;
  text-decoration: none;
  transition: color 150ms ease;
}

.site-header__link:hover {
  color: var(--color-accent);
}

.site-nav {
  display: flex;
  gap: var(--space-md);
}

.site-nav__link {
  display: flex;
  /* アイコンは，そのままではクリック・タップの的が小さいため，パディングで広げる． */
  padding: var(--space-xs);
  /* 上記のパディングの -1 倍のマージンで打ち消すことで，アイコンの位置を`.container`の右端に揃える． */
  margin: calc(-1 * var(--space-xs));
  border-radius: var(--radius);
  color: var(--color-text-muted);
  transition: color 150ms ease;
}

.site-nav__link:hover {
  color: var(--color-accent);
}

.icon {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
}

/* ### メインコンテンツ */

/*
 * ヘッダの下と，ページ末尾の余白．
 * `margin`は要素の外側に置かれ，`<main>`に背景や枠を与えたときに塗り残しになるため，内側に取れる`padding`を使う．
 */
.page {
  padding-block: var(--space-lg);
}

/* 上下の余白は`.page`のパディングで与えるため，先頭と末尾の要素のマージンは打ち消す． */
.page > :first-child {
  margin-block-start: 0;
}

.page > :last-child {
  margin-block-end: 0;
}

.page-title {
  margin-block: 0 var(--space-md);
  font-size: var(--text-xl);
  font-weight: var(--weight-strong);
  line-height: var(--leading-heading);
}

.display-title {
  margin-block: var(--space-lg) var(--space-sm);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
}

/* #### ユニット一覧 */

/*
 * 各カードの最小幅を 20rem とし，`auto-fit`で入るだけ並べる．
 * 本文の幅は最大 50rem（52rem からパディングを除いた値）なので，
 * 2段（20rem × 2 + 1rem = 41rem）までは並ぶが，3段（61rem）は並ばない．
 * 本文の幅が 41rem を下回ると，自動的に1段になる．
 * `min()`は，本文の幅が 20rem を下回るときにカードがはみ出すのを防ぐためのものである．
 */
.unit-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-sm);
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.unit-card {
  display: block;
  height: 100%;
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease;
}

.unit-card:hover {
  border-color: var(--color-border-strong);
  color: var(--color-accent);
}

.unit-card__date {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.unit-card__title {
  display: block;
  font-size: var(--text-md);
}

/* #### 文書記述部分（`.prose`） */

.prose {
  padding: var(--space-lg);
  background-color: var(--color-surface);  /* `.unit-card`と揃える */
  border: 1px solid var(--color-border);   /* `.unit-card`と揃える */
  border-radius: var(--radius);            /* `.unit-card`と揃える */
  line-height: var(--leading-prose);
}

/* 画面が狭いときは，文書記述部分を画面の幅いっぱいに表示する． */
@media (width <= 36rem) {
  .prose {
    margin-inline: calc(-1 * var(--space-sm));  /* `.container`の左右パディングを打ち消す */
    padding: var(--space-md);
    border-inline: 0;
    border-radius: 0;
  }
}

/* 面の内側の余白はパディングで与えるため，先頭と末尾の要素のマージンは打ち消す． */
.prose > :first-child {
  margin-block-start: 0;
}

.prose > :last-child {
  margin-block-end: 0;
}

.prose :is(h2, h3, h4) {
  line-height: var(--leading-heading);
  font-weight: var(--weight-strong);
}

.prose h2 {
  /* 
   * `h2`には下に罫線を出力する．
   * `h3`以下と同様に`--space-heading-after`を使うと罫線と本文の間隔が詰まりすぎてしまうので，`--space-sm`を用いる．
   */
  margin-block: var(--space-heading-before) var(--space-sm);
  font-size: var(--text-lg);
  padding-block-end: 0.3em;
  border-block-end: 1px solid var(--color-border);
}

.prose h3 {
  margin-block: var(--space-heading-before) var(--space-heading-after);
  font-size: var(--text-md);
}

.prose h4 {
  margin-block: var(--space-heading-before) var(--space-heading-after);
  font-size: var(--text-base);
}

/* 見出しは`h4`（本文と同じフォントサイズ）までとし，`h5`と`h6`は用いない． */

/*
 * 段落の間隔は，段落そのものではなく段落が連続する箇所にだけ与える．
 * こうすることで，リストや見出しに挟まれた段落で余白が二重にかからない．
 */
.prose p {
  margin-block: 0;
}

.prose p + p {
  margin-block-start: var(--space-para);
}

.prose ul,
.prose ol {
  margin-block: var(--space-md);
  padding-inline-start: var(--space-md);
  line-height: var(--leading-list);
}

/* 入れ子のリストは，独立したブロックではなく親の項目の一部なので，前後を詰める． */
.prose :is(ul, ol) :is(ul, ol) {
  margin-block: var(--space-xs);
}

.prose li + li {
  margin-block-start: var(--space-xs);
}

.prose li::marker {
  color: var(--color-text-muted);
}

.prose strong {
  font-weight: var(--weight-strong);
}

.prose a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}