/*
 * デザイントークン。色・余白・角丸・線は docs/design/design.md §4 の値をそのまま写した。
 * 第3版(設計書 §11、エディタ風)で等幅のフォントと構文の色を足した。
 * そのほかに使う値(型の大きさ・段・ヘッダーの高さなど)も、ここで名前を付けてから使う。
 *
 * 画面幅の境目(メディアクエリには変数を使えないので、各ファイルに数値で書く):
 * - 768px  タブレット。段を4から8に増やす
 * - 1024px デスクトップ。段を12にし、ヘッダーを1行(ワードマーク・タブ・ボタン)に、ヒーローを左7段・右5段にする
 * - 1200px 広いデスクトップ。1024〜1199px はヘッダーを1行に収めるため、タブの文字を一段小さくする
 */

/* Manrope の latin の可変フォント(@fontsource-variable/manrope 5.3.0、OFL。public/fonts/OFL-Manrope.txt) */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono の latin の可変フォント(@fontsource-variable/jetbrains-mono 5.3.0、OFL。public/fonts/OFL-JetBrainsMono.txt) */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* 色(design.md §4) */
  --color-ink: #17191D;
  --color-charcoal: #252A31;
  --color-slate: #68717D;
  --color-silver: #B8BEC6;
  --color-paper: #F7F7F5;
  --color-white: #FFFFFF;
  --color-accent: #667C91;
  --color-accent-soft: #E8EDF1;
  --color-line: #E3E5E7;
  /* 文字に使うアクセント(紙色の上で約5.2:1)。--color-accent は印・線・フォーカスの枠だけに使う */
  --color-accent-text: #55697D;
  /* 濃い帯(--color-ink)の上の文字と線 */
  --color-on-ink: var(--color-white);
  --color-on-ink-muted: var(--color-silver);
  --color-line-on-ink: var(--color-slate);

  /*
   * 構文の色。白と紙色の地の上で 4.5:1 以上(test/lp/render.test.ts で確かめる)。
   * 使ってよいのはコードの画面・札・節のラベルの // だけ。いまはコードの画面と節のラベルの // で使い、札は中立の色にしている。
   * eyebrow とフッターの肩書きの // は --color-slate(値は --syntax-comment と同じ)
   */
  --syntax-keyword: #55697D;
  --syntax-type: #6B4F8A;
  --syntax-string: #3A6B4C;
  --syntax-comment: #68717D;
  --syntax-punctuation: #17191D;

  /* 書体。英字だけの要素は --font-latin、日本語を含む要素は --font-japanese */
  --font-latin: "Manrope", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --font-japanese: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  /* 等幅。英数字だけの要素(英文の見出し・節のラベル・タブ・年の数字・行番号)に使う */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /*
   * 等幅の中に日本語が混ざる要素(札・ボタン・金額・コードの文字列)。英数字は等幅、和文は端末のゴシック体にする。
   * 総称の monospace を和文より前に置くと、Windows では和文が MS ゴシックになるので使わない
   */
  --font-mono-mixed: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, var(--font-japanese);

  /* 型の大きさ */
  --font-size-hero: clamp(36px, 5vw, 64px);
  --font-size-hero-japanese: clamp(24px, 2.2vw, 28px);
  --font-size-section-title: clamp(30px, 3.6vw, 48px);
  --font-size-subheading: clamp(20px, 2vw, 28px);
  --font-size-lead: clamp(18px, 1.6vw, 20px);
  --font-size-card-title: 18px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-caption: 13px;
  --font-size-label: 12px;
  --font-size-display-number: clamp(36px, 3.6vw, 48px);
  --font-size-code: 13px;
  --font-size-tab: 13px;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-body: 1.8;
  --line-height-hero: 1.1;
  --line-height-heading: 1.4;
  --line-height-latin-heading: 1.2;
  --line-height-compact: 1.6;
  --line-height-single: 1;
  --line-height-code: 1.8;

  --letter-spacing-hero: -0.03em;
  --letter-spacing-latin-heading: -0.01em;
  --letter-spacing-japanese-heading: 0.02em;

  /* 段の組み(design.md §6) */
  --content-max: 1200px;
  --page-gutter: clamp(20px, 5vw, 72px);
  --grid-columns: 4;
  --grid-gap: 16px;
  /* 本文の1行の長さの上限(和文で40字前後) */
  --measure: 40em;
  --measure-wide: 46em;

  /* 余白(design.md §4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  /* 節の上下の余白(スマホ 72px・タブレット 96px・デスクトップ 128px) */
  --section-space: 72px;
  /* 節の中のまとまり同士の余白 */
  --block-space: var(--space-16);

  /* 角丸・線・影(design.md §4) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --border-subtle: 1px solid var(--color-line);
  --border-strong: 1px solid var(--color-ink);
  --border-field: 1px solid var(--color-slate);
  --border-on-ink: 1px solid var(--color-line-on-ink);
  --shadow-subtle: 0 8px 24px rgb(23 25 29 / 6%);

  /*
   * ヘッダー。1023px 以下は2行(上にワードマークとボタン、下にタブの列)、1024px 以上は1行。
   * --header-height はヘッダー全体の高さで、ページ内リンクの飛び先を隠さないための余白にも使う
   */
  --header-bar-height: 56px;
  --tab-height: var(--tap-target-min);
  --header-height: calc(var(--header-bar-height) + var(--tab-height) + var(--rule-thickness));

  /* 部品の寸法 */
  --button-height: 48px;
  --button-height-compact: 40px;
  --tap-target-min: 44px;
  --rule-thickness: 1px;
  --icon-size: 16px;
  --icon-stroke-width: 1.5;
  --radio-size: 20px;
  --wordmark-mark-width: 28px;
  /* Apple 公式の App Store のバッジ。画面での高さは 40px 以上、周りの余白は高さの1/4以上(Apple の決まり) */
  --app-store-badge-height: 40px;
  --app-store-badge-clear-space: calc(var(--app-store-badge-height) / 4);
  --fact-label-width: 6.5em;
  --submit-min-width: 12em;
  /* Turnstile のウィジェットの高さ(読み込み前から場所を取っておく)。compact の大きさは 150×140px */
  --turnstile-height: 150px;
  --about-visual-ratio: 4 / 3;
  --about-pattern-tile: 300px;
  --about-mark-width: 44%;
  --underline-offset: 0.25em;
  --underline-offset-wide: 0.4em;
  /* 行頭に置く短い横線の印を、1行目の文字の中ほどにそろえる */
  --list-marker-top: 0.9em;

  /* 操作と動き(design.md §10) */
  --duration-hover: 0.15s;
  --easing-standard: ease;
  --focus-ring-width: 2px;
  --focus-ring: var(--focus-ring-width) solid var(--color-accent);
  --focus-ring-offset: 3px;
  /* 横にスクロールする列の中では外側の枠が切れるので、内側に描く */
  --focus-ring-offset-inset: calc(var(--focus-ring-width) * -1);

  --z-header: 10;
  --z-skip-link: 20;
}

