Dear your team,

// @ts-check
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  site: 'https://hire.aftongauntlett.com',
  build: {
    // Inline all CSS into the HTML document to eliminate render-blocking stylesheet requests.
    inlineStylesheets: 'always',
  },
});

# Agent Quickstart

If you are an AI coding agent working in this repository, read these files in order:

1. docs/PROJECT_BRIEF.md
2. docs/STANDARDS.md
3. docs/WCAG_2.2_CHECKLIST.md
4. docs/prd/ (read all current PRDs before implementing)

## Project Intent

This is a fully static personal application microsite for Afton Gauntlett — no backend, no forms, no auth, no CMS. See docs/PROJECT_BRIEF.md for full scope.

Build style:

- Static Astro site
- Token-based CSS themes (dark theme as default)
- Reusable components
- Accessibility-first UI

## Required Workflow for Agents

1. Confirm the mission, audience, and core pages.
2. Reuse existing components before creating new ones.
3. For form selects, use `src/components/ui/StyledDropdown.astro` instead of ad-hoc/native-styled dropdown implementations.
4. For actions and surfaces, use `src/components/ui/Button.astro` and `src/components/ui/Card.astro` before creating one-off variants.
5. If icons are needed and no icon primitive exists, create a reusable icon component first, then use it everywhere.
6. Keep styles tokenized and theme-aware.
7. Maintain semantic HTML and keyboard accessibility.
8. Add tests for new logic.
9. Run full validation before finishing:
   - npm run validate
10. Ensure commit-time checks pass:
   - npm run precommit:check

## Default Deliverables

- Updated page content and components
- Updated docs for setup or architecture changes
- Passing checks (typecheck, lint, tests, build)

# PRD-08: Runtime Company Name via Query Param

**Phase:** 2

Status: Complete 
Completed: 2026-04-17 2:00am 

---

## Goal

Replace the build-time `COMPANY.targetName` constant with a runtime URL query param (`?to=CompanyName`) so the same deployed URL can be personalised per recipient — no rebuild required per company.

This lets Afton send `https://yoursite.com?to=Stripe` to one company and `https://yoursite.com?to=Vercel` to another, with each link showing the correct company name in the headline, typewriter animation, and page title.

---

## How It Works

The site is fully statically built. There is no server to read query params before rendering. The solution is:

1. The build still outputs a static page with a fallback company name (e.g. `"your team"`)
2. A small client-side script reads `?to=` from `window.location.search` on page load
3. It replaces the visible company name in the DOM before the first paint (or as early as possible)
4. The `<title>` is also updated via `document.title`
5. The typewriter animation reads from the now-updated DOM value, not the build-time value

The page degrades gracefully: without `?to=`, it shows the fallback text and still makes complete sense.

---

## Scope

- Update `src/config/site.ts`: change `COMPANY.targetName` to a fallback string (e.g. `"your team"`)
- Update `src/components/sections/Hero.astro`:
  - The static `<h1>` renders with the fallback: `Dear your team,`
  - The `data-target` attribute on the typewriter span uses the fallback
  - A new inline `<script>` reads `?to=` and patches both the visible `<h1>` text node and `data-target` before the animation runs
- Update `src/pages/index.astro`: page `<title>` defaults to fallback; client script also patches `document.title`
- Update `src/layouts/BaseLayout.astro` if `<title>` is set there rather than in index
- No other sections currently reference `COMPANY.targetName` — confirm this before closing

### Files to change
- `src/config/site.ts` — update `targetName` fallback value
- `src/components/sections/Hero.astro` — add param-reading script, patch DOM and `data-target`
- `src/pages/index.astro` — confirm title source; patch `document.title` in script if needed

---

## Out of Scope

