/* ============================================
   共通スタイル（全ページ）: フォント・リセット・固定クローム
============================================ */
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('./fonts/ppneuemontreal-book.otf') format('opentype');
  font-weight: 400;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('./fonts/ppneuemontreal-medium.otf') format('opentype');
  font-weight: 500;
}

:root {
  --fg: #f4f4f2;
  --bg: #121212;
  /* グリッドのトークン（PC）。SPは下のメディアクエリで上書き */
  --grid-cols: 12;
  --grid-margin: 2.4rem;   /* 左右の外余白 */
  --grid-gutter: 1.2rem;   /* カラム間のガター */
}
/* SP（640px以下）のグリッド: 6列 / 余白12px / ガター6px */
@media (max-width: 640px) {
  :root {
    --grid-cols: 6;
    --grid-margin: 12px;
    --grid-gutter: 6px;
  }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* overscroll（端でのバウンド／スクロール連鎖）をサイト全体で無効化 */
html, body { overscroll-behavior: none; }
/* Fluidスケール: 1rem = 10px @ 幅1440px。画面幅に連動して全体が等比拡大縮小する。
   （デザインは1440px基準。値をpx/10でremにすれば1440pxで元のpxと一致）
   極端な画面幅では読めなく/大きくなりすぎないよう clamp で上下限を設ける。 */
/* 上限を一旦外して試し中（元は clamp(8px, 0.6944vw, 13px)）。下限8pxのみ維持し、幅に比例して上へは無制限に拡大。 */
html { font-size: max(8px, 0.6944vw); }
/* モバイル幅では上のデスクトップ用の式だと極小(8px)に張り付くので、
   モバイル用の下限・式に切り替える（1rem を読みやすいサイズに引き上げ）。 */
@media (max-width: 640px) {
  html { font-size: clamp(9px, 2.5vw, 12px); }
}
body {
  font-family: 'PP Neue Montreal', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ---- 固定ヘッダー ---- */
/* ページ本体(.split)と同じ12カラムグリッド。各ブロックを grid-column で「何カラム目」に
   置くので、画面幅が変わっても常に下のコンテンツのグリッド線と揃う。 */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--grid-gutter);
  align-items: center;
  padding: 2.2rem var(--grid-margin) 0;
  font-size: 1.2rem; font-weight: 400; letter-spacing: 0.01em;
  pointer-events: none;
}
.site-header a { pointer-events: auto; }
.h-name    { grid-column: 1 / 4; display: flex; gap: 1.4rem; align-items: baseline; font-size: 1.7rem;}
/* h-metaは枠を消して(display:contents)、中のTime/Weatherをヘッダーの12カラムに直接載せる。
   これで各項目の「開始カラム」をグリッド線でピタッと指定できる。 */
.h-meta { display: contents; }
.h-meta .h-item:nth-child(1) { grid-column: 7 / 9; }   /* Time */
.h-meta .h-item:nth-child(2) { grid-column: 9 / 12; }  /* Weather */
.h-contact { grid-column: 12; justify-self: end; }

/* SPではヘッダーはグリッドをやめてflex（名前=左 / Contact=右）。Time/Weatherは非表示。 */
@media (max-width: 640px) {
  .site-header { display: flex; justify-content: space-between; }
  .h-meta .h-item { display: none; }
  .h-name, .h-contact { grid-column: auto; }
}
.h-sub { opacity: 0.5; transition: opacity 0.35s ease; }
.h-sub.off { opacity: 0; }
.h-item { display: flex; gap: 1rem; align-items: center; }
.h-item .dot { font-size: 0.6rem; opacity: 0.6;}
.h-item .sub { opacity: 0.9; }
.h-item .title{ opacity: 0.6; margin-left: -0.4rem;}

/* ---- 固定・左下の縦書きテキスト ---- */
/* vertical-rl（rotateなし）= 上→下・頭を右に傾けて読む向き。英語の左端縦書きで最も一般的。 */
.v-side {
  position: fixed; left: 2.4rem; bottom: 2.4rem; z-index: 40;
  writing-mode: vertical-rl;
  font-size: 0.9rem; letter-spacing: 0.08em; opacity: 0.75;
  pointer-events: none;
}

/* ---- 固定・右下メニュー ---- */
.b-right {
  position: fixed; right: 2.4rem; bottom: 2.4rem; z-index: 40;
  text-align: right; font-size: 1.6rem; letter-spacing: 0.04em;
  line-height: 1.9; display: flex; gap: 2rem; flex-direction: column;
}
.b-right a { display: block; opacity: 0.9; font-weight: 400; line-height: 1;}
.b-right a:hover { opacity: 0.5; }

/* ============================================
   共通レイアウト: 左カラム固定 + 右カラムだけスクロール
   （About / Archive List で共有。中身のグリッドは各ページで足す）
============================================ */
.split {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--grid-gutter);
  height: 100vh;
  padding: 0 var(--grid-margin);
  /* ページ全体をスクロール領域に（左右どこにカーソルがあってもスクロールできる）。
     左カラムは .split-left の position:sticky で固定する。 */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: none;      /* 内側スクロールのバウンド／連鎖を無効化 */
  scrollbar-width: none;          /* スクロールバー非表示（Firefox） */
  /* 1カラム幅（fr相当）。要素の横幅を「Nカラム分」で指定するのに使う。
     Nカラム幅 = calc(var(--col) * N + var(--grid-gutter) * (N-1)) */
  --col: calc((100vw - 2 * var(--grid-margin) - (var(--grid-cols) - 1) * var(--grid-gutter)) / var(--grid-cols));
}
.split::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.split-left {
  grid-column: 1 / 5;
  padding-top: 14rem;   /* 見出しの開始位置 */
  position: sticky; top: 0;   /* スクロールしても左は固定 */
  align-self: start;          /* stretchさせずstickyを効かせる */
}
.split-right {
  grid-column: 5 / 12;
  padding-top: 13.2rem;
  padding-bottom: 18rem;
}

@media (max-width: 800px) {
  .split { display: block; height: auto; overflow: visible; padding-bottom: 2.4rem; }
  .split-left { position: static; padding-top: 10rem; }
  .split-right { padding-top: 4rem; padding-bottom: 0; }
}

/* ---- レイアウトグリッド確認用（PC:12col/24/12, SP:6col/12/6 をトークンで切替） ---- */
#grid-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gutter);
  padding: 0 var(--grid-margin);
  pointer-events: none;
}
#grid-overlay.hidden { display: none; }
#grid-overlay div { background: rgba(216, 0, 0, 0.10); }
/* SPは6列なので7列目以降の目印は隠す（HTMLは12個ある） */
@media (max-width: 640px) {
  #grid-overlay div:nth-child(n+7) { display: none; }

  /* SPでは縦書き左下固定をやめ、横書きで画面下部中央に。
     （スクロールしないトップ／カルーセル用。About・Archiveリストは各ページで非表示にして
       コンテンツ末尾に流し込む） */
  .v-side{
    left: 0; right: 0; bottom: 1.2rem;
    writing-mode: horizontal-tb;
    text-align: center;
    letter-spacing: 0.06em;
  }
  .b-right{
    right: 1.2rem;
  }
}