/* sample3/css/site.css — 案3「パラレル」（白い地）のサイト用スタイル。元は proposals/css/3-parallel.css
   Home 全体を一本の年表にする。左は英司（縦組み、青）、右は英治（横組み、朱赤）、中央の軸に年。
   二人に共通する出来事は緑で中央にまたがる。白地に細い文字、色は名前・年・短い罫だけ。
   規則: 原色トークン（blue / red / green のランプ）を直接書かない。ブレークポイントは 47.99em だけ。
   outline は base.css に任せる。接頭辞: x-（楽譜）、l-（サイト共通）、p-（1 ページ限定） */
/* ===================== (a) デザインシステムの穴埋め（sample1/css/site.css から） ===================== */

.c-header {
  position: relative; /* モバイルの .c-nav__list は absolute */
}

@media (max-width: 47.99em) {
  .c-header {
    gap: var(--space-3);
  }

  .c-header__logo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-md);
    letter-spacing: var(--tracking-wide);
    line-height: 1.25;
    white-space: normal;
  }

  .c-nav {
    flex: none;
  }

  .c-nav__toggle,
  .c-lang__link {
    white-space: nowrap;
  }
}

.c-lang__link {
  letter-spacing: inherit;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 20;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  color: var(--color-text);
}

.skip-link:focus {
  top: var(--space-2);
}

/* 展示リストの英題と制作年（c-worklist に要素がない） */
.c-worklist__title-en,
.c-worklist__title-ja {
  display: inline-block;
  margin-inline-start: 0.5em;
  font-size: var(--text-xs);
  letter-spacing: 0;
  color: var(--color-text-3);
}

.c-worklist__year {
  margin-inline-start: 0.5em;
  font-size: var(--text-xs);
  letter-spacing: 0;
  color: var(--color-text-3);
  font-variant-numeric: tabular-nums lining-nums;
}

/* カタログ: 表紙の見開き（表紙と裏表紙）を読み物幅で上に置き、書誌の表を下に置く */
.c-catalogue {
  grid-template-columns: 1fr;
}

.c-catalogue__cover {
  aspect-ratio: auto;
  background: transparent;
  display: block;
}

.c-catalogue__cover img {
  display: block;
  width: 100%;
  height: auto;
}

.c-catalogue__cover figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

/* ===================== (b) サイト共通の補助（l-） ===================== */

.l-narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ページ見出し: ラベル、h1、英題、リード。中央揃え、罫なし */
.l-page-head {
  padding-block: var(--space-7) var(--space-2);
  margin-block-end: var(--space-7);
  text-align: center;
}

.l-page-head .c-section-label {
  align-items: center;
  margin-block-end: var(--space-5);
}

.l-page-head h1 {
  margin-block-end: var(--space-2);
}

.l-page-head__en,
.l-page-head__ja {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-3);
}

.l-page-head__lead {
  max-inline-size: var(--measure-jp);
  margin: var(--space-4) auto 0;
  font-size: var(--text-lg);
  font-weight: 300;
}

/* 節の中の案内（展覧会配下、経歴配下のページ上部に 1 本）。UI なので無彩色、現在地は下線 */
.l-subnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-1) var(--space-5);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-3) var(--gutter);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

.l-subnav__label {
  margin-inline-end: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-3);
}

.l-subnav a {
  display: inline-block;
  padding-block: var(--space-1);
  color: var(--color-text-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  letter-spacing: var(--tracking-wide);
}

.l-subnav a:hover,
.l-subnav a[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: currentColor;
}

/* 関連（各ページ末尾に 1 か所、最大 3 件の文字リンク） */
.l-related {
  max-width: var(--container);
  margin: var(--space-9) auto 0;
  padding: var(--space-6) var(--gutter) 0;
  border-top: 1px solid var(--color-line);
  text-align: center;
}

.l-related ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.l-related__label {
  display: block;
  margin-block-end: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-3);
}

