/* ---- 12-column grid overlay ------------------------------------------------
   Visualises the real .container.grid system on every page. Reuses the exact
   layout tokens (--container / --gutter / --grid-gap / --grid-columns) via a
   real .container.grid, so the columns line up 1:1 with page content and track
   the 12 → 6 → 4 responsive step automatically. Toggle with "g" or ?grid
   (assets/js/grid-overlay.js). Standalone (not @import-ed) so ?mtime busts it. */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.grid-overlay.is-active {
  opacity: 1;
  visibility: visible;
}
.grid-overlay > .container {
  height: 100%;
}
/* Single full-height row; spans that wrap at the 6/4-col breakpoints collapse to 0. */
.grid-overlay > .container.grid {
  grid-template-rows: 100%;
  grid-auto-rows: 0;
}
.grid-overlay__col {
  height: 100%;
  background: rgba(255, 45, 85, 0.08);
  outline: 1px solid rgba(255, 45, 85, 0.22);
  outline-offset: -1px;
}

/* ---- Decorative grid guides ------------------------------------------------
   The always-on TTW "technical grid" motif, but column-accurate: faint lines whose
   VERTICALS track the real .container.grid (12 → 6 → 4) instead of a fixed-pitch
   repeating-gradient that drifts off the columns. Rendered by ttw_grid_guides() as a
   real .container.grid, full-bleed inside any position:relative host. Recolour via
   --grid-guides-line; set --grid-guides-row for the horizontal mesh pitch (0 hides it). */
.grid-guides {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: clip;
}
.grid-guides > .container {
  height: 100%;
}
.grid-guides > .container.grid {
  grid-template-rows: 100%;
  grid-auto-rows: 0;
}
.grid-guides__col {
  height: 100%;
  border-inline: 1px solid var(--grid-guides-line, rgba(255, 255, 255, 0.12));
}
/* Horizontal cross-lines — rows aren't part of the column system, so a fixed pitch is
   fine; matches the prior 80px mesh density. Set --grid-guides-row: 0 to draw columns only. */
.grid-guides::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--grid-guides-line, rgba(255, 255, 255, 0.12)) 0 1px,
    transparent 1px var(--grid-guides-row, 80px)
  );
}