/* Design tokens, reset, and shared page chrome (wrap, header, cards, footer).
   Each tool links this, then adds its own styles. Fonts are loaded per page in
   the head so the preconnect hints work. */

:root{
  color-scheme:dark;

  --paper:#12181B;      /* page background */
  --surface:#1B2328;    /* cards */
  --ink:#E6ECEA;        /* primary text */
  --ink-soft:#A6B0AC;   /* secondary text */
  --ink-faint:#869089;  /* captions, placeholders (>=4.5:1 on surfaces) */
  --accent:#4C9BE6;     /* links, focus, headline figures */
  --accent-soft:#16242E;/* tinted highlight backgrounds */
  --line:#2C363B;
  --line-strong:#3B474D;

  --font-sans:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --font-serif:"Fraunces",Georgia,serif;

  --wrap:720px;         /* content column width; pages may override */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--paper);color:var(--ink);line-height:1.5;
  padding:22px 16px 60px;
}

.wrap{max-width:var(--wrap);margin:0 auto}

/* Top nav, injected by shared/site.js. Aligned to the content column via --wrap. */
.site-nav{max-width:var(--wrap);margin:2px auto 20px;padding-bottom:12px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.site-nav__brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink-soft);font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em}
.site-nav__brand:hover{color:var(--ink)}
.site-nav__brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.site-nav__mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--accent);color:#0E1417;font-weight:600;font-size:10.5px;letter-spacing:.02em}
.site-nav__name{font-weight:500}
/* Category buttons, built from the catalog by shared/site.js. */
.site-nav__links{margin-left:auto;display:flex;gap:6px}
.site-nav__link{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink-soft);padding:6px 10px;border-radius:8px;border:1px solid transparent;transition:color .15s ease,border-color .15s ease}
.site-nav__link:hover{color:var(--ink);border-color:var(--line-strong)}
.site-nav__link[aria-current="page"]{color:var(--accent);border-color:var(--line-strong)}
.site-nav__link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Shared button, ghost style. */
.btn{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-radius:8px;padding:8px 12px;border:1px solid var(--line-strong);background:transparent;color:var(--ink-soft);transition:color .15s ease,border-color .15s ease,background .15s ease}
.btn:hover{color:var(--ink);border-color:var(--ink-faint)}
.btn:active{background:var(--accent-soft)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

header{margin:10px 2px 22px}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:11px}
h1{font-family:var(--font-serif);font-weight:600;font-size:clamp(28px,7.5vw,40px);line-height:1.05;letter-spacing:-.01em}
.sub{color:var(--ink-soft);font-size:14.5px;margin-top:13px;max-width:50ch}

.label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 18px;margin-top:16px}
.card > .label{margin-bottom:16px}

/* Catalog cards, rendered by shared/site.js. `a.tool` is a full-card link. */
.section-label{display:block;margin:26px 2px 12px;text-decoration:none}
.section-label:first-child{margin-top:8px}
a.section-label:hover{color:var(--ink-soft)}
a.section-label:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.tool{
  display:block;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px 18px;margin-bottom:12px;
  transition:border-color .15s ease, transform .15s ease;
}
.tool:hover{border-color:var(--accent);transform:translateY(-1px)}
.tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tool .kicker{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.tool h2{font-family:var(--font-serif);font-weight:600;font-size:21px;line-height:1.15;letter-spacing:-.01em}
.tool p{color:var(--ink-soft);font-size:13.5px;margin-top:7px}
.tool .go{display:inline-flex;align-items:center;gap:6px;margin-top:13px;font-size:13px;font-weight:500;color:var(--accent)}

/* Catalog grid: cards flow into columns as width allows, one column on mobile.
   Section labels span the full row. Used by the homepage and /category pages. */
.catalog{display:grid;align-items:start;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.catalog .section-label{grid-column:1/-1;margin:26px 2px 4px}
.catalog .section-label:first-child{margin-top:8px}
.catalog .tool{margin-bottom:0}
.catalog .empty{grid-column:1/-1}

/* Empty/not-found state, e.g. a category with no pages yet. */
.empty{color:var(--ink-soft);font-size:14px;margin-top:16px}

/* Footer, injected by shared/site.js. Aligned to the content column via --wrap. */
footer{max-width:var(--wrap);margin:26px auto 0;font-size:11.5px;color:var(--ink-faint);text-align:center;line-height:1.7}
footer a{color:var(--ink-soft)}