@media (min-width: 768px) {
  :root {
    --grid-columns: 8;
    --grid-gap: 24px;
    --section-space: 96px;
    --block-space: var(--space-20);
    --header-bar-height: 64px;
  }
}

@media (min-width: 1024px) {
  :root {
    --grid-columns: 12;
    --grid-gap: 32px;
    --section-space: 128px;
    --block-space: var(--space-24);
    --header-bar-height: 72px;
    --header-height: calc(var(--header-bar-height) + var(--rule-thickness));
    --about-visual-ratio: 7 / 5;
  }
}

/* 土台。要素の既定の見た目をそろえ、フォーカス・動きを控える設定・スキップリンク・見えないラベルを置く */

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

html {
  scroll-behavior: smooth;
  /* 固定ヘッダーの下に、ページ内リンクの飛び先が隠れないようにする */
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-japanese);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  font-kerning: normal;
  overflow-wrap: break-word;
  /* 小書きの仮名や長音を行頭に置かない */
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
fieldset {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

/*
 * 折り返しの整え方(対応していないブラウザでは普通の折り返しになる)。
 * - 本文(段落・箇条・事実の値)は文字単位の折り返しのまま(keep-all にすると右端が大きく凸凹する)、
 *   最後の行に1〜2文字だけ残る折り返しを避ける。コードの画面には効かせない(折り返しの位置が変わる)
 * - 見出しは行の長さをそろえる。文節の切れ目(<wbr>)で折る見出しでは、短い文節だけの行や、行末に残った開き括弧を避けられる
 */

/*
 * 本文の pretty は Chromium でだけ効かせる。WebKit の pretty は段落全体を組み直し、日本語の本文の右端を大きく凸凹にするため。
 * Chromium だけが対応している word-break: auto-phrase を目印にする。
 * 将来 Safari が auto-phrase に対応したら、Safari の本文の右端が凸凹にならないかを確かめ直す
 */
@supports (word-break: auto-phrase) {
  p,
  li,
  dd {
    text-wrap: pretty;
  }
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

table {
  border-collapse: collapse;
}

svg {
  display: block;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--color-accent-text);
  text-decoration-thickness: var(--rule-thickness);
  text-underline-offset: var(--underline-offset);
  transition: color var(--duration-hover) var(--easing-standard),
    background-color var(--duration-hover) var(--easing-standard),
    border-color var(--duration-hover) var(--easing-standard);
}

a:hover {
  color: var(--color-ink);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip-link);
  padding: var(--space-2) var(--space-4);
  background: var(--color-ink);
  color: var(--color-white);
  font-size: var(--font-size-small);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  color: var(--color-white);
}

/* 画面には出さず、読み上げには残す(ヒーローの要約・職務経歴の役割と担当の見出し) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/*
 * 段組みと外枠。--content-max(1200px)の中を、1024px 以上で12段・768〜1023px で8段・767px 以下で4段に分ける。
 * .grid の子は既定で全段に広がり、置き場所は節ごとに sections.css で決める。
 */

