/* ==========================================================================
   REDD Corporate Site — style.css (v4 本実装)
   正本：public/lab/final.html（確定カンプ）＋ public/lab/sandbox-mock.html
   仕様：DESIGN_SPEC.md v4（添削第6ラウンドまで反映。第6＝フル幅化・em測度・
   mediaタイル・英語フォロー最小化・表示専用チップ）

   規律：罫線はセクションヘッダー直下の全幅1pxのみ・
   角丸はピルボタンと表示専用チップのみ（チップは第6ラウンドで承認された拡張）・
   transitionは指定箇所のみ（works画像opacity／pill背景反転／nav・リンクの色／
   nav-overlayのopacity）で全て200ms以下・太さ2値／余白5値を厳守。
   矢印「↗」はピルボタン内のみ。

   色は墨・グレー・白の3値のみ（代表確認により、ロゴは一色（黒）で
   赤は入らないことが確定。--redは廃止済み）。
   ========================================================================== */

:root {
  --ink: #1a1a1a;
  --gray: #6b6b6b;
  --paper: #ffffff;

  --grotesk: "Helvetica Neue", "Hiragino Kaku Gothic ProN", Arial, sans-serif;

  --text-display: clamp(3rem, 6vw, 5rem);        /* 48–80px */
  --text-headline: clamp(1.5rem, 3vw, 2.5rem);    /* 24–40px */
  --text-headline-sm: clamp(1.5rem, 2vw, 2rem);   /* 24–32px */
  --text-body: clamp(1rem, 0.92rem + 0.4vw, 1.125rem); /* 16–18px */
  --text-meta: 13px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 128px;

  /* 第6ラウンド（フル幅化）：コンテナのmax-widthは撤廃した。
     --container-max／--wrap-padは実寸としては使わず、about dl・detail-factsの
     ラベル列幅を12カラム換算で導出するための「参照グリッド」定数として残す
     （値を変えないことで、ラベル列の見た目は従来と同一に保つ）。 */
  --container-max: 1120px;
  --wrap-pad: 32px;
  --gutter: 32px;      /* 12カラムグリッドのgutter（DESIGN_SPEC §2） */
  --grid-col: calc((var(--container-max) - (var(--wrap-pad) * 2) - (11 * var(--gutter))) / 12);

  /* 測度（第6ラウンド：コンテナ幅前提の--measureを廃止し、emで再定義）。
     文字サイズ基準にすることで、フル幅の大画面では「文字が大きいほど行長も伸びる」
     比例関係が保たれ、狭い画面では従来通りコンテナ幅（100%）で頭打ちになる。 */
  --measure-statement: 30em; /* hero__statement（headline級の宣言文）。自身のフォントサイズ基準 */
  --measure-body: 32em;      /* 地の文（approach__text／about-profile／contact__text／works詳細本文等） */
  /* --measure-en（60ch）は第9ラウンドで廃止。hero__statement-enは
     --measure-statementを共有する構成に変更（style.css内コメント参照）。 */
}

* { box-sizing: border-box; }
html, body { width: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--grotesk);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
p, dl, dt, dd, h1, h2 { margin: 0; }

/* 第6ラウンド（フル幅化）：max-width（1120px）を撤廃し、全幅＋左右パディングに変更。
   デスクトップ64px（--space-lg）／モバイル16px（--space-sm）。いずれも余白5値スケール内。
   基準線は「左パディングの内側端」（デスクトップ64px）に移る。
   padding-top/bottomは指定しない（section要素セレクタのmargin-topを
   省略記法で不意に上書きしないため、左右のみのロングハンドで書く）。 */
.wrap {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
@media (max-width: 640px) {
  .wrap {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}

/* ---- nav ---- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: var(--space-xs);
  column-gap: var(--space-md);
  /* 上=--space-lg(64px)でロゴ上の空気を確保、下=--space-md(32px)でheroへの近接を保つ
     非対称パディング（5段階の余白スケール内。新規の40〜48px値は追加しない）。 */
  padding-top: var(--space-lg);
  padding-bottom: var(--space-md);
}
.site-nav__logo img { height: 30px; width: auto; display: block; }
/* ナビ文字：15px固定・gap 32px。第4ラウンドの代表指示
   「スペーシングを詰め、フォントをわずかに小さく」（16-18px/gap64pxでは
   中間幅で不格好に折り返していた）。15pxは級数4段階の外だがナビ専用の
   UI寸法として許容（本文には使わない）。 */
.site-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.site-nav__links a {
  font-family: var(--grotesk);
  font-size: 15px;
  font-weight: 400;
  color: var(--gray);
  text-transform: lowercase;
  transition: color 180ms ease;
}
.site-nav__links a:hover { color: var(--ink); }
/* ハンバーガーへの切替は「インラインメニューが1行に収まらなくなる幅」で行う
   （第5ラウンド：ロゴ約300px＋メニュー実測幅から960pxを閾値に設定）。 */
@media (max-width: 960px) {
  .site-nav__links { display: none; }
}
@media (max-width: 640px) {
  .site-nav__inner { padding-top: var(--space-md); padding-bottom: var(--space-sm); }
}

/* ---- nav-toggle（ハンバーガー。≤640pxのみ表示） ----
   アイコンフォントは使わず、背景色の細いバー2本（background-color）で組む。 */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: none;
}
.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
}
/* 開時はハンバーガー自身が×になる（第4ラウンド：ロゴは据え置き、
   閉じる操作は開く操作と同じ位置。別ヘッダーは作らない）。切替は即時。 */
.nav-toggle__x {
  display: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__x { display: block; }
@media (max-width: 960px) {
  .nav-toggle { display: flex; }
}

/* ---- nav-overlay（全画面オーバーレイ。≤640pxのみ機能） ----
   transitionはopacityのみ（overlay専用の許容transition。visibilityは遷移させず、
   pointer-eventsの即時切替で閉時のクリック透過を止める）。 */
/* 通常のナビバー（ロゴ＋ハンバーガー）はオーバーレイの上に残す。
   ロゴは据え置き、ボタンだけが×に変わる（第4ラウンド）。 */
.site-nav { z-index: 30; }
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.nav-toggle:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.nav-overlay__links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  gap: var(--space-sm);
  padding: 0 var(--space-sm);
}
.nav-overlay__links a {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: lowercase;
  padding: var(--space-xs) 0;
}
.nav-overlay__links a:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
body.nav-open { overflow: hidden; }
@media (min-width: 961px) {
  .nav-overlay { display: none; }
}

section { margin-top: var(--space-xl); }
section:first-child { margin-top: 0; }
/* heroは自身のpadding-bottom（128px）で次セクションとの区切りを担うため、
   直後のsectionにさらにmargin-topを重ねない（section間は常に128pxの1段のみ）*/
.hero + section { margin-top: 0; }