- No server-side rendering
- No analytics or tracking of per-link opens (that's a separate concern)
- No URL encoding of spaces (instruct Afton to use `+` or `%20` in links, e.g. `?to=Booz+Allen`)
- No persistence (no localStorage — each visit reads the param fresh)

---

## Implementation Detail: Hero Script

The typewriter animation reads `data-target` off the span element. The patch script must run **before** the animation initialises. The safest approach is an inline `<script>` tag placed immediately after the `<h1>` block — it runs synchronously before the rest of the DOM is parsed, so the animation script (which fires on `DOMContentLoaded` or equivalent) always sees the patched value.

```js
// Inline script in Hero.astro — runs synchronously before animation init
(function () {
  const params = new URLSearchParams(window.location.search);
  const company = params.get('to');
  if (!company) return;

  // Patch the visible h1 text
  const headline = document.querySelector('.hero-headline');
  if (headline) headline.textContent = `Dear ${company},`;

  // Patch the typewriter data-target so animation types the right name
  const typewriter = document.querySelector('[data-target]');
  if (typewriter) typewriter.setAttribute('data-target', company);

  // Patch the page title
  document.title = `Dear ${company} — Afton Gauntlett`;
})();
```

**Why inline and not deferred:** A deferred or module script runs after parsing, which means the animation could initialise before the patch runs and type the fallback name. Inline runs synchronously.

**XSS note:** The company name from `?to=` is inserted via `.textContent` (not `.innerHTML`), which is safe — no HTML injection possible. `document.title` assignment is also safe.

---

## Fallback Behaviour

| Scenario | What the reader sees |
|---|---|
| `yoursite.com` (no param) | "Dear your team," |
| `yoursite.com?to=Stripe` | "Dear Stripe," |
| `yoursite.com?to=Booz+Allen` | "Dear Booz Allen," |
| `yoursite.com?to=<script>` | "Dear &lt;script&gt;," (textContent escapes it) |

---

## Vercel Setup

**Nothing needs to change in Vercel.** The site is already deployed as a static build. Vercel serves the same `index.html` for every request to `/`. The query param is handled entirely in the browser — Vercel never sees it.

### Steps to confirm it works after deploying

1. Deploy the updated build as normal (`git push` → Vercel auto-deploys)
2. Visit `https://yoursite.com?to=TestCompany` in a browser
3. Confirm the `<h1>` reads "Dear TestCompany," and the typewriter types it
4. Confirm `document.title` in DevTools reads "Dear TestCompany — Afton Gauntlett"
5. Visit `https://yoursite.com` (no param) — confirm fallback text displays

---

## How to Share Links

### Format
```
https://yoursite.com?to=CompanyName
```

### Rules
- **Single word:** `?to=Stripe` — works as-is
- **Multiple words:** Use `+` or `%20` for spaces: `?to=Booz+Allen` or `?to=Booz%20Allen`
- **Avoid special characters** in company names (`&`, `#`, `=`) — they'll break the param. In practice, almost no company name contains these.
- **Case is preserved** — `?to=stripe` shows "stripe", so capitalise intentionally: `?to=Stripe`

### Tracking opens (optional, not in scope)

The query param approach means you can't tell who clicked your link unless you add tracking. Some lightweight options (out of scope here, for future consideration):
- **Bit.ly / short.io** — create one short link per company, each pointing to `?to=CompanyName`. The shortlink service tracks clicks.
- **UTM params** — add `&utm_source=Stripe` alongside `?to=Stripe` and read it in a free analytics tool like Plausible or Fathom.

### One-link-per-company discipline

Even though the same URL can serve everyone, you still want to **send a unique link per company** so you can track engagement. The cleanest approach is a link shortener:

| Company | Long URL | Short Link |
|---|---|---|
| Stripe | `yoursite.com?to=Stripe` | `short.io/afton-stripe` |
| Vercel | `yoursite.com?to=Vercel` | `short.io/afton-vercel` |

This way you know which company clicked, when, and how many times — without any backend.

---

## Acceptance Criteria

- [x] `?to=Stripe` → headline reads "Dear Stripe," and typewriter types "Stripe"
- [x] `?to=Booz+Allen` → headline reads "Dear Booz Allen,"
- [x] No `?to=` param → headline reads "Dear your team," (or chosen fallback)
- [x] `document.title` updates to match the param value
- [x] No flash of wrong company name before animation starts
- [x] XSS: `?to=<img src=x onerror=alert(1)>` renders as literal text, no script executes
- [x] `npm run typecheck`, `npm run lint`, `npm run test` all pass
- [x] Verified working on Vercel production deploy (not just local)

{
  "name": "template",
  "type": "module",
  "version": "0.0.1",
  "engines": {
    "node": ">=22.12.0"
  },
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "prepare": "node scripts/install-hooks.mjs",
    "typecheck": "astro check",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "test": "vitest run",
    "test:watch": "vitest",
    "knip": "knip",
    "precommit:check": "npm run typecheck && npm run lint && npm run test && npm run knip",
    "hooks:install": "node scripts/install-hooks.mjs",
    "validate": "npm run typecheck && npm run lint && npm run test && npm run build",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  },
  "dependencies": {
    "@lottiefiles/dotlottie-web": "^0.71.0",
    "@lucide/astro": "^1.8.0",
    "astro": "^6.1.7"
  },
  "devDependencies": {
    "@astrojs/check": "^0.9.4",
    "@eslint/js": "^10.0.1",
    "@types/jsdom": "^28.0.1",
    "@types/node": "^24.7.2",
    "@vitest/coverage-v8": "^3.2.4",
    "eslint": "^10.2.0",
    "eslint-plugin-astro": "^1.7.0",
    "jsdom": "^26.1.0",
    "knip": "^6.4.1",
    "prettier": "^3.8.3",
    "prettier-plugin-astro": "^0.14.1",
    "typescript": "^5.9.3",
    "typescript-eslint": "^8.58.2",
    "vitest": "^3.2.4"
  }
}

---
import { APPLICANT } from '../../config/site';
import BrandIcon from '../ui/BrandIcon.astro';
import Icon from '../ui/Icon.astro';
import { FileText, Mail, ArrowUp, Globe } from '@lucide/astro';

const year = new Date().getFullYear();
---

<footer class="site-footer">
  <div class="site-footer-inner container">

    <div class="footer-brand">
      <p class="footer-name">{APPLICANT.name}</p>
      <p class="footer-role">{APPLICANT.title}</p>
    </div>

    <nav aria-label="Footer links" class="footer-social">
      <ul role="list">
        <li>
          <a
            href={APPLICANT.github}
            class="footer-icon-link"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="GitHub profile"
            title="GitHub"
          >
            <BrandIcon name="github" size={18} />
          </a>
        </li>
        <li>
          <a
            href={APPLICANT.linkedin}
            class="footer-icon-link"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="LinkedIn profile"
            title="LinkedIn"
          >
            <BrandIcon name="linkedin" size={18} />
          </a>
        </li>
        <li>
          <a
            href={APPLICANT.website}
            class="footer-icon-link"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Portfolio website"
            title="Portfolio"
          >
            <Icon icon={Globe} size={18} />
          </a>
        </li>
        <li>
          <a
            href={APPLICANT.resume}
            class="footer-icon-link"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="View résumé"
            title="Résumé"
          >
            <Icon icon={FileText} size={18} />
          </a>
        </li>
        <li>
          <a
            href={`mailto:${APPLICANT.email}`}
            class="footer-icon-link"
            aria-label="Send email"
            title={APPLICANT.email}
          >
            <Icon icon={Mail} size={18} />
          </a>
        </li>
      </ul>
    </nav>

  </div>

  <div class="footer-bottom container">
    <p class="footer-copy">© {year} {APPLICANT.name}</p>
    <a href={`mailto:${APPLICANT.email}`} class="footer-email-link">{APPLICANT.email}</a>
    <a href="#top" class="footer-back-to-top" aria-label="Back to top">
      <Icon icon={ArrowUp} size={14} aria-hidden="true" />
      Back to top
    </a>
  </div>
</footer>