/* 3:2 に収まらない写真（フライヤー、縦位置） */
.l-figure--contain img {
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--color-bg-2);
}

/* キャプションとクレジットを左右に振る */
.l-figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
}

/* フッター: 一行のリンクと © */
.l-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

.l-footer .c-footer__copy {
  margin-top: var(--space-5);
}

/* ===================== (c) 楽譜（x-） ===================== */

/* 枠 */
.x-score {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-9) var(--gutter) var(--space-8);
}

/* 頭: ラベル、題名、リード。中央揃え */
.x-head {
  margin-block-end: var(--space-8);
  text-align: center;
}

.x-head__title {
  margin: var(--space-3) 0 var(--space-4);
}

.x-head__lead {
  max-inline-size: none;
  margin: 0;
  font-size: var(--text-md);
  font-weight: 300;
  letter-spacing: var(--tracking-wide);
}

/* メインの写真（対談）。楽譜の幅いっぱい（下に続く二列の外側の縁と揃える）。写真の中で英司が左、英治が右。
   2026-09-09 まで読み物幅（44rem）だったが、sample1 の Eiji × Eiji と同じ扱いに: 幅は段と揃え、
   上下を切って 2:1 のパノラマに（制作者「同じように写真の幅を調整して、パノラマの感じに」） */
.x-main-photo {
  width: 100%;
  margin: 0 auto var(--space-9);
}

.x-main-photo img,
.x-figure img,
.x-cell figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* 切る位置は sample1 と同じ。元画像（1600×1067）の上 45px（暗い鴨居）と下 222px を切り、下辺を机の面
   （y≈845）に置く。手前の帽子（y≈875 から下）が消え、器と二人の膝までが残る。17% は 45 ÷（1067 − 800）。
   CSS だけで切るので画像ファイルは変えない（talk.html の動画ファサードと events.html の写真は原寸のまま） */
.x-main-photo img {
  aspect-ratio: 2 / 1;
  object-position: 50% 17%;
}

.x-main-photo figcaption,
.x-figure figcaption,
.x-cell figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

/* 軸: 二声は中央、独奏 A は右端の列、独奏 S は左端の列 */
.x-axis {
  position: relative;
}

.x-axis::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: var(--hairline);
  background: var(--color-line);
}

.x-axis--a,
.x-axis--s {
  max-width: 52rem;
  margin-inline: auto;
}

.x-axis--a::before {
  left: auto;
  right: 3.5rem;
}

.x-axis--s::before {
  left: 3.5rem;
}

/* 行: 左 A ／ 年 ／ 右 S */
.x-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.x-axis--a .x-row {
  grid-template-columns: minmax(0, 1fr) 7rem;
}

.x-axis--s .x-row {
  grid-template-columns: 7rem minmax(0, 1fr);
}

/* 一覧の行（略歴、作品）は詰める */
.x-row--list {
  padding-block: var(--space-3);
}

/* 年: 軸の上に紙の地で置く */
.x-year {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  padding: 0 var(--space-2);
  background: var(--color-bg);
  font-size: var(--text-xl);
  font-weight: 300;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-wide);
  line-height: 1.3;
  text-align: center;
}

.x-axis--s .x-year {
  grid-column: 1;
}

.x-row--list .x-year {
  font-size: var(--text-md);
  line-height: 1.8;
}

/* 軸の値の 2 行目（日付の月日、章の副題） */
.x-year__sub {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-3);
}

/* セル */
.x-cell {
  position: relative;
  z-index: 1;
  grid-row: 1;
  font-size: var(--text-sm);
  line-height: 1.8;
}

.x-cell--a {
  grid-column: 1;
  text-align: end;
}

.x-cell--s {
  grid-column: 3;
  text-align: start;
}

.x-axis--s .x-cell--s {
  grid-column: 2;
}

.x-cell p {
  margin: 0;
  max-inline-size: none;
}

.x-cell p + p {
  margin-top: var(--space-3);
}

/* 段落の塊: 左揃え。A では塊ごと軸に寄せる */
.x-cell--block {
  max-inline-size: 30em;
  text-align: start;
}