/* ---- hero ---- */
.hero {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.hero__title {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: clamp(4rem, 13vw, 15.6rem);
  line-height: 0.95;
  letter-spacing: calc(-0.012em - 0.09vw);
  color: var(--ink);
}
.hero__title span { display: block; }
/* 光学インク揃え：ロゴSVGはインクがviewBox左端に密着している一方、欧文グリフは
   サイドベアリング分だけ字面がボックス左端より右に開始する（Helvetica Neue Bold実測：
   R/D ≈ +6.6%em、b ≈ +4.7%em）。canvasにfillTextして実際の非白ピクセルのx開始位置を
   走査し、行頭文字ごとに負のmargin-leftを与えてインク左端をロゴのインク左端（112px）に
   合わせる。em単位はhero__titleのclamp()フォントサイズに追従するため、
   画面幅が変わっても比率は一定に保たれる。 */
.hero__title span:nth-child(1) { margin-left: -0.066em; } /* Relational＝R */
.hero__title span:nth-child(2) { margin-left: -0.047em; } /* by＝b */
.hero__title span:nth-child(3) { margin-left: -0.066em; } /* Design＝D */
/* 測度は26em（第6ラウンド・em基準）。font-sizeをコンテナ自身に置くことで、
   max-widthのemが宣言文自身の級数（--text-headline）を参照する。
   文字が大きくなるほど行長も伸び、フル幅の大画面でも相対的な行長が保たれる。 */
.hero__statement {
  max-width: var(--measure-statement);
  font-size: var(--text-headline);
  margin-top: var(--space-lg);
}
/* グロテスク太字・headline級の「宣言」として組む。line-height 1.7（添削第2ラウンド）。
   第8ラウンド：text-wrap: prettyを追加（approach__textと同じ既存パターン）。
   狭い画面では1文目自体が自然折返しで複数行になり得るため、1〜2字の泣き別れを
   ブラウザの改行アルゴリズムで回避する（対応ブラウザのみの漸進的強化）。 */
.hero__statement p {
  font-family: var(--grotesk);
  font-size: inherit;
  line-height: 1.7;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
/* 第9ラウンド：4ブロック構成に組み替え（brタグの表示制御は継続）。
   広い画面（>960px、インラインナビの幅）はブロック内の設計br（.br-wide）を
   固定表示。狭い画面（≤960px、ハンバーガー幅）は.br-wideが非表示になり、
   段落区切り（4ブロック）は維持したまま段落内は自然折返しになる。 */
@media (max-width: 960px) {
  .hero__statement .br-wide,
  .hero__statement-en .br-wide {
    display: none;
  }
}
.hero__statement p + p {
  margin-top: var(--space-md);
}
/* 英語フォロー（第9ラウンド：新稿再訳に差し替え・4段落構成）。
   測度制限（旧--measure-en＝60ch）は廃止し、日本語ステートメントと同じ幅感で
   流すため、コンテナのfont-sizeを一時的に--text-headline（.hero__statementと
   同じ基準）にして--measure-statementを適用し、実際の文字サイズは子のpで
   --text-metaに戻す（emベースの測度を「同じ基準」で共有するための構成）。 */
.hero__statement-en {
  max-width: var(--measure-statement);
  font-size: var(--text-headline);
  margin-top: var(--space-md);
}
.hero__statement-en p {
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  line-height: 1.7;
  font-weight: 400;
  color: var(--gray);
  text-wrap: pretty;
}
.hero__statement-en p + p {
  margin-top: var(--space-sm);
}

/* ---- section anchor ---- */
section[id] {
  scroll-margin-top: 96px;
}
/* ラベル体系（ADゲート）：1セクション＝見出し1＋英語フォロー1まで。
   ナビと重複するだけの小ラベルは置かない。 */
.value-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--space-sm);
  row-gap: var(--space-xs);
  margin-top: 0;
  margin-bottom: var(--space-lg);
}
.value-heading__ja {
  font-family: var(--grotesk);
  font-size: var(--text-headline);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.value-heading__en {
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--gray);
}

/* ---- section header（型1：見出し＋全幅罫線。works / sandbox / media共通） ----
   罫線はサイト内でここ以外に使用しない（DESIGN_SPEC v4 §10-4）。 */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--ink);
}
.section-header__title {
  font-family: var(--grotesk);
  font-size: var(--text-headline);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.section-content { margin-top: var(--space-md); }

/* works「view all works」ピルはグリッド直後（末尾）に置く（添削第3ラウンド）。
   グリッドとの距離はworks-gridのrow-gapと同じ--space-lg（64px）で連続させる。
   第8ラウンド：中央寄せを廃止し左揃えに戻す（グリッド・section-headerと
   同じ基準線＝左パディング内側端に一致させる）。 */
.section-footer {
  margin-top: var(--space-lg);
}

/* ---- pill button（角丸が許される唯一の場所） ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  flex: none;
  padding: 0.6em 1.4em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--ink);
  text-transform: lowercase;
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease;
}
.pill:hover { background: var(--ink); color: var(--paper); }
.pill__arrow { display: inline-block; }

/* ---- approach / value（第5ラウンド：縦組み） ----
   2カラム対照（左＝語／右＝説明）は、巨大語と小さな本文のライン合わせが
   フォントメトリクス補正に依存し続けるため廃止（代表指摘3回）。
   代表提示のモックに従い、各項目を縦に組む：
   番号 → 語＋英語1語（同一行・ベースライン共有＝ブラウザ保証） → 説明 → 英語フォロー。
   カラム間の揃え問題は構造的に存在しない。 */
.approach {
  display: block;
}
.approach__item {
  margin-top: var(--space-lg);
}
.approach__item:first-child { margin-top: 0; }
.approach__index {
  display: block;
  line-height: 1;
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--gray);
}
.approach__word {
  margin: 0;
  margin-top: var(--space-xs);
  font-family: var(--grotesk);
  font-size: var(--text-display);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* 光学インク揃え：和文グリフのサイドベアリングを打ち消し、
   5語の字面左端を基準線±1px以内に揃える（canvas実測値・emで比例）。 */
.approach__item:nth-child(1) .approach__word { margin-left: -0.026em; } /* 見なおす */
.approach__item:nth-child(2) .approach__word { margin-left: -0.052em; } /* つなぐ */
.approach__item:nth-child(3) .approach__word { margin-left: -0.039em; } /* 試す */
.approach__item:nth-child(4) .approach__word { margin-left: -0.013em; } /* 届ける */
.approach__item:nth-child(5) .approach__word { margin-left: -0.013em; } /* 還す */
/* 英語1語（Notice等）：語と同じ行内のインライン要素。
   ベースラインはブラウザのインライン整形で自動的に共有される。 */
.approach__word-en {
  margin-left: 0.5em;
  font-family: var(--grotesk);
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--gray);
}
.approach__text {
  margin: 0;
  margin-top: var(--space-sm);
  max-width: var(--measure-body);
  font-family: var(--grotesk);
  font-size: var(--text-body);
  line-height: 1.7;
  font-weight: 400;
  color: var(--ink);
  /* 改行点の設計：中途半端な行末・1〜2字の泣き別れを避ける
     （対応ブラウザのみの漸進的強化。非対応でも通常の折返しで成立） */
  text-wrap: pretty;
}
/* .approach__text-en（5語の英文フォロー）は第6ラウンドで削除。
   正本はcopy-confirmed.mdに保持（index.astro側のコメント参照）。 */
