/* ════════════════════════════════════════════════════════════════════════
   THE TOOLS PAGE — grid and cells
   ────────────────────────────────────────────────────────────────────────
   These rules used to live in css/lattice.css. Ethan asked five times for
   the lattice animation to go, so that stylesheet is no longer loaded here
   — but it also carried the tools grid, which meant removing it collapsed
   17 cells into a single 24,888px column with an unstyled decorative shape
   blown up across it. That is the "tools page is completely fucked" report.

   So the layout rules are lifted out and kept; the animation stays gone.
   lattice.css is still loaded by /technology and /tech, which do use it —
   nothing there changes.
   ════════════════════════════════════════════════════════════════════════ */



/* ── Tools grid (/tools) ──────────────────────────────────────────────────── */
/* Per-cell borders, NOT the usual gap+background trick. The list is 17 long
   and the grid is 4 wide, so the last row is partly empty — with a background
   showing through a 1px gap, those three empty positions rendered as a solid
   grey block that looked like a broken cell. Borders on the cells themselves
   mean an empty position simply has nothing in it, at every breakpoint.

   T-1120, 2026-08-14 — two measured faults on top of that:
     1. Inside the 1140px rail, four columns gave each cell 265 px, so
        .tools-cell__use had about 33 characters per line against a 45-82
        target. Every description broke into a ragged three-line block and the
        cells came out visibly uneven. The section is full-bleed now (its head
        moved onto the same gutter, see tools.html) and runs THREE columns:
        ~453 px a cell, ~60 characters a line.
     2. "Nothing in it" is still a hole. 17 cells over 4 columns left the last
        row one-filled and three-empty — a quarter-screen of dead ground under
        the grid at 1440. At three columns the remainder is 2, so the closing
        cell takes the spare column and the block ends square. */
.tools-head { padding: 0 clamp(1rem, 4vw, 2.5rem); }

.tools-head .sv-lede { max-width: 62ch; }


.tools-grid {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid rgba(245,241,232,.10);
}

@media (max-width: 1000px) { .tools-grid { grid-template-columns: repeat(2, 1fr); }}

@media (max-width: 560px) { .tools-grid { grid-template-columns: 1fr; }}

.tools-grid li {
  background: var(--ink);
  border-right: 1px solid rgba(245,241,232,.10);
  border-bottom: 1px solid rgba(245,241,232,.10);
}

/* The outer columns carry the page gutter so the cell text lines up with the
   section head above it rather than starting hard against the viewport edge. */
.tools-grid > li:nth-child(3n + 1) .tools-cell { padding-left: clamp(1rem, 4vw, 2.5rem); }

.tools-grid > li:nth-child(3n) .tools-cell { padding-right: clamp(1rem, 4vw, 2.5rem); }

@media (max-width: 1000px) {
  .tools-grid > li:nth-child(3n + 1) .tools-cell,
  .tools-grid > li:nth-child(3n) .tools-cell { padding-left: 1.4rem; padding-right: 1.4rem; }
  .tools-grid > li:nth-child(2n + 1) .tools-cell { padding-left: clamp(1rem, 4vw, 2.5rem); }
  .tools-grid > li:nth-child(2n) .tools-cell { padding-right: clamp(1rem, 4vw, 2.5rem); }}

@media (max-width: 560px) {
  .tools-grid > li .tools-cell { padding-left: clamp(1rem, 4vw, 2.5rem); padding-right: clamp(1rem, 4vw, 2.5rem); }}

.tools-cell { display: block; padding: 1.6rem 1.4rem; text-decoration: none; height: 100%; transition: background 220ms var(--ease-out-expo); }

a.tools-cell:hover, a.tools-cell:focus-visible { background: rgba(200,16,46,.07); outline: none; }

/* Real vendor logo per cell, ported 2026-08-07 from tnaado.com's BrandLogo.tsx
   (T-0713 batch — Ethan: "add the icons/logos for each tool like on
   tnaado.com"). Same monochrome-via-currentColor treatment: one ink colour
   for all 17 marks so the row reads as one family rather than a sponsor
   wall, same reasoning as that file's own comment. Empty tile stays the
   same size if a vendor is ever added with no accurate mark to extract. */
.tools-cell__icon { display: block; width: 1.6rem; height: 1.6rem; margin-bottom: .85rem; color: var(--on-black); }