.x-cell--a.x-cell--block {
  justify-self: end;
}

/* 人物の印: 点ではなく軸に向かう短い罫（500）。二声の年の行の、文のセルだけ */
.x-axis:not(.x-axis--a):not(.x-axis--s) .x-rows .x-cell--a:not(.x-cell--figure):not(.x-cell--block)::after,
.x-axis:not(.x-axis--a):not(.x-axis--s) .x-rows .x-cell--s:not(.x-cell--figure):not(.x-cell--block)::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: var(--rule);
  vertical-align: middle;
  background: var(--color-a);
}

.x-axis:not(.x-axis--a):not(.x-axis--s) .x-rows .x-cell--a:not(.x-cell--figure):not(.x-cell--block)::after {
  margin-inline-start: 0.7em;
}

.x-axis:not(.x-axis--a):not(.x-axis--s) .x-rows .x-cell--s:not(.x-cell--figure):not(.x-cell--block)::before {
  margin-inline-end: 0.7em;
  background: var(--color-s);
}

/* 写真のあるセル */
.x-cell figure {
  margin-block-end: var(--space-3);
}

.x-cell--a figcaption {
  justify-content: flex-end;
}

/* 共通の出来事: 中央、軸を隠す紙の地。年表の短い 1 行は緑、長い本文は墨（--text） */
.x-common {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  width: min(100%, 36em);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-5) 0;
  text-align: center;
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-common-strong);
  background: var(--color-bg);
}

.x-common p {
  margin: 0 0 var(--space-2);
  max-inline-size: none;
}

.x-common__title {
  font-size: var(--text-md);
  color: var(--color-common-strong);
}

.x-common--text {
  color: var(--color-text);
  text-align: start;
}

.x-row--m .x-year {
  color: var(--color-common-strong);
}

/* 行をまたぐ写真（共通）: 中央、読み物幅 */
.x-figure {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 3;
  width: min(100%, var(--container-narrow));
  margin: var(--space-5) auto 0;
  background: var(--color-bg);
}

/* 節ラベルの行: 二声は軸の上に、独奏は内容の列に */
.x-row--label {
  padding-block: var(--space-8) var(--space-2);
}

.x-row--label .x-label {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  margin: 0;
  padding-inline: var(--space-4);
  background: var(--color-bg);
}

.x-axis--a .x-row--label .x-label {
  grid-column: 1;
  justify-self: end;
  padding-inline: 0;
}

.x-axis--s .x-row--label .x-label {
  grid-column: 2;
  justify-self: start;
  padding-inline: 0;
}

/* 対の行（交差点）: 題を軸の上に、下に A｜S */
.x-row--pair .x-title {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  margin: 0 0 var(--space-4);
  padding-inline: var(--space-4);
  background: var(--color-bg);
  font-size: var(--text-lg);
  font-weight: 300;
  letter-spacing: var(--tracking-wide);
  color: var(--color-common-strong);
  text-align: center;
}

.x-row--pair .x-cell {
  grid-row: 2;
}

.x-row--pair .x-common {
  grid-row: 3;
}

/* 冒頭の行: 左に縦組みの英司、右に横組みの英治。名前は 500 の表示文字（t-voice-display） */
.x-row--hero {
  padding-block: 0 var(--space-9);
  align-items: start;
}

.x-name {
  margin: 0;
  font-size: var(--text-4xl);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
}

.x-hero-a {
  justify-self: end;
  inline-size: min(60vh, 26em);
  text-align: start; /* 縦組みでは end が下寄せ（行末揃え）になる */
}

.x-hero-a .x-name {
  margin-block-end: var(--space-5);
}

.x-role {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-display);
  color: var(--voice-strong);
}

.x-role span {
  margin-inline-start: 0.8em;
  color: var(--color-text-3);
}

.x-hero-a .x-role {
  margin: 0;
  margin-block-end: var(--space-4);
}