<script is:inline>
  (function () {
    const btn = document.querySelector('.footer-back-to-top');
    if (btn) {
      btn.addEventListener('click', function (e) {
        e.preventDefault();
        window.scrollTo({ top: 0, behavior: 'smooth' });
        history.replaceState(null, '', window.location.pathname);
      });
    }
  })();
</script>

---
import { APPLICANT } from '../../config/site';
import ThemePicker from './ThemePicker.astro';
import Icon from '../ui/Icon.astro';
import { Menu, X } from '@lucide/astro';

const nav = [
  { href: '#about',       label: 'About' },
  { href: '#teams',       label: 'Impact' },
  { href: '#looking-for', label: 'Looking For' },
  { href: '#how-i-work',  label: 'My Work' },
  { href: '#stack',       label: 'Stack' },
  { href: '#ai',          label: 'AI' },
  { href: '#start',       label: 'Setup' },
];

const currentPath = Astro.url.pathname;
const isHomePage = currentPath === '/';
---

<header class="site-header" id="site-header">
  <div class="site-header-inner container">
    <a href={isHomePage ? '#top' : '/'} class="brand" aria-label={isHomePage ? 'Back to top' : 'Home'}>
      <span class="brand-name">{APPLICANT.name}</span>
    </a>

    <nav id="primary-nav" aria-label="Primary" class="site-nav">
      <ul>
        {nav.map((item) => {
          const isAnchor = item.href.startsWith('#');
          const isPageLink = !isAnchor;
          const resolvedHref = isAnchor && !isHomePage ? `/${item.href}` : item.href;
          const isCurrentPage = isPageLink && currentPath === item.href;
          return (
            <li>
              <a
                href={resolvedHref}
                data-nav-href={isAnchor && isHomePage ? item.href : undefined}
                aria-current={isCurrentPage ? 'page' : undefined}
                class:list={[{ 'is-active': isCurrentPage }]}
              >
                {item.label}
              </a>
            </li>
          );
        })}
      </ul>
    </nav>

    <div class="header-end">
      <ThemePicker />
      <button
        id="nav-toggle"
        class="nav-toggle"
        type="button"
        aria-expanded="false"
        aria-controls="primary-nav"
        aria-label="Open navigation menu"
      >
        <span class="nav-toggle-icon nav-toggle-icon--open" aria-hidden="true">
          <Icon icon={Menu} size={20} />
        </span>
        <span class="nav-toggle-icon nav-toggle-icon--close" aria-hidden="true">
          <Icon icon={X} size={20} />
        </span>
      </button>
    </div>
  </div>
</header>

<script is:inline>
  (function () {
    // ── Active nav via IntersectionObserver ───────────────────────
    const links = Array.from(
      document.querySelectorAll('.site-nav a[data-nav-href]')
    );

    let activeId = '';

    function setActive(id) {
      if (id === activeId) return;
      activeId = id;
      links.forEach((a) => {
        const isActive = a.getAttribute('data-nav-href') === '#' + id;
        a.classList.toggle('is-active', isActive);
        a.setAttribute('aria-current', isActive ? 'true' : 'false');
      });
    }

    // ── Brand link: smooth scroll to top without adding #top to URL ────
    const brandLink = document.querySelector('.brand[href="#top"]');
    if (brandLink) {
      brandLink.addEventListener('click', (e) => {
        e.preventDefault();
        window.scrollTo({ top: 0, behavior: 'smooth' });
        history.replaceState(null, '', window.location.pathname);
      });
    }

    // ── Immediate active on click ─────────────────────────────────
    links.forEach((a) => {
      a.addEventListener('click', () => {
        const id = a.getAttribute('data-nav-href')?.replace('#', '');
        if (id) setActive(id);
      });
    });

    // ── IntersectionObserver for scroll-based active ──────────────
    // Must wait for DOMContentLoaded: this script runs before <main> sections
    // are parsed, so getElementById returns null if called immediately.
    if ('IntersectionObserver' in window && links.length > 0) {
      document.addEventListener('DOMContentLoaded', function () {
        const sectionIds = links
          .map((a) => a.getAttribute('data-nav-href')?.replace('#', ''))
          .filter(Boolean);

        const sections = sectionIds
          .map((id) => document.getElementById(id))
          .filter(Boolean);

        if (sections.length > 0) {
          const observer = new IntersectionObserver(
            (entries) => {
              entries.forEach((entry) => {
                if (entry.isIntersecting) setActive(entry.target.id);
              });
            },
            { rootMargin: '-20% 0px -60% 0px', threshold: 0 }
          );

          sections.forEach((s) => observer.observe(s));
        }
      });
    }

    // ── Hamburger toggle ──────────────────────────────────────────
    const header = document.getElementById('site-header');
    const toggle = document.getElementById('nav-toggle');
    const navEl  = document.getElementById('primary-nav');

    if (!(header && toggle && navEl)) return;

    // Set initial inert state in mobile mode so keyboard can't reach hidden links.
    // Only applies when the hamburger is visible (toggle is not display:none).
    if (getComputedStyle(toggle).display !== 'none') {
      navEl.setAttribute('inert', '');
    }

    function openNav() {
      header.classList.add('nav-open');
      toggle.setAttribute('aria-expanded', 'true');
      toggle.setAttribute('aria-label', 'Close navigation menu');
      navEl.removeAttribute('inert');
    }

    function closeNav() {
      header.classList.remove('nav-open');
      toggle.setAttribute('aria-expanded', 'false');
      toggle.setAttribute('aria-label', 'Open navigation menu');
      navEl.setAttribute('inert', '');
    }

    toggle.addEventListener('click', () => {
      if (header.classList.contains('nav-open')) {
        closeNav();
      } else {
        openNav();
      }
    });

    // Close when a nav link is tapped (mobile only — guard against setting inert on desktop)
    navEl.addEventListener('click', (e) => {
      if (e.target instanceof HTMLAnchorElement && header.classList.contains('nav-open')) closeNav();
    });

    // Close on outside click
    document.addEventListener('click', (e) => {
      if (header.classList.contains('nav-open') && !header.contains(e.target)) {
        closeNav();
      }
    });

    // Close on Escape
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && header.classList.contains('nav-open')) {
        closeNav();
        toggle.focus();
      }
    });
  })();
