:root {
  --g-wrap:    1140px;
  --g-cols:    12;
  --g-gutter:  24px;


  --g-inner:   min(var(--g-wrap), calc(100% - 2 * var(--corner)));
  --g-col:     calc((var(--g-wrap) - (var(--g-cols) - 1) * var(--g-gutter)) / var(--g-cols));
  --g-unit:    calc(var(--g-col) + var(--g-gutter));


  --s-1:   8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  48px;
  --s-6:  64px;
  --s-7:  96px;
  --s-8: 128px;


  --s-band: clamp(64px, 12vh, 144px);

  --measure:       64ch;
  --measure-tight: 52ch;
}




.g {
  display: grid;
  grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
  column-gap: var(--g-gutter);
  width: var(--g-inner);
  margin-inline: auto;
}


:where(.g > *) { grid-column: 1 / -1; }
:where(.g .g)  { width: auto; margin-inline: 0; grid-column: 1 / -1; }


.c-1  { grid-column: span 1  } .c-2  { grid-column: span 2  }
.c-3  { grid-column: span 3  } .c-4  { grid-column: span 4  }
.c-5  { grid-column: span 5  } .c-6  { grid-column: span 6  }
.c-7  { grid-column: span 7  } .c-8  { grid-column: span 8  }
.c-9  { grid-column: span 9  } .c-10 { grid-column: span 10 }
.c-11 { grid-column: span 11 } .c-12 { grid-column: 1 / -1  }

.s-2  { grid-column-start: 2  } .s-3  { grid-column-start: 3  }
.s-4  { grid-column-start: 4  } .s-5  { grid-column-start: 5  }
.s-6  { grid-column-start: 6  } .s-7  { grid-column-start: 7  }
.s-8  { grid-column-start: 8  } .s-9  { grid-column-start: 9  }
.s-10 { grid-column-start: 10 }


.row-4 > * { grid-column: span 3 }
.row-3 > * { grid-column: span 4 }
.row-2 > * { grid-column: span 6 }

.measure       { max-width: var(--measure) }
.measure-tight { max-width: var(--measure-tight) }



@media (max-width: 1000px) {
  :root { --g-cols: 6; --g-gutter: 20px; }
  .c-4, .c-5, .c-6   { grid-column: span 3 }
  .c-7, .c-8, .c-9   { grid-column: span 4 }
  .c-10, .c-11       { grid-column: span 6 }
  .s-2, .s-3, .s-4, .s-5, .s-6,
  .s-7, .s-8, .s-9, .s-10 { grid-column-start: auto }
  .row-4 > * { grid-column: span 3 }
  .row-3 > * { grid-column: span 3 }
  .row-2 > * { grid-column: span 3 }
}

@media (max-width: 620px) {
  :root { --g-cols: 4; --g-gutter: 16px; }
  .c-1, .c-2, .c-3, .c-4, .c-5, .c-6,
  .c-7, .c-8, .c-9, .c-10, .c-11 { grid-column: 1 / -1 }
  .row-4 > *, .row-3 > *, .row-2 > * { grid-column: 1 / -1 }
}



.gridlines {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  display: none;
}
html.show-grid .gridlines { display: block }


.gridlines .cols {
  position: absolute; inset: 0;
  width: var(--g-inner); margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
  column-gap: var(--g-gutter);
}
.gridlines .cols i { background: rgba(210, 96, 63, .13); }


.gridlines .base {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom, rgba(210,96,63,.16) 0 1px, transparent 1px var(--s-1));
}


.gridlines .walls {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to right, rgba(90,190,255,.55) 0 1px, transparent 1px calc(var(--g-unit) * 3));
  background-position-x: calc((100% - var(--g-inner)) / 2);
}

.gridlines .tag {
  position: absolute; top: 8px; left: 8px;
  font: 500 11px/1 ui-monospace, monospace; letter-spacing: .08em;
  color: rgba(210,96,63,.95); text-transform: uppercase;
}