.x-hero-a p {
  margin: 0;
  font-size: var(--text-sm);
}

.x-intro {
  margin: 0;
  font-size: var(--text-sm);
}

/* 節の行動は文字リンク 1 つ */
.x-more {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

.x-hero-a .x-more {
  margin: 0;
  margin-block-start: var(--space-4);
}

.x-end {
  margin: var(--space-8) 0 0;
  text-align: center;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

/* 凡例の印 */
.x-mark {
  display: inline-block;
  width: 1.5em;
  height: var(--rule);
  margin-inline-end: 0.5em;
  vertical-align: middle;
  background: var(--color-line);
}

.x-mark--a { background: var(--color-a); }
.x-mark--s { background: var(--color-s); }
.x-mark--m { background: var(--color-common); }

/* ===================== 768px 未満: 一列。年が先頭、行は罫で区切る ===================== */
@media (max-width: 47.99em) {
  .x-axis::before {
    display: none;
  }

  .x-axis--a,
  .x-axis--s {
    max-width: none;
  }

  .x-row,
  .x-axis--a .x-row,
  .x-axis--s .x-row {
    grid-template-columns: 1fr;
    row-gap: var(--space-2);
    padding-block: var(--space-5);
    border-top: 1px solid var(--color-line);
  }

  .x-row--hero {
    row-gap: var(--space-7);
    padding-block: 0 var(--space-7);
    border-top: 0;
  }

  .x-row--label {
    padding-block: var(--space-7) var(--space-2);
    border-top: 0;
  }

  .x-year,
  .x-axis--s .x-year,
  .x-cell,
  .x-axis--s .x-cell--s,
  .x-common,
  .x-figure,
  .x-row--pair .x-title,
  .x-row--label .x-label,
  .x-axis--a .x-row--label .x-label,
  .x-axis--s .x-row--label .x-label {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    width: auto;
    max-width: none;
    padding-inline: 0;
    text-align: start;
  }

  .x-year {
    order: -1;
    font-size: var(--text-md);
  }

  .x-common {
    margin-top: 0;
  }

  .x-figure {
    width: 100%;
    margin-top: var(--space-3);
  }

  .x-cell--a figcaption {
    justify-content: space-between;
  }

  .x-cell--a.x-cell--block {
    justify-self: start;
  }

  /* 狭い画面では A の印も左に置く */
  .x-axis:not(.x-axis--a):not(.x-axis--s) .x-rows .x-cell--a:not(.x-cell--figure):not(.x-cell--block)::after {
    display: none;
  }

  .x-axis:not(.x-axis--a):not(.x-axis--s) .x-rows .x-cell--a:not(.x-cell--figure):not(.x-cell--block)::before {
    content: "";
    display: inline-block;
    width: 1.5em;
    height: var(--rule);
    margin-inline-end: 0.7em;
    vertical-align: middle;
    background: var(--color-a);
  }

  .x-hero-a {
    justify-self: start;
    inline-size: auto;
  }

  /* 2025 年の行: 年 → 展覧会データ → A の写真 → S の写真 */
  .x-row--2025 .x-cell {
    order: 1;
  }
}

/* ===================== (d) 統合年表: 凡例と注記 ===================== */
.x-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

.x-note {
  max-width: var(--container-narrow);
  margin: var(--space-7) auto 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-3);
}

/* ===================== (e) 人物ページ ===================== */

/* 見出しの下の役職（アーティスト / Artist） */
.l-page-head__role {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-display);
  color: var(--voice-strong);
}

/* 導入行: 写真と紹介文を横に並べる。A は軸（右）に向けて詰め、S は軸（左）から始める */
.x-duo {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-6);
}

.x-cell--s .x-duo {
  justify-content: flex-start;
}

.x-duo figure {
  flex: 1 1 18rem;
  max-width: 24rem;
  margin: 0;
}

.x-duo .t-vertical {
  flex: none;
  inline-size: min(60vh, 24em);
}

