/* =============================================================================
   type.css — テキストの役割
   ページ上のすべてのテキストは、サイズ・ウェイト・書体・斜体を下のクラスから受け取る。
   クラスは HTML 側で指定する（例：class="t-subhead w-strong f-serif"）。
   値は tokens.css のトークン。css/ 内でフォントのサイズ・ウェイト・書体・スタイルを
   指定するのはここだけ。例外は自前で文字サイズを持つ自己完結したコンポーネント：
   ボタン（.btn, components.css）、Hero のロックアップと社名の組み（journey.css）。

   子は親から継承するので、クラスはテキストが変わる場所にだけ付ける。
   役割の見た目を変えるならトークンを変える。特定のテキストを変えるなら、ひとつ上か下の
   役割に移す——そのテキスト固有の値は与えない。
   ============================================================================= */

/* テキスト要素はブラウザのデフォルトを一切受け取らない：決めるのは役割。 */
:where(h1, h2, h3, h4, h5, h6, strong, b, small, em, i, cite, address, button, input, select, textarea) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
}

body {
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: var(--w-body);
  font-style: normal;
}

/* ----- サイズ -------------------------------------------------------------------- */
/* 最も大きい 3 段階はセリフで組む：英語は Noto Serif Display、日本語は Noto Serif JP（明朝）、
   いずれも --f-serif 経由。これはクライアントから受けたルール——大見出しは明朝——を、各見出しに
   書く代わりにここに一度だけ書いたもの。大きな行をサンセリフのままにしたいときは、下にある
   書体クラス（f-sans, f-ui）がなお優先される。 */
.t-display   { font-size: var(--t-display);   font-family: var(--f-serif); }  /* セクションタイトル（About Activarch, Services …） */
.t-statement { font-size: var(--t-statement); font-family: var(--f-serif); }  /* 大きな独立した 1 行 */
.t-headline  { font-size: var(--t-headline);  font-family: var(--f-serif); }  /* セクションのリード、大きな数字 */
/* これより下の段階はすべてサンセリフと明示する：大見出しの中に組まれた行（Culture の引用文の
   下の 2 行、ステートメント内のリードなど）は、明示しないと親から明朝を継承してしまう。
   書体クラス（f-serif, f-ui）は後に書かれているので、なお優先される。 */
.t-subhead   { font-size: var(--t-subhead); font-family: var(--f-sans); }   /* カードとサービスの見出し、ストーリーの行 */
.t-title     { font-size: var(--t-title);   font-family: var(--f-sans); }   /* 小見出し */
.t-intro     { font-size: var(--t-intro);   font-family: var(--f-sans); }   /* リード段落 */
.t-body      { font-size: var(--t-body);    font-family: var(--f-sans); }   /* 本文、ナビゲーション */
.t-caption   { font-size: var(--t-caption); font-family: var(--f-sans); }   /* 日付、クレジット、ラベル */
.t-micro     { font-size: var(--t-micro);   font-family: var(--f-sans); }   /* メディア上のラベル（再生時間、スクロールの合図） */
.t-icon      { font-size: 1.25em; }              /* 矢印の記号：置かれるテキストより 1 段階大きく */

/* ----- ウェイト ------------------------------------------------------------------ */
.w-body   { font-weight: var(--w-body); }
.w-head   { font-weight: var(--w-head); }
.w-strong { font-weight: var(--w-strong); }

/* ----- 書体と斜体 ---------------------------------------------------------------- */
.f-sans  { font-family: var(--f-sans); }
.f-serif { font-family: var(--f-serif); }
.f-ui    { font-family: var(--f-ui); }
.is-italic  { font-style: italic; }
.is-upright { font-style: normal; }

/* ----- セリフのタイトル ------------------------------------------------------------
   英語タイトルは 3 段階。各段階がひとつのクラスなので、ここで段階を変えればその段階の
   タイトル全部に一度で届く——これらに t-/w-/f- を個別に書かないこと。段階ごとに違うのは
   サイズだけで、書体・ウェイト・斜体は共通。 */
.title-section,
.title-group,
.title-feature {
  font-family: var(--f-serif);
  font-weight: var(--w-head);
  font-style: italic;
}

.title-section { font-size: var(--t-display); }  /* About Activarch, Services, Why Activarch, Recruit, News, Contact の各タイトル */
.title-group   { font-size: var(--t-group); line-height: 1; }  /* Consulting Service, Business Innovation, Our Projects, Activarch in Motion の各タイトル。
   以前この中間ランクは subhead の段階にあった：下の特徴タイトルよりわずかに大きく、上の
   セクションタイトルよりはるかに小さいので、3 ランクが 2 ランクに見えていた。 */
.title-feature { font-size: var(--t-title); }    /* Hands-on, All the Way / Customer First, for Real / Deep, Fast, Done の各タイトル */

/* ----- 特定テキストの行送りと字間 -------------------------------------------------- */
#company .about-introduction p,
#services .section-heading > p > span,
#recruit .recruit-copy :is(p, .company-intro, .recruit-invitation),
.contact-bottom p {
  line-height: 1.95;
}

#services :is(.official-service-copy, .why-grid p),
.about-card-stack .about-card-copy > p:not(.about-card-label),
#recruit .president-note-copy p,
#news .news-row h3,
:is(.youtube-card h3, .project-card-detail) {
  line-height: 1.85;
}

:is(.voice-card h3, .project-card h3) {
  line-height: 1.7;
}

:is(.section-title p, .case-heading p, .about-card-label),
#services .service-family-head h3 {
  line-height: 1.7;
}

:is(.voice-card small, .project-card figcaption > span, .about-card-copy small, .footer > p, .footer > div, .footer small, .footer a),
#news .news-row time {
  line-height: 1.7;
}

/* Recruit のメッセージ行：やや重めにして字間を広げる。（以前は People の行もここにあったが、
   今は Projects の結びと同じ statement の段階で、追加の指定はない。） */
#recruit .recruit-copy p.company-intro {
  letter-spacing: .04em;
}

#services .service-family-head > p,
#why-activarch .why-grid .title-feature,
.youtube-feature-head h2 {
  letter-spacing: -.02em !important;
}

/* セリフのディスプレイ用字間（値を詰めるほど語間が締まる）。 */
.about-title,
.latin-color-reveal {
  letter-spacing: -.035em !important;
}