/* global React */
// Direction 3 — "The Rotunda" (selected)
// Navy-dominant editorial w/ a Studio-style split hero (portrait left,
// navy text panel right with a rotating role tag), a Pre-Read style
// bio sidebar, and a Marketing Machine subscribe block.

const { useState: useStateRo, useEffect: useEffectRo } = React;

const RO_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroSkin": "space",
  "gloss": "full",
  "motion": "ambient",
  "gradientAccent": true
}/*EDITMODE-END*/;

function RoFx() {
  return (
    <div className="ro-fx" aria-hidden="true">
      <div className="ro-stars"></div>
      <div className="ro-stars-b"></div>
      <div className="ro-fx-glow"></div>
    </div>);
}

function RoOrbit({ cta }) {
  return (
    <div className={cta ? 'ro-orbit is-cta' : 'ro-orbit'} aria-hidden="true">
      <div className="ro-orbit-ring"><span className="ro-orbit-dot"></span></div>
      <div className="ro-orbit-ring2"></div>
    </div>);
}

const RO_ROLES = [
'Professor.',
'Builder.',
'Lawyer.',
'Marketer.',
'Storyteller.',
'AI optimist.',
'Chaotic-good rogue.'];


function useRotunaRoles(items, interval = 2400) {
  const [idx, setIdx] = useStateRo(0);
  const [phase, setPhase] = useStateRo('in');
  useEffectRo(() => {
    const t = setInterval(() => {
      setPhase('out');
      setTimeout(() => {
        setIdx((i) => (i + 1) % items.length);
        setPhase('in');
      }, 260);
    }, interval);
    return () => clearInterval(t);
  }, [items.length, interval]);
  return { value: items[idx], phase };
}

