/* Genie site grid. One container for every page, nav and footer. Toggle the overlay with G. */
:root{
  --g-max:1280px;
  --g-margin:clamp(20px,5vw,80px);
  --g-gutter:24px;
  --g-cols:12;
  /* x of column 1's left line, for full-bleed tracks (carousels) that must start on the grid */
  --g-edge:calc((var(--g-vw,100vw) - min(var(--g-vw,100vw), var(--g-max) + 2 * var(--g-margin))) / 2 + var(--g-margin));
  /* one column's width, for carousel cards sized in columns */
  --g-col:calc((min(var(--g-vw,100vw), var(--g-max) + 2 * var(--g-margin)) - 2 * var(--g-margin) - (var(--g-cols) - 1) * var(--g-gutter)) / var(--g-cols));
}
@media (max-width:1023px){:root{--g-cols:8}}
@media (max-width:767px){:root{--g-cols:4;--g-gutter:16px}}

.g-wrap{width:100%;max-width:calc(var(--g-max) + 2 * var(--g-margin));margin-inline:auto;padding-inline:var(--g-margin);box-sizing:border-box}
.g-row{display:grid;grid-template-columns:repeat(var(--g-cols),minmax(0,1fr));column-gap:var(--g-gutter)}
.g-row > *{min-width:0}

/* standard layouts */
.g-head-title{grid-column:1 / 7}
.g-head-aside{grid-column:8 / 13}
.g-center{grid-column:3 / 11;text-align:center}
.g-text{grid-column:1 / 6}
.g-visual{grid-column:7 / 13}
.g-text-r{grid-column:8 / 13}
.g-visual-l{grid-column:1 / 7}
.g-span-3{grid-column:span 3}
.g-span-4{grid-column:span 4}
.g-span-6{grid-column:span 6}
.g-full{grid-column:1 / -1}
.g-read{max-width:none}

@media (max-width:1023px){
  .g-head-title,.g-head-aside,.g-text,.g-visual,.g-text-r,.g-visual-l{grid-column:1 / -1}
  .g-center{grid-column:2 / 8}
  .g-span-3,.g-span-4,.g-span-6{grid-column:span 4}
}
@media (max-width:767px){
  .g-center,.g-span-3,.g-span-4,.g-span-6{grid-column:1 / -1}
}

/* debug overlay (G key) */
#g-overlay{position:fixed;inset:0;z-index:2147483000;pointer-events:none;display:none}
#g-overlay.on{display:block}
#g-overlay .g-row{height:100%}
#g-overlay .g-row > i{display:block;height:100%;background:rgba(246,115,49,.12);box-shadow:inset 1px 0 rgba(246,115,49,.55),inset -1px 0 rgba(246,115,49,.55)}