</script>

---
import { THEMES } from '../../config/site';
import Icon from '../ui/Icon.astro';
import { Palette } from '@lucide/astro';

const themes = [...THEMES];
---

<button
  id="theme-toggle"
  class="theme-toggle"
  type="button"
  aria-label="Switch color theme"
  title="Switch color theme"
  data-themes={themes.join(',')}
>
  <Icon icon={Palette} size={18} />
</button>

<script is:inline>
  (function () {
    const key = 'site-theme';
    const btn = document.getElementById('theme-toggle');
    if (!(btn instanceof HTMLButtonElement)) return;

    const themes = (btn.dataset.themes ?? '').split(',').filter(Boolean);
    if (themes.length === 0) return;

    let saved = null;
    try { saved = localStorage.getItem(key); } catch { /* storage unavailable */ }
    const current = document.documentElement.dataset.theme ?? '';
    const initial =
      saved && themes.includes(saved)
        ? saved
        : themes.includes(current)
          ? current
          : themes[0];

    document.documentElement.dataset.theme = initial;

    btn.addEventListener('click', () => {
      const idx = themes.indexOf(document.documentElement.dataset.theme ?? '');
      const next = themes[(idx + 1) % themes.length];
      document.documentElement.dataset.theme = next;
      try { localStorage.setItem(key, next); } catch { /* storage unavailable */ }
      btn.setAttribute('aria-label', `Switch color theme (current: ${next})`);
    });

    btn.setAttribute('aria-label', `Switch color theme (current: ${initial})`);
  })();
</script>

---
import Icon from '../ui/Icon.astro';
import { FingerprintPattern } from '@lucide/astro';
---

<section id="about" class="about-section fade-up" aria-labelledby="about-heading">
  <div class="container">
    <div class="section-intro">
      <h2 id="about-heading" class="about-heading">
        <Icon icon={FingerprintPattern} size={28} aria-hidden="true" class="about-icon" />
        A bit about me
      </h2>
    </div>
    <p class="about-body">
      I'm a frontend engineer with six years of experience, no CS degree, and a background that
      goes through nursing, paralegal work, and a photo lab before landing in tech. I started with
      a bootcamp in 2020 and spent four years at Booz Allen Hamilton before going independent.
      I think like a designer and build like an engineer.
    </p>
  </div>
</section>

<style>
  .about-section {
    padding-block: var(--space-16);
  }

  .about-heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
  }

  .about-icon {
    color: var(--tone-text-muted);
  }

  .section-intro {
    margin-block-end: var(--space-8);
    text-align: center;
  }

  .about-body {
    max-width: 62ch;
    margin-inline: auto;
    font-size: 1.2rem;
    line-height: 1.75;
    color: var(--tone-text);
    text-align: center;
  }
</style>

---
/**
 * CodeExplorer — single-repo file browser used in the HowIWork section.
 *
 * No tab sidebar — one view, the full project tree.
 * Highlighted files are marked in the tree with the theme's primary accent color.
 * All data is pre-rendered at build time; JS only handles show/hide state.
 */
import type { ResolvedView } from '../../utils/github';
import FileTree from '../ui/FileTree.astro';
import CodePane from '../ui/CodePane.astro';

interface Props {
  view: ResolvedView;
  highlighted?: string[];
}

const { view, highlighted = [] } = Astro.props;

function getDefaultPath(rv: ResolvedView): string {
  const filePaths = rv.files.map((f) => f.path);
  if (rv.view.defaultFile && filePaths.includes(rv.view.defaultFile)) {
    return rv.view.defaultFile;
  }
  const sorted = [...filePaths].sort((a, b) => a.localeCompare(b));
  return sorted[0] ?? '';
}

const defaultPath = getDefaultPath(view);
---

<div class="code-explorer" aria-label="Code explorer">

  <!-- Small-screen fallback note -->
  <p class="explorer-small-note">
    The code explorer is best viewed on a wider screen. Come back on a tablet or desktop to browse the source.
  </p>

  <!-- Mobile: tree in a disclosure widget above the code pane -->
  <details class="tree-disclosure" aria-label="File tree">
    <summary class="tree-disclosure-summary">
      <span class="tree-disclosure-label">Files</span>
      <span class="tree-disclosure-filename" aria-hidden="true">{defaultPath}</span>
    </summary>
    <div class="tree-disclosure-body">
      <FileTree
        entries={view.tree}
        selectedPath={defaultPath}
        viewId={view.view.id}
        highlighted={highlighted}
      />
    </div>
  </details>

  <!-- Desktop: side-by-side layout -->
  <div class="explorer-layout">
    <div class="tree-pane" aria-label="File tree">
      <FileTree
        entries={view.tree}
        selectedPath={defaultPath}
        viewId={view.view.id}
        highlighted={highlighted}
      />
    </div>
    <div class="code-pane-wrap">
      <CodePane
        files={view.files}
        defaultPath={defaultPath}
        viewId={view.view.id}
      />
    </div>
  </div>

</div>

