<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>James Prescott - AI-Driven Content Operations & Transformation Leader</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              'obsidian': '#0a0a0a',
              'charcoal': '#141414',
              'graphite': '#1f1f1f',
              'slate': '#2a2a2a',
              'cream': '#f5f0e8',
              'ivory': '#faf8f5',
              'stone': '#a8a39a',
              'coral': '#ff6b4a',
              'coral-glow': '#ff8266',
              'ember': '#e55a3a',
            },
            fontFamily: {
              display: ['Clash Display', 'sans-serif'],
              serif: ['Instrument Serif', 'Georgia', 'serif'],
              mono: ['JetBrains Mono', 'monospace'],
            },
            fontSize: {
              'massive': ['clamp(3.5rem, 12vw, 10rem)', { lineHeight: '0.9', letterSpacing: '-0.03em' }],
              'display': ['clamp(2.5rem, 8vw, 6rem)', { lineHeight: '0.95', letterSpacing: '-0.02em' }],
              'headline': ['clamp(1.75rem, 4vw, 3rem)', { lineHeight: '1.1', letterSpacing: '-0.01em' }],
              'subhead': ['clamp(1.25rem, 2.5vw, 1.75rem)', { lineHeight: '1.3' }],
            },
            animation: {
              'fade-up': 'fadeUp 0.8s ease-out forwards',
              'fade-in': 'fadeIn 0.6s ease-out forwards',
              'slide-in': 'slideIn 0.7s ease-out forwards',
              'scale-in': 'scaleIn 0.5s ease-out forwards',
              'grain': 'grain 8s steps(10) infinite',
              'float': 'float 6s ease-in-out infinite',
              'pulse-glow': 'pulseGlow 2s ease-in-out infinite',
              'marquee': 'marquee 30s linear infinite',
              'draw-line': 'drawLine 1.5s ease-out forwards',
            },
            keyframes: {
              fadeUp: {
                '0%': { opacity: '0', transform: 'translateY(40px)' },
                '100%': { opacity: '1', transform: 'translateY(0)' },
              },
              fadeIn: {
                '0%': { opacity: '0' },
                '100%': { opacity: '1' },
              },
              slideIn: {
                '0%': { opacity: '0', transform: 'translateX(-30px)' },
                '100%': { opacity: '1', transform: 'translateX(0)' },
              },
              scaleIn: {
                '0%': { opacity: '0', transform: 'scale(0.9)' },
                '100%': { opacity: '1', transform: 'scale(1)' },
              },
              grain: {
                '0%, 100%': { transform: 'translate(0, 0)' },
                '10%': { transform: 'translate(-5%, -10%)' },
                '20%': { transform: 'translate(-15%, 5%)' },
                '30%': { transform: 'translate(7%, -25%)' },
                '40%': { transform: 'translate(-5%, 25%)' },
                '50%': { transform: 'translate(-15%, 10%)' },
                '60%': { transform: 'translate(15%, 0%)' },
                '70%': { transform: 'translate(0%, 15%)' },
                '80%': { transform: 'translate(3%, 35%)' },
                '90%': { transform: 'translate(-10%, 10%)' },
              },
              float: {
                '0%, 100%': { transform: 'translateY(0)' },
                '50%': { transform: 'translateY(-20px)' },
              },
              pulseGlow: {
                '0%, 100%': { boxShadow: '0 0 20px rgba(255, 107, 74, 0.3)' },
                '50%': { boxShadow: '0 0 40px rgba(255, 107, 74, 0.6)' },
              },
              marquee: {
                '0%': { transform: 'translateX(0)' },
                '100%': { transform: 'translateX(-50%)' },
              },
              drawLine: {
                '0%': { strokeDashoffset: '100%' },
                '100%': { strokeDashoffset: '0%' },
              },
            },
            backgroundImage: {
              'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
              'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
              'mesh-gradient': 'radial-gradient(at 40% 20%, rgba(255, 107, 74, 0.08) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(255, 130, 102, 0.05) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(255, 107, 74, 0.03) 0px, transparent 50%)',
            },
          },
        },
      }
    </script>
    <!-- Clash Display - Geometric Brutalist Display Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- Instrument Serif - Refined Editorial -->
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
    <!-- JetBrains Mono - Technical Monospace -->
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
    <!-- Clash Display via Fontshare -->
    <link href="https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap" rel="stylesheet">

  <script type="importmap">
{
  "imports": {
    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
    "react": "https://aistudiocdn.com/react@^19.2.0",
    "react/": "https://aistudiocdn.com/react@^19.2.0/"
  }
}
</script>
  <script type="module" crossorigin src="/assets/index-nAS6NEfa.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-CePlsgP7.css">
</head>
  <body class="bg-obsidian text-cream antialiased">
    <div id="root"></div>
  </body>
</html>
