/* Design tokens: change a value here and it changes everywhere it's used.
   Breakpoints can't be variables in CSS, so they're listed instead: phone < 700px, two-column wall < 1100px,
   home intro and About photo go side by side from 1000px. */
:root {
  --hover-dim: 0.85;  /* images darken 15% on hover */
  /* Colour */
  --bg: #000000;
  --fg: #EDEDE8;
  --soft: #CFCFC9;
  --muted: #9A9A94;
  --line: #1F1F1F;
  --header-glow: rgba(0, 108, 255, 0.20);    /* the soft cursor-blue wash behind the top bar, fading to black */
  --rule: #3A3A38;            /* horizontal rules between commissions and above the pager */
  --frame: #262626;           /* hairline around images so dark artwork keeps an edge on the black page */
  --tile: #161616;
  --accent: #FF61E3;
  --cursor: #006CFF;          /* the cursor square and one of the pixel-trail colours (site.js reads it) */
  --scrim: rgba(0, 0, 0, 0.82);
  --lightbox: rgba(0, 0, 0, 0.96);
  --backdrop: rgba(0, 0, 0, 0.9);

  /* Type families */
  --serif: "EB Garamond", Georgia, serif;    /* Louize-like old-style serif (free); was Newsreader */
  --display: var(--serif);
  --sans: Inter, system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Type scale */
  --text-label: 12px;                         /* mono labels, numbers, meta */
  --text-small: 13px;                         /* project type, secondary lines */
  --text-ui: 14px;                            /* links, captions, lists */
  --text-body: 15px;
  --text-list: 16px;                          /* About client list */
  --text-lead: 21px;                          /* project description, About bio (EB Garamond runs small) */
  --text-intro: clamp(21px, 1.88vw, 27px);    /* home bio */
  --text-email: 27px;
  --text-row: var(--text-title);              /* Index view titles (archived) */
  --text-title: max(22px, calc(var(--text-wordmark) * 0.75)); /* project headings: always below the wordmark, above the description */
  --text-wordmark: clamp(26px, 2.76vw, 46px); /* the name, top left on every page */
  --tracking-label: 0.06em;
  --tracking-title: -0.01em;
  --weight-display: 400;      /* wordmark and titles */

  /* Baseline grid: every line height, gap and padding is a multiple of --baseline, so text keeps one rhythm
     down the page. Press G on any page (or add ?grid to the address) to see it. */
  --baseline: 4px;
  --lh-label: 16px;           /* 12px labels */
  --lh-ui: 20px;              /* 13–14px links, captions */
  --lh-list: 24px;            /* 14px lists: capabilities, clients, credits */
  --lh-body: 24px;            /* 15px body */
  --lh-lead: 28px;            /* 20px description, About bio */
  --lh-email: 36px;
  --lh-intro: round(up, calc(var(--text-intro) * 1.3), var(--baseline));   /* 36px at the full 27px */
  --lh-row: round(up, calc(var(--text-row) * 1.1), var(--baseline));
  --lh-title: round(up, calc(var(--text-title) * 1.05), var(--baseline));
  --lh-wordmark: round(up, var(--text-wordmark), var(--baseline));

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 72px;
  --gutter: var(--space-7);   /* page edge */
  --cols: 12;                 /* layout columns: 12 on desktop, 8 on tablets, 4 on phones */
  --col-gap: var(--space-6);  /* space between columns */
  --gutter-top: var(--space-6);
  --tap: 44px;                /* smallest button */

  /* Gallery wall */
  --wall-gap-x: var(--col-gap);
  --wall-gap-y: var(--space-10);
  --wall-drop-2: 0px;         /* how far the middle column starts below the first (0: the first row is top-aligned) */
  --wall-drop-3: 0px;

  /* Shape and motion */
  --radius-pill: 999px;
  --ease-pop: cubic-bezier(0, 0, 0, 1);
  --pop: 0.2s;                /* pop-in length, and the gap between columns */
  --fade: 0.15s;

  color-scheme: dark;
}
@media (max-width: 1099px) {
  :root { --cols: 8; }
}
@media (max-width: 699px) {
  :root { --gutter: 20px; --gutter-top: var(--space-5); --text-wordmark: 6vw; --wall-gap-y: var(--space-8); --cols: 4; --col-gap: var(--space-4); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: linear-gradient(to bottom, var(--header-glow), transparent 280px) no-repeat, var(--bg); color: var(--fg); font-family: var(--sans); font-size: var(--text-body); line-height: var(--lh-body); }
a { color: var(--fg); text-decoration: none; }
a:hover, a:focus-visible { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shared text styles */
/* Small text is always the mono label: 12px capitals */
.facts h2, .credits h2, .home-head h2, .about h2, .filters button, .view-pill, .back, .meta, .tile .type, .row-meta, .lb-count {
  font-family: var(--mono); font-size: var(--text-label); line-height: var(--lh-label); font-weight: 400; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted);
}
.title, .about h1 { margin: 0; font-family: var(--display); font-size: var(--text-title); line-height: var(--lh-title); font-weight: var(--weight-display); letter-spacing: var(--tracking-title); }
/* Wrap paragraphs evenly; the build also ties each one's last two words together, so no line is a lone word */
p, h1, h2, li, figcaption { text-wrap: pretty; }
.desc, .bio { margin: 0; font-family: var(--serif); font-size: var(--text-lead); line-height: var(--lh-lead); font-weight: 400; color: var(--soft); }

/* Layout: name and links across the top, work full width below */
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); padding: var(--gutter-top) var(--gutter) 0; }
.topbar nav { margin-left: auto; }
.content { min-width: 0; padding: var(--gutter); display: flex; flex-direction: column; gap: var(--space-7); }
/* The wordmark is the same on every page (an h1 on the home page only); nudged up so the letter tops line up with
   the links, and pulled back by the same amount underneath so the page below stays on the baseline grid */