.tools-cell__name { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; color: var(--on-black); margin-bottom: .55rem; }

.tools-cell__use { display: block; font-family: var(--font-body); font-size: .845rem; line-height: 1.55; color: rgba(245,241,232,.58); }

a.tools-cell .tools-cell__name::after { content: " \2197"; font-size: .7em; color: var(--red-text); opacity: 0; transition: opacity 200ms ease; }

a.tools-cell:hover .tools-cell__name::after, a.tools-cell:focus-visible .tools-cell__name::after { opacity: 1; }

[data-theme="light"] .tools-grid { border-top-color: rgba(26,21,16,.14); border-left-color: rgba(26,21,16,.14); }

[data-theme="light"] .tools-grid li { border-right-color: rgba(26,21,16,.14); border-bottom-color: rgba(26,21,16,.14); }

[data-theme="light"] .tools-cell__use { color: rgba(26,21,16,.64); }

@media (prefers-reduced-motion: reduce) { .tools-cell, a.tools-cell .tools-cell__name::after { transition: none; }}


/* ── T.02 closing link ─────────────────────────────────────────────────────
   Was a bare inline style on a second .inner placed BELOW the film band, so
   the one call to action on the section floated ~300 px away from the
   sentence that earns it with dead ground above and below. It belongs to the
   copy block; the band closes the section. */
.tools-open__go { margin: 1.6rem 0 0; }

/* ────────────────────────────────────────────────────────────────────────
   THE CELLS ON A LIGHT GROUND
   The grid was written when this section sat on ink, so every cell painted
   `background: var(--ink)` and set its type to --on-black. The section is
   bone now, and .t-light correctly forces descendant type to ink — which
   put ink type on a black cell and made all 17 unreadable.

   Cells go light too. The grid is still legible as a grid because the
   hairlines are what separate the cells, not the fill — which is the
   quieter version of the same idea and does not fight the page.
   ──────────────────────────────────────────────────────────────────────── */
.t-lite .tools-grid,
.t-light .tools-grid { border-top-color: var(--sys-rule-light); }

.t-lite .tools-grid li,
.t-light .tools-grid li {
  background: transparent;
  border-right-color: var(--sys-rule-light);
  border-bottom-color: var(--sys-rule-light);
}

.t-lite a.tools-cell:hover, .t-lite a.tools-cell:focus-visible,
.t-light a.tools-cell:hover, .t-light a.tools-cell:focus-visible {
  background: rgba(200,16,46,.05);
}

.t-lite .tools-cell__icon, .t-light .tools-cell__icon,
.t-lite .tools-cell__name, .t-light .tools-cell__name { color: var(--sys-ink); }

.t-lite .tools-cell__use, .t-light .tools-cell__use { color: var(--sys-mute-light); }

.t-lite a.tools-cell .tools-cell__name::after,
.t-light a.tools-cell .tools-cell__name::after { color: var(--sys-red-on-light); }

/* ────────────────────────────────────────────────────────────────────────
   THE HERO
   Type only. The headline used to be painted inside the lattice canvas, so
   removing that animation took the page's h1 with it and left /tools opening
   on a decorative band. Nothing here loads, animates or measures anything.
   ──────────────────────────────────────────────────────────────────────── */
.tls-hero {
  background: var(--sys-bone);
  color: var(--sys-ink);
  padding-block: clamp(3.4rem, 8vw, 7rem) clamp(2.6rem, 5vw, 4.2rem);
}
.tls-hero .eyebrow { color: var(--sys-red-on-light); }
.tls-hero .eyebrow-rule { background: var(--sys-red-on-light); }

.tls-hero__h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 1.2rem 0 0;
  text-wrap: balance;
}
.tls-hero__h1 em { font-style: italic; color: var(--sys-red-on-light); }

.tls-hero__lede {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.62;
  color: var(--sys-mute-light);
  max-width: 56ch;
  margin: 1.5rem 0 0;
}

/* The three figures are the proof the headline is not just a claim. Mono,
   small, on one rule — a footer to the hero rather than a second heading. */
.tls-hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem;
  margin-top: 2.4rem; padding-top: 1.4rem;
  border-top: 1px solid var(--sys-rule-light);
  font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sys-mute-light);
}
.tls-hero__meta b { font-weight: 400; color: var(--sys-ink); }