.container {
  width: 100%;
  max-width: calc(var(--content-max) + var(--page-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--block-space);
}

.grid > * {
  grid-column: 1 / -1;
  min-width: 0;
}

/* 節。上に細い罫を引き、罫と中身の間・中身と次の節の間を同じ余白にする */
.section {
  padding-bottom: var(--section-space);
}

.section > .container {
  padding-top: var(--section-space);
  border-top: var(--border-subtle);
}

/* 濃い帯(PHILOSOPHY)。罫は引かず、帯の内側に上下の余白を取る */
.section--ink {
  padding-top: var(--section-space);
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.section--ink > .container {
  padding-top: 0;
  border-top: 0;
}

/* 帯の直後の節は、帯の縁が区切りになるので罫を引かない */
.section--ink + .section > .container {
  border-top: 0;
}

/* 見出しのまとまりを左4段、本体を右8段に置く基本の形 */
@media (min-width: 768px) {
  .split__intro {
    grid-column: 1 / span 6;
  }
}

@media (min-width: 1024px) {
  .split {
    row-gap: 0;
  }

  .split__intro {
    grid-column: 1 / span 4;
  }

  .split__body {
    grid-column: 5 / -1;
  }

  /* 見出しが長い節は 5/7 にして、見出しを2行に収める */
  .split--wide-intro .split__intro {
    grid-column: 1 / span 5;
  }

  .split--wide-intro .split__body {
    grid-column: 6 / -1;
  }
}

/*
 * ヘッダー。上に固定し、下に常に細い線を引く。
 * 1023px 以下は2行で、上にワードマークとボタン、下にファイル名のタブの列。1024px 以上は1行に並べる
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-paper);
  border-bottom: var(--border-subtle);
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: var(--header-bar-height) var(--tab-height);
  grid-template-areas:
    "brand action"
    "tabs tabs";
  align-items: center;
  column-gap: var(--space-4);
}

/* 幅が足りないときは文字だけを省略記号で詰め、斜線の印は必ず残す(ボタンに重ねない) */
.site-header__inner > .wordmark {
  grid-area: brand;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
}

.site-header__inner > .wordmark .wordmark__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-header__action {
  grid-area: action;
}

/* タブの列。収まらない幅では列の中だけ横にスクロールし、ページは横にはみ出さない */
.site-tabs {
  grid-area: tabs;
  align-self: stretch;
  min-width: 0;
  margin-inline: calc(var(--page-gutter) * -1);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-silver) transparent;
}

.site-tabs__list {
  display: flex;
  width: max-content;
  height: 100%;
  padding-inline: var(--page-gutter);
}

/* 1つのタブ。地は白、左右に細い線(下の線はヘッダーの線が兼ねる) */
.site-tab {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: var(--tap-target-min);
  padding-inline: var(--space-4);
  border-inline-end: var(--border-subtle);
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-tab);
  line-height: var(--line-height-single);
  text-decoration: none;
  white-space: nowrap;
}

.site-tabs__list > li:first-child .site-tab {
  border-inline-start: var(--border-subtle);
}

.site-tab:hover {
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

.site-tab:focus-visible {
  outline-offset: var(--focus-ring-offset-inset);
}

/*
 * 767px 以下はタブの列がいつもスクロールする。
 * - 常に見えるスクロールバーの環境(Windows など)では 44px の行の中でタブの高さを削るので、スクロールバーは出さない
 * - 代わりに列の両端を薄くし、続きがあることを字幅や画面幅に関係なく示す(mask は透明度だけを使う)
 * - 右端は薄くする幅と同じだけ余白を足し、末端までスクロールすると最後のタブが薄い部分の外に出て読める
 * - キーボードで移動したときも、フォーカスしたタブを薄い部分に止めない(scroll-padding)
 */
@media (max-width: 767px) {
  .site-tabs {
    --tab-fade-width: var(--space-12);

    scroll-padding-inline: var(--page-gutter) var(--tab-fade-width);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, black var(--page-gutter), black calc(100% - var(--tab-fade-width)), transparent);
    mask-image: linear-gradient(to right, transparent, black var(--page-gutter), black calc(100% - var(--tab-fade-width)), transparent);
  }

  .site-tabs__list {
    padding-inline-end: var(--tab-fade-width);
  }
}

/* 359px 以下はワードマークとボタンを一段小さくし、1行目に並べて重ねない */
@media (max-width: 359px) {
  .site-header__inner {
    column-gap: var(--space-3);
  }

  .site-header__inner > .wordmark {
    gap: var(--space-2);
    font-size: var(--font-size-small);
  }

  .site-header__action .button--compact {
    padding-inline: var(--space-3);
  }
}

@media (min-width: 1024px) {
  .site-header__inner {
    display: flex;
    align-items: stretch;
    gap: var(--space-6);
    height: var(--header-bar-height);
  }

  .site-header__inner > .wordmark,
  .site-header__action {
    align-self: center;
    flex: none;
  }

  .site-tabs {
    flex: 1 1 auto;
    margin-inline: 0;
  }

  .site-tabs__list {
    padding-inline: 0;
  }

  .site-tab {
    padding-inline: var(--space-3);
  }
}

/* 1024〜1199px はワードマーク・タブ・ボタンを1行に収めるため、タブの文字を一段小さくする */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-tab {
    font-size: var(--font-size-label);
  }
}

/* フッター */
.site-footer {
  padding-block: var(--space-16) var(--space-12);
  border-top: var(--border-subtle);
  background: var(--color-paper);
}

.site-footer__grid {
  row-gap: var(--space-8);
}

.site-footer__role {
  margin-top: var(--space-3);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-compact);
}

.site-footer__note {
  max-width: var(--measure);
  margin-top: var(--space-3);
  color: var(--color-slate);
  font-size: var(--font-size-small);
  line-height: var(--line-height-compact);
}

/* Apple の商標の表記(App Store のバッジに付ける決まりの表記)。運営者の注記の下に、一段小さく出す */
.site-footer__trademark {
  max-width: var(--measure);
  margin-top: var(--space-2);
  color: var(--color-slate);
  font-size: var(--font-size-label);
  line-height: var(--line-height-compact);
}

.site-footer__nav,
.site-footer__links {
  display: grid;
  align-content: start;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min);
  color: var(--color-ink);
  font-size: var(--font-size-small);
  text-decoration: none;
}

/* ナビはヘッダーのタブと同じファイル名なので等幅にする */
.site-footer__nav .site-footer__link {
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
}

.site-footer__link:hover {
  color: var(--color-accent-text);
  text-decoration: underline;
}

.site-footer__copyright {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--border-subtle);
  color: var(--color-slate);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  font-variant-numeric: tabular-nums;
}