@media (max-width: 640px) {
  .approach__item { margin-top: var(--space-md); }
}

/* ---- works / sandbox 共通（型2：2カラム・5:4・カード枠なし） ----
   sandboxもworksと同じ型で組む（代表指示：写真がメイン。無理に型を変えない）。
   差別化はセクションの分離＋状態ラベルのみ。 */
/* 第7ラウンド：3カラム→2カラムに変更（代表添付イメージ準拠）。
   モバイル（≤640px）は1カラムのまま変更なし。 */
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-md);
  row-gap: var(--space-lg);
}
.work-block { display: block; }
/* 第8ラウンド：画像アスペクト比を4:5（縦）→5:4（横）に変更（代表添付準拠）。 */
.work-block__image img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: opacity 180ms ease;
}
.work-block:hover .work-block__image img { opacity: 0.85; }
.work-block__caption { margin-top: var(--space-sm); }
/* 第8ラウンド：作品名を一段小さく戻す（--text-headline → --text-headline-sm）。
   年（work-block__year）はDOMから削除し非表示化した。 */
.work-block__name {
  font-family: var(--grotesk);
  font-size: var(--text-headline-sm);
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink);
}
/* カテゴリ行（works：produce等）と状態ラベル行（sandbox：試行中等）は
   同じ位置・同じ組み。型2の構造を共有する。
   第6ラウンド：ピル型の輪郭チップに変更（.pillの小型版・クリック不可の表示専用）。
   角丸規律の意図的な拡張として代表承認済み（DESIGN_SPEC §16）。
   操作可能なピル（ink枠・ink文字・hover反転あり）と区別するため、
   チップは輪郭・文字ともgray・hover変化なしの「静かな表示」で組む。 */
.work-block__category,
.work-block__status {
  display: inline-block;
  padding: 0.25em 0.9em;
  border: 1px solid var(--gray);
  border-radius: 999px;
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--gray);
  margin-top: var(--space-xs);
}
.work-block__category { text-transform: lowercase; }
/* 説明文：タイトル・カテゴリだけでは何をした仕事か伝わらないという指摘に対応。
   13px・gray・line-height 1.7で「静かな地の文」の組み。 */
/* 第7ラウンド：サマリー文の色を薄グレー→墨（--ink）に変更、行間1.8に拡大
   （代表添付イメージ準拠。読ませるサマリーとして扱う）。
   第8ラウンド：チップ→サマリーの余白をxs→smに広げ、名前→チップ（xs・タイト）と
   チップ→サマリー（sm・地の文の呼吸）で段階をつけた（画像→名前→チップ→サマリーの
   詰まり・間延びのない並び）。 */
