/* ===================================================================
   grid.css — Müller-Brockmann modular grid scaffold
   ===================================================================
   生成元: hyperagent-public-skills / grid_tokens.py
   (--cols 12 --baseline 8 --gutter 24 --margin 72 --maxw 1296 --accent #2238d6)
   1ソース・オブ・トゥルース：全グリッドパラメータは :root に集約。
   コンテンツとオーバーレイは同じ変数・同じコンテンツボックスを共有する。
   オーバーレイのチントのみ赤→MAGNET Blue へ変更。
   =================================================================== */
:root{
  --cols:12;
  --bl:8px;            /* baseline unit */
  --lh:24px;                    /* leading = 3 x baseline */
  --gutter:24px;
  --margin:72px;
  --pad:96px;        /* spread top/bottom pad (x baseline) */
  --maxw:1296px;

  --paper:#ffffff;
  --ink:#111315;
  --ink-soft:#5b6066;
  --accent:#2238d6;            /* MAGNET Blue（単色アクセント・グラデ禁止） */
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter","Zen Kaku Gothic New",system-ui,sans-serif;font-size:16px;line-height:var(--lh);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{display:block;width:100%;height:100%;object-fit:cover;}

/* ---- spread + grid scaffold (ONE source of truth) ---- */
.spread{position:relative;width:100%;}
.wrap{position:relative;max-width:var(--maxw);margin:0 auto;padding:var(--pad) var(--margin);}
.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);
  column-gap:var(--gutter);row-gap:var(--lh);}
/* a band spans all columns and re-exposes them as a subgrid so children
   align to the SAME lines as everything else on the page */
.band{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;
  column-gap:var(--gutter);row-gap:var(--lh);align-items:start;}
@supports not (grid-template-columns:subgrid){
  .band{grid-template-columns:repeat(var(--cols),1fr);}
}
/* place children with: style="grid-column: <startline> / <endline>" */

/* 公開版: グリッドオーバーレイ（.guides / .toggle / body.grid-on）は削除済み。
   レイアウト用のグリッド（.spread / .wrap / .grid / .band）のみを残す。 */

/* ---- responsive: 余白とパッドを縮める（baseline倍数を維持） ---- */
@media (max-width:900px){
  :root{--margin:32px;--pad:64px;--gutter:16px;}
}
@media (max-width:560px){
  :root{--margin:20px;--pad:48px;}
}