/* スマホではナビとリンクを2段ずつ横に並べる */
.site-footer__nav {
  grid-column: 1 / span 2;
}

.site-footer__links {
  grid-column: 3 / span 2;
}

@media (min-width: 768px) {
  .site-footer__brand {
    grid-column: 1 / span 4;
  }

  .site-footer__nav {
    grid-column: 5 / span 2;
  }

  .site-footer__links {
    grid-column: 7 / span 2;
  }
}

@media (min-width: 1024px) {
  .site-footer__brand {
    grid-column: 1 / span 5;
  }

  .site-footer__nav {
    grid-column: 7 / span 3;
  }

  .site-footer__links {
    grid-column: 10 / span 3;
  }
}

/* 部品。ワードマーク・ボタン・節の見出し・札・事実の一覧・フォームの欄・コードの画面 */

/* ワードマーク(斜線の印 + 文字) */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  color: var(--color-ink);
  font-family: var(--font-latin);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-latin-heading);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover {
  color: var(--color-ink);
}

.slash-mark__primary {
  fill: var(--color-ink);
}

.slash-mark__secondary {
  fill: var(--color-accent);
}

.slash-mark--inline {
  width: var(--wordmark-mark-width);
  height: auto;
  flex: none;
}

/* ボタンと文字のリンク。ホバーで変わるのは色だけ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--button-height);
  padding-inline: var(--space-6);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-white);
  font-family: var(--font-mono-mixed);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-single);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* <a> は base.css の a から受け継ぐが、送信の <button> にも同じ変化を付ける */
  transition: color var(--duration-hover) var(--easing-standard),
    background-color var(--duration-hover) var(--easing-standard),
    border-color var(--duration-hover) var(--easing-standard);
}

.button:hover {
  background: var(--color-charcoal);
  color: var(--color-white);
}

.button--compact {
  min-height: var(--button-height-compact);
  padding-inline: var(--space-4);
  font-size: var(--font-size-caption);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target-min);
  color: var(--color-ink);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: var(--underline-offset-wide);
}

.text-link:hover {
  color: var(--color-accent-text);
}

.arrow-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke-width);
}

/* 節のラベル(// 01 About)と、ヒーローの eyebrow(// Freelance Software Engineer)。コメントの形の等幅 */
.section-label,
.eyebrow {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-single);
  font-variant-numeric: tabular-nums;
}

/* // の印。eyebrow とフッターの肩書きでは文字の色、節のラベルだけ構文の色(コメント) */
.comment-mark {
  color: var(--color-slate);
}

.section-label .comment-mark {
  color: var(--syntax-comment);
}

/*
 * 節の見出し(h2)・リード・小見出し(h3)。
 * 見出しと短いラベルは文節の切れ目に <wbr> を置いて出す。word-break: keep-all で <wbr> と空白の位置でだけ折り返し、
 * 1つの文節が行に収まらないときだけ文節の中で折る(overflow-wrap: anywhere)。どのブラウザでも同じ位置で折れる
 */
.section-title,
.page-title {
  margin-top: var(--space-6);
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-japanese-heading);
  font-feature-settings: "palt";
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.section-lead {
  max-width: var(--measure);
  margin-top: var(--space-6);
  color: var(--color-charcoal);
  font-size: var(--font-size-lead);
  line-height: var(--line-height-body);
}

.subheading {
  font-size: var(--font-size-subheading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-japanese-heading);
  font-feature-settings: "palt";
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* 札(キーワード・技術)。等幅で、角の小さな枠 */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag {
  padding: var(--space-1) var(--space-2);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-charcoal);
  font-family: var(--font-mono-mixed);
  font-size: var(--font-size-label);
  line-height: var(--line-height-compact);
}

/* 事実の一覧(dl)。細い罫で区切った表の形 */
.fact-list__row {
  display: grid;
  grid-template-columns: var(--fact-label-width) minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--border-subtle);
}

.fact-list dt {
  color: var(--color-slate);
  font-size: var(--font-size-small);
}

.fact-list dd {
  font-variant-numeric: tabular-nums;
}

/* 文節の切れ目に <wbr> を置いた値(経歴)。<wbr> と空白の位置でだけ折り返す */
.fact-list__phrased-value {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.fact-list--table {
  border-top: var(--border-strong);
}

/* フォームの欄。入力欄の枠は 3:1 を超える --color-slate */
.field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: 0;
  border: 0;
}

.field__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.field__badge {
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
}

.field__badge--required {
  background: var(--color-ink);
  color: var(--color-white);
}

.field__badge--optional {
  border: var(--border-field);
  color: var(--color-slate);
}

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  min-height: var(--button-height);
  padding: var(--space-3) var(--space-4);
  border: var(--border-field);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  /* 16px 未満だと iOS が入力時に拡大する */
  font-size: var(--font-size-body);
  line-height: var(--line-height-compact);
}

.field textarea {
  resize: vertical;
}

.field ::placeholder {
  color: var(--color-slate);
  opacity: 1;
}

.choices {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  cursor: pointer;
}

.choice input {
  width: var(--radio-size);
  height: var(--radio-size);
  margin: 0;
  flex: none;
  accent-color: var(--color-ink);
}

/* ボットだけが埋める罠の欄は画面の外に出す(第1版と同じ方法) */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
 * コードの画面(ヒーロー)。上にファイル名のタブ、白い地に行番号とコード。
 * 行番号は CSS の counter で描くので選べない。長い行は画面の中で折り返し、続きの行は字下げする
 */
.code-pane {
  /* 行番号の欄(1桁 + 間)と、折り返した続きの行の字下げ */
  --code-gutter-width: 3ch;
  --code-wrap-indent: 8ch;

  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  overflow: hidden;
}