.wordmark { --nudge: calc(12px - 0.255em - (var(--lh-wordmark) - 1em) / 2); margin: var(--nudge) 0 calc(-1 * var(--nudge)); font-family: var(--display); font-size: var(--text-wordmark); line-height: var(--lh-wordmark); font-weight: var(--weight-display); white-space: nowrap; }
.links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1) var(--space-5); font-size: var(--text-ui); line-height: var(--lh-ui); }
.links a { display: inline-block; padding: 6px 0; }
.links a[aria-current="page"] { color: var(--accent); }
.menu-btn { display: none; }
@media (max-width: 699px) {
  .topbar { gap: var(--space-3); }
  .content { padding: var(--gutter-top) var(--gutter); }
  /* Phones: the links fold into a Menu pill fixed to the bottom of the screen; it opens into a small sheet above it */
  .js .menu-btn { display: block; position: fixed; left: 50%; bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2001; min-height: var(--tap); padding: 0 var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--scrim); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: var(--text-ui); line-height: var(--lh-ui); cursor: pointer; }
  .js .menu-btn[aria-expanded="true"] { color: var(--accent); }
  .js .links { position: fixed; left: 50%; bottom: calc(var(--space-5) + var(--tap) + var(--space-2) + env(safe-area-inset-bottom)); z-index: 2001; min-width: 200px; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) 0; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); text-align: center; opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity var(--fade) ease, transform var(--fade) ease, visibility 0s linear var(--fade); }
  .js .links a { display: block; padding: var(--space-3) var(--space-5); font-size: var(--text-lead); line-height: var(--lh-lead); }
  .js .menu-open .links { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity var(--fade) ease, transform var(--fade) ease; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  .js .links, .js .menu-open .links { transition: none; transform: translate(-50%, 0); }
}

/* Home intro: a short bio with pink keywords, plain fact lists beside it */
.intro { display: grid; gap: var(--space-7); padding: var(--space-2) 0 var(--space-7); }
@media (min-width: 1000px) { .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--col-gap); align-items: start; } }
/* desktop: the intro runs 4 of the 12 columns; the two lists sit in the last 5 */
@media (min-width: 1100px) {
  .intro { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .intro-main { grid-column: 1 / span 4; }
  .intro-lists { grid-column: 8 / span 5; }
  .intro .intro-bio { max-width: none; }
}
.intro-main { display: flex; flex-direction: column; gap: var(--space-6); }
.intro-bio { margin: 0; max-width: 640px; font-family: var(--serif); font-size: var(--text-intro); line-height: var(--lh-intro); color: var(--soft); }
.intro-bio em { font-style: normal; color: var(--accent); }
.intro-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.facts h2 { margin: 0 0 var(--space-2); }
.facts ul { margin: 0; padding: 0; list-style: none; font-size: var(--text-ui); line-height: var(--lh-list); }

/* Home grid */
.home-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.home-head h2 { margin: 0; }
.home-section { margin-top: var(--space-8); }
.view .grid[hidden], .home-section[hidden] { display: none; }
.view .grid + .grid { margin-top: calc(var(--wall-gap-y) - var(--space-7)); }  /* the Art Direction wall follows with the same gap as tiles in a column */
.filters { display: flex; gap: var(--space-1); margin-left: calc(-1 * var(--space-3)); }  /* pulled left by the button padding so ALL lines up with the page edge */
.filters button { background: none; border: 0; padding: var(--space-2) var(--space-3); min-height: 36px; cursor: pointer; }
.filters button[aria-pressed="true"] { color: var(--accent); }
.filters button:hover { color: var(--accent); }
/* Gallery wall: covers keep their own proportions; site.js deals them into columns that start
   at different heights, and each tile has its own width (--w, set by build.py) and side */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wall-gap-y) var(--wall-gap-x); align-items: start; }
