/* ============================================================
   piiiz — grid.css   (module-unified: background grid == layout grid)
   Module M = one texture tile. Everything derives from M.
   Spec: 项目/piiiz.me/piiiz网站-栅格系统.md
   ============================================================ */

:root{
  /* ---- the module (one texture tile) ---- */
  --M:48px;                 /* module = tile size = background grid cell */
  --tile:var(--M);          /* texture render size (keeps bg grid == layout) */
  --baseline:8px;           /* M / 6 — fine vertical rhythm */

  /* ---- spacing (multiples of M and M/2; all land on the background grid) ---- */
  --s-1:4px;                /* hairline */
  --s-2:8px;                /* = baseline */
  --s-3:16px;               /* = M/3 */
  --s-4:24px;               /* = M/2  ← gutter */
  --s-5:48px;               /* = M */
  --s-6:72px;               /* = 1.5M */
  --s-7:96px;               /* = 2M */
  --s-8:144px;              /* = 3M */
  --s-9:192px;              /* = 4M */
  --s-10:240px;             /* = 5M */

  /* ---- grid ---- */
  --cols:12;
  --gutter:var(--s-4);                       /* 24 = M/2 */
  --margin:calc(var(--M) * 2);               /* 96 = 2M — edge lands on a tile line */
  --maxw:1680px;                             /* = 35 × M, exactly */

  /* ---- modular type scale (fluid, anchored) ---- */
  --t-label:.75rem;                              /* 12 */
  --t-micro:.8125rem;                            /* 13 */
  --t-body:clamp(1rem,1.2vw,1.0625rem);          /* 16–17 */
  --t-lead:clamp(1.25rem,2vw,1.5rem);            /* 20–24 */
  --t-h4:clamp(1.375rem,2.4vw,1.75rem);          /* 22–28 */
  --t-h3:clamp(1.5rem,3vw,2.5rem);               /* 24–40 */
  --t-h2:clamp(2rem,5vw,3.25rem);                /* 32–52 */
  --t-h1:clamp(2.5rem,7vw,6.5rem);               /* 40–104 */
  --t-display:clamp(3.5rem,9vw,8rem);            /* 56–128 */
}
@media(max-width:1024px){ :root{ --margin:var(--M); } }            /* 48 = M  */
@media(max-width:640px){ :root{ --M:40px; --margin:calc(var(--M)/2); } }  /* 20 = M/2 */

/* ============ containers ============ */
.container{width:100%;max-width:calc(var(--maxw) + var(--margin) * 2);margin-inline:auto;padding-inline:var(--margin)}
.bleed{width:100vw;margin-inline:calc(50% - 50vw)}

/* ============ 12-column grid ============ */
.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--gutter);row-gap:0}
.c1{grid-column:span 1}.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}
.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}
.c9{grid-column:span 9}.c10{grid-column:span 10}.c11{grid-column:span 11}.c12{grid-column:1 / -1}
.col-1-8{grid-column:1 / 8}.col-1-7{grid-column:1 / 7}.col-1-6{grid-column:1 / 6}.col-1-9{grid-column:1 / 9}
.col-3-12{grid-column:3 / 12}.col-3-9{grid-column:3 / 9}.col-3-13{grid-column:3 / 13}.col-3-11{grid-column:3 / 11}
.col-7-13{grid-column:7 / 13}.col-8-13{grid-column:8 / 13}.col-9-13{grid-column:9 / 13}.col-10-13{grid-column:10 / 13}
@media(max-width:760px){[class*="col-"],.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11{grid-column:1 / -1}}

/* ============ type scale ============ */
.t-label{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;line-height:1.4}
.t-micro{font-size:var(--t-micro);line-height:1.5}
.t-body{font-size:var(--t-body);line-height:1.7}
.t-lead{font-size:var(--t-lead);line-height:1.4}
.t-h4{font-size:var(--t-h4);line-height:1.2}
.t-h3{font-size:var(--t-h3);line-height:1.15}
.t-h2{font-size:var(--t-h2);line-height:1.1}
.t-h1{font-size:var(--t-h1);line-height:.98}
.t-display{font-size:var(--t-display);line-height:.9}
.measure{max-width:64ch}

/* ============ rhythm helpers (module multiples) ============ */
.pad-sec{padding-block:var(--s-7)}      /* 2M */
.pad-sec-lg{padding-block:var(--s-9)}   /* 4M */
.mt-M{margin-top:var(--s-5)}.mt-2M{margin-top:var(--s-7)}.mt-3M{margin-top:var(--s-8)}
.stack-4>*+*{margin-top:var(--s-4)}.stack-5>*+*{margin-top:var(--s-5)}.stack-7>*+*{margin-top:var(--s-7)}

/* ============ DEV overlay (toggle "G"): columns + module rows ============ */
.grid-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;display:none}
.grid-overlay.on{display:block}
.grid-overlay .cols{height:100%;max-width:calc(var(--maxw) + var(--margin) * 2);margin-inline:auto;padding-inline:var(--margin);display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--gutter)}
.grid-overlay .cols span{background:rgba(220,40,40,.10);border-inline:1px solid rgba(220,40,40,.16)}
.grid-overlay .base{position:absolute;inset:0;background-image:repeating-linear-gradient(to bottom,rgba(40,90,220,.16) 0 1px,transparent 1px var(--M))}