/* page-tools.css — page-scoped styles for /tools/ (moved out of index.html 2026-09-06) */
    .elsewhere { margin-top: var(--space-8, 4rem); }
    .elsewhere-intro {
      max-width: 62ch;
      color: var(--color-muted);
      margin-bottom: var(--space-5);
    }
    .elsewhere-group {
      font-size: var(--text-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: #8a6a42;
      margin: var(--space-6) 0 var(--space-3);
      padding-bottom: var(--space-2);
      border-bottom: 1px solid var(--hairline);
    }
    .elsewhere-grid {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
      gap: var(--space-3);
    }
    .elsewhere-link {
      display: block;
      height: 100%;
      padding: var(--space-4);
      border: 1px solid var(--hairline);
      border-radius: var(--radius, 8px);
      background: var(--color-surface, #fff);
      text-decoration: none;
      color: inherit;
      transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }
    .elsewhere-link:hover,
    .elsewhere-link:focus-visible {
      border-color: #8a6a42;
      box-shadow: 0 6px 18px rgba(47, 59, 55, 0.10);
      transform: translateY(-2px);
    }
    .elsewhere-name {
      display: block;
      font-family: var(--font-display, Georgia, serif);
      font-size: 1.05rem;
      color: var(--color-ink);
      margin-bottom: 0.35rem;
    }
    /* Arrow sits after the name and slides on hover — the only motion, and it
       reads as "this leaves the site" without an icon font. */
    .elsewhere-name::after {
      content: " \2192";
      color: #8a6a42;
      display: inline-block;
      transition: transform 160ms ease;
    }
    .elsewhere-link:hover .elsewhere-name::after,
    .elsewhere-link:focus-visible .elsewhere-name::after { transform: translateX(4px); }
    .elsewhere-desc {
      display: block;
      font-size: var(--text-sm);
      line-height: 1.5;
      color: var(--color-muted);
    }
    @media (prefers-reduced-motion: reduce) {
      .elsewhere-link,
      .elsewhere-name::after { transition: none; }
      .elsewhere-link:hover, .elsewhere-link:focus-visible { transform: none; }
    }