@media (max-width: 1099px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.grid[data-cols] { position: relative; display: flex; align-items: flex-start; gap: var(--wall-gap-x); }  /* relative: site.js measures tiles against it */
.grid .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--wall-gap-y); }
.grid[data-cols="3"] .col:nth-child(2) { padding-top: var(--wall-drop-2); }
.grid[data-cols="3"] .col:nth-child(3) { padding-top: var(--wall-drop-3); }
.grid[data-cols="2"] .col:nth-child(2) { padding-top: var(--wall-drop-2); }
.tile { display: flex; flex-direction: column; gap: var(--space-3); width: var(--w, 100%); }
.tile.end { align-self: flex-end; }
.tile.lead { align-self: flex-start; }  /* the first tile on the wall always starts at the left edge, under the tabs */
@media (max-width: 699px) { .tile { width: 100%; } }
.tile[hidden] { display: none; }
.thumb { margin: 0; background: var(--tile); overflow: hidden; }
.thumb img, .thumb video { width: 100%; height: auto; }
/* hover: any image dims slightly (--hover-dim) */
.thumb img, .thumb video, .gallery img, .gallery video { transition: filter var(--fade) ease; }
.tile:hover .thumb img, .tile:hover .thumb video, .tile:focus-visible .thumb img, .tile:focus-visible .thumb video,
.gallery img:hover, .gallery video:hover, .shot:focus-visible img { filter: brightness(var(--hover-dim)); }
.thumb[data-crop] { position: relative; }
.thumb[data-crop] img, .thumb[data-crop] video { position: absolute; top: 0; left: 0; max-width: none; width: calc(100% / var(--cw)); height: auto; translate: calc(-100% * var(--cx)) calc(-100% * var(--cy)); }
.cap { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-ui); line-height: var(--lh-ui); }
.tile .type { margin-top: calc(-1 * var(--space-2)); }
.tile:hover .t, .tile:focus-visible .t { color: var(--accent); }

/* Home views: Grid / Index, switched by the butterfly button (archived: VIEW_TOGGLE in build.py) */
.view[hidden] { display: none; }
.view { display: flex; flex-direction: column; gap: var(--space-7); }
.view-toggle { display: none; position: sticky; bottom: var(--space-5); align-self: flex-start; align-items: center; gap: var(--space-3); z-index: 5; }
.js .view-toggle { display: flex; }
.view-btn { width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--scrim); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.view-btn img { width: 22px; height: 22px; transition: transform var(--pop) ease; }
.view-btn:hover img { transform: scale(1.2); }
.view-pill { display: flex; gap: var(--space-5); padding: 7px var(--space-3); border-radius: var(--radius-pill); background: var(--scrim); border: 1px solid var(--line); }
.view-pill .on { color: var(--accent); }
.rows { margin: 0; padding: 0; list-style: none; max-width: 820px; }
.rows li[hidden] { display: none; }
.row { display: grid; grid-template-columns: var(--space-7) minmax(0, 1fr); align-items: baseline; gap: var(--space-1) var(--space-4); padding: var(--space-4) 0 calc(var(--space-4) - 1px); border-bottom: 1px solid var(--line); }
.row .num { font-family: var(--mono); font-size: var(--text-label); line-height: var(--lh-label); color: var(--muted); }
.row-title { font-family: var(--display); font-size: var(--text-row); line-height: var(--lh-row); font-weight: var(--weight-display); }
.row-meta { grid-column: 2; }
.row:hover .row-title, .row:focus-visible .row-title { color: var(--accent); }
.row-preview { position: fixed; right: var(--gutter); top: 50%; transform: translateY(-50%); width: min(30vw, 440px); aspect-ratio: 4 / 5; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity var(--fade) ease; z-index: 4; }
.row-preview.show { opacity: 1; }
@media (min-width: 1100px) and (hover: hover) { .view[data-view="index"] .rows { max-width: 52%; } }
@media (max-width: 1099px), (hover: none) {
  .row-preview { display: none; }
  .row { grid-template-columns: var(--space-6) minmax(0, 1fr); }
}