<style>
  .code-explorer {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  /* ── Small-screen fallback ──────────────────────────────────── */
  .explorer-small-note {
    display: none;
    text-align: center;
    color: var(--tone-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    padding: var(--space-8) var(--space-6);
    border: 1px solid var(--tone-border);
    border-radius: var(--radius-md);
    background: var(--tone-surface);
  }

  @media (max-width: 560px) {
    .explorer-small-note {
      display: block;
    }

    .tree-disclosure,
    .explorer-layout {
      display: none !important;
    }
  }

  /* ── Mobile disclosure ──────────────────────────────────────── */
  .tree-disclosure {
    border: 1px solid var(--tone-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .tree-disclosure-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--tone-card-header);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    list-style: none;
    user-select: none;
  }

  .tree-disclosure-summary::-webkit-details-marker {
    display: none;
  }

  .tree-disclosure-summary::before {
    content: '▶';
    font-size: 0.6rem;
    transition: transform 120ms ease;
    color: var(--tone-text-muted);
  }

  details[open] .tree-disclosure-summary::before {
    transform: rotate(90deg);
  }

  .tree-disclosure-label {
    color: var(--tone-text-muted);
  }

  .tree-disclosure-filename {
    color: var(--tone-primary);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
  }

  .tree-disclosure-body {
    padding: var(--space-3);
    background: var(--tone-surface);
    border-top: 1px solid var(--tone-border);
    max-height: 18rem;
    overflow-y: auto;
  }

  /* ── Desktop two-pane layout ────────────────────────────────── */
  .explorer-layout {
    display: none;
    gap: 0;
    height: clamp(36rem, 72vh, 56rem);
    border: 1px solid var(--tone-border);
    border-radius: var(--radius-md);
    background: var(--tone-surface);
    overflow: hidden;
  }

  .tree-pane {
    width: 240px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--tone-border);
    padding: var(--space-3);
  }

  .code-pane-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  @media (min-width: 768px) {
    .tree-disclosure {
      display: none;
    }

    .explorer-layout {
      display: flex;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tree-disclosure-summary::before {
      transition: none;
    }
  }
</style>

<script>
  const maybeExplorer = document.querySelector<HTMLElement>('.code-explorer');
  if (!maybeExplorer) throw new Error('CodeExplorer: .code-explorer not found');
  // Capture as a definitely-non-null reference so closures below don't lose the narrowing.
  const explorer: HTMLElement = maybeExplorer;

  // ── File selection from FileTree clicks ─────────────────────────────
  function handleFileSelect(path: string) {
    explorer
      .querySelectorAll<HTMLElement>('[data-code-pane] .code-pane-file')
      .forEach((article) => {
        const isTarget = article.dataset.filePath === path;
        article.hidden = !isTarget;
        article.classList.toggle('code-pane-file--active', isTarget);
      });

    const summaryFilename = explorer.querySelector<HTMLElement>(
      '.tree-disclosure-filename',
    );
    if (summaryFilename) summaryFilename.textContent = path;
  }

  explorer.addEventListener('file-selected', (e: Event) => {
    const { path } = (e as CustomEvent<{ path: string; viewId: string }>).detail;
    handleFileSelect(path);
  });
</script>

---
import { Image } from 'astro:assets';
import { COMPANY } from '../../config/site';
import Button from '../ui/Button.astro';
import headshotImg from '../../assets/images/afton-headshot.png';
import littleAftonImg from '../../assets/images/little-afton.webp';

// The placeholder is always the "joke" text the animation types first.
// Hardcoded so the gag works even when targetName is already the real company.
const PLACEHOLDER_NAME = 'Company';
---

<section id="top" class="hero" aria-label="Introduction">
  <div class="container hero-container">

    {/* ── Left: headshot ───────────────────────────────────────── */}
    <div class="hero-image-col fade-up" style="--fade-delay: 0" aria-hidden="true">
      <div class="hero-image-wrap" id="hero-img-wrap">
        <div class="hero-img-container" id="hero-img-container">
          <Image
            src={headshotImg}
            alt="Afton Gauntlett professional headshot"
            class="hero-photo hero-photo--pro"
            widths={[380, 760, 1140]}
            sizes="585px"
            quality={90}
            loading="eager"
            fetchpriority="high"
            decoding="async"
            draggable="false"
          />
          <Image
            src={littleAftonImg}
            alt="Young Afton, circa early-90s"
            class="hero-photo hero-photo--little"
            widths={[380, 760]}
            sizes="380px"
            loading="lazy"
            decoding="async"
            draggable="false"
          />
        </div>
        <p class="hero-photo-caption">
          <span class="hero-caption-text" id="hero-caption-text"></span>
        </p>
      </div>
    </div>

    {/* ── Right: text content ──────────────────────────────────── */}
    <div class="hero-content fade-up" style="--fade-delay: 1">
      {/* Accessible, always-present H1 — screen reader source of truth */}
      <h1 class="hero-headline">Dear {COMPANY.targetName},</h1>

      {/* Visual typewriter overlay — aria-hidden, never read by AT */}
      <p class="hero-headline hero-typewriter" aria-hidden="true">
        Dear <span class="hero-bracket">[</span><span
          class="typewriter-target"
          data-target={COMPANY.targetName}
          data-placeholder={PLACEHOLDER_NAME}></span><span class="hero-bracket">]</span>,
      </p>

      <p class="hero-subhead">
        I built this instead of recording a video. I hope this gives you a better sense of who I am and what I can bring to your team.
      </p>

      <div class="hero-cta">
        <Button href="#start">Learn more</Button>
        <Button href="#looking-for" variant="outline">Let's talk</Button>
      </div>
    </div>

  </div>

</section>

<style>
  /* ─── Section ────────────────────────────────────────────────── */

  .hero {
    position: relative;
    min-height: 70dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--space-12);
  }

  /* ─── Two-column grid ────────────────────────────────────────── */

  .hero-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: var(--space-16);
    align-items: center;
  }

  /* ─── Image column ───────────────────────────────────────────── */

  .hero-image-col {
    display: flex;
    justify-content: center;
  }

  /* ─── Headshot wrap + image swap ─────────────────────────────── */

  .hero-image-wrap {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .hero-img-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 24px color-mix(in srgb, var(--tone-text) 10%, transparent);
  }

  .hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    transition: opacity 1.5s ease;
    user-select: none;
    -webkit-user-drag: none;
  }

  .hero-photo--pro {
    opacity: 1;
  }

  .hero-photo--little {
    opacity: 0;
  }

  .hero-img-container.is-little-afton .hero-photo--pro {
    opacity: 0;
  }

  .hero-img-container.is-little-afton .hero-photo--little {
    opacity: 1;
  }

  /* ─── Hover caption / easter-egg text ────────────────────────── */

  .hero-photo-caption {
    min-height: 5rem;
    font-size: 0.875rem;
    color: var(--tone-text-muted);
    line-height: 1.6;
    font-style: italic;
    text-align: center;
  }

  .hero-caption-text.is-active::after {
    content: '|';
    color: var(--tone-primary);
    animation: caption-caret-blink 0.7s step-end infinite;
  }

  @keyframes caption-caret-blink {
    50% {
      opacity: 0;
    }
  }

  /* ─── Content column ─────────────────────────────────────────── */

  .hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  /* ─── Headline shared styles ─────────────────────────────────── */

  .hero-headline {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--tone-text);
    margin: 0;
  }

  /* ─── Typewriter overlay (default: hidden, no-JS safe) ───────── */

  .hero-typewriter {
    display: none;
  }

  /* ─── With JS: visually hide real H1, show overlay ───────────── */

  :global(.js) .hero-headline:not(.hero-typewriter) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  :global(.js) .hero-typewriter {
    display: block;
  }

  /* ─── Bracket styling ────────────────────────────────────────── */

  .hero-bracket {
    color: var(--tone-text-muted);
  }

  /* ─── Typing caret ───────────────────────────────────────────── */

  .typewriter-target::after {
    content: '|';
    color: var(--tone-primary);
    animation: hero-caret-blink 0.7s step-end infinite;
  }

  @keyframes hero-caret-blink {
    50% {
      opacity: 0;
    }
  }

  /* ─── Subheadline ────────────────────────────────────────────── */

  .hero-subhead {
    font-size: 1.15rem;
    color: var(--tone-text-muted);
    max-width: 38rem;
    line-height: 1.65;
  }

  /* ─── CTA cluster ────────────────────────────────────────────── */

  .hero-cta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
  }

  /* ─── Mobile: single column, image on top ────────────────────── */

  @media (max-width: 700px) {
    .hero {
      min-height: unset;
      padding-block: var(--space-12);
    }

    .hero-container {
      grid-template-columns: 1fr;
      gap: var(--space-6);
    }

    .hero-image-col {
      display: none;
    }

    .hero-cta {
      justify-content: flex-end;
    }
  }

  /* ─── Reduced motion ─────────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    /* Skip typewriter entirely — show plain H1, hide overlay */
    .hero-typewriter {
      display: none !important;
    }

    .hero-photo {
      transition: none;
    }

    .hero-caption-text.is-active::after {
      animation: none;
    }

    :global(.js) .hero-headline:not(.hero-typewriter) {
      position: static !important;
      inline-size: auto !important;
      block-size: auto !important;
      margin: 0 !important;
      overflow: visible !important;
      clip: auto !important;
      clip-path: none !important;
      white-space: normal !important;
    }

    .typewriter-target::after {
      animation: none;
    }
  }
