/* =============================================================
   pages/about.css — about ページ限定の最小調整（media 属性なし = all）
   -------------------------------------------------------------
   出典: pages/04-about/index.html の <style>。
   上流はページごとに <style> を持っており、共通化しきれない行長などの
   わずかな差だけをここへ置く。body の .page--about 配下に限定する。
   （plans/website/01 §4.3 / plans/design/08 §3「pages/<page>.css は最小限の調整」）
   ============================================================= */

/* 上流 about の .body は 50ch（既定は 46ch） */
.page--about .body { max-width: 50ch; }

/* ヒーローの高さ（2026-09-11）。全高（692px）だと写真が引き伸ばされて間延びし、
   半分（is-short 346px）だと机とパソコンが入りきらない。**そのバンドの全高の 2/3** に置く。
   is-short と同じ考え方で**上下の余白も同じ 2/3** にする（高さだけ縮めると余白が相対的に広がる）。
   高さの出どころは foundation/tokens.css の --size-tile-full-*。ここで新しい固定値は持たない。 */
.page--about .tile-photo.is-hero {
  min-height: calc(var(--size-tile-full) * 2 / 3);
  /* 上だけはタイル本来の --space-tile-top(48px) を使い、コピーを下げる。
     高さに合わせて 2/3(32px) にすると壁の無地に対してコピーが上に寄りすぎ、
     写真の主役（棚と机）との重心が合わない。下は高さと同じ 2/3 のまま。 */
  padding-block: var(--space-tile-top) calc(var(--space-tile-bottom) * 2 / 3);
}