/* Pop-in on scroll (after Studio Dumbar): each row snaps in from 80%, left column first, then the next */
.js .pop .col { --i: 1; }
.js .pop .col:nth-child(2) { --i: 2; }
.js .pop .col:nth-child(3) { --i: 3; }
.js .pop .tile { opacity: 0; transform: scale(0.8); transition: transform var(--pop) var(--ease-pop) calc(var(--pop) * var(--i, 1)), opacity 0s linear calc(var(--pop) * var(--i, 1) + 0.05s); }
.js .pop .tile.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .pop .tile { opacity: 1; transform: none; transition: none; }
}

/* Project page */
/* title block on the left, credits on the right, both starting at the top */
.project-head { display: grid; gap: var(--space-7); }
.content > .project-head { margin-top: var(--space-9); }  /* breathing room under the wordmark on every project page */
@media (max-width: 699px) { .content > .project-head { margin-top: var(--space-7); } }
@media (min-width: 1000px) { .project-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--col-gap); align-items: start; } }
.project-intro { display: flex; flex-direction: column; gap: var(--space-4); }
.project-intro .project-desc { margin-top: var(--space-2); }
.project-intro .lead-story { margin-top: var(--space-7); }
.headline { color: var(--fg); }  /* article headlines on art direction pages: in quotes, full white */  /* an art direction page's first headline, under the description */
.project-desc { display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; }
.desc a { color: var(--accent); }
.desc a:hover { text-decoration: underline; }
.credits h2 { margin: 0 0 var(--space-2); }
.credits ul { margin: 0; padding: 0; list-style: none; font-size: var(--text-ui); line-height: var(--lh-list); color: var(--soft); }
.meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.meta + .title { margin-top: calc(var(--space-2) - var(--space-4)); }  /* client line sits 8px above the title */
.gallery { --gallery-gap: var(--col-gap); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gallery-gap); grid-auto-flow: dense; }
.gallery > * { grid-column: span 6; margin: 0; }
.gallery > .half { grid-column: span 3; }
.gallery > .third { grid-column: span 2; }
.gallery > .spots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--gallery-gap) / 2); }
.spots > * { margin: 0; }
/* a headline (and its credits) above a group of images in a collection */
.gallery > .story { align-items: start; }
/* each commission on an art direction page starts under a rule, like the pager */
.gallery > .story { border-top: 1px solid var(--rule); padding-top: calc(var(--space-7) - 1px); }
.gallery > .story:not(:first-child) { margin-top: var(--space-7); }
@media (max-width: 699px) {
  .gallery > .half { grid-column: span 6; }
  .gallery > .third { grid-column: span 3; }
  .gallery > .spots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gallery img, .gallery video { width: 100%; height: auto; background: var(--tile); }
.gallery img, .gallery video, .thumb img, .thumb video { outline: 1px solid var(--frame); outline-offset: -1px; }
.shot { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pager { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: calc(var(--space-5) - 1px); font-size: var(--text-ui); line-height: var(--lh-ui); }

/* Lightbox */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: var(--space-4); border: 0; background: var(--lightbox); color: var(--fg); }
.lightbox[open] { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; grid-template-rows: 56px minmax(0, 1fr) var(--space-7); align-items: center; justify-items: center; }
.lightbox::backdrop { background: var(--backdrop); }
.lb-count { grid-column: 1 / 3; grid-row: 1; justify-self: start; padding-left: var(--space-2); }
.lb-close { grid-column: 3; grid-row: 1; }
.lb-prev { grid-column: 1; grid-row: 2; }
.lb-next { grid-column: 3; grid-row: 2; }
.lb-img { grid-column: 2; grid-row: 2; max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-btn { width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--fg); }
.lb-btn:hover { color: var(--accent); }
.lb-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* About: text blocks and cut-outs scattered over the 12-column grid (arranged on the design canvas,
   About v3). Desktop: every piece sits in the same grid cell, placed by column and by a top offset
   (--y, its px position at 1440 wide) that scales with the page width and snaps to the baseline.
   Phones and tablets: one column, the cut-outs alternating sides between the blocks. */
.about { display: flex; flex-direction: column; gap: var(--space-7); }
.scatter { gap: var(--space-9); padding-bottom: var(--space-10); }
.ab { max-width: 520px; }
.ab-contact .email { display: block; font-family: var(--sans); font-size: var(--text-lead); line-height: var(--lh-lead); }
.ab-clients .clients { font-size: var(--text-list); }
.about-art { display: block; height: auto; pointer-events: none; }
.art-violets { width: 56%; align-self: flex-end; }
.art-butterfly { width: 60%; }
/* the text column (bio, contact, butterfly, clients) stacks in its own flow, so a longer bio never runs into what follows */
.ab-col { display: flex; flex-direction: column; gap: var(--space-9); }
@media (min-width: 1100px) {
  .scatter { container-type: inline-size; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .scatter > * { grid-row: 1; align-self: start; margin-top: round(calc(var(--y, 0) * 100cqw / 1360), var(--baseline)); }
  .scatter > h1 { grid-row: auto; margin: 0; }
  .ab { max-width: none; }
  /* a cut-out's box height is rounded up to the baseline so nothing near it drifts off the grid */
  .scatter .about-art { width: calc(100% * var(--scale, 1)); --w: calc(((100cqw - 11 * var(--col-gap)) / 12 * var(--span) + (var(--span) - 1) * var(--col-gap)) * var(--scale, 1)); height: round(up, calc(var(--w) * var(--ratio)), var(--baseline)); object-fit: contain; }
  .ab-col        { grid-column: 7 / span 6; --y: 132; gap: var(--space-8); }
  .ab-col .about-art { width: var(--w); }
  .art-butterfly { --span: 3; }
  .ab-col .ab-clients { max-width: calc((100% - var(--col-gap)) * 5 / 6); margin-top: calc(var(--space-6) - var(--space-8)); }  /* 5 of the 6 columns; sits 32px under the butterfly */
  .art-violets   { grid-column: 1 / span 5; --span: 5; --scale: 0.85; --y: 92; }  /* 85% of its 5 columns, left edge on the grid */
}
.about h2 { margin: 0 0 var(--space-3); }
.clients { margin: 0; font-size: var(--text-ui); line-height: var(--lh-list); }
.email { font-family: var(--serif); font-size: var(--text-email); line-height: var(--lh-email); color: var(--accent); }
.email:hover { text-decoration: underline; }

/* Custom cursor: a 5px square in --cursor, the same size as the pixel-dust trail; site.js draws it into --cursor-img */
@media (hover: hover) {
  html, a, button, .filters button, .lb-btn { cursor: var(--cursor-img, auto); }
}

/* Grid overlay: press G, or add ?grid to the address. Cyan lines: every baseline (faint) and every 4 baselines;
   pink bands: the layout columns. Each line is its own tile, so they stay evenly spaced down the whole page */
.show-grid body { position: relative; }
.show-grid body::after {
  content: ""; position: absolute; inset: 0; z-index: 2000; pointer-events: none;
  background-image: linear-gradient(rgba(0, 240, 255, 0.45) 1px, transparent 1px), linear-gradient(rgba(0, 240, 255, 0.14) 1px, transparent 1px);
  background-size: 100% calc(var(--baseline) * 4), 100% var(--baseline);
}
.grid-overlay { display: none; }
.show-grid .grid-overlay {
  position: absolute; top: 0; bottom: 0; left: var(--gutter); right: var(--gutter); z-index: 1999; pointer-events: none;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--col-gap);
}
.grid-overlay span { background: rgba(255, 97, 227, 0.07); box-shadow: inset 1px 0 rgba(255, 97, 227, 0.3), inset -1px 0 rgba(255, 97, 227, 0.3); }
@media (max-width: 1099px) { .grid-overlay span:nth-child(n + 9) { display: none; } }
@media (max-width: 699px) { .grid-overlay span:nth-child(n + 5) { display: none; } }