/* Layout grid: a faint dotted grid behind the page, with a ruler at the top and one on the left,
   to check alignment, widths and the spacing between titles and text. It is meant to be seen:
   anything that doesn't sit on a line shows up, horizontally and vertically.
   Columns follow the content width (.container): 12 on computers, 8 on tablets, 4 on phones.
   Rows are 2rem apart. The left ruler numbers every 4th row and has a small tick every 0.5rem,
   the step to measure text by: font sizes, line heights and the space between a title and its text.
   js/grid.js adds the rulers. To remove the grid, delete this file and js/grid.js, and their
   two lines in each page's <head>. */

:root {
  --grid-cols: 12;
  --grid-width: min(100% - 4rem, var(--container));
  --grid-row: 2rem;
  --grid-baseline: 0.5rem;
  --grid-line: rgb(124 58 237 / 0.28);
  --grid-mark: rgb(124 58 237 / 0.6);
  --grid-ruler: 0.875rem;
  --grid-ruler-left: 1.25rem;
}

body { position: relative; }

/* The grid lines, behind everything. Each line is dotted: one dot every 4px */
body::before,
body::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Columns: a line at each column's edge, across the content width */
body::before {
  left: 50%;
  right: auto;
  width: calc(var(--grid-width) + 1px);
  transform: translateX(-50%);
  background: repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px calc((100% - 1px) / var(--grid-cols)));
  -webkit-mask: repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 4px);
  mask: repeating-linear-gradient(to bottom, #000 0 1px, transparent 1px 4px);
}

/* Rows: a line every 2rem, from the top of the page */
body::after {
  background: repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px var(--grid-row));
  -webkit-mask: repeating-linear-gradient(to right, #000 0 1px, transparent 1px 4px);
  mask: repeating-linear-gradient(to right, #000 0 1px, transparent 1px 4px);
}

/* Top ruler: the column numbers, always in view while the page scrolls (under the menu) */
.grid-ruler-top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: var(--grid-ruler);
  border-bottom: 1px solid var(--grid-line);
  background: var(--bg-header);
  pointer-events: none;
}

.grid-ruler-cols {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  width: var(--grid-width);
  height: 100%;
  margin-inline: auto;
  box-shadow: 1px 0 0 var(--grid-mark);
}

.grid-ruler-cols > span {
  padding-left: 0.25rem;
  border-left: 1px solid var(--grid-mark);
  font: 500 0.5625rem / var(--grid-ruler) ui-monospace, Menlo, Consolas, monospace;
  color: var(--grid-mark);
}

/* Left ruler: a long tick and the row's number every 4 rows, a medium tick at every row and a
   small one every 0.5rem. It scrolls with the page, so the ticks stay on the row lines */
.grid-ruler-left {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 90;
  overflow: hidden;
  width: var(--grid-ruler-left);
  border-right: 1px solid var(--grid-line);
  background:
    repeating-linear-gradient(to bottom, var(--grid-mark) 0 1px, transparent 1px calc(var(--grid-row) * 4)) right / 100% 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--grid-mark) 0 1px, transparent 1px var(--grid-row)) right / 50% 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px var(--grid-baseline)) right / 20% 100% no-repeat,
    var(--bg-header);
  pointer-events: none;
}

/* One block per 4 rows, its number just under its long tick */
.grid-ruler-left > span {
  display: block;
  height: calc(var(--grid-row) * 4);
  padding: 0.125rem 0 0 0.125rem;
  font: 500 0.5rem / 1 ui-monospace, Menlo, Consolas, monospace;
  color: var(--grid-mark);
}

/* Tablets and phones turned sideways: 8 columns */
@media (max-width: 1023px) {
  :root { --grid-cols: 8; }
  .grid-ruler-cols > :nth-child(n + 9) { display: none; }
}

/* Phones: 4 columns. The left ruler would fill the content's whole left margin, so the page
   leaves its width free and the content keeps its usual margins in the rest: centered between
   the ruler and the right edge, 1.25rem narrower. The ruler drops its background, so the page
   shows through around its numbers. Without the grid, phones get their usual layout back. */
@media (max-width: 760px) {
  :root {
    --grid-cols: 4;
    --grid-width: min(100% - 2.5rem - var(--grid-ruler-left), var(--container));
  }

  body { padding-left: var(--grid-ruler-left); }
  body::before { left: calc(50% + var(--grid-ruler-left) / 2); }

  .grid-ruler-cols {
    margin-left: calc(var(--grid-ruler-left) + (100% - var(--grid-ruler-left) - var(--grid-width)) / 2);
    margin-right: 0;
  }

  .grid-ruler-cols > :nth-child(n + 5) { display: none; }
  .grid-ruler-left { background-color: transparent; border-right: 0; }
}

@media print {
  body::before,
  body::after,
  .grid-ruler-top,
  .grid-ruler-left { display: none; }
}