.grid-surface {
  position: relative;
  --grid-origin: 0px;
  --grid-field-width: 100%;
  --grid-cell: var(--grid-cell-target);
  --grid-columns: 12;
  --grid-icon-span: 1;
  --grid-icon-scale: 0.65;
}

.grid-surface:has(.grid-canvas) {
  padding: 0;
}

.band {
  margin-left: var(--band-left, var(--page-gutter));
  width: var(--band-width, calc(100% - 2 * var(--page-gutter)));
  max-width: 100%;
  min-width: 0;
}

.grid-canvas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  grid-auto-rows: var(--grid-cell);
  width: var(--grid-field-width);
  margin-left: var(--grid-origin);
  /* Paint the perimeter without subtracting pixels from the grid tracks. */
  box-shadow: inset 1px 1px 0 var(--grid-line);
}

.grid-block,
.grid-icon {
  min-width: 0;
}

.grid-icon {
  box-shadow: inset -1px -1px 0 var(--grid-line);
}

.grid-block {
  position: relative;
  z-index: 2;
  min-height: 0;
  background: var(--paper);
  outline: 1px solid var(--grid-line-strong);
  outline-offset: -0.5px;
}

.grid-index,
.grid-intro {
  padding: clamp(1.25rem, 3vw, 3rem);
}

.grid-index {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 0.6rem;
  background: var(--ink);
  color: var(--white);
  outline: none;
}

.grid-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(1rem, 2vw, 1.75rem);
}

.grid-icon {
  z-index: 1;
  display: grid;
  place-items: center;
  background: var(--paper);
  opacity: 0.04;
}

.grid-icon img {
  width: calc(var(--grid-cell) * var(--grid-icon-span) * var(--grid-icon-scale));
  height: calc(var(--grid-cell) * var(--grid-icon-span) * var(--grid-icon-scale));
}

@media (hover: hover) and (pointer: fine) {
  .grid-icon {
    transition: opacity 160ms ease;
  }

  .grid-icon:hover {
    opacity: 0.46;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grid-icon {
    transition-duration: 100ms;
  }
}

/* Visibility never participates in measurement or block placement. */
[data-grid-visibility="invisible"] .grid-canvas { box-shadow: none; }
[data-grid-visibility="invisible"] .grid-icon { visibility: hidden; }
[data-grid-visibility="invisible"] .grid-block { outline-color: transparent; }

/* Opt in with ?grid-debug=1 or data-grid-debug on a single surface. */
:root[data-grid-debug] [data-grid-surface]::after,
[data-grid-surface][data-grid-debug]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background-image:
    linear-gradient(#ef476f, #ef476f),
    linear-gradient(#ef476f, #ef476f),
    repeating-linear-gradient(to right, #00a6c855 0 1px, transparent 1px var(--grid-cell)),
    repeating-linear-gradient(to bottom, #00a6c855 0 1px, transparent 1px var(--grid-cell));
  background-size: 2px 100%, 2px 100%, var(--grid-field-width) 100%, var(--grid-field-width) 100%;
  background-position: var(--content-spine) 0, calc(var(--band-left) + var(--band-width)) 0, var(--grid-origin) 0, var(--grid-origin) 0;
  background-repeat: no-repeat;
}

/* Cached decoration is independent of layout tracks and content interaction. */
.portfolio-ui .grid-cached-layer {
  position: absolute; left: 0; top: 0; z-index: 1;
  pointer-events: none; display: block;
}
.portfolio-ui .grid-hover-cell {
  position: absolute; z-index: 1; pointer-events: none;
  margin: 0; box-shadow: none; background: transparent;
}
[data-grid-visibility="invisible"] .grid-cached-layer { visibility: hidden; }