function RotundaDirection() {
  const role = useRotunaRoles(RO_ROLES, 2200);
  // Tweaks panel is a Claude Design authoring tool, not shipped to prod —
  // bake the chosen design values in as fixed defaults.
  const tw = RO_TWEAK_DEFAULTS;

  // Scroll entrances (active only at motion: full — CSS-gated)
  useEffectRo(() => {
    const els = document.querySelectorAll(
      '.ro-section-head, .ro-now-card, .ro-making-card, .ro-ops-card, .ro-news, .ro-archive-row, .ro-findme-row, .ro-sport-row');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -4% 0px' });
    els.forEach((el) => { el.classList.add('ro-reveal'); io.observe(el); });
    return () => io.disconnect();
  }, []);

  return (
    <div
      className="ak-page ro-page"
      data-gloss={tw.gloss}
      data-motion={tw.motion}
      data-accent={tw.gradientAccent ? 'on' : 'off'}>
      {/* ============ HERO (navy, full bleed) ============ */}
      <div style={{ position: 'relative' }}>
        <header className="ro-chrome">
          <div className="ro-chrome-l">
            <span className="ro-wm-prim">PROF KERP</span>
            <span className="ro-wm-sep">·</span>
            <span>Adam Kerpelman</span>
          </div>
          <nav className="ro-nav" aria-label="Primary">
            <a className="is-active" href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#projects">PROJECTS</a>
            <a href="#publishing">PUBLISHING</a>
            <a href="#contact">Contact</a>
          </nav>
        </header>

        <section className={tw.heroSkin === 'space' ? 'ro-hero is-space' : 'ro-hero'} id="home">
          <RoFx />
          <RoOrbit />
          <div className="ro-hero-img">
            <img src="assets/photos/speaking-foundersforum-edit.jpg" alt="Adam Kerpelman speaking on a panel, microphone in hand" />
            <div className="ro-hero-img-cap">Plate I · On the panel, Founders Forum</div>
          </div>
          <div className="ro-hero-text">
            <div>
              <div className="ro-hero-eyebrow">
                <span>Adam Kerpelman</span>
                <span>·</span>
                <span>Homepage.</span>
              </div>
              <h1>
                Hi.<br />
                <em>I'm</em> Adam<span className="ro-period">.</span>
              </h1>
              <div className="ro-hero-rotator">
                <span key={role.value} className={role.phase === 'out' ? 'is-leaving' : ''}>
                  {role.value}
                </span>
              </div>
              <p className="ro-hero-lede">
                Teaching <em>applied AI, entrepreneurship, information systems, and innovation</em> at
                UVA McIntire. Building with students at UVA Innovates.
                Otherwise: <em>writing, speaking, podcasting, making, and juggling.</em>
              </p>
            </div>
            <div className="ro-hero-actions">
              <a className="ro-btn ro-btn-primary" href="#projects">
                See what I'm making <span>→</span>
              </a>
              <a className="ro-btn ro-btn-ghost" href="https://calendly.com/profkerp/consulting">
                Consulting <span>→</span>
              </a>
            </div>
          </div>
        </section>
      </div>

      {/* ============ FIND ME (narrow rail, pre-amble) ============ */}
      <section className="ro-section is-findme" id="elsewhere">
        <div className="ro-glow" aria-hidden="true"></div>
        <div className="ro-findme">
          <div className="ro-findme-head">
            <div className="ro-findme-mark">§ 00 <span>Find me</span></div>
            <div className="ro-findme-meta">A short list of <em>elsewhere.</em></div>
          </div>
          <div className="ro-findme-list">
            <a className="ro-findme-row" href="http://zengineeringpodcast.com">
              <span className="ro-findme-num">i.</span>
              <span className="ro-findme-title">Zengineering <em>Podcast</em></span>
              <span className="ro-findme-kind">Listen</span>
              <span className="ro-findme-arrow">→</span>
            </a>
            <a className="ro-findme-row" href="https://marketingmachine.studio">
              <span className="ro-findme-num">ii.</span>
              <span className="ro-findme-title">Marketing <em>Machine</em></span>
              <span className="ro-findme-kind">Newsletter</span>
              <span className="ro-findme-arrow">→</span>
            </a>
            <a className="ro-findme-row" href="#">
              <span className="ro-findme-num">iii.</span>
              <span className="ro-findme-title">The Foundry <em>@ UVA</em></span>
              <span className="ro-findme-kind">Visit</span>
              <span className="ro-findme-arrow">→</span>
            </a>
            <a className="ro-findme-row" href="https://www.commerce.virginia.edu/faculty/ajk9u">
              <span className="ro-findme-num">iv.</span>
              <span className="ro-findme-title">Professional <em>bio</em></span>
              <span className="ro-findme-kind">Profile</span>
              <span className="ro-findme-arrow">→</span>
            </a>
            <a className="ro-findme-row" href="https://www.linkedin.com/in/adamkerpelman/">
              <span className="ro-findme-num">v.</span>
              <span className="ro-findme-title">LinkedIn</span>
              <span className="ro-findme-kind">Connect</span>
              <span className="ro-findme-arrow">→</span>
            </a>
          </div>
        </div>
      </section>

      {/* ============ ABOUT (paper) ============ */}
      <section className="ro-section" id="about">
        <div className="ro-glow" aria-hidden="true" style={{ left: 16, top: -7, position: 'absolute' }}></div>
        <div className="ro-section-head">
          <div className="ro-section-mark">
            § 01
            <span>The bio</span>
          </div>
          <h2 className="ro-section-title">
            I juggle a lot of <em>things.</em>
          </h2>
        </div>

        {/* Full-bleed juggling photo — the headline made literal */}
        <figure className="ro-juggle-band">
          <img src="assets/photos/juggling-studio.jpg" alt="Adam juggling beanbags in studio" />
          <figcaption className="ro-juggle-cap">
            <span>Plate II</span>
            <em>Fig. 2 — the author, juggling.</em>
          </figcaption>
        </figure>

        <div className="ro-about-body">
          <aside className="ro-about-meta">
            <figure className="ro-about-meta-photo">
              <img src="assets/photos/headshot.jpg" alt="Adam Kerpelman portrait" />
            </figure>
            <div className="ro-about-meta-label">Fact sheet</div>
            <h4>Adam Kerpelman</h4>
            <dl>
              <dt>Based</dt><dd>Charlottesville, VA</dd>
              <dt>Teaching</dt><dd>UVA <em>McIntire</em></dd>
              <dt>Building</dt><dd>UVA <em>Innovates</em></dd>
              <dt>Studying</dt><dd>Applied <em>GenAI</em></dd>
              <dt>Roles</dt><dd>Professor · Builder · Lawyer · Marketer · Storyteller</dd>
              <dt>Guilds</dt><dd>LexDAO · Raid Guild</dd>
              <dt>Status</dt><dd><em>Consulting open</em></dd>
            </dl>
          </aside>
          <div>
            <p>
              I'm a career technologist, entrepreneur, lawyer, maker, marketer, and professor at the University of Virginia.
              <em> My superpower is curiosity
              </em> — I like to play with new technology to learn how
              it works and how it will bend the world.
            </p>
            <p>
              At <em>14</em>, my friends and I taught ourselves HTML between
              classes. At <em>16</em>, I launched a web design company with a
              hell of a website and zero clients. Over time it merged with a
              love of cameras and business as I sold sports photos to little
              league and swim-team parents.
            </p>
            <p>
              Through the lens of sport I've spent years on flow, performance, motivation, teamwork. I trained at North Baltimore Aquatic Club alongside Michael Phelps. I was an <em>All-American</em> at UVA, and
              competed at the <em>2004 Olympic Trials</em>.
            </p>

            <p>
              Since then I've founded multiple ventures — marketing companies,
              a LegalTech company, a mental-health startup — and served as a
              marketing executive at <em>NetWise</em> (acquired by
              Dun & Bradstreet) and <em>Mission Control AI</em>.
            </p>
            <p data-comment-anchor="653a800c64-p-169-13">
              These days the work points one direction: <em>applied
              generative AI</em> — how it reshapes the way we build, learn,
              and run companies. I get to chase that question in the open,
              with students who are <em>building the answers</em> alongside me.
            </p>
            <p>
              Right now that looks like <em>a book</em> about marketing with
              AI, <em>a startup-simulator game</em>, and an exo-brain that
              keeps my other projects honest — the working list is
              <a href="#projects"> just below</a>.
            </p>
            <p>
              And when I'm not doing any of that, I'm hanging out with
              <em> my family.</em>
            </p>
          </div>
        </div>
      </section>

      {/* ============ NOW (cream) ============ */}
      <section className="ro-section is-cream" id="now">
        <div className="ro-glow" aria-hidden="true"></div>
        <div className="ro-section-head">
          <div className="ro-section-mark">
            § 02
            <span>Currently</span>
          </div>
          <h2 className="ro-section-title">
            Three vectors of <em>attention.</em>
          </h2>
        </div>
        <div className="ro-now-grid">
          <article className="ro-now-card">
            <div className="ro-now-numeral">i.</div>
            <div className="ro-now-label">Teaching</div>
            <h3>Entrepreneurship, Information Systems, Innovation and <em>applied AI.</em></h3>
            <p>
              Three courses per year at UVA McIntire. Spring 2026: a new
              applied-AI studio for builders.
            </p>
            <div className="ro-now-foot">UVA McIntire · 2025/26</div>
          </article>
          <article className="ro-now-card is-fill">
            <div className="ro-now-numeral">ii.</div>
            <div className="ro-now-label">Building</div>
            <h3>Helping students <em>ship</em> companies.</h3>
            <p>
              Assistant Director of Student Entrepreneurship at UVA Innovates —
              the founder pipeline, idea to first revenue.
            </p>
            <div className="ro-now-foot">UVA Innovates · 2024 — Now</div>
          </article>
          <article className="ro-now-card">
            <div className="ro-now-numeral">iii.</div>
            <div className="ro-now-label">Studying</div>
            <h3>Generative AI in <em>code, product, classroom.</em></h3>
            <p>
              An ongoing field study. What changes when every student has a
              senior partner on tap, 24/7?
            </p>
            <div className="ro-now-foot">Field notes · public</div>
          </article>
        </div>
      </section>

      {/* ============ MAKING (current products & projects) ============ */}
      <section className="ro-section" id="projects">
        <div className="ro-glow" aria-hidden="true"></div>
        <div className="ro-section-head">
          <div className="ro-section-mark">
            § 03
            <span>Projects</span>
          </div>
          <h2 className="ro-section-title">
            What I'm <em>building right now.</em>
          </h2>
        </div>
        <p className="ro-section-lede">
          Live projects, current products, and research previews — the things
          I'm pouring time into <em>this year</em>. The creative-work archive
          (film, animation, design, photo) lives <a href="#archive">further down the page</a>.
        </p>
        <div className="ro-making-grid">
          <article className="ro-making-card is-feature has-brand is-brand-mm">
            <div className="ro-making-card-top">
              <div className="ro-making-kind">i. Book · In progress</div>
              <span className="ro-making-pill is-dev">Drafting</span>
            </div>
            <h3>Marketing Machine<em>.</em></h3>
            <p>
              The Way of the Marketing Engineer — a book about complexity,
              creativity, and marketing with A.I.
            </p>
            <div className="ro-making-card-foot">
              <span className="ro-making-meta">2026 — In progress</span>
              <a href="https://marketingmachine.studio" className="ro-making-link">marketingmachine.studio →</a>
            </div>
            <div className="ro-brand-veil" aria-hidden="true">
              <div className="ro-brand-top">
                <img src="https://www.google.com/s2/favicons?domain=marketingmachine.studio&sz=64" alt="" />
                <span className="ro-brand-domain">marketingmachine.studio</span>
              </div>
              <div>
                <h4 className="ro-brand-name">Marketing Machine.</h4>
                <p className="ro-brand-tag">Digital-first, data-driven — join 10,000+ marketing engineers.</p>
              </div>
              <div className="ro-brand-foot">
                <span>The book · 2026</span>
                <span>Read the draft →</span>
              </div>
            </div>
          </article>
          <article className="ro-making-card has-brand is-brand-fm">
            <div className="ro-making-card-top">
              <div className="ro-making-kind">ii. Game</div>
              <span className="ro-making-pill is-dev">Building</span>
            </div>
            <h3>Foundermode<em>.</em></h3>
            <p>
              A tycoon-style startup simulator — build the company, survive
              the pivots.
            </p>
            <div className="ro-making-card-foot">
              <span className="ro-making-meta">2026 — In development</span>
              <a href="https://foundermode.fun" className="ro-making-link">foundermode.fun →</a>
            </div>
            <div className="ro-brand-veil" aria-hidden="true">
              <div className="ro-brand-top">
                <img src="https://www.google.com/s2/favicons?domain=foundermode.fun&sz=64" alt="" />
                <span className="ro-brand-domain">foundermode.fun</span>
              </div>
              <div>
                <h4 className="ro-brand-name">FOUNDERMODE</h4>
                <p className="ro-brand-tag">Satirical startup tycoon sim</p>
                <div className="ro-brand-hud">RUNWAY ▓▓▓▓░░ · MRR $18K ▲ · MORALE 71%</div>
              </div>
              <div className="ro-brand-foot">
                <span>INSERT COIN</span>
                <span>PRESS START →</span>
              </div>
            </div>
          </article>
          <article className="ro-making-card has-brand is-brand-hc">
            <div className="ro-making-card-top">
              <div className="ro-making-kind">iii. Research preview</div>
              <span className="ro-making-pill is-dev">Prototype</span>
            </div>
            <h3>HyperContext<em>.</em></h3>
            <p>
              An exo-brain that hooks into all of my AI projects — the source
              of truth on project status. Easter egg: the user-type slider at
              the top of the site is one of its UI experiments.
            </p>
            <div className="ro-making-card-foot">
              <span className="ro-making-meta">2025 — Now</span>
              <a href="https://hypercontext.me" className="ro-making-link">hypercontext.me →</a>
            </div>
            <div className="ro-brand-veil" aria-hidden="true">
              <div className="ro-brand-top">
                <img src="https://www.google.com/s2/favicons?domain=hypercontext.me&sz=64" alt="" />
                <span className="ro-brand-domain">hypercontext.me</span>
              </div>
              <div>
                <h4 className="ro-brand-name">hyper<span>context</span></h4>
                <p className="ro-brand-tag">Universal AI context layer. Connect your digital identity — power every AI interaction.</p>
              </div>
              <div className="ro-brand-foot">
                <span>MCP server</span>
                <span>Connect →</span>
              </div>
            </div>
          </article>
        </div>
        <div className="ro-foundry">
          <div className="ro-foundry-head">
            <span className="ro-foundry-label">§ 03.1 · Foundry projects</span>
            <span className="ro-foundry-note">
              Built and run for student entrepreneurship at <a href="https://uvafoundry.com">the UVA Foundry</a>.
            </span>
          </div>
          <div className="ro-foundry-grid">
            <article className="ro-making-card is-foundry has-brand is-brand-fc">
              <div className="ro-making-card-top">
                <div className="ro-making-kind">Platform</div>
                <span className="ro-making-pill">Live</span>
              </div>
              <h3>Foundry Competitions<em>.</em></h3>
              <p>
                Software for running student startup competitions — from
                submissions through judging and results.
              </p>
              <div className="ro-making-card-foot">
                <span className="ro-making-meta">Built 2024 — Now</span>
                <a href="https://competitions.uvafoundry.com" className="ro-making-link">competitions.uvafoundry.com →</a>
              </div>
              <div className="ro-brand-veil" aria-hidden="true">
                <div className="ro-brand-top">
                  <span className="ro-brand-domain">Foundry @ UVA</span>
                </div>
                <div>
                  <h4 className="ro-brand-name">Competitions.</h4>
                  <p className="ro-brand-tag">Submissions → judging → results.</p>
                </div>
                <div className="ro-brand-foot">
                  <span>Live</span>
                  <span>Enter →</span>
                </div>
              </div>
            </article>
            <article className="ro-making-card is-foundry has-brand is-brand-ct">
              <div className="ro-making-card-top">
                <div className="ro-making-kind">Course tools</div>
                <span className="ro-making-pill is-dev">Private beta</span>
              </div>
              <h3>Course Tools<em>.</em></h3>
              <p>
                Tools and templates for teaching with AI — the kit I use in
                class and share with other instructors.
              </p>
              <div className="ro-making-card-foot">
                <span className="ro-making-meta">UVA McIntire · 2025</span>
                <a href="https://coursetools.uvafoundry.com/" className="ro-making-link">coursetools.uvafoundry.com →</a>
              </div>
              <div className="ro-brand-veil" aria-hidden="true">
                <div className="ro-brand-top">
                  <span className="ro-brand-domain">Foundry @ UVA</span>
                </div>
                <div>
                  <h4 className="ro-brand-name">Course Tools.</h4>
                  <p className="ro-brand-tag">Teach with AI — the kit, shared.</p>
                </div>
                <div className="ro-brand-foot">
                  <span>Private beta</span>
                  <span>Request access →</span>
                </div>
              </div>
            </article>
          </div>
        </div>
      </section>

      {/* ============ PUBLISHING ============ */}
      <section className="ro-section is-cream" id="publishing">
        <div className="ro-glow" aria-hidden="true"></div>
        <div className="ro-section-head">
          <div className="ro-section-mark">
            § 04
            <span>Publishing</span>
          </div>
          <h2 className="ro-section-title">
            Thinking <em>in public.</em>
          </h2>
        </div>
        <div className="ro-ops-grid">
          <article className="ro-ops-card has-brand is-brand-mm">
            <div className="ro-ops-kind">Newsletter · On hold</div>
            <h3>Marketing <em>Machine.</em></h3>
            <p className="ro-ops-desc">
              Weekly notes on how marketing works when AI does most of the doing.
              On hold while I draft the book.
            </p>
            <div className="ro-ops-meta">marketingmachine.studio</div>
            <a className="ro-ops-cta" href="https://marketingmachine.studio">
              <span>Subscribe</span><span>→</span>
            </a>
            <div className="ro-brand-veil" aria-hidden="true">
              <div className="ro-brand-top">
                <img src="https://www.google.com/s2/favicons?domain=marketingmachine.studio&sz=64" alt="" />
                <span className="ro-brand-domain">marketingmachine.studio</span>
              </div>
              <div>
                <h4 className="ro-brand-name">Marketing Machine.</h4>
                <p className="ro-brand-tag">One email a week-ish — join 10,000+ marketing engineers.</p>
              </div>
              <div className="ro-brand-foot">
                <span>Newsletter</span>
                <span>Subscribe →</span>
              </div>
            </div>
          </article>
          <article className="ro-ops-card is-fill has-brand is-brand-zg">
            <div className="ro-ops-kind">Podcast · since 2018</div>
            <h3>Zengineering.</h3>
            <p className="ro-ops-desc">
              Long-form conversations on engineering minds, philosophy, and practice.
            </p>
            <div className="ro-ops-meta"><a href="http://zengineeringpodcast.com" style={{ color: 'inherit', textDecoration: 'none' }}>zengineeringpodcast.com</a></div>
            <a className="ro-ops-cta" href="http://zengineeringpodcast.com">
              <span>Listen</span><span>→</span>
            </a>
            <div className="ro-brand-veil" aria-hidden="true">
              <div className="ro-brand-enso"></div>
              <div className="ro-brand-top">
                <img src="https://www.google.com/s2/favicons?domain=zengineeringpodcast.com&sz=64" alt="" />
                <span className="ro-brand-domain">zengineeringpodcast.com</span>
              </div>
              <div>
                <h4 className="ro-brand-name">Zengineering<em>.</em></h4>
                <p className="ro-brand-tag">Where science, technology & engineering meet philosophy, art & spirituality. With Adam & Brian.</p>
              </div>
              <div className="ro-brand-foot">
                <span>E101 · Season 2</span>
                <span>Listen →</span>
              </div>
            </div>
          </article>
          <article className="ro-ops-card has-brand is-brand-jp">
            <div className="ro-ops-kind">Research lab · legaltech</div>
            <h3>Juris <em>Project.</em></h3>
            <p className="ro-ops-desc">
              A research lab downstream from my legaltech work — decentralized
              dispute resolution, smart contracts, and access to justice. The work continues.
            </p>
            <div className="ro-ops-meta">jurisproject.io</div>
            <a className="ro-ops-cta" href="https://jurisproject.io">
              <span>Visit</span><span>→</span>
            </a>
            <div className="ro-brand-veil" aria-hidden="true">
              <div className="ro-brand-top">
                <img src="https://www.google.com/s2/favicons?domain=jurisproject.io&sz=64" alt="" />
                <span className="ro-brand-domain">jurisproject.io</span>
              </div>
              <div>
                <h4 className="ro-brand-name">Let your <em>AI</em> argue with theirs.</h4>
                <p className="ro-brand-tag">Juris · local AI negotiation · research preview</p>
              </div>
              <div className="ro-brand-foot">
                <span>agent_a ◄──► agent_b</span>
                <span>$0.00 cloud →</span>
              </div>
            </div>
          </article>
        </div>

        {/* Marketing Machine subscribe block */}
        <div className="ro-news">
          <div>
            <div className="ro-news-eyebrow">§ 04.1 · Subscribe</div>
            <h3>Get <em>Marketing Machine</em><br />in your inbox.</h3>
            <p>
              One email a week-ish on AI, marketing, and the craft of making
              things work when the model does most of the doing. No fluff.
            </p>
          </div>
          <form className="ro-news-form" onSubmit={(e) => e.preventDefault()}>
            <input type="email" placeholder="you@domain.com" required />
            <button type="submit">Subscribe →</button>
          </form>
        </div>
      </section>

      {/* ============ ARCHIVE (formerly Portfolio) ============ */}
      <section className="ro-section is-cream ro-section-archive" id="archive">
        <div className="ro-glow" aria-hidden="true"></div>
        {/* Full-bleed B&W photo opens the archive — the "different era" mood */}
        <figure className="ro-archive-band">
          <img src="assets/photos/fisheye-sunglasses.png" alt="Black-and-white fisheye self-portrait" />
          <figcaption className="ro-archive-band-cap">
            <span className="ro-archive-band-mark">§ 05 · Archive</span>
            <span className="ro-archive-band-meta">Plate III · ca. 2010</span>
          </figcaption>
        </figure>

        <div className="ro-section-head">
          <div className="ro-section-mark">
            § 05
            <span>Archive</span>
          </div>
          <h2 className="ro-section-title ro-section-title-sm">
            Creative <em>Archive</em>.
          </h2>
        </div>
        <p className="ro-section-lede">
          A bygone studio era — film, animation, creative direction, photography.
          Most of this is from <em>2006–2018</em>. Kept here for the record;
          I don't take on new creative commissions, but the archives are open.
        </p>
        <div className="ro-archive-table">
          <a className="ro-archive-row" id="film" href="film.html">
            <span className="ro-archive-num">i.</span>
            <span className="ro-archive-title">Video & <em>Film</em></span>
            <span className="ro-archive-meta">Director · DP · Editor</span>
            <span className="ro-archive-count">23 pieces · 2006–2018</span>
          </a>
          <a className="ro-archive-row" id="animation" href="animation.html">
            <span className="ro-archive-num">ii.</span>
            <span className="ro-archive-title">Animation & <em>Motion</em></span>
            <span className="ro-archive-meta">2D · 3D · Titles</span>
            <span className="ro-archive-count">14 pieces</span>
          </a>
          <a className="ro-archive-row" id="design" href="design.html">
            <span className="ro-archive-num">iii.</span>
            <span className="ro-archive-title">Design & <em>Creative Direction</em></span>
            <span className="ro-archive-meta">Brand · Editorial</span>
            <span className="ro-archive-count">31 pieces</span>
          </a>
          <a className="ro-archive-row" id="photo" href="photography.html">
            <span className="ro-archive-num">iv.</span>
            <span className="ro-archive-title">Photo<em>graphy</em></span>
            <span className="ro-archive-meta">People · Nature · Abstract</span>
            <span className="ro-archive-count">200+ images · 1996 — Now</span>
          </a>
        </div>
      </section>

      {/* ============ BEFORE THAT (sport) ============ */}
      <section className="ro-section" id="sport">
        <div className="ro-glow" aria-hidden="true"></div>
        <div className="ro-section-head">
          <div className="ro-section-mark">
            § 06
            <span>Before that</span>
          </div>
          <h2 className="ro-section-title ro-section-title-sm">
            An athlete, <em>first</em>.
          </h2>
        </div>
        <p className="ro-section-lede">
          Before the companies and the classroom there was a black line and
          a clock. Everything I know about <em>flow, performance, and teams</em> started
          in the water.
        </p>
        <figure className="ro-sport-band">
          <img src="assets/photos/swimming-freestyle.jpg" alt="Adam mid-freestyle stroke in a race, navy cap and goggles" />
          <figcaption className="ro-juggle-cap">
            <span>Plate IV</span>
            <em>Fig. 4 — the author, at pace.</em>
          </figcaption>
        </figure>
        <div className="ro-sport-body">
          <p>
            Swimming is where I learned that performance is a <em>practice</em>:
            you show up, you do the work, the seconds come off. It's also
            where I learned what a team does to a ceiling. Nobody at North
            Baltimore got fast alone. The records came — Maryland state
            records in club swimming, then school records at Virginia — but the two honors I keep
            are the ones you can't swim your way into: <em>Hardest Worker</em> and
            the <em>Coaches' Award for Leadership</em>.
          </p>
          <p>
            The sport never really stopped, either. After the Trials came
            triathlon, then a pile of personal-training and biomechanics
            education after college. You'll still find me in the gym
            most mornings. It's not a thing I talk about much, but it's
            <em> the thing.</em>
          </p>
          <p>
            Training at that level of the sport also meant early exposure
            to <em>biometrics</em>: lactate tolerance testing, VO2 max,
            metabolic work. I've watched the consumer side closely ever
            since, running my own tracking and seeing what data does to
            performance. <em>Impulse</em> is where that thread goes next —
            McIntire wrote it up in <a href="https://experience.mcintire.virginia.edu/news/the-data-whisperer-of-the-pool/" style={{ color: 'var(--orange)', borderBottom: '1px solid currentColor', textDecoration: 'none' }}>The Data Whisperer of the Pool</a>.
          </p>
        </div>
        <div className="ro-sport-table">
          <div className="ro-sport-row">
            <span className="ro-sport-era">NBAC</span>
            <span className="ro-sport-title">North Baltimore <em>Aquatic Club</em></span>
          </div>
          <div className="ro-sport-row">
            <span className="ro-sport-era">CLUB</span>
            <span className="ro-sport-title">Maryland state <em>record holder</em></span>
          </div>
          <div className="ro-sport-row">
            <span className="ro-sport-era">UVA</span>
            <span className="ro-sport-title">All-American &amp; school <em>record holder</em>, Virginia swimming</span>
          </div>
          <div className="ro-sport-row">
            <span className="ro-sport-era">UVA</span>
            <span className="ro-sport-title">Hardest Worker &amp; Coaches' Award for <em>Leadership</em></span>
          </div>
          <div className="ro-sport-row">
            <span className="ro-sport-era">2004</span>
            <span className="ro-sport-title">U.S. Olympic <em>Trials</em></span>
          </div>
          <div className="ro-sport-row">
            <span className="ro-sport-era">After</span>
            <span className="ro-sport-title">Triathlon, Crossfit, and <em>the gym</em></span>
          </div>
          <a className="ro-sport-row is-link" href="https://impulse.works/">
            <span className="ro-sport-era">Now</span>
            <span className="ro-sport-title">Impulse<em>.</em></span>
            <span className="ro-sport-arrow">impulse.works →</span>
          </a>
        </div>
      </section>

      {/* ============ CTA ============ */}
      <section className="ro-cta" id="contact">
        <RoFx />
        <RoOrbit cta />
        <div>
          <div className="ro-cta-eyebrow">§ 07 · Get in touch</div>
          <h2>
            Let's <em>talk.</em>
          </h2>
        </div>
        <div className="ro-cta-side">
          <a className="is-primary" href="https://calendly.com/profkerp/consulting">
            <span>Book a consulting call</span><span>→</span>
          </a>
          <a href="https://www.linkedin.com/in/adamkerpelman/">
            <span>LinkedIn</span><span>→</span>
          </a>
          <a href="mailto:hello@marketingmachine.studio">
            <span>hello@marketingmachine.studio</span><span>→</span>
          </a>
        </div>
      </section>

      {/* ============ FOOTER ============ */}
      <footer className="ro-footer">
        <div className="ro-footer-top">
          <p className="ro-footer-wm">Prof <em>Kerp.</em></p>
          <div className="ro-footer-cols">
            <div className="ro-footer-col">
              <h5>Site</h5>
              <a href="#about">About</a>
              <a href="#projects">Projects</a>
              <a href="#publishing">Publishing</a>
              <a href="#archive">Archive</a>
              <a href="#contact">Contact</a>
            </div>
            <div className="ro-footer-col">
              <h5>Make</h5>
              <a href="https://marketingmachine.studio">Marketing Machine</a>
              <a href="http://zengineeringpodcast.com">Zengineering</a>
            </div>
            <div className="ro-footer-col">
              <h5>Find</h5>
              <a href="https://www.linkedin.com/in/adamkerpelman/">LinkedIn</a>
              <a href="https://calendly.com/profkerp/consulting">Calendly</a>
              <a href="mailto:hello@marketingmachine.studio">Email</a>
            </div>
          </div>
        </div>
        <div className="ro-footer-base">
          <span>© 2026 Adam Kerpelman · Charlottesville VA</span>
          <span className="ro-rocket">🚀 Kerp</span>
        </div>
      </footer>
    </div>);

}

window.RotundaDirection = RotundaDirection;