.work-block__desc {
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  line-height: 1.8;
  font-weight: 400;
  color: var(--ink);
  margin-top: var(--space-sm);
}
/* 写真プレースホルダ（5:4）：素材待ちの案件用。実写真が届き次第差し替える。
   新規の色トークンは作らず、ink・paperの2値から導出したtintのみを使う
   （sandbox-mockの#ececec相当＝ink 8%）。 */
.work-block__image .ph {
  width: 100%;
  aspect-ratio: 5 / 4;
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  color: var(--gray);
}
@media (max-width: 640px) {
  .works-grid { grid-template-columns: 1fr; }
}

/* ---- sandbox固有：導入一行のみ ---- */
.sandbox-intro {
  max-width: var(--measure-body);
  font-family: var(--grotesk);
  font-size: var(--text-body);
  line-height: 1.7;
  font-weight: 400;
  color: var(--gray);
}
.sandbox-intro + .works-grid { margin-top: var(--space-lg); }

/* ---- journal（第7ラウンド：Podcast・noteを1枚の12カラムグリッドに統一） ----
   旧mediaのauto-fill2ブロック構成を廃止し、journal-grid（12カラム・column-gap
   space-md）の中にPodcast・noteのタイルを直接span指定で並べる。
   同一グリッドに属するため、Podcast行（span2×6件＝12）とnote行（span4×3件＝12）の
   左端・右端・ガター位置が構造的に一致する（代表指摘「壊滅的」箇所の対応）。 */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-md);
  row-gap: var(--space-md);
}
/* グループ見出し行（Podcast／note）・ピル行は12カラム全幅を占有する行として
   グリッドに参加させる（.section-contentのmargin-topと役割が異なるため
   grid-column: 1 / -1で明示）。 */
.journal-group-label,
.media-more {
  grid-column: 1 / -1;
}
/* Podcast群とnote群の区切りは、グリッドの一様なrow-gap（space-md＝32px）に
   note側グループ見出しのmargin-top（space-lg＝64px）を加算し、
   グループ内（label→tile→pill＝32px間隔）より広い区切り（32+64px）を作る
   （5段階の余白スケール値の組み合わせであり、新規のマジックナンバーではない）。 */
.journal-group-label--second {
  margin-top: var(--space-lg);
}
.media-block__label {
  font-family: var(--grotesk);
  font-size: var(--text-headline-sm);
  font-weight: 700;
  color: var(--ink);
}
.media-block__show {
  font-family: var(--grotesk);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--gray);
  margin-top: var(--space-xs);
}
/* タイル：Podcast＝span2（12÷2=6枚／行）、note＝span4（12÷4=3枚／行）。
   デスクトップの列数はグリッドの列定義そのもの（auto-fillではなく固定spanのため、
   件数が仕様の6件・3件から変わらない限り常に1行で揃う）。 */
.tile--podcast { grid-column: span 2; }
.tile--note { grid-column: span 4; }
@media (max-width: 640px) {
  .tile--podcast { grid-column: span 6; }
  .tile--note { grid-column: span 12; }
}
/* プレースホルダ：RSS未取得のため。新規色トークンは作らず、ink 8%のtint
   （sandbox写真枠と同値＝#ececec相当）から導出する。実装時に実画像へ差し替え。 */
.tile__art,
.tile__og {
  width: 100%;
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  color: var(--gray);
}
.tile__art { aspect-ratio: 1 / 1; }
.tile__og { aspect-ratio: 1.91 / 1; }
/* 実画像（RSS取得分）：プレースホルダと同じ枠に収める。
   noteタイルはtile全体をリンク化するため、内側の<a>をblock化して
   work-block同様の縦積みレイアウトを保つ（第7ラウンド：RSS実データ化）。 */
.tile__art img,
.tile__og img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile--note > a { display: block; }
.tile__title {
  margin-top: var(--space-xs);
  font-family: var(--grotesk);
  font-size: var(--text-body);
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink);
  /* タイトルは1〜2行で切る（タイルの高さを揃えるため） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.tile__meta {
  margin-top: var(--space-xs);
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--gray);
}
/* 文中／リスト外リンクのカスタム下線。既製品（ブラウザ既定）の下線は使わない
   （media-moreは第6ラウンドでピルボタン化したため下線グループから除外） */