.code-pane__tabs {
  display: flex;
  border-bottom: var(--border-subtle);
  background: var(--color-paper);
}

/* 開いているファイルのタブ。下の線を消して本体とつなげる */
.code-pane__tab {
  margin-bottom: calc(var(--rule-thickness) * -1);
  padding: var(--space-3) var(--space-4);
  border-inline-end: var(--border-subtle);
  border-bottom: var(--rule-thickness) solid var(--color-white);
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-tab);
  line-height: var(--line-height-single);
}

.code-pane__body {
  margin: 0;
  padding: var(--space-4) var(--space-2);
  color: var(--color-ink);
  font-family: var(--font-mono-mixed);
  font-size: var(--font-size-code);
  line-height: var(--line-height-code);
  white-space: pre-wrap;
  /* 折り返しは空白の位置で行い、文字列の途中では折らない(収まらないときだけ折る) */
  word-break: keep-all;
  overflow-wrap: anywhere;
  tab-size: 4;
}

/* grid にして、行の間の改行だけの文字を描かない(文字としては残るので、写すと行が分かれる) */
.code-pane__code {
  display: grid;
  font: inherit;
  counter-reset: code-line;
}

.code-line {
  position: relative;
  padding-inline-start: calc(var(--code-gutter-width) + var(--code-wrap-indent));
  text-indent: calc(var(--code-wrap-indent) * -1);
  counter-increment: code-line;
}

.code-line::before {
  content: counter(code-line);
  position: absolute;
  left: 0;
  width: calc(var(--code-gutter-width) - var(--space-2));
  color: var(--color-slate);
  text-align: right;
  text-indent: 0;
  user-select: none;
}

.code-token--keyword {
  color: var(--syntax-keyword);
}

.code-token--type {
  color: var(--syntax-type);
}

.code-token--string {
  color: var(--syntax-string);
}

.code-token--comment {
  color: var(--syntax-comment);
}

.code-token--punctuation {
  color: var(--syntax-punctuation);
}

/* 文字列を含む語は1つのまとまりとして次の行へ送る(1行に収まらないときだけ中で折る) */
.code-word {
  display: inline-block;
  max-width: 100%;
  text-indent: 0;
}

/* この空白では折り返さない(空白での折り返しは、その文字を直接含む要素の white-space に従う) */
.code-token--nowrap {
  white-space: nowrap;
}

/*
 * ヒーロー。1024px 以上(12段)は左7段に英文の見出しと行き先、右5段にコードの画面を並べる。
 * それより狭い幅では、コードの画面を本文の下に置く。長い行は画面の中で折り返す
 */
.hero {
  padding-block: var(--space-12) var(--section-space);
}

.hero__grid {
  row-gap: var(--space-12);
  align-items: center;
}

.hero__headline {
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-hero);
  letter-spacing: var(--letter-spacing-hero);
  text-wrap: balance;
}

.hero__japanese-headline {
  margin-top: var(--space-8);
  font-size: var(--font-size-hero-japanese);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-japanese-heading);
  font-feature-settings: "palt";
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.hero__body {
  max-width: var(--measure);
  margin-top: var(--space-6);
  color: var(--color-charcoal);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-12);
}

@media (min-width: 768px) {
  .hero__text {
    grid-column: 1 / span 7;
  }

  .hero__code {
    grid-column: 1 / span 6;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-top: var(--space-20);
  }

  .hero__grid {
    row-gap: 0;
  }

  .hero__text {
    grid-column: 1 / span 7;
  }

  .hero__code {
    grid-column: 8 / -1;
  }
}

/* 01 About。左5段に本文、右7段にグリッドの地と斜線の印の図版 */
.about__grid {
  align-items: center;
}

.about__paragraph {
  max-width: var(--measure);
  margin-top: var(--space-8);
}

.about__visual {
  position: relative;
  aspect-ratio: var(--about-visual-ratio);
  overflow: hidden;
  border: var(--border-subtle);
  background: var(--color-paper) url("/assets/grid-pattern.svg") 0 0 / var(--about-pattern-tile) var(--about-pattern-tile);
}

.slash-mark--display {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--about-mark-width);
  height: auto;
  transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
  .about__text {
    grid-column: 1 / span 6;
  }
}

@media (min-width: 1024px) {
  .about__grid {
    row-gap: 0;
  }

  .about__text {
    grid-column: 1 / span 5;
  }

  .about__visual {
    grid-column: 6 / -1;
  }
}

/* 02 Profile。左6段にリードと強み、右5段に事実の一覧 */
.profile__strengths {
  margin-top: var(--space-12);
}

.strength-list {
  margin-top: var(--space-6);
  border-top: var(--border-subtle);
}

.strength-list li {
  position: relative;
  max-width: var(--measure);
  padding: var(--space-4) 0 var(--space-4) var(--space-8);
  border-bottom: var(--border-subtle);
}

.strength-list li::before {
  content: "";
  position: absolute;
  top: calc(var(--space-4) + var(--list-marker-top));
  left: 0;
  width: var(--space-4);
  height: var(--rule-thickness);
  background: var(--color-accent);
}

.profile__title {
  margin-bottom: var(--space-4);
  font-family: var(--font-latin);
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-latin-heading);
}

@media (min-width: 768px) {
  .profile__main,
  .profile__facts {
    grid-column: 1 / span 6;
  }
}

@media (min-width: 1024px) {
  .profile__grid {
    row-gap: 0;
  }

  .profile__main {
    grid-column: 1 / span 6;
  }

  .profile__facts {
    grid-column: 8 / -1;
    align-self: start;
  }
}

