/* =====================================================================
   identity/grid.css — the grid family as CSS (mm), one implementation for every template.
   Each format class sets: page size, margins, columns, gutter, baseline, fields (from the purchased Grid Templates;
   exact pt values in tokens.json; 1 pt = 0.352778 mm). Content is placed with .cols (CSS grid on the real columns).
   The grid itself is a LAYER: <div class="grid-layer"></div> as first child of the page; visible when the page has
   data-grid="on" (or body[data-grid="on"]). Print it or not — same file.
   ===================================================================== */
.fmt { position: relative; box-sizing: border-box; overflow: hidden;
  padding: var(--m-t) var(--m-r) var(--m-b) var(--m-l); width: var(--page-w); height: var(--page-h); }
.fmt .cols { display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--gutter); }
.fmt .grid-layer { position: absolute; inset: 0; pointer-events: none; display: none; z-index: 9; } /* a guide layer like InDesign: on top, faint, switchable */
.fmt[data-grid="on"] .grid-layer, body[data-grid="on"] .fmt .grid-layer { display: block; }
.fmt .grid-layer::before { /* column edges as hairlines (reads on photos, colour fields and dark paper alike) */ content: ""; position: absolute; top: 0; bottom: 0; left: var(--m-l); right: var(--m-r);
  background: repeating-linear-gradient(to right, var(--grid-col-ink) 0 .2mm, transparent .2mm calc(var(--col-w) - .2mm), var(--grid-col-ink) calc(var(--col-w) - .2mm) var(--col-w), transparent var(--col-w) calc(var(--col-w) + var(--gutter)));
  background-size: calc(var(--col-w) + var(--gutter)) 100%; }
.fmt .grid-layer::after { /* baseline + field lines */ content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to bottom, var(--grid-line-ink) 0 .15mm, transparent .15mm var(--baseline)),
                    repeating-linear-gradient(to bottom, var(--grid-field-ink) 0 .3mm, transparent .3mm var(--field));
  background-position: 0 var(--baseline-start), 0 var(--field-start); }
.fmt > * { position: relative; z-index: 1; }
.fmt .footer { position: absolute; left: 0; right: 0; bottom: 0; height: var(--foot-h); display: grid;
  grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--gutter); padding: 0 var(--m-r) 0 var(--m-l); align-items: center;
  background: var(--dark); color: var(--dark-ink); font-family: var(--font-mono); font-size: 7pt; letter-spacing: .04em; z-index: 2; }
.fmt .footer img { height: calc(var(--baseline) * 2); display: block; }
.fmt .display { font-family: var(--font-display); font-weight: 400; text-transform: var(--display-case); letter-spacing: var(--display-tracking); line-height: var(--display-lead); margin: 0; }

/* ---- formats (mm) ---- */
.fmt-portrait { --page-w: 254mm; --page-h: 451.556mm; --m-t: 12.506mm; --m-b: 38.806mm; --m-l: 12.506mm; --m-r: 12.506mm; --cols: 4; --gutter: 7.215mm; --col-w: 51.836mm;
  --baseline: 5.292mm; --baseline-start: 0mm; --field: 68.792mm; --field-start: 0mm; --foot-h: 26.458mm; }
.fmt-landscape { --page-w: 451.556mm; --page-h: 254mm; --m-t: 12.506mm; --m-b: 31.75mm; --m-l: 12.506mm; --m-r: 12.506mm; --cols: 4; --gutter: 7.215mm; --col-w: 101.225mm;
  --baseline: 5.292mm; --baseline-start: 0mm; --field: 37.042mm; --field-start: 0mm; --foot-h: 21.167mm; }
.fmt-a3 { --page-w: 297mm; --page-h: 420mm; --m-t: 12.092mm; --m-b: 12.092mm; --m-l: 12.092mm; --m-r: 12.092mm; --cols: 6; --gutter: 0mm; --col-w: 45.469mm;
  --baseline: 3.881mm; --baseline-start: .45mm; --field: 65.969mm; --field-start: 12.092mm; --foot-h: 15.522mm; }
.fmt-a3-landscape { --page-w: 420mm; --page-h: 297mm; --m-t: 12.092mm; --m-b: 12.092mm; --m-l: 12.092mm; --m-r: 12.092mm; --cols: 6; --gutter: 0mm; --col-w: 65.969mm;
  --baseline: 3.881mm; --baseline-start: .45mm; --field: 45.469mm; --field-start: 12.092mm; --foot-h: 15.522mm; }
.fmt-a2 { --page-w: 420mm; --page-h: 594mm; --m-t: 13.645mm; --m-b: 30.085mm; --m-l: 13.645mm; --m-r: 13.645mm; --cols: 6; --gutter: 5.531mm; --col-w: 60.845mm;
  --baseline: 4.057mm; --baseline-start: 0mm; --field: 93.309mm; --field-start: 4.057mm; --foot-h: 24.342mm; }
.fmt-a1 { --page-w: 594mm; --page-h: 841mm; --m-t: 13.645mm; --m-b: 33.668mm; --m-l: 13.645mm; --m-r: 13.645mm; --cols: 12; --gutter: 5.531mm; --col-w: 42.156mm;
  --baseline: 4.057mm; --baseline-start: 0mm; --field: 133.879mm; --field-start: 4.057mm; --foot-h: 24.342mm; }
.fmt-a4 { /* derived from A3 Poster grid ÷ 1.414 */ --page-w: 210mm; --page-h: 297mm; --m-t: 8.55mm; --m-b: 8.55mm; --m-l: 8.55mm; --m-r: 8.55mm; --cols: 6; --gutter: 0mm; --col-w: 32.15mm;
  --baseline: 2.744mm; --baseline-start: .32mm; --field: 46.65mm; --field-start: 8.55mm; --foot-h: 10.976mm; }
.fmt-a4-landscape { --page-w: 297mm; --page-h: 210mm; --m-t: 8.55mm; --m-b: 8.55mm; --m-l: 8.55mm; --m-r: 8.55mm; --cols: 6; --gutter: 0mm; --col-w: 46.65mm;
  --baseline: 2.744mm; --baseline-start: .32mm; --field: 32.15mm; --field-start: 8.55mm; --foot-h: 10.976mm; }
.fmt-panel { /* 140×297 fold-out panel = portrait grid scaled to 140 mm (×0.5512) */ --page-w: 140mm; --page-h: 297mm; --m-t: 6.894mm; --m-b: 6.894mm; --m-l: 6.894mm; --m-r: 6.894mm; --cols: 4; --gutter: 3.977mm; --col-w: 28.57mm;
  --baseline: 2.917mm; --baseline-start: 0mm; --field: 37.917mm; --field-start: 48.1mm; --foot-h: 14.583mm; }
.fmt-dl { --page-w: 99mm; --page-h: 210mm; --m-t: 5.1mm; --m-b: 12.155mm; --m-l: 5.1mm; --m-r: 5.1mm; --cols: 4; --gutter: 4.81mm; --col-w: 18.593mm;
  --baseline: 3.528mm; --baseline-start: .29mm; --field: 24.694mm; --field-start: 24.984mm; --foot-h: 10.583mm; }

/* grid ink per register */
.fmt { --grid-col-ink: rgba(120,120,120,.22); --grid-line-ink: rgba(120,120,120,.07); --grid-field-ink: rgba(120,120,120,.18); } /* almost invisible (David 2026-10-21 02:05) */
[data-register="archive"] .fmt, .fmt[data-register="archive"] { --grid-col-ink: rgba(160,160,160,.2); --grid-line-ink: rgba(160,160,160,.06); --grid-field-ink: rgba(160,160,160,.16); }