</style>

<script>
  import { initializeCompanyTargeting } from '../../utils/companyTargeting';

  const company = initializeCompanyTargeting({
    window,
    document,
    applicantName: 'Afton Gauntlett',
  });

  const section = document.querySelector<HTMLElement>('.hero');
  const targetEl = document.querySelector<HTMLElement>('.typewriter-target');

  if (company && section && targetEl) {
    const placeholder = targetEl.dataset.placeholder ?? 'Company';
    const finalTarget = targetEl.dataset.target ?? '';

    const markDone = (): void => {
      section.classList.add('hero--done');
    };

    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      // CSS handles this: overlay is hidden, real H1 is shown statically.
      // No JS needed — just don't start the animation.
    } else {
      const TYPE_SPEED = 70; // ms per character (typing)
      const ERASE_SPEED = 45; // ms per character (backspacing — slightly faster)
      const INITIAL_DELAY = 500; // ms before we start typing the joke name
      const PAUSE_ON_JOKE = 1400; // ms to hold "Your Company" before erasing

      const typeChars = (text: string, onDone: () => void): void => {
        let i = 0;
        const tick = (): void => {
          if (i < text.length) {
            targetEl.textContent = text.slice(0, ++i);
            setTimeout(tick, TYPE_SPEED);
          } else {
            onDone();
          }
        };
        tick();
      };

      const eraseChars = (onDone: () => void): void => {
        const tick = (): void => {
          const current = targetEl.textContent ?? '';
          if (current.length > 0) {
            targetEl.textContent = current.slice(0, -1);
            setTimeout(tick, ERASE_SPEED);
          } else {
            onDone();
          }
        };
        tick();
      };

      // Sequence: wait → type joke → pause → erase → type real name → done
      setTimeout(() => {
        typeChars(placeholder, () => {
          setTimeout(() => {
            eraseChars(() => {
              // Brief gap between erasing and re-typing feels natural
              setTimeout(() => {
                typeChars(finalTarget, markDone);
              }, 200);
            });
          }, PAUSE_ON_JOKE);
        });
      }, INITIAL_DELAY);
    }
  }

  // ── Photo easter egg ─────────────────────────────────────────────
  const imgWrap = document.getElementById('hero-img-wrap');
  const imgContainer = document.getElementById('hero-img-container');
  const captionEl = document.getElementById('hero-caption-text');

  if (
    imgWrap instanceof HTMLElement &&
    imgContainer instanceof HTMLElement &&
    captionEl instanceof HTMLElement &&
    !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  ) {
    const PRO_CAPTION =
      'This is my super professional headshot that AI glamourized. Click the image 3 times to get a glimpse of my personality.';
    const LITTLE_CAPTION = "Still silly, just more professional now!";
    const TYPE_SPEED = 40;   // ms per char — typing
    const ERASE_SPEED = 18;  // ms per char — erasing (faster feels right)
    const EASTER_EGG_DURATION = 20_000; // ms before fading back to pro

    let timer: ReturnType<typeof setTimeout> | null = null;
    let isEasterEggActive = false;
    let isHovering = false;
    let clickCount = 0;
    let clickResetTimer: ReturnType<typeof setTimeout> | null = null;
    let fadeBackTimer: ReturnType<typeof setTimeout> | null = null;

    const stopTimer = (): void => {
      if (timer !== null) { clearTimeout(timer); timer = null; }
    };

    const typeText = (targetText: string, onDone?: () => void): void => {
      captionEl.classList.add('is-active');
      const tick = (): void => {
        const cur = captionEl.textContent ?? '';
        if (cur.length < targetText.length) {
          captionEl.textContent = targetText.slice(0, cur.length + 1);
          timer = setTimeout(tick, TYPE_SPEED);
        } else {
          onDone?.();
        }
      };
      tick();
    };

    const eraseText = (onDone?: () => void): void => {
      captionEl.classList.add('is-active');
      const tick = (): void => {
        const cur = captionEl.textContent ?? '';
        if (cur.length > 0) {
          captionEl.textContent = cur.slice(0, -1);
          timer = setTimeout(tick, ERASE_SPEED);
        } else {
          captionEl.classList.remove('is-active');
          onDone?.();
        }
      };
      tick();
    };

    imgWrap.addEventListener('mouseenter', () => {
      isHovering = true;
      if (isEasterEggActive) return;
      stopTimer();
      // If residual text doesn't match the start of PRO_CAPTION, clear it first
      const cur = captionEl.textContent ?? '';
      if (cur.length > 0 && !PRO_CAPTION.startsWith(cur)) {
        captionEl.textContent = '';
      }
      typeText(PRO_CAPTION);
    });

    imgWrap.addEventListener('mouseleave', () => {
      isHovering = false;
      if (isEasterEggActive) return;
      stopTimer();
      eraseText();
    });

    const returnToPro = (): void => {
      if (fadeBackTimer !== null) { clearTimeout(fadeBackTimer); fadeBackTimer = null; }
      imgContainer.classList.remove('is-little-afton');
      setTimeout(() => {
        stopTimer();
        eraseText(() => {
          isEasterEggActive = false;
          if (isHovering) typeText(PRO_CAPTION);
        });
      }, 800);
    };

    imgWrap.addEventListener('click', () => {
      // While little-afton is showing, triple-click returns to pro immediately
      if (isEasterEggActive) {
        clickCount++;
        if (clickResetTimer !== null) clearTimeout(clickResetTimer);
        clickResetTimer = setTimeout(() => { clickCount = 0; }, 2000);
        if (clickCount >= 3) {
          clickCount = 0;
          if (clickResetTimer !== null) { clearTimeout(clickResetTimer); clickResetTimer = null; }
          returnToPro();
        }
        return;
      }

      clickCount++;
      if (clickResetTimer !== null) clearTimeout(clickResetTimer);
      clickResetTimer = setTimeout(() => { clickCount = 0; }, 2000);

      if (clickCount >= 3) {
        clickCount = 0;
        if (clickResetTimer !== null) { clearTimeout(clickResetTimer); clickResetTimer = null; }
        isEasterEggActive = true;
        stopTimer();

        // Swap to little Afton
        imgContainer.classList.add('is-little-afton');

        // Type easter-egg caption
        captionEl.textContent = '';
        typeText(LITTLE_CAPTION);

        // Schedule auto fade back after timeout
        if (fadeBackTimer !== null) clearTimeout(fadeBackTimer);
        fadeBackTimer = setTimeout(returnToPro, EASTER_EGG_DURATION);
      }
    });
  }