/* 03 Expertise。分類ごとに英語の見出しと領域の枠、下に道具と業務知識の札 */
.expertise-group + .expertise-group {
  margin-top: var(--space-16);
}

.expertise-group__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-strong);
}

.expertise-group__label {
  font-family: var(--font-latin);
  font-size: var(--font-size-subheading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-latin-heading);
  letter-spacing: var(--letter-spacing-latin-heading);
}

.expertise-group__caption {
  color: var(--color-slate);
  font-size: var(--font-size-small);
}

.expertise-areas {
  display: grid;
  gap: var(--grid-gap);
  margin-top: var(--space-6);
}

.expertise-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

/* 個人開発の分類は、業務の経験と見分けられる地にする */
.expertise-group--personal .expertise-area {
  background: var(--color-accent-soft);
}

.expertise-area__title {
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.expertise-area__description {
  color: var(--color-charcoal);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

.expertise-area .tag-list {
  margin-top: auto;
  padding-top: var(--space-2);
}

.expertise-extras {
  display: grid;
  gap: var(--space-8) var(--grid-gap);
  margin-top: var(--space-16);
}

.expertise-extra__heading {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .expertise-areas,
  .expertise-extras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * 04 Services。公開するサービスを1行に1つずつ並べ、行の間を上の罫線で区切る(数が増えても左右の釣り合いが崩れない)。
 * 767px 以下は縦に積み、768px 以上は行の中を左(番号・題・契約の形)と右(説明と例)に分ける。下に料金の目安の表(金額は等幅)
 */
.service-list {
  /* 768px 以上の1行の中の左右の比(左およそ 2/5、右およそ 3/5) */
  --service-head-share: 2fr;
  --service-body-share: 3fr;

  display: grid;
  row-gap: var(--space-12);
}

.service {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--border-strong);
}

/* 契約の形の札は文字の幅だけにする(横に伸ばさない) */
.service__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.service__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.service__number {
  font-family: var(--font-mono);
  font-size: var(--font-size-display-number);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-single);
  font-variant-numeric: tabular-nums;
}

.service__title {
  margin-top: var(--space-2);
  font-size: var(--font-size-subheading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  font-feature-settings: "palt";
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.service__contract {
  padding: var(--space-1) var(--space-3);
  border: var(--border-field);
  border-radius: var(--radius-sm);
  color: var(--color-charcoal);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-compact);
}

.service__description {
  color: var(--color-charcoal);
}

.service__examples {
  border-top: var(--border-subtle);
}

.service__examples li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  border-bottom: var(--border-subtle);
  font-size: var(--font-size-small);
  line-height: var(--line-height-compact);
}

.service__examples li::before {
  content: "";
  position: absolute;
  top: calc(var(--space-3) + var(--list-marker-top));
  left: 0;
  width: var(--space-3);
  height: var(--rule-thickness);
  background: var(--color-accent);
}

.pricing {
  margin-top: var(--block-space);
  row-gap: var(--space-6);
}

.pricing__lead {
  max-width: var(--measure);
  margin-top: var(--space-4);
  color: var(--color-charcoal);
}

.price-table {
  width: 100%;
  border-top: var(--border-strong);
}

.price-table th,
.price-table td {
  padding-block: var(--space-6);
  border-bottom: var(--border-subtle);
  vertical-align: baseline;
}

/* 見出しのセルは既定で中央寄せになるので左に寄せる。金額のセル(td)は .price-table__price が右に寄せる */
.price-table th {
  font-weight: var(--font-weight-regular);
  text-align: left;
}

/* 行の見出し。見出しと同じく行の長さをそろえ、「作成・」の後ろなどで折れて短い文節だけが残らないようにする */
.price-table__item {
  display: block;
  font-weight: var(--font-weight-semibold);
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.price-table__note {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-slate);
  font-size: var(--font-size-small);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.price-table__price {
  padding-inline-start: var(--space-6);
  font-family: var(--font-mono-mixed);
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-semibold);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pricing__note {
  margin-top: var(--space-4);
  color: var(--color-slate);
  font-size: var(--font-size-small);
}

@media (min-width: 768px) {
  /* 左右の上端をそろえる */
  .service {
    display: grid;
    grid-template-columns: minmax(0, var(--service-head-share)) minmax(0, var(--service-body-share));
    align-items: start;
    column-gap: var(--grid-gap);
  }

  .pricing__intro {
    grid-column: 1 / span 6;
  }
}

@media (min-width: 1024px) {
  .pricing {
    row-gap: 0;
  }

  .pricing__intro {
    grid-column: 1 / span 5;
  }

  .pricing__body {
    grid-column: 6 / -1;
  }
}

/*
 * 05 Experience。職務経歴は時系列の線(git のグラフに見立てる)。左に縦の線と各項目の点、右に時期・分野・役割と担当・技術の札。
 * 個人開発は3つの枠を横に並べ、アプリ名を App Store へのリンクの見出しにし、枠の下端に App Store のバッジを置く
 */
.experience__grid {
  row-gap: var(--space-16);
}

.timeline {
  /* 時期の行の高さ。点はこの行の中央に置き、分野の見出しの1行目とそろえる */
  --timeline-period-line: calc(var(--font-size-card-title) * var(--line-height-heading));
  --timeline-dot-size: 9px;
  --timeline-dot-top: calc(var(--timeline-period-line) / 2);
  --timeline-indent: var(--space-8);
  --timeline-item-space: var(--space-8);
  --timeline-period-width: 6em;

  margin-top: var(--space-8);
}

.timeline__item {
  position: relative;
  padding-inline-start: var(--timeline-indent);
  padding-bottom: var(--timeline-item-space);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

/* 縦の線。項目ごとに上から下まで引いてつなげ、最初の項目は点から、最後の項目は点までにする */
.timeline__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((var(--timeline-dot-size) - var(--rule-thickness)) / 2);
  width: var(--rule-thickness);
  background: var(--color-silver);
}

.timeline__item:first-child::before {
  top: var(--timeline-dot-top);
}

.timeline__item:last-child::before {
  bottom: auto;
  height: var(--timeline-dot-top);
}

/* 各項目の点 */
.timeline__item::after {
  content: "";
  position: absolute;
  top: calc(var(--timeline-dot-top) - var(--timeline-dot-size) / 2);
  left: 0;
  width: var(--timeline-dot-size);
  height: var(--timeline-dot-size);
  border-radius: 50%;
  background: var(--color-accent);
}

.timeline__period {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  line-height: var(--timeline-period-line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.timeline__category {
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 役割と担当は1つの文のように続けて流し、担当が長いときは役割の後ろから折り返す */
.timeline__facts {
  margin-top: var(--space-2);
  color: var(--color-charcoal);
  font-size: var(--font-size-small);
  line-height: var(--line-height-compact);
}

.timeline__fact,
.timeline__fact dd {
  display: inline;
}

/* 役割(SE・PG)は等幅で先頭に置く */
.timeline__fact--role {
  margin-inline-end: var(--space-3);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
}

.timeline .tag-list {
  margin-top: var(--space-3);
}

@media (min-width: 768px) {
  .experience__intro {
    grid-column: 1 / span 6;
  }

  .timeline__item {
    display: grid;
    grid-template-columns: var(--timeline-period-width) minmax(0, 1fr);
    column-gap: var(--grid-gap);
  }
}

/* デスクトップでは技術の札を右の列にそろえ、表のように縦に追えるようにする */
@media (min-width: 1024px) {
  .timeline__body {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--grid-gap);
  }

  .timeline__category,
  .timeline__facts {
    grid-column: 1;
  }

  .timeline .tag-list {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 0;
  }
}

.personal {
  margin-top: var(--block-space);
}

.personal__intro {
  max-width: var(--measure-wide);
}

.personal__lead {
  margin-top: var(--space-4);
  color: var(--color-charcoal);
}

.personal-projects {
  display: grid;
  gap: var(--grid-gap);
  margin-top: var(--space-8);
}

.personal-project {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.personal-project__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-subtle);
}

.personal-project__label {
  padding: 0 var(--space-2);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
}

.personal-project__status {
  color: var(--color-slate);
  font-size: var(--font-size-label);
}

/* アプリ名(見出し)と、そのすぐ下に小さく添える分野 */
.personal-project__heading {
  margin-top: var(--space-2);
}

.personal-project__title {
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* アプリ名のリンク。文字のリンクの決まり(ink + 下線、ホバーで --color-accent-text)に合わせる */
.personal-project__link {
  color: var(--color-ink);
  text-decoration-color: var(--color-accent);
}

.personal-project__link:hover {
  color: var(--color-accent-text);
}

.personal-project__category {
  margin-top: var(--space-1);
  color: var(--color-slate);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-compact);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.personal-project__description {
  color: var(--color-charcoal);
  font-size: var(--font-size-small);
}

.personal-project .tag-list {
  margin-top: auto;
  padding-top: var(--space-2);
}

/*
 * Apple 公式の App Store のバッジ。技術の札の下(枠の下端)に置くので、3つの枠で縦の位置がそろう。
 * 高さは固定して縮めず、上に高さの1/4以上の余白を足す(下と左は枠の内側の余白、右には何も置かない)。
 * リンクの範囲は画像だけにし、画像は加工しない(ホバーでも変えない)
 */
.personal-project__badge {
  display: block;
  flex: none;
  align-self: flex-start;
  margin-top: var(--app-store-badge-clear-space);
  line-height: 0;
}

.personal-project__badge img {
  display: block;
  width: auto;
  max-width: none;
  height: var(--app-store-badge-height);
}

@media (min-width: 768px) {
  .personal-projects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/*
 * 06 Philosophy。ページでただ1つの濃い帯で、端末の画面に見立てる。
 * 原則の英語の題は等幅で、前にプロンプトの印(>)を付ける。番号も等幅
 */
.section--ink .section-label {
  color: var(--color-on-ink);
}

.section--ink .comment-mark {
  color: var(--color-on-ink-muted);
}

.section--ink .section-lead {
  color: var(--color-on-ink-muted);
}

.principles {
  display: grid;
  gap: var(--space-12) var(--grid-gap);
  counter-reset: principle;
}

.principle {
  padding-top: var(--space-6);
  border-top: var(--border-on-ink);
  counter-increment: principle;
}

.principle::before,
.process-step::before {
  display: block;
  color: var(--color-on-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  font-variant-numeric: tabular-nums;
}

.principle::before {
  content: counter(principle, decimal-leading-zero);
  margin-bottom: var(--space-6);
}

.principle__title {
  --prompt-gap: 1ch;

  font-family: var(--font-mono);
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-latin-heading);
}

/* プロンプトの印。飾りなので読み上げの文字は空にする(対応しないブラウザは前の content を使う) */
.principle__title::before {
  content: ">";
  content: ">" / "";
  margin-inline-end: var(--prompt-gap);
  color: var(--color-on-ink-muted);
}

/* 文節で折る短い説明。本文の pretty(Chromium だけ)ではなく balance にし、両方のエンジンで同じ組み方にする */
.principle__description {
  margin-top: var(--space-4);
  color: var(--color-on-ink-muted);
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.process {
  margin-top: var(--block-space);
  padding-top: var(--block-space);
  border-top: var(--border-on-ink);
  row-gap: var(--space-12);
}

.process__lead {
  max-width: var(--measure);
  margin-top: var(--space-4);
  color: var(--color-on-ink-muted);
}

.process-steps {
  display: grid;
  gap: var(--space-8) var(--grid-gap);
  counter-reset: step;
}

.process-step {
  position: relative;
  padding-top: var(--space-6);
  border-top: var(--border-on-ink);
  counter-increment: step;
}

/* 段階の線の上の印 */
.process-step::after {
  content: "";
  position: absolute;
  top: calc(var(--space-1) * -1);
  left: 0;
  width: var(--space-2);
  height: var(--space-2);
  background: var(--color-accent);
}

.process-step::before {
  content: counter(step, decimal-leading-zero);
  margin-bottom: var(--space-4);
}

.process-step__title {
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.process-step__description {
  margin-top: var(--space-2);
  color: var(--color-on-ink-muted);
  font-size: var(--font-size-small);
}

.process__note {
  padding: var(--space-4) var(--space-6);
  border: var(--border-on-ink);
  border-radius: var(--radius-sm);
  color: var(--color-on-ink-muted);
  font-size: var(--font-size-small);
}

@media (min-width: 768px) {
  .philosophy__intro,
  .process__intro {
    grid-column: 1 / span 7;
  }

  .principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .philosophy__intro,
  .process__intro {
    grid-column: 1 / span 6;
  }

  .process-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 07 FAQ。<details> の一覧。番号は等幅 */
.faq-list {
  --faq-number-width: var(--space-8);
  --faq-column-gap: var(--space-4);

  border-top: var(--border-strong);
  counter-reset: faq;
}

.faq-item {
  border-bottom: var(--border-subtle);
  counter-increment: faq;
}

.faq-item__question {
  display: grid;
  grid-template-columns: var(--faq-number-width) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--faq-column-gap);
  min-height: var(--space-20);
  padding-block: var(--space-4);
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-compact);
  word-break: keep-all;
  overflow-wrap: anywhere;
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-hover) var(--easing-standard);
}

.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question::before {
  content: counter(faq, decimal-leading-zero);
  color: var(--color-slate);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  font-variant-numeric: tabular-nums;
}

.faq-item__question:hover {
  color: var(--color-accent-text);
}

/* 開閉の印(+ と −)。文字ではなく線で描く */
.faq-item__icon {
  position: relative;
  width: var(--icon-size);
  height: var(--icon-size);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--rule-thickness);
  background: currentColor;
}

.faq-item__icon::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-item__icon::after {
  transform: none;
}

.faq-item__answer {
  padding: 0 0 var(--space-6) calc(var(--faq-number-width) + var(--faq-column-gap));
}

.faq-item__answer p {
  max-width: var(--measure);
  color: var(--color-charcoal);
}

/* 08 Contact。左に見出しと個人情報の注記、右にフォーム */
.contact__privacy {
  max-width: var(--measure);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-subtle);
  color: var(--color-charcoal);
  font-size: var(--font-size-small);
}

.contact__privacy a {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: var(--tap-target-min);
}

.contact__form {
  padding: var(--space-6) var(--space-4);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.contact-form {
  display: grid;
  /* 列の最小幅を 0 にし、入力欄が既定の幅で枠をはみ出さないようにする(幅 374px 以下のスマホ) */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.cf-turnstile {
  /* ウィジェットが読み込まれる前から高さを取り、後からずれないようにする */
  min-height: var(--turnstile-height);
}

.contact-form__noscript {
  color: var(--color-charcoal);
  font-size: var(--font-size-small);
}

.contact-form__submit {
  width: 100%;
}

@media (min-width: 768px) {
  .contact__intro {
    grid-column: 1 / span 6;
  }

  .contact__form {
    padding: var(--space-12);
  }

  .contact-form__submit {
    justify-self: start;
    width: auto;
    min-width: var(--submit-min-width);
  }
}

@media (min-width: 1024px) {
  .contact__grid {
    row-gap: 0;
  }

  .contact__intro {
    grid-column: 1 / span 4;
  }

  .contact__form {
    grid-column: 6 / -1;
  }
}

/* トップ以外の小さなページ(送信後・失敗時・個人情報の扱い) */
.simple-page {
  padding-block: var(--space-24) var(--section-space);
}

.page-title {
  margin-top: 0;
}

.simple-page__text {
  max-width: var(--measure);
  margin-top: var(--space-6);
  font-size: var(--font-size-lead);
}

.simple-page__action {
  margin-top: var(--space-12);
}

.privacy-list {
  margin-top: var(--space-16);
  border-top: var(--border-strong);
}

.privacy-item {
  row-gap: var(--space-3);
  padding-block: var(--space-8);
  border-bottom: var(--border-subtle);
}

.privacy-item__heading {
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-compact);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.privacy-item__body {
  max-width: var(--measure);
  color: var(--color-charcoal);
}

@media (min-width: 768px) {
  .simple-page__body {
    grid-column: 1 / span 7;
  }

  .privacy-item__heading {
    grid-column: 1 / span 3;
  }

  .privacy-item__body {
    grid-column: 4 / -1;
  }
}

@media (min-width: 1024px) {
  .simple-page__body {
    grid-column: 1 / span 8;
  }

  .privacy-item__heading {
    grid-column: 1 / span 4;
  }

  .privacy-item__body {
    grid-column: 5 / -1;
  }
}