.x-duo .x-intro {
  flex: 1 1 20rem;
  max-inline-size: 30em;
}

.x-duo p {
  margin: 0;
}

.x-duo .t-vertical p + p,
.x-duo .x-intro p + p {
  margin-block-start: var(--space-3);
}

@media (max-width: 47.99em) {
  .x-duo {
    flex-direction: column;
  }

  .x-duo figure {
    max-width: none;
  }

  .x-duo .t-vertical {
    inline-size: auto;
  }
}

/* ===================== (f) 展覧会一家: 作品の行、対の行、対談の行、イベントの行 ===================== */

/* 軸の値が番号や日付のとき */
.x-year--no {
  font-size: var(--text-lg);
}

/* 作品・展示の行: 年表より詰め、写真は 24rem までにして軸側に寄せる */
.x-row--item {
  padding-block: var(--space-4);
}

.x-row--item figure {
  max-width: 24rem;
  margin-block-end: var(--space-3);
}

.x-axis--a .x-row--item figure {
  margin-inline-start: auto;
}

/* 対談の発言の行: 年なし、1 発言 = 1 行 */
.x-row--line {
  padding-block: var(--space-3);
}

.x-row--line .x-cell--block {
  max-inline-size: 34em;
}

/* 対の行では題 → A｜S → 写真 → 共通の順 */
.x-row--pair .x-figure {
  grid-row: 3;
}

.x-row--pair .x-common {
  grid-row: 4;
}

/* 共通ブロックの中の写真（イベント） */
.x-common figure {
  margin-block-start: var(--space-3);
}

.x-common figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.x-common figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

.x-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-block-start: var(--space-3);
}

.x-photos figure {
  margin: 0;
}

/* 質問箱: 質問は声の色、回答は墨 */
.x-q {
  color: var(--voice-strong);
}

.x-q .c-credit {
  margin-inline-start: 0.5em;
}

/* 幅を絞った共通の写真（フライヤー、縦位置） */
.x-figure--narrow {
  width: min(100%, 20rem);
}

/* 3:2 に収まらない写真（フライヤー、縦位置の園路と講義の写真）は切らずに全体を見せる。
   (b) の .l-figure--contain img は、後に書かれた .x-figure img と、特異度が上の .x-cell figure img /
   .x-common figure img に負けて 3:2 に切られていた（2026-09-09、制作者「記録のポスターの上下が切れている」）。
   縦位置は幅を 20rem（.x-figure--narrow と同じ）に抑え、高さが出すぎないようにする */
.x-figure.l-figure--contain img,
.x-cell figure.l-figure--contain img,
.x-common figure.l-figure--contain img {
  aspect-ratio: auto;
  object-fit: contain;
}

.x-common figure.l-figure--contain {
  max-width: 20rem;
}

/* 動画: 読み物幅で中央 */
.x-video {
  width: min(100%, var(--container-narrow));
  margin: 0 auto var(--space-8);
}

.x-video .c-video-meta {
  justify-content: center;
}

/* 導入の段落: 読み物幅で中央（文は左揃え） */
.x-lead {
  max-width: var(--container-narrow);
  margin: 0 auto var(--space-7);
}

.x-lead p {
  max-inline-size: none;
}

@media (max-width: 47.99em) {
  .x-row--item figure,
  .x-axis--a .x-row--item figure {
    max-width: none;
    margin-inline: 0;
  }

  .x-photos {
    grid-template-columns: 1fr;
  }
}

/* ===================== (g) 共通ページ: 日付の軸、読み物の節、誌面の縦積み ===================== */

/* 日付を軸の値にする（2026.08.20 の 10 文字が 7rem に収まるよう字間と余白を詰める） */
.x-year--date {
  padding-inline: var(--space-1);
  font-size: var(--text-md);
  letter-spacing: 0.02em;
  line-height: 1.8;
  white-space: nowrap;
}

/* 読み物（about、catalogue、credits）の節 */
.l-section {
  padding-block: var(--space-7);
}