</script>

---
import PrincipleRow from '../ui/PrincipleRow.astro';
import { Zap, Globe, Layers, Eye, ArrowLeftRight } from '@lucide/astro';
---

<section id="stack" class="stack-section fade-up" aria-labelledby="stack-heading">
  <div class="container">

    <div class="section-intro">
      <h2 id="stack-heading">How I choose a tech stack</h2>
      <p class="section-lead">Fast to ship, easy to hand off, boring where boring is correct.</p>
    </div>

    <dl class="principles-list">

      <PrincipleRow term="Static first" icon={Zap}>
        If the content doesn't need a server, I don't use one. Astro is my default —
        it ships zero JavaScript unless I ask it to. Fast page loads, zero cold starts, no attack
        surface from a running process.
      </PrincipleRow>

      <PrincipleRow term="Reach for the platform" icon={Globe}>
        Native <code>&lt;dialog&gt;</code>, CSS scroll-snap,
        <code>IntersectionObserver</code>. If the browser can do it, I don't reach for a
        dependency. Less to update, less to audit, less to explain to the next developer.
      </PrincipleRow>

      <PrincipleRow term="Add a framework when the UI earns it" icon={Layers}>
        React when the interaction complexity justifies the bundle cost — not by default.
        I've shipped Astro with React islands for exactly two interactive pieces while
        everything else stayed zero-JS. That was the right call.
      </PrincipleRow>

      <PrincipleRow term="Accessibility is a constraint, not a checklist" icon={Eye}>
        WCAG 2.2 AA, keyboard navigation, visible focus styles, screen reader testing,
        <code>prefers-reduced-motion</code> — these get considered at the design stage, not bolted
        on at the end. I love a good animation. The focus ring comes first.
      </PrincipleRow>

      <PrincipleRow term="I can work both sides of the API" icon={ArrowLeftRight}>
        Comfortable with Supabase, row-level security, OAuth flows, and writing endpoints — not
        just consuming them. TanStack Query when the frontend needs to cache and share that data.
        I'm not a backend engineer by title, but I won't block on one for a fetch call.
      </PrincipleRow>

    </dl>
  </div>
</section>

<style>
  .stack-section {
    padding-block: var(--space-16);
  }

  .section-intro {
    display: grid;
    gap: var(--space-4);
    margin-block-end: var(--space-8);
  }

  .section-lead {
    color: var(--tone-text-muted);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    max-width: 64ch;
    line-height: 1.65;
  }

  .principles-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
  }

  /* PrincipleRow hover is self-contained — no overrides needed here */
