/* The site's tokens, so the lab reads as the same hand; see gcamara-dev/src/styles/_tokens.scss. */
@font-face { font-family: 'Lexend Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/lexend-latin-wght-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'Big Shoulders Display Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/big-shoulders-display-latin-wght-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'Commit Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/commit-mono-latin-400-normal.woff2') format('woff2'); }
:root {
  --bg: #0b0b0e; --bg-2: #131318; --bg-3: #1b1b21;
  --fg: #f3f1ea; --fg-2: #b9b7b0; --fg-3: #6f6f78;
  --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.18);
  --accent: #f0a35a; --accent-2: #ffc27a; --accent-ink: #0b0b0e;
  --ok: #7fd39a; --bad: #f08a8a;
  --font-display: 'Big Shoulders Display Variable', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Lexend Variable', system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'Commit Mono', Consolas, Menlo, monospace;
  --radius: 4px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
body { padding: 0 16px 4rem; }
.wrap { max-width: 980px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 12px; padding: 20px 0; font: 400 12px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.brand a { color: var(--fg); text-decoration: none; }
.brand a:hover { color: var(--accent); }
.brand .sep { color: var(--fg-3); }
.eyebrow { font: 400 12px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
h1 { font: 800 clamp(40px, 6vw, 64px)/0.92 var(--font-display); margin: 10px 0 14px; letter-spacing: 0.005em; text-wrap: balance; }
h2 { font: 700 28px/1 var(--font-display); margin: 40px 0 12px; }
p { max-width: 68ch; margin: 0 0 12px; color: var(--fg-2); }
p b, strong { color: var(--fg); font-weight: 500; }
a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.2em; }
code { font: 400 0.9em var(--font-mono); background: var(--bg-3); padding: 1px 6px; border-radius: 3px; color: var(--fg); }
pre { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; overflow-x: auto; font: 400 13px/1.55 var(--font-mono); margin: 0 0 14px; }
pre code { background: none; padding: 0; }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 2px; background: transparent; color: var(--fg); font: 400 12px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.btn:hover:not(:disabled) { background: var(--bg-2); border-color: var(--fg); }
.btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240, 163, 90, 0.25); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }
.input, textarea.input { width: 100%; min-height: 36px; padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--bg-2); color: var(--fg); font: 400 15px/1.5 var(--font-body); }
textarea.input { font-family: var(--font-mono); font-size: 13px; }
.input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240, 163, 90, 0.25); }
label { display: block; font: 400 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 6px; }
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
a.card { display: block; color: inherit; text-decoration: none; transition: border-color 0.3s ease; }
a.card:hover { border-color: var(--line-2); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 24px 0; }
.card h3 { margin: 0 0 6px; font: 700 26px/1 var(--font-display); color: var(--fg); }
.card p { margin: 0 0 12px; font-size: 15px; }
.card .meta { font: 400 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.chip { display: inline-block; font: 400 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--fg-2); }
.chip.ok { color: var(--ok); border-color: currentColor; }
.chip.bad { color: var(--bad); border-color: currentColor; }
.quiet { color: var(--fg-3); font-size: 13px; }
footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font: 400 12px/1.6 var(--font-mono); color: var(--fg-3); letter-spacing: 0.04em; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }