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' },
];

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 a cover letter. I hope it gives you a better sense of how I think and what I'd bring to your team.
      </p>

      <div class="hero-cta">
        <Button href="#how-i-work">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';
  import { initializeHeroPhotoEasterEgg } from '../../utils/heroPhotoEasterEgg';
  import { initializeHeroTypewriter } from '../../utils/heroTypewriter';

  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) {
    initializeHeroTypewriter({ window, section, targetEl });
  }

  // ── 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
  ) {
    initializeHeroPhotoEasterEgg({ window, imgWrap, imgContainer, captionEl });
  }
</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}>
        I'm most at home in the frontend but I don't stop at the component boundary. I've written
        endpoints, worked with row-level security, and debugged auth flows. I won't block a
        feature because the backend work is in scope.
      </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 { FileCode, Bot, GitMerge, ShieldCheck, Layers, Wrench } 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>

    <div class="card-row card-row-3">

      <SetupCard title="The agent rules live in the repo" icon={Layers}>
        <p>Reuse existing components, create design tokens, enforce WCAG. <code>.github/copilot-instructions.md</code>
        and component APIs. The AI works within the system, not around it.</p>
      </SetupCard>

      <SetupCard title="Structured workflows" icon={GitMerge}>
        <p>Spec → generate → agent review → validate (typecheck, lint, tests,
        build) → human review. Same sequence every time. Predictable output is the point.</p>
      </SetupCard>

      <SetupCard title="PRDs before prompts" icon={FileCode}>
        <p>Every feature chunk starts with a written spec: scope, constraints, component
        reuse rules, acceptance criteria. The agent works from a document, not a vibe.</p>
      </SetupCard>

      <SetupCard title="Multiple agents, one task" icon={Bot}>
        <p>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.</p>
      </SetupCard>

      <SetupCard title="AI reviews first, I review after" icon={ShieldCheck}>
        <p>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".</p>
      </SetupCard>

      <SetupCard title="I pick the right tool for the task" icon={Wrench}>
        <p>Claude for planning and designing, ChatGPT for logic and debugging. I use Copilot Pro+ for model access so I'm always working with current frontier models.</p>
      </SetupCard>

    </div>
  </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;
  }

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

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

  @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>

---
/**
 * HowIWork — replaces the "Recent Work" section.
 *
 * Shows the source code of *this* page via the CodeExplorer.
 * The explorer is heavy HTML, so it uses a three-phase lazy-loading strategy:
 *
 *   1. Page loads — explorer is in the DOM with `content-visibility: hidden`
 *      (browser parses but does NOT paint/layout it — free for scroll performance).
 *   2. User scrolls to section — IntersectionObserver fires, we flip
 *      content-visibility to `visible`, which triggers browser layout/paint.
 *   3. `requestIdleCallback` fires when the browser goes idle after painting.
 *      Only then do we fade the spinner out and reveal the explorer — so the
 *      indicator shows for the actual duration of real browser work.
 */

import CodeExplorer from './CodeExplorer.astro';
import Button from '../ui/Button.astro';
import { CODE_VIEWS, HIGHLIGHTED_FILES } from '../../config/codeViews';
import {
  fetchRepoTree,
  fetchFileContent,
  filterTreeByWhitelist,
  detectLanguage,
  type ResolvedFile,
  type ResolvedView,
} from '../../utils/github';

const primaryView = CODE_VIEWS[0];
const githubUrl = primaryView
  ? `https://github.com/${primaryView.owner}/${primaryView.repo}`
  : 'https://github.com';

const token = import.meta.env.GITHUB_TOKEN as string | undefined;
let resolvedView: ResolvedView | null = null;
let highlightedPaths: string[] = [];
let explorerLoadFailed = false;

try {
  // ── Fetch all repo trees ────────────────────────────────────────────────
  const viewsWithTrees = await Promise.all(
    CODE_VIEWS.map(async (view) => {
      const ref = view.ref ?? 'main';
      const tree = await fetchRepoTree(view.owner, view.repo, ref, token);
      const filteredEntries = filterTreeByWhitelist(tree, view.include);
      return { view, ref, entries: filteredEntries };
    }),
  );

  // ── Fetch file content — highlighting is done at render time by <Code /> ──
  const resolvedViews: ResolvedView[] = await Promise.all(
    viewsWithTrees.map(async ({ view, ref, entries }) => {
      const files = await Promise.all(
        entries.map(async (entry): Promise<ResolvedFile | null> => {
          const content = await fetchFileContent(
            view.owner,
            view.repo,
            entry.path,
            ref,
            token,
          );
          if (content === null) return null;

          return { path: entry.path, content, language: detectLanguage(entry.path) };
        }),
      );

      return {
        view,
        files: files.filter((f): f is ResolvedFile => f !== null),
        tree: entries,
      };
    }),
  );

  resolvedView = resolvedViews[0] ?? null;
  highlightedPaths = HIGHLIGHTED_FILES.map((h) => h.path);
} catch (error) {
  explorerLoadFailed = true;
  console.error('[HowIWork] Explorer data unavailable; rendering fallback.', error);
}
---

<section id="how-i-work" class="howiwork-section fade-up" aria-labelledby="howiwork-heading">
  <div class="container">

    <div class="section-intro">
      <h2 id="howiwork-heading">How I work</h2>
      <p class="section-lead">
      You're looking at it! This page is the project and the explorer below is a peek under the hood. 
      </p>
    </div>

    <!-- ── Tech stack chips ──────────────────────────────────────────── -->
    <div class="stack-strip" aria-label="Tech stack used on this project">
      <span class="stack-strip-label">Built with</span>
      <ul class="chip-list" role="list">
        {[
          'Astro', 'TypeScript',
          'Vercel', 'Lucide', 'Vitest', 
          'Shiki',
          'ESLint', 'CSS Tokens', 'GitHub API', 'Lottie',
        ].map((tech) => (
          <li class="chip">{tech}</li>
        ))}
      </ul>
    </div>

    <!-- ── File annotations: spotlight on highlighted files ─────────── -->
    <div class="file-highlights" aria-label="Notable files">
      <h3 class="highlights-heading">Files worth reading</h3>
      <ul class="highlights-list" role="list">
        {
          HIGHLIGHTED_FILES.map(({ path, note }) => (
            <li class="highlight-card">
              <div class="highlight-card-header">
                <span class="highlight-star" aria-hidden="true">&#9733;</span>
                <code class="highlight-path">{path}</code>
              </div>
              <p class="highlight-note" set:html={note} />
            </li>
          ))
        }
      </ul>
    </div>

    <!--
      ── Lazy-loading gate ──────────────────────────────────────────────
      The explorer content is in the DOM but hidden via content-visibility.
      The spinner placeholder is hidden by default, only shown if rendering
      takes longer than ~300ms, then fades out once the browser goes idle.
    -->
    {
      explorerLoadFailed || !resolvedView ? (
        <div class="explorer-unavailable" role="status" aria-live="polite">
          <p class="explorer-unavailable-title">Temporary issue loading the code explorer.</p>
          <p class="explorer-unavailable-body">
            GitHub is currently unavailable or rate-limited. Everything else on this page is still
            available.
          </p>
        </div>
      ) : (
        <div class="explorer-gate" id="explorer-gate">

          <div
            class="explorer-placeholder"
            id="explorer-placeholder"
            hidden
            aria-hidden="true"
          >
            <div class="placeholder-spinner" aria-hidden="true"></div>
            <p class="placeholder-label" aria-hidden="true">Loading…</p>
          </div>

          <div class="explorer-content" id="explorer-content" aria-hidden="true">
            <CodeExplorer view={resolvedView} highlighted={highlightedPaths} />
          </div>

        </div>
      )
    }

    <div class="explorer-actions">
      <Button
        href={githubUrl}
        variant="outline"
        size="sm"
        target="_blank"
        rel="noopener noreferrer"
      >
        View on GitHub →
      </Button>
    </div>

  </div>
</section>

<script>
  const gate = document.getElementById('explorer-gate');
  const placeholder = document.getElementById('explorer-placeholder') as HTMLElement | null;
  const content = document.getElementById('explorer-content');

  if (!gate || !placeholder || !content) {
    content?.removeAttribute('aria-hidden');
  } else {
    // Threshold: show loading indicator only if render hasn't finished by this point.
    // Below ~300ms users don't perceive a delay — no indicator needed.
    // At 300ms they first notice "something is happening" — that's the right
    // moment to show the spinner.
    const SLOW_THRESHOLD_MS = 300;
    const FADE_MS = 350;

    const observer = new IntersectionObserver(
      (entries) => {
        if (!entries[0]?.isIntersecting) return;
        observer.disconnect();

        // Start rendering — browser begins layout/paint now
        content.classList.add('is-rendering');

        let didShowLottie = false;

        // If still not done after threshold, reveal the loading spinner
        const slowTimer = setTimeout(() => {
          didShowLottie = true;
          placeholder.hidden = false;
          placeholder.setAttribute('role', 'status');
          placeholder.setAttribute('aria-label', 'Loading code explorer');
          // rAF so the browser registers `hidden = false` before adding the class
          requestAnimationFrame(() => placeholder.classList.add('is-visible'));
        }, SLOW_THRESHOLD_MS);

        const onIdle = () => {
          clearTimeout(slowTimer);

          // Reveal explorer
          content.classList.add('is-visible');
          content.removeAttribute('aria-hidden');

          if (didShowLottie) {
            // Fade spinner out, then clean up
            placeholder.classList.remove('is-visible');
            placeholder.classList.add('is-done');
            setTimeout(() => {
              placeholder.hidden = true;
              placeholder.removeAttribute('role');
            }, FADE_MS);
          }
        };

        if ('requestIdleCallback' in window) {
          requestIdleCallback(onIdle, { timeout: 2500 });
        } else {
          requestAnimationFrame(() => requestAnimationFrame(onIdle));
        }
      },
      { threshold: 0.05 },
    );

    observer.observe(gate);
  }

</script>

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

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

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


  /* ── Tech stack chip strip ─────────────────────────────────── */
  .stack-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-end: var(--space-8);
  }

  .stack-strip-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tone-text-muted);
    white-space: nowrap;
  }

  .chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .chip {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.3em 0.7em;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--tone-primary) 10%, transparent);
    color: var(--tone-primary-hover);
    border: 1px solid color-mix(in srgb, var(--tone-primary) 25%, transparent);
  }

  /* ── Gate: position:relative so the overlay can anchor to it ── */
  .explorer-gate {
    position: relative;
    margin-block-start: var(--space-8);
  }

  /* ── Placeholder: absolute overlay — never adds height ──────── */
  /* hidden by default; JS reveals it only after the slow threshold */
  .explorer-placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    border: 1px solid var(--tone-border);
    border-radius: var(--radius-md);
    background: var(--tone-surface);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
  }

  .explorer-placeholder.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .explorer-placeholder.is-done {
    opacity: 0;
    pointer-events: none;
  }

  .placeholder-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--tone-border);
    border-top-color: var(--tone-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .explorer-unavailable {
    margin-block-start: var(--space-8);
    border: 1px solid var(--tone-border);
    border-radius: var(--radius-md);
    background: var(--tone-surface);
    padding: var(--space-8);
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--space-4);
  }

  .explorer-unavailable-title {
    margin: 0;
    font-weight: 700;
    color: var(--tone-text);
  }

  .explorer-unavailable-body {
    margin: 0;
    max-width: 48ch;
    color: var(--tone-text-muted);
    line-height: 1.6;
  }

  .placeholder-label {
    color: var(--tone-text-muted);
    font-size: 0.875rem;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
  }

  /* ── Explorer content: deferred until in-view ───────────────── */
  .explorer-content {
    content-visibility: hidden;
    contain-intrinsic-size: 0 640px;
    opacity: 0;
    transition: opacity 350ms ease;
  }

  /* Phase 2: browser is rendering it (not yet visible) */
  .explorer-content.is-rendering {
    content-visibility: visible;
  }

  /* Phase 3: browser idle — fade in */
  .explorer-content.is-visible {
    opacity: 1;
  }

  /* ── GitHub link below explorer ──────────────────────────── */
  .explorer-actions {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-6);
  }

  /* ── File highlights: annotation cards below explorer ──────── */
  .file-highlights {
    margin-block-start: var(--space-12);
  }

  .highlights-heading {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    font-weight: 700;
    color: var(--tone-text-muted);
    margin-block-end: var(--space-6);
    letter-spacing: -0.01em;
  }

  .highlights-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .highlight-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--tone-card);
    border: 1px solid var(--tone-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-surface);
    transition: border-color 180ms ease;
  }

  .highlight-card:hover {
    border-color: color-mix(in srgb, var(--tone-primary) 40%, var(--tone-border));
  }

  @media (prefers-reduced-motion: no-preference) {
    .highlight-card:hover .highlight-star {
      animation: wiggle 0.5s ease-in-out;
    }
  }

  .highlight-card-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }

  .highlight-star {
    font-size: 0.85rem;
    color: var(--tone-primary);
    flex-shrink: 0;
    line-height: 1;
  }

  .highlight-path {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--tone-primary);
    word-break: break-all;
    line-height: 1.4;
  }

  .highlight-note {
    color: var(--tone-text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0;
  }

  .highlight-note :global(code) {
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.875em;
    color: var(--tone-primary-hover);
    background: color-mix(in srgb, var(--tone-primary) 12%, transparent);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.35em;
  }
</style>