</style>

---
import SetupCard from '../ui/SetupCard.astro';
import { CircleCheckBig, FileCode, Bot, Paintbrush, ShieldCheck, GitMerge } from '@lucide/astro';
---

<section id="start" class="howisstart-section" aria-labelledby="start-heading">
  <div class="container">

    <div class="section-intro fade-up">
      <h2 id="start-heading">Before I write a line of code</h2>
      <p class="section-lead">
        My setup checklist runs before the first commit — whether I'm starting something new
        or joining an existing codebase.
      </p>
    </div>

    <div class="card-groups">

      <!-- Group 1: Every project -->
      <div class="card-group">
        <p class="group-label kicker">Every project</p>
        <div class="card-row card-row-3">
          <SetupCard title="Lint" icon={CircleCheckBig} class="fade-up">
            <p>Hard blocks, not warnings. If it can be caught statically, it gets caught before it ships.</p>
          </SetupCard>
          <SetupCard title="Typecheck" icon={FileCode} class="fade-up">
            <p>
              TypeScript strict mode throughout. I'd rather fight the compiler for ten minutes
              than debug a runtime null at 11pm.
            </p>
          </SetupCard>
          <SetupCard title="Agent rules" icon={Bot} class="fade-up">
            <p>
              Reusable components (theme tokens, accessibility, keyboard nav), defined in Copilot
              instructions and PRDs.
            </p>
          </SetupCard>
        </div>
      </div>

      <!-- Group 2: Team projects -->
      <div class="card-group">
        <p class="group-label kicker">Team projects</p>
        <div class="card-row card-row-3">
          <SetupCard title="Prettier + ESLint" icon={Paintbrush} class="fade-up">
            <p>
              Consistent formatting is about eliminating
              noisy format-diff PRs in code review so the actual logic gets the attention.
            </p>
          </SetupCard>
          <SetupCard title="Husky pre-commit hooks" icon={ShieldCheck} class="fade-up">
            <p>
              Everyone codes however they want. The hook cleans it before it hits the branch. No
              config policing, no "can you just run prettier" comments in review.
            </p>
          </SetupCard>
          <SetupCard title="Git hygiene" icon={GitMerge} class="fade-up">
            <p>
              Atomic commits, useful messages, rebase on main before the PR. I review MRs with
              actual feedback and don't panic at a merge conflict.
            </p>
          </SetupCard>
        </div>
      </div>

    </div>
  </div>
</section>

<style>
  .howisstart-section {
    padding-block: var(--space-16);
  }

  .section-intro {
    display: grid;
    gap: var(--space-4);
    margin-block-end: var(--space-8);
  }

  .section-lead {
    color: var(--tone-text-muted);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    max-width: 64ch;
    line-height: 1.65;
  }

  .card-groups {
    display: grid;
    gap: var(--space-12);
  }

  .card-group {
    display: grid;
    gap: var(--space-4);
  }

  .group-label {
    margin: 0;
  }

  .card-row {
    display: grid;
    gap: var(--space-4);
    align-items: stretch;
  }

  .card-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* SetupCard hover is self-contained — no overrides needed here */

  @media (max-width: 920px) {
    .card-row-3 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 680px) {
    .card-row-3 {
      grid-template-columns: 1fr;
    }
  }
</style>

---
import PrincipleRow from '../ui/PrincipleRow.astro';
import { FileCode, Bot, GitMerge, ShieldCheck, Layers } from '@lucide/astro';
---

<section id="ai" class="ai-section fade-up" aria-labelledby="ai-heading">
  <div class="container">

    <div class="section-intro">
      <h2 id="ai-heading">How I use AI</h2>
      <p class="section-lead">
        I use AI as a tool to augment my work, not as a shortcut. It's a teammate that can handle rote tasks and generate first drafts, but it doesn't replace the need for human judgment and creativity.
      </p>
    </div>

    <dl class="principles-list">

      <PrincipleRow term="The agent rules live in the repo" icon={Layers}>
        Agent constraints — reuse existing components, use design tokens, enforce WCAG,
        never hard-code colors — are written into <code>.github/copilot-instructions.md</code>
        and component APIs. The AI works within the system, not around it.
      </PrincipleRow>

      <PrincipleRow term="Structured workflows, not ad-hoc prompts" icon={GitMerge}>
        Spec → generate → agent review → validate (typecheck, lint, tests,
        build) → human review. Same sequence every time. Predictable output is the point.
      </PrincipleRow>

      <PrincipleRow term="PRDs before prompts" icon={FileCode}>
        Every feature chunk starts with a written spec: scope, constraints, component
        reuse rules, acceptance criteria. The agent works from a document, not a vibe. This is
        why AI-generated code in this project matches the design system instead of working around
        it.
      </PrincipleRow>

      <PrincipleRow term="Multiple agents, one task" icon={Bot}>
        I run agents in parallel on different sub-tasks: one generating, one reviewing the
        contract, one checking accessibility. I treat them as a pipeline with distinct roles.
      </PrincipleRow>

      <PrincipleRow term="AI reviews first, I review after" icon={ShieldCheck}>
        Before I look at generated code, the agent reviews its own output against the spec. My
        pass is the senior-engineer layer: architecture, edge cases, things the agent can't "see".
      </PrincipleRow>

    </dl>
  </div>
</section>

<style>
  .ai-section {
    padding-block: var(--space-16);
  }

  .section-intro {
    display: grid;
    gap: var(--space-4);
    margin-block-end: var(--space-8);
  }

  .section-lead {
    color: var(--tone-text-muted);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    max-width: 64ch;
    line-height: 1.65;
    margin: 0;
  }

  .principles-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
  }

  .principles-list :global(code) {
    font-family: var(--font-mono);
    font-size: 0.875em;
    color: var(--tone-primary-hover);
    background: color-mix(in srgb, var(--tone-primary) 12%, transparent);
    border-radius: 0.25rem;
    padding: 0.1em 0.35em;
  }
</style>