.contact__text a,
.back-line a,
.hero__statement a {
  font-family: var(--grotesk);
  font-weight: 400;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--gray);
  transition: color 180ms ease;
}
.contact__text a:hover,
.back-line a:hover,
.hero__statement a:hover {
  color: var(--gray);
}
/* ピルの日本語ラベル（Spotifyで聴く等）はlowercase変換の対象にしない
   （text-transformでSpotify→spotifyと表記が変わるのを防ぐ。コピー一字一句不変）。
   .media-moreのmargin-topはjournal-gridのrow-gapに一本化したため個別指定しない
   （二重に余白が乗るのを避ける）。 */
.media-more .pill { text-transform: none; }

/* ---- links (business only) ---- */
.links-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.links-list a {
  font-family: var(--grotesk);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--ink);
  transition: color 180ms ease;
}
.links-list a:hover { color: var(--gray); }

/* ---- about（型4：写真＋宣言の対） ---- */
.about-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* 会社／代表写真差し替え前提のプレースホルダ。新規の色トークンではなく
     ink・paperの2値から導出したtint（color-mix）のみを使う */
  background: color-mix(in srgb, var(--ink) 6%, var(--paper));
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-photo span {
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  color: var(--gray);
}
/* プロフィール（第8ラウンド：新稿・構成付きに差し替え）。
   名前（太字）→肩書き→本文2段落の構成。名前のみ12-3節ウェイト運用ルールの
   例外として700を許可（代表指示）。本文は事実紹介文のため400・line-height 1.9。
   測度は--measure-body（32em）をブロック全体で共有し、他の読み物ブロック
   （hero__statement／contact__text等）と右端を揃える。 */
/* 第10ラウンド：狭い箱の廃止。
   ルール改定＝本文ブロックの幅はページグリッドのカラム数で決める。
   em測度で「フル幅の中の孤島」を作らない（代表の再三の指摘に対する恒久対応）。
   プロフィールは日本語本文（左2/3）＋英文（右1/3）の2カラムで行を使い切り、
   右の空白そのものを無くす。名前・肩書きは全幅の行。 */
.about-profile {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  column-gap: var(--space-lg);
  grid-template-areas:
    "name  name"
    "title title"
    "body  en";
}
.about-profile__name { grid-area: name; }
.about-profile__title { grid-area: title; }
.about-profile__body { grid-area: body; }
.about-profile__en { grid-area: en; }
@media (max-width: 960px) {
  .about-profile {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "title"
      "body"
      "en";
  }
}
/* 第9ラウンド：名前行に英語表記を併記。value-heading（語＋英語）と同じ型
   （flex・baseline・column-gap: --space-sm）。 */
.about-profile__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--space-sm);
  font-family: var(--grotesk);
  font-size: var(--text-body);
  line-height: 1.9;
  font-weight: 700;
  color: var(--ink);
}
.about-profile__name-en {
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--gray);
}
.about-profile__title {
  font-family: var(--grotesk);
  font-size: var(--text-body);
  line-height: 1.9;
  font-weight: 400;
  color: var(--gray);
  margin-top: var(--space-xs);
}
.about-profile__body {
  margin-top: var(--space-md);
}
.about-profile__body p {
  font-family: var(--grotesk);
  font-size: var(--text-body);
  line-height: 1.9;
  font-weight: 400;
  color: var(--ink);
}
.about-profile__body p + p {
  margin-top: var(--space-sm);
}
/* 第9ラウンド：英文プロフィール（copy-confirmed.md「英語併記版」）を追加。
   13px・gray・line-height 1.7。日本語本文（--measure-body）と測度を共有する
   .about-profile内に置くため、個別のmax-widthは指定しない。 */
.about-profile__en {
  margin-top: var(--space-md);
}
.about-profile__en p {
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  line-height: 1.7;
  font-weight: 400;
  color: var(--gray);
}
.about-profile__en-body {
  margin-top: var(--space-xs);
}
.about-facts dl {
  display: grid;
  /* ラベル列＝12カラム中2カラム分＋gutter1本（--grid-col・--gutterから算出） */
  grid-template-columns: calc(2 * var(--grid-col) + var(--gutter)) 1fr;
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  margin-top: var(--space-lg);
}
/* .about-profile-en（aboutの英語一行文）は第6ラウンドで削除。
   正本はcopy-confirmed.mdに保持（index.astro側のコメント参照）。 */
.about-facts dt {
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--gray);
}
.about-facts dd {
  font-family: var(--grotesk);
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink);
}
@media (max-width: 640px) {
  .about-facts dl { grid-template-columns: 1fr; }
  .about-facts dd { margin-bottom: var(--space-sm); }
}
/* 第7ラウンド：事業サイトリンク（旧journal/media-business）をaboutへ移動。
   dlと同じ--space-lgの余白間隔を踏襲し、リンクリスト自体は装飾しない
   （.links-listの見た目そのまま）。「online」は機能ラベルで、ナビ項目との
   重複ではないため12-2節のラベル体系ルールに抵触しない。 */
.about-online-label {
  margin-top: var(--space-lg);
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--gray);
}
.about-online {
  margin-top: var(--space-sm);
}

/* ---- contact ---- */
.contact__text {
  max-width: var(--measure-body);
  font-family: var(--grotesk);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--ink);
}
.contact .pill { margin-top: var(--space-md); }

/* ---- footer ----
   「© REDD inc.」1行のみ。会社情報はaboutセクションのdlにあるため重複させない。 */
.site-footer {
  /* 他のsection間と同じ--space-xl（128px）で区切り、リズムを揃える。 */
  margin-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}
.site-footer__text {
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--gray);
}

/* ==========================================================================
   下層ページ（works一覧・works詳細・仮ページ）
   トップと同じトークン・同じ型のみで組む。新しい見た目の判断はしない。
   ========================================================================== */

/* ---- 下層ページの先頭セクション ----
   heroを持たない下層ページは、nav（padding-bottom 32px）との距離を
   --space-lg（64px）で取る（5段階の余白スケール内）。 */
.page-top {
  padding-top: var(--space-lg);
}

/* ---- works詳細 ---- */
.detail-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.detail-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.gallery img { width: 100%; }
/* 詳細ページの素材待ちプレースホルダ（一覧の.phと同じtint・16:9） */
.detail-ph {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  color: var(--gray);
}
.detail-head { margin-top: var(--space-lg); }
.detail-name {
  font-family: var(--grotesk);
  font-size: var(--text-headline);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* 年・状態ラベル：カード（work-block__status）と同じmeta・grayの組み */
.detail-year,
.detail-status {
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--gray);
  margin-top: var(--space-xs);
}
.detail-summary {
  max-width: var(--measure-body);
  font-family: var(--grotesk);
  font-size: var(--text-body);
  line-height: 1.7;
  font-weight: 400;
  color: var(--gray);
  margin-top: var(--space-sm);
}
/* 本文：about-profileと同じ「読ませる本文」の組み（400・ink・1.9・--measure） */
.detail-body {
  max-width: var(--measure-body);
  font-family: var(--grotesk);
  font-size: var(--text-body);
  line-height: 1.9;
  font-weight: 400;
  color: var(--ink);
  margin-top: var(--space-md);
}
.detail-body p + p { margin-top: var(--space-sm); }
/* 担当領域・連携先：about-facts dlと同じ型 */
.detail-facts {
  display: grid;
  grid-template-columns: calc(2 * var(--grid-col) + var(--gutter)) 1fr;
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.detail-facts dt {
  font-family: var(--grotesk);
  font-size: var(--text-meta);
  font-weight: 400;
  color: var(--gray);
}
.detail-facts dd {
  font-family: var(--grotesk);
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink);
}
.back-line {
  margin-top: var(--space-lg);
  font-family: var(--grotesk);
  font-size: var(--text-body);
}
@media (max-width: 640px) {
  .detail-facts { grid-template-columns: 1fr; }
  .detail-facts dd { margin-bottom: var(--space-sm); }
}

/* ---- 仮ページ（404・翠茎茶プレースホルダ）互換 ----
   旧v2マークアップ（.hero__inner／.hero__tagline）が新CSSでも破綻しないための最小限。
   タグラインは見出し（headline・700）、本文は.hero__statementの既存スタイルに従う。 */
.hero__inner { max-width: var(--measure-body); }
.hero__tagline {
  font-family: var(--grotesk);
  font-size: var(--text-headline);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--space-md);
}