.l-section + .l-section {
  border-top: 1px solid var(--color-line);
}

.l-section > .c-section-label {
  margin-block-end: var(--space-5);
}

/* 誌面などを 1 枚ずつ縦に積む */
.l-stack figure + figure {
  margin-top: var(--space-5);
}

.l-stack img {
  width: 100%;
}

.l-stack figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

.l-narrow ul {
  padding-inline-start: 1.4em;
  font-size: var(--text-sm);
}

.l-narrow li {
  margin-block-end: var(--space-2);
}

/* ===================== (h) 英語ページ（en/）: html[lang="en"] に限定 ===================== */
/* :lang(en) は日本語ページ内の lang="en" 断片にも効くので使わない。base.css の :lang(en)（0,1,0）は
   行間 1.6・字間 0・p の 65ch を全要素に与える。同じ特異度の site.css の規則は後勝ちで残るが、
   (0,1,0) の p と素の見出しは負けるのでここで戻す。design/*.css → css/site.css の読み込み順が前提 */

/* 全角記号 → 欧文の記号。content の末尾の空白は行末で消えるので white-space: pre で残す */
html[lang="en"] .u-slash::before {
  content: " / ";
  white-space: pre;
}

html[lang="en"] .u-bar::before {
  content: " | ";
  white-space: pre;
}

html[lang="en"] .c-datalist dt::after {
  content: ": ";
  white-space: pre;
}

/* 素の見出しの行間と字間を戻す（class 付きの見出しは自前の指定を持つ） */
html[lang="en"] :is(h1, h2, h3, h4):not([class]) {
  line-height: 1.3;
  letter-spacing: var(--tracking-wide);
}

/* :lang(en) p の 65ch に負ける (0,1,0) の p */
html[lang="en"] .x-head__lead,
html[lang="en"] .x-end,
html[lang="en"] .x-legend,
html[lang="en"] .l-page-head__role,
html[lang="en"] .x-note,
html[lang="en"] .c-worklist__text {
  max-inline-size: none;
}

/* 節ラベル: 英語が主（下線）、和文が従（小） */
html[lang="en"] .c-section-label__en {
  font-size: inherit;
  padding-block-end: 0.2em;
  border-block-end: var(--rule) solid currentColor;
}

html[lang="en"] .c-section-label__ja {
  padding-block-end: 0;
  border-block-end: 0;
  font-size: var(--text-xs);
}

/* 題名を含むラベルは大文字化しない */
html[lang="en"] .x-head .c-label {
  text-transform: none;
}

/* 冒頭の行: 英司も横組み。左揃えの塊を軸に寄せる（justify-self: end、text-align: start は既存） */
html[lang="en"] .x-hero-a {
  inline-size: auto;
  max-inline-size: 30em;
}

html[lang="en"] .x-duo .x-intro {
  text-align: start;
}

/* 独奏 A の段落（作品の解説）: 塊ごと軸に寄せ、行は左揃え */
html[lang="en"] .x-axis--a .x-row--item .x-cell--a {
  justify-self: end;
  max-inline-size: 34em;
  text-align: start;
}

a.c-lang__link:hover {
  color: var(--color-text);
}

@media (max-width: 47.99em) {
  html[lang="en"] .x-axis--a .x-row--item .x-cell--a {
    justify-self: start;
    max-inline-size: none;
  }
}

/* 対の行（交差点）の狭い画面: 題 → A → S → 写真 → 共通 の順に縦に流す。
   .x-row--pair .x-cell { grid-row: 2 }、.x-row--pair .x-figure { grid-row: 3 }、.x-row--pair .x-common { grid-row: 4 } は
   .x-cell { grid-row: auto } より詳細度が高く、同じ詳細度なら後勝ちなので、ファイル末尾で auto に戻す（2026-09-11、スマホでの重なりの修正） */
@media (max-width: 47.99em) {
  .x-row--pair .x-cell,
  .x-row--pair .x-figure,
  .x-row--pair .x-common {
    grid-row: auto;
  }
}