/* Ultra Dewan — grid architecture. Ten interoperable grids sharing one
   mathematics: every grid is a regrouping of the 12-column core (G01), so
   pages can move between grids without breaking alignment. Combine with a
   .fmt-* canvas. G06 Hero and G07 Asymmetric are compositional grids —
   defined here as honest starting templates; see guidelines/grids-*.html.

   Grid  Cols        Gutter  Use
   G01   12          24      core communication grid
   G02   6 (=2×12)   32      publications, brochures, narrative
   G03   4 (=3×12)   40      executive, concise corporate
   G04   12 modular  8       portfolios, photography (dense auto-flow)
   G05   12          16      technical proposals, schedules, tables
   G06   layered     0       cinematic full-bleed imagery + statements
   G07   5|7 asym    24      expressive editorial compositions
   G08   2 halves    0       image/text split storytelling
   G09   4 index     28      contents, directories, listings
   G10   12 + rows   16      plans, sections, technical drawings */
.g01 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.g02 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; }
.g03 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter-wide); }
.g04 { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 64px; gap: 8px; grid-auto-flow: dense; }
.g05 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter-tight); }
.g06 { display: grid; grid-template: 1fr / 1fr; }             /* children stack via grid-area 1/1 */
.g06 > * { grid-area: 1 / 1; }
.g07 { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); } /* or 7|5, 4|8 */
.g08 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.g09 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.g10 { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(48px, auto); gap: var(--gutter-tight); }

/* Format canvases — fixed page boxes at 96dpi. Margin via padding;
   full-bleed elements escape with negative margins or grid-area layering. */
.fmt-a4l    { width: 1123px; height: 794px;  padding: var(--margin-a4l); }
.fmt-a4p    { width: 794px;  height: 1123px; padding: var(--margin-a4p); }
.fmt-a3l    { width: 1587px; height: 1123px; padding: var(--margin-a3); }
.fmt-a3p    { width: 1123px; height: 1587px; padding: var(--margin-a3); }
.fmt-slide  { width: 1920px; height: 1080px; padding: var(--margin-slide); }
.fmt-slide43{ width: 1440px; height: 1080px; padding: var(--margin-slide); }
.fmt-square { width: 1080px; height: 1080px; padding: var(--margin-square); }
.fmt-a5     { width: 559px;  height: 794px;  padding: var(--margin-flyer); }
[class*="fmt-"] { position: relative; box-sizing: border-box; background: var(--surface-page); color: var(--text-body); overflow: hidden; }
.bleed { margin: calc(-1 * var(--margin-a4l)); } /* adjust per format */