/* A.Karuizawa — main.css
   色・フォント・サイズ・余白は tokens.css の変数だけを使う（SITE_SPEC §3）。
   仕様書（§2 ワイヤー・§4 コンポーネント）で決まっていてトークンにない値は、
   下の「派生値」に出典つきでまとめ、本文ではその変数を参照する。
   アニメーション・トランジションは入れない（§4）。 */

/* ========== 派生値 ========== */
:root {
  color-scheme: light;                 /* ブランド色で固定。OSのダークモードでフォーム部品を反転させない */
  --header-h: var(--sp-7);             /* §2 header 64px */
  --label-col: 200px;                  /* §2 ≥960 左ラベル列 */
  --container: 1120px;                 /* §2 ≥960 コンテナ最大幅 */
  --tap: 44px;                         /* §4 タップ領域・ボタン高さ */
  --outline: 2px solid var(--c-green); /* §4 focus-visible */
  --ls-label: .2em;                    /* §3 --fs-label の注記 */
  --lh-en: 1.8;                        /* 欧文本文。和文の --lh-body(2.0) では間延びするため */
  --fs-en-display: calc(var(--fs-display) * .55); /* §2 en-display 22px（≥960 は約40px） */
  --fs-name: calc(var(--fs-h2) * 1.25);           /* 創業者名。statement より一段大きく（プロトタイプ準拠） */
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-ivory);
  color: var(--c-forest);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-ja-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, blockquote, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--c-sage); color: var(--c-forest); }

a {
  color: var(--c-green);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--sp-1);
}
a:hover, a:active { color: var(--c-forest); }

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* ========== Type roles ========== */

/* 和文の見出し：<wbr> の位置（文節）でだけ改行する。入り切らない場合は折り返しを許す。
   palt（約物詰め）は使わない：Google Fonts の Noto Serif JP が非対応で、
   フォールバック（ヒラギノ明朝は対応）から切り替わる時に行幅が変わってしまうため */
.phrase {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* 見出しに併記する英語（Cormorant italic） */
.en {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-en);
  line-height: var(--lh-h2);
  letter-spacing: 0;
}

/* 本文に併記する英語 */
.en-body {
  display: block;
  font-family: var(--f-sans);
  line-height: var(--lh-en);
  letter-spacing: 0;
  color: var(--c-green);
}

.label {
  display: grid;
  gap: var(--sp-1);
  align-content: start;
  font: inherit;
}
.label-en {
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-green);
}
.label-ja {
  font-size: var(--fs-small);
  line-height: var(--lh-h2);
}

.statement {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-ja-heading);
  color: var(--c-green);
}

.body { max-width: var(--measure); }
.body > * + * { margin-top: var(--sp-3); }
.body p, .bio p { text-wrap: pretty; }

/* ========== Header ========== */
.site-header { border-bottom: var(--rule); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.brand img {
  width: auto;
  height: var(--sp-4);
}
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
}
.nav-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* ========== Photo ========== */
.photo {
  background: var(--c-beige); /* 読み込み中の地（§3 beige＝写真プレースホルダー） */
}
.photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ========== 1. Hero ========== */
.hero { padding-block: var(--sp-7) var(--section-gap); }
.hero-head {
  display: grid;
  gap: var(--sp-4);
}
.eyebrow {
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-green);
}
h1 {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-ja-heading);
  color: var(--c-green);
}
h1 .en { font-size: var(--fs-en-display); }
.lead {
  margin-top: var(--sp-5);
  max-width: var(--measure);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}
.lead .en-body {
  margin-top: var(--sp-2);
  font-size: var(--fs-body);
}
.hero-photo { margin-top: var(--sp-6); }
.hero-photo img {
  /* 4:5 の写真が横向きのスマホ・タブレットで画面を埋め尽くさないよう高さを抑える */
  max-height: 80vh;
  max-height: 80svh;
}

/* ========== Section（左ラベル＋右コンテンツ） ========== */
.sec { padding-block: var(--section-gap); }
.sec--ruled { border-top: var(--rule); }
.sec-grid {
  display: grid;
  gap: var(--sp-5);
}
.sec-body {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  min-width: 0;
}

/* Vision：10年後の私たち */
.future {
  max-width: var(--measure);
  margin-top: var(--sp-4);
}
.future .label { margin-bottom: var(--sp-3); }
.future li {
  padding-block: var(--sp-3);
  border-top: var(--rule);
  text-wrap: pretty;
}
.future li:last-child { border-bottom: var(--rule); }
.future .en-body {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
}

/* ========== 反転面（Founders × ＝ What we do） ========== */
.band {
  padding-block: var(--section-gap);
  background: var(--c-green);
  color: var(--c-ivory);
}
.band .label-en,
.band .statement { color: var(--c-ivory); }
.band .label-ja,
.band .en-body { color: var(--c-sage); }
.band a { color: var(--c-ivory); }
.band a:hover, .band a:active { color: var(--c-sage); }
/* green 地では §4 の green の outline が見えないため、反転面だけ ivory にする */
.band :focus-visible { outline-color: var(--c-ivory); }

.op {
  padding-block: var(--sp-5);
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: var(--fs-operator);
  line-height: 1;
  text-align: center;
  color: var(--c-sage);
  user-select: none;
}

.equation { margin-top: var(--sp-7); }

/* Founder card：二人とも同じ順序・同じ寸法（§4） */
.founder {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  min-width: 0;
}
.founder-photo {
  max-width: var(--measure);
  background: var(--c-beige);
}
.founder-role {
  display: grid;
  align-content: start;
  font-size: var(--fs-small);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-ja-heading);
  color: var(--c-sage);
}
.founder-role [lang="en"] {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-ja-body);
}
.founder-name {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: var(--fs-name);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-ja-heading);
}
.founder-name .en {
  margin-top: var(--sp-1);
  font-size: var(--fs-en);
}
.kicker {
  padding-top: var(--sp-4);
  border-top: var(--rule);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-ja-heading);
}
.kicker .en { margin-top: var(--sp-1); }
.bio { max-width: var(--measure); }
.bio > * + * { margin-top: var(--sp-3); }
.bio .en-body { font-size: var(--fs-small); }
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-small);
  line-height: var(--lh-h2);
}
.tags li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.tags li + li::before {
  content: "";
  height: 1em;
  border-left: var(--rule);
}
.career {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start; /* subgrid で行が高くなっても、経歴の行間は広げない */
  gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-4);
  border-top: var(--rule);
  font-size: var(--fs-small);
  line-height: var(--lh-h2);
}
.career dt {
  color: var(--c-sage);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
/* 「会社名　役職」は、途中ではなく二つの間で改行させる */
.career dd > span {
  display: inline-block;
  max-width: 100%;
}

/* 引用 */
.quote {
  display: grid;
  gap: var(--sp-3);
  max-width: var(--measure);
  margin: var(--sp-7) auto 0;
}
.quote blockquote > p:first-child {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-ja-heading);
}
.quote .en { color: var(--c-sage); }
.quote figcaption {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-ja-heading);
  color: var(--c-sage);
}

/* What we do */
.domains { display: grid; }
.domain {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding-block: var(--sp-4);
  border-top: var(--rule);
}
.domain-title {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-ja-heading);
}
.domain-title .en { margin-top: var(--sp-1); }
.domain .en-body { font-size: var(--fs-small); }

/* ========== 6. The Name ========== */
.name-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--sp-3);
}
.name-formula > span { white-space: nowrap; }
/* 定義リストの dt 列は一番長い語に合わせ、行をまたいで揃える（subgrid） */
.meanings,
.company dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--sp-4);
}
.meanings > div,
.company dl > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  padding-block: var(--sp-3);
  border-top: var(--rule);
}
.meanings { max-width: var(--measure); }
.meanings > div:last-child { border-bottom: var(--rule); }
.meanings dt {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--c-green);
}
.meanings .en-body {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
}
.closing {
  margin-top: var(--sp-4);
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-ja-heading);
  color: var(--c-green);
}

/* ========== 7. Contact / Company ========== */
.contact { background: var(--c-beige); }
.mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
}
.mail-address {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding-inline: var(--sp-4);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--c-green);
  color: var(--c-ivory);
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1;
  letter-spacing: var(--ls-ja-heading);
  cursor: pointer;
  appearance: none;
}
.btn:hover { background: var(--c-forest); }
.btn:active {
  background: var(--c-forest);
  transform: translateY(1px);
}
.btn:focus-visible { outline-offset: 3px; } /* §4 Copy button：offset 3px */
.btn[hidden] { display: none; }

.company {
  max-width: var(--measure);
  margin-top: var(--sp-5);
}
.company .label { margin-bottom: var(--sp-3); }
.company dl > div {
  font-size: var(--fs-small);
  line-height: var(--lh-h2);
}
.company dl > div:last-child { border-bottom: var(--rule); }
.company dt {
  font-weight: 500;
  color: var(--c-green);
}

/* ========== Footer ========== */
.site-footer { padding-block: var(--sp-7); }
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
}
.footer-slogan {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-ja-heading);
  color: var(--c-green);
}
.footer-slogan .en { margin-top: var(--sp-1); }
.copyright {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-ja-body);
  color: var(--c-green);
}

/* ========== ≥960px（唯一のブレークポイント） ========== */
@media (min-width: 960px) {
  .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: end;
    column-gap: var(--sp-6);
  }
  .lead { margin-top: 0; }
  .hero-photo {
    grid-column: 1 / -1;
    margin-top: var(--sp-7);
  }
  .hero-photo img {
    aspect-ratio: 3 / 2;
    max-height: none;
  }

  .sec-grid {
    grid-template-columns: var(--label-col) minmax(0, 1fr);
    column-gap: var(--sp-7);
  }

  /* 金 ｜ × ｜ 矢動丸。subgrid で二人のカードの行（役職・名前・キッカー…）の高さを揃える */
  .equation {
    --rows: 6;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: repeat(var(--rows), auto);
    gap: var(--sp-4) var(--sp-6);
    margin-top: var(--sp-8);
  }
  .equation:has(.founder-photo) { --rows: 7; }
  .founder {
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
  }
  .founder:first-child { grid-column: 1; }
  .founder:last-child { grid-column: 3; }
  .equation > .op {
    grid-column: 2;
    grid-row: 1 / 4; /* 写真がないとき：役職〜キッカーの中央 */
    align-self: center;
    padding-block: 0;
  }
  .equation:has(.founder-photo) > .op { grid-row: 1 / 2; } /* 写真があるとき：写真の中央 */

  .domains {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-6);
  }
}