app.js

/* Generated by tools/build-static.js — compiled ahead of time, do not edit. */

/* ---- ui_kits/portfolio/scene-visual.jsx ---- */
(function () {
const {
  RegistrationMark
} = window.CalebStacyPortfolioDesignSystem_4a3883;
function SceneCharacter({
  src,
  alt
}) {
  return /*#__PURE__*/React.createElement("div", {
    "data-ds": "scene-character",
    style: {
      position: "absolute",
      zIndex: 5,
      top: 0,
      right: 0,
      bottom: 0,
      width: "51%" /* copy is min(49%,560px); 49 + 51 = 100, so the two never touch */,
      pointerEvents: "none",
      animation: "character-enter var(--dur-character) var(--delay-character) var(--ease-authored) both"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: "absolute",
      zIndex: 0,
      right: "3%",
      bottom: "3%",
      width: "76%",
      height: "9%",
      borderRadius: "50%",
      background: "rgba(4,26,22,0.45)",
      filter: "blur(18px)"
    }
  }), /*#__PURE__*/React.createElement("img", {
    src: src,
    alt: alt,
    style: {
      position: "absolute",
      inset: 0,
      width: "100%",
      height: "100%",
      objectFit: "contain",
      objectPosition: "bottom right"
    }
  }));
}
Object.assign(window, {
  SceneCharacter,
  RegistrationMark
});
})();

/* ---- ui_kits/portfolio/screen-project.jsx ---- */
(function () {
const {
  Stage,
  StageCopy,
  StorySection,
  Outcome,
  StageAction,
  ChapterNav,
  FactsPanel,
  CardGrid,
  GridCard,
  Ledger,
  SourceMap,
  Pipeline,
  DataTable,
  ArtifactFigure,
  PullQuote,
  ProvenanceNote,
  Eyebrow,
  RegistrationMark,
  LineArrow
} = window.CalebStacyPortfolioDesignSystem_4a3883;
function ProjectDocument({
  project,
  chapters,
  onNext,
  nextProject,
  scrollRef
}) {
  const [chapter, setChapter] = React.useState("overview");
  React.useEffect(() => {
    const node = scrollRef.current;
    if (!node) return;
    const onScroll = () => {
      const marks = node.querySelectorAll("[data-chapter]");
      let current = "overview";
      marks.forEach(m => {
        if (m.getBoundingClientRect().top < 220) current = m.dataset.chapter;
      });
      setChapter(current);
    };
    node.addEventListener("scroll", onScroll, {
      passive: true
    });
    return () => node.removeEventListener("scroll", onScroll);
  }, [project.id, scrollRef]);
  const glide = React.useRef(null);
  /* The glide writes scrollTop every frame; without this it keeps writing to a detached
     scroller when the reader switches documents mid-animation. */
  React.useEffect(() => () => {
    if (glide.current) cancelAnimationFrame(glide.current);
  }, []);
  const jump = id => {
    const node = scrollRef.current;
    const target = node && node.querySelector('[data-chapter="' + id + '"]');
    if (!node || !target) return;
    const to = Math.max(0, node.scrollTop + target.getBoundingClientRect().top - node.getBoundingClientRect().top - 64);
    if (glide.current) cancelAnimationFrame(glide.current);
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      node.scrollTop = to;
      return;
    }
    const from = node.scrollTop,
      start = performance.now(),
      dur = 430;
    const ease = x => {
      const b = (t, p, q) => 3 * (1 - t) * (1 - t) * t * p + 3 * (1 - t) * t * t * q + t * t * t;
      let lo = 0,
        hi = 1,
        t = x;
      for (let i = 0; i < 12; i++) {
        t = (lo + hi) / 2;
        if (b(t, 0.16, 0.3) < x) lo = t;else hi = t;
      }
      return b(t, 1, 1);
    };
    const step = now => {
      const p = Math.min(1, (now - start) / dur);
      node.scrollTop = from + (to - from) * ease(p);
      if (p < 1) glide.current = requestAnimationFrame(step);
    };
    glide.current = requestAnimationFrame(step);
  };
  const artifacts = project.artifacts || [];
  const hasArtifacts = artifacts.length > 0;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stage, {
    style: {
      minHeight: "min(660px, calc(100svh - 84px))",
      display: "flex"
    }
  }, /*#__PURE__*/React.createElement(RegistrationMark, null), /*#__PURE__*/React.createElement(StageCopy, {
    eyebrow: "Project " + project.number + " · " + project.context,
    title: project.title,
    statement: project.statement,
    deck: project.summary
  }, project.results ? /*#__PURE__*/React.createElement(Outcome, {
    label: project.outcomeLabel,
    items: project.results
  }) : /*#__PURE__*/React.createElement(Outcome, {
    label: project.outcomeLabel
  }, project.outcomeProse)), /*#__PURE__*/React.createElement(SceneCharacter, {
    src: project.character,
    alt: project.characterAlt
  })), /*#__PURE__*/React.createElement(ChapterNav, {
    chapters: chapters,
    active: chapter,
    onSelect: jump
  }), /*#__PURE__*/React.createElement("div", {
    "data-chapter": "overview"
  }, /*#__PURE__*/React.createElement(FactsPanel, {
    facts: [{
      label: "Role",
      value: project.role
    }, {
      label: "Team and surface",
      value: project.teamSurface
    }]
  })), /*#__PURE__*/React.createElement("div", {
    "data-chapter": "problem"
  }, /*#__PURE__*/React.createElement(StorySection, {
    tone: "paper",
    index: "01",
    chapterLabel: "Problem",
    kicker: "The operating condition",
    title: project.statement,
    intro: project.summary
  }, /*#__PURE__*/React.createElement(SourceMap, {
    items: project.sources
  }), /*#__PURE__*/React.createElement(Ledger, {
    items: project.ledger,
    style: {
      marginTop: "var(--space-6)"
    }
  }), /*#__PURE__*/React.createElement(ProvenanceNote, null, "Figures here are what's public. Where an exact lift is not public, this document says so."))), /*#__PURE__*/React.createElement("div", {
    "data-chapter": "reframe"
  }, /*#__PURE__*/React.createElement(StorySection, {
    tone: "stage",
    index: "02",
    chapterLabel: "Reframe",
    kicker: "What I changed",
    title: "The reframe that made the work possible."
  }, /*#__PURE__*/React.createElement(PullQuote, {
    attribution: project.quoteBy
  }, project.quote))), /*#__PURE__*/React.createElement("div", {
    "data-chapter": "decisions"
  }, /*#__PURE__*/React.createElement(StorySection, {
    tone: "dark",
    index: "03",
    chapterLabel: "Decisions",
    kicker: "How it works",
    title: "The decisions worth repeating.",
    intro: "Each row below is a decision I would make again on a comparable product."
  }, /*#__PURE__*/React.createElement(Pipeline, {
    steps: project.pipeline.map(label => ({
      label
    }))
  }), /*#__PURE__*/React.createElement(CardGrid, {
    columns: 2,
    label: "Ownership",
    style: {
      marginTop: "var(--space-8)"
    }
  }, /*#__PURE__*/React.createElement(GridCard, {
    label: "What I led",
    title: "Content design",
    body: project.role
  }), /*#__PURE__*/React.createElement(GridCard, {
    label: "What I did not own",
    title: "Boundaries",
    body: "Engineering implementation, research execution, and product prioritisation belonged to partners named above."
  })))), /*#__PURE__*/React.createElement("div", {
    "data-chapter": "proof"
  }, /*#__PURE__*/React.createElement(StorySection, {
    tone: "bright",
    index: "04",
    chapterLabel: "Proof",
    kicker: hasArtifacts ? "Evidence" : "What I can and cannot show",
    title: hasArtifacts ? "What the work produced." : "The results are real. The screens are not mine to publish.",
    intro: hasArtifacts ? "Artifacts carry their own provenance labels." : undefined
  }, project.table && /*#__PURE__*/React.createElement(DataTable, {
    variant: "result",
    columns: project.table.columns,
    rows: project.table.rows
  }), artifacts.map(a => /*#__PURE__*/React.createElement(ArtifactFigure, {
    key: a.src,
    style: {
      marginTop: "var(--space-8)"
    },
    contain: true,
    src: a.src,
    alt: a.alt || a.caption,
    label: a.label,
    caption: a.caption
  })), /*#__PURE__*/React.createElement(ProvenanceNote, null, project.evidenceNote || "Internal material is never exposed. Reconstructions are labelled as reconstructions."))), /*#__PURE__*/React.createElement("div", {
    "data-ds": "case-next",
    style: {
      minHeight: 190,
      display: "flex",
      justifyContent: "space-between",
      gap: 24,
      alignItems: "center",
      padding: "0 var(--gutter)",
      background: "var(--paper)",
      borderTop: "1px solid var(--ink)"
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Eyebrow, {
    size: "micro",
    tone: "signal"
  }, "Next project"), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: "10px 0 0",
      fontFamily: "var(--font-sans)",
      fontSize: "var(--display-s-size)",
      fontWeight: "var(--display-s-weight)",
      letterSpacing: "var(--display-s-tracking)"
    }
  }, nextProject.title)), /*#__PURE__*/React.createElement(StageAction, {
    accent: "signal",
    onClick: onNext
  }, nextProject.statement)));
}
Object.assign(window, {
  ProjectDocument
});
})();

/* ---- ui_kits/portfolio/screen-verso.jsx ---- */
(function () {
const {
  Stage,
  StageCopy,
  Outcome,
  RegistrationMark,
  VersoHero,
  CaseMeta,
  StageAction,
  Eyebrow
} = window.CalebStacyPortfolioDesignSystem_4a3883;

/* Rebuilt 2026-07-26 into the Horizon scroll grammar (see screen-horizon.jsx's own file comment
   for the four rules this follows: one ground below the cover, no second cover, three text
   sizes, artifacts float light) with one addition Horizon does not need: Verso now has three
   satellite pages — Agent, Engine, Index — reached through three doors inside the story rather
   than through a demo. Per reference/verso-subpages-plan.md: "the main story never demos; the
   sub-pages never narrate." So everything that used to be a rendered instrument here (the
   research grid, the fingerprint bars, the score ring, the rewrite diff, the index rows, the
   rule split, the source map, the toolchain) moved to screen-verso-subpages.jsx, in full, with
   room to be the subject instead of an aside. What is left below is four beats: the problem,
   the system thesis, three doors to the implementation, and the strongest ownership and adoption
   evidence.

   The cover and the satellite pages use the same public-safe draft, revision, and measurement
   fixture. The cover omits an aggregate score because this example does not define an honest
   scalar; it shows only the supported dimension readings and the re-measurement verdict. */

const REWRITE = {
  before: "Oops! Something went wrong with your world. Don't worry, we're fixing it! Please try again in a few minutes and everything should be back to normal.",
  after: "We couldn't load your world. Check your connection and try again, or come back in a few minutes.",
  deltas: [{
    name: "Words",
    from: 27,
    to: 19
  }, {
    name: "Formality",
    from: 25,
    to: 68
  }, {
    name: "Directness",
    from: 45,
    to: 88
  }, {
    name: "Brevity",
    from: 40,
    to: 82
  }]
};
const MEASURED_DIMS = [{
  name: "Formality",
  value: 82
}, {
  name: "Vocabulary",
  value: 65
}, {
  name: "Directness",
  value: 90
}, {
  name: "Conciseness",
  value: 71
}];

/* The cover instrument's checks window. Generic phrasing — no internal tool names — narrating
   the same measure-and-rewrite pass the Agent page shows in full below. */
const HERO_THINKING = ["Reading the draft against the context's measurement profile", "Comparing eleven dimensions to the target band", "Two dimensions out of band", "Drafting a rewrite with the deltas attached"];

/* The closing beat's self-check. Verso measured ELEVEN dimensions (the sacred count; the
   twelve-dimension trace belongs to the later open-source engine and must not appear here) —
   `trace.json` on the (unmerged, at the time this shipped) `governance` branch, the same
   voice_runtime engine this case describes, run on a different example than the Delivery
   section's illustrative reading below. That file is not part of this change (plays/ is out of
   scope here) — if it lands under a different path or the numbers move, update this string to
   match rather than leave it stale, or close verbally instead ("Re-measured: in band."). Never
   invent a number here.*/
const HERO_SELF_LINT = {
  line: "Re-measuring the revision",
  verdict: "Re-measured: all eleven dimensions in band."
};
const header = {
  margin: 0,
  textAlign: "left",
  fontFamily: "var(--font-sans)",
  fontSize: "var(--display-m-size)",
  fontWeight: "var(--display-m-weight)",
  lineHeight: "var(--display-m-leading)",
  letterSpacing: "var(--display-m-tracking)"
};
const proseCol = {
  marginTop: 22,
  display: "flex",
  flexDirection: "column",
  gap: "1.15em",
  fontFamily: "var(--font-sans)",
  fontSize: "var(--prose-size)",
  lineHeight: "var(--prose-leading)",
  letterSpacing: "var(--prose-tracking)"
};
const SECTION_PAD_FIRST = "clamp(40px,6vh,64px) var(--gutter) 0";
const SECTION_PAD = "0 var(--gutter) clamp(56px,8vh,96px)";
const HAIRLINE = "1px solid color-mix(in srgb, var(--story-ink) 25%, transparent)";
function Beat({
  id,
  first,
  title,
  children
}) {
  return /*#__PURE__*/React.createElement("section", {
    "data-tone": "dark",
    style: {
      background: "var(--story-bg)",
      color: "var(--story-ink)",
      padding: first ? SECTION_PAD_FIRST : SECTION_PAD
    }
  }, /*#__PURE__*/React.createElement("div", {
    id: id,
    style: {
      maxWidth: 640,
      margin: "0 auto",
      scrollMarginTop: 56,
      ...(first ? null : {
        borderTop: HAIRLINE,
        paddingTop: "clamp(40px,6vh,64px)"
      })
    }
  }, title && /*#__PURE__*/React.createElement("h2", {
    style: header
  }, title), /*#__PURE__*/React.createElement("div", {
    style: proseCol
  }, children)));
}

/* A quiet door: one sentence, the site's drawn-underline link, never a card. Placed at the end
   of the paragraph it belongs to, so the destination is already obvious from what was just
   said. */
function Door({
  onOpen,
  children
}) {
  return /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 4
    }
  }, /*#__PURE__*/React.createElement(StageAction, {
    accent: "signal",
    onClick: onOpen
  }, children));
}
function VersoDocument({
  project,
  onNext,
  nextProject,
  onNavigate,
  scrollRef
}) {
  const open = id => () => onNavigate && onNavigate(id);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stage, {
    style: {
      minHeight: "min(660px, calc(100svh - 84px))",
      display: "flex"
    }
  }, /*#__PURE__*/React.createElement(RegistrationMark, null), /*#__PURE__*/React.createElement(StageCopy, {
    eyebrow: "Project " + project.number + " · " + project.context,
    title: project.title,
    statement: project.statement,
    deck: project.summary
  }, /*#__PURE__*/React.createElement(Outcome, {
    label: project.outcomeLabel,
    items: project.results
  })), /*#__PURE__*/React.createElement(VersoHero, {
    draft: REWRITE.before,
    thinkingLabel: "Checks",
    thinking: HERO_THINKING,
    reading: {
      verdict: "Two dimensions outside the applicable range.",
      dimensions: MEASURED_DIMS
    },
    rewrite: {
      after: REWRITE.after,
      deltas: REWRITE.deltas
    },
    selfLint: HERO_SELF_LINT
  })), /*#__PURE__*/React.createElement(Beat, {
    id: "overview",
    first: true
  }, /*#__PURE__*/React.createElement(CaseMeta, {
    role: project.role,
    team: project.team,
    timeline: project.timeline,
    surface: project.surface
  })), /*#__PURE__*/React.createElement(Beat, {
    id: "condition",
    title: "Content design was being asked to get on the loop, with no way to check what “on standard” meant."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "AI was moving faster than the org around it. Every week another content designer had built their own agent, the kind you'd hear about secondhand: “I made one that does this.” Every one of those agents was a prompt file shaped like software, and a prompt file shaped like software fails like software eventually. It just fails quietly, with nothing built in to say so."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Central content design was asking the harder question underneath all of it. If we stop reviewing every draft an agent writes and trust it to write on its own, on the loop instead of in it, how do we know the writing is any good? Guidance said things like “be concise” and “sound genuine.” Both are true, and both are useless to a writer, because they describe what a reader feels, not what a writer does to produce that feeling.")), /*#__PURE__*/React.createElement(Beat, {
    id: "question",
    title: "Every claim is routed to the strongest computation it can honestly support."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Voice and tone are not directly measurable properties of copy. They are reader interpretations produced by measurable patterns in language, context, and relationship. Verso measured eleven of those observable patterns and let an agent compare a draft to an adopted target for its context. That did not turn “warm” into a number. It made the evidence under the metaphor inspectable — and, once a target existed, difficult to ignore accidentally."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "A yes-or-no rule, like never say “click” or keep sentence case always, was solved by a regular expression decades ago. What was left, once all of that was pulled out, was smaller than anyone expected. It was almost all voice and tone. So I went looking for research on how language itself could be measured instead of just described: how formal a sentence reads, how direct it is, its rhythm, its density.")), /*#__PURE__*/React.createElement(Beat, {
    id: "built",
    title: "What I built ended up being three things that only work together."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "The agent is Verso. It drafts, and then it checks its own draft before a person ever sees it, the same way a build fails before it ships instead of after."), /*#__PURE__*/React.createElement(Door, {
    onOpen: open("verso/agent")
  }, "How the agent worked"), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: "22px 0 0"
    }
  }, "Underneath it is the engine: eleven dimensions of language, each one sitting on published research, run as deterministic code rather than another model's opinion. It reads a draft against a target and hands back a reading: whether the draft sits in band, and if not, by how much."), /*#__PURE__*/React.createElement(Door, {
    onOpen: open("verso/engine")
  }, "How the reading worked"), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: "22px 0 0"
    }
  }, "And underneath that is the index. I consolidated everything guidance had scattered across wikis, chat threads, spreadsheets and posts, ran a taxonomy over the pile, and categorized every rule by whether a machine could check it. What survived the sort became records a tool could route: versioned, owned, scoped to a surface and marked as a blocker or an advisory."), /*#__PURE__*/React.createElement(Door, {
    onOpen: open("verso/index")
  }, "What the index held")), /*#__PURE__*/React.createElement(Beat, {
    id: "proof",
    title: "I built it alone. It spread before I asked anyone to use it."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "I built all of it myself, over about six months: the agent, the engine, the taxonomy underneath it and the index. It ran on Meta's internal infrastructure, and once central content design was ready to take it on formally, I handed it to them."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "By the time central content design took it over, it had reached nearly sixty content designers across the company, and the agent had logged more than 500 conversations testing and refining what it should say. With central, it went from live on one product area to running company-wide in about six months, on word of mouth, before the partnership was even formal."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "I was laid off in the middle of finishing that handoff. Central kept running it anyway. It's still in use.")), /*#__PURE__*/React.createElement("div", {
    id: "next",
    "data-ds": "case-next",
    style: {
      minHeight: 190,
      scrollMarginTop: 56,
      display: "flex",
      justifyContent: "space-between",
      gap: 24,
      alignItems: "center",
      padding: "0 var(--gutter)",
      background: "var(--paper)",
      borderTop: "1px solid var(--ink)"
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Eyebrow, {
    size: "micro",
    tone: "signal"
  }, "Next project"), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: "10px 0 0",
      fontFamily: "var(--font-sans)",
      fontSize: "var(--display-s-size)",
      fontWeight: "var(--display-s-weight)",
      letterSpacing: "var(--display-s-tracking)"
    }
  }, nextProject.title)), /*#__PURE__*/React.createElement(StageAction, {
    accent: "signal",
    onClick: onNext
  }, nextProject.statement)));
}
Object.assign(window, {
  VersoDocument
});
})();

/* ---- ui_kits/portfolio/screen-verso-subpages.jsx ---- */
(function () {
const {
  Eyebrow,
  StageAction,
  ResearchGrid,
  SourceMap,
  IndexRows,
  EvidenceTrace,
  BeforeAfter
} = window.CalebStacyPortfolioDesignSystem_4a3883;

/* Verso has three satellite pages because the system has three different jobs.

   Agent follows a draft through generation and the self-check.
   Engine shows which claims a method can honestly support.
   Index shows where evidence and adopted policy live so neither the model nor the code has to
   invent them.

   The original sub-page plan said these pages should not narrate. The reader-facing essays and
   the portfolio's current narrative rule made the problem with that clear: an isolated link still
   has to tell a reader what the artifact is and why it exists. It also has to show where the
   evidence stops. The
   pages below keep their instrument richness, but each now has its own causal arc and its own
   object. They do not repeat one scalar score three times.

   The rewrite is public-safe example copy written for this portfolio. It is not an internal
   screen or a recovered Meta string. It discloses no internal measurement. */

const HAIRLINE = "1px solid color-mix(in srgb, var(--story-ink) 25%, transparent)";
const SECTION_PAD_FIRST = "clamp(36px,5.5vh,56px) var(--gutter) 0";
const SECTION_PAD = "0 var(--gutter) clamp(48px,7vh,84px)";
const header = {
  margin: 0,
  textAlign: "left",
  fontFamily: "var(--font-sans)",
  fontSize: "var(--display-m-size)",
  fontWeight: "var(--display-m-weight)",
  lineHeight: "var(--display-m-leading)",
  letterSpacing: "var(--display-m-tracking)"
};
const proseCol = {
  marginTop: 22,
  display: "flex",
  flexDirection: "column",
  gap: "1.15em",
  fontFamily: "var(--font-sans)",
  fontSize: "var(--prose-size)",
  lineHeight: "var(--prose-leading)",
  letterSpacing: "var(--prose-tracking)"
};
const artifactNote = {
  margin: "4px 0 0",
  color: "var(--story-muted)",
  fontFamily: "var(--font-sans)",
  fontSize: "var(--body-size)",
  lineHeight: 1.45
};
const VERSO_REWRITE = {
  before: "Oops! Something went wrong with your world. Don't worry, we're fixing it! Please try again in a few minutes and everything should be back to normal.",
  after: "We couldn't load your world. Check your connection and try again, or come back in a few minutes."
};
const VERSO_AGENT_TRACE = [{
  step: "Receive the brief or draft",
  detail: "Verso starts with the writing job, the product surface, and the context the string will appear in."
}, {
  step: "Produce one draft",
  detail: "The draft is the exact string under review. The agent's explanation is kept separate from it."
}, {
  step: "Load the applicable record",
  detail: "The Content Index, Verso's governed matrix, supplies the scoped profile and any adopted rules that apply to this kind of string."
}, {
  step: "Measure that string",
  detail: "The Engine returns separate findings with their methods and limits. It does not replace them with one quality score."
}, {
  step: "Revise and check again",
  detail: "When the draft changes, the new string gets a new check. The prior result cannot certify different text."
}, {
  step: "Return the current evidence",
  detail: "The person reviewing the work sees the current draft and the findings that actually belong to it."
}];
const VERSO_RESEARCH = [{
  source: "Biber",
  year: "1988",
  gives: "Multidimensional register analysis",
  note: "Co-occurring linguistic features can distinguish kinds of language in a corpus. That supports a comparison method; it does not prove a brand effect."
}, {
  source: "Searle",
  year: "1976",
  gives: "Speech-act categories",
  note: "Requests, promises, apologies, and assertions give a reviewer categories to define and test. The paper does not validate an automatic classifier by itself."
}, {
  source: "Brown & Levinson",
  year: "1987",
  gives: "Politeness strategies",
  note: "Their framework gives names to mitigation and face work. Whether a reader experiences a string as considerate remains a claim about readers."
}, {
  source: "Halliday",
  year: "1985",
  gives: "Lexical density",
  note: "The ratio of content words to total words is computable. The ratio does not become a clarity score simply because it returns a number."
}];
const VERSO_CLAIM_ROUTES = [{
  id: "claim.exact_feature",
  asserts: "Can the property be established from the exact string? Run versioned code and return the result for that property.",
  meta: ["method · code", "supports · construction within declared scope"]
}, {
  id: "claim.observed_pattern",
  asserts: "How often did a construction appear in comparable shipped strings? Compute the distribution and keep the sample visible.",
  meta: ["method · corpus", "supports · description, never policy by frequency"]
}, {
  id: "claim.contextual_reading",
  asserts: "What reading might the construction support here? Record an identified interpretation and its evidence. Keep the uncertainty visible.",
  meta: ["method · review or validated model", "supports · a bounded hypothesis, not a reader effect"]
}, {
  id: "claim.reader_effect",
  asserts: "Did people experience the string as clear, human, reassuring, or persuasive? That question needs research with the relevant readers.",
  meta: ["method · human research", "supports · an audience effect within the study"]
}, {
  id: "claim.policy_conformance",
  asserts: "Does the string meet an adopted target? The Engine can answer only after the Index supplies an authorized rule and scope. The exception state must be known too.",
  meta: ["method · adopted rule plus code", "missing policy · unresolved"]
}];
const VERSO_INDEX_ROWS = [{
  id: "<context>.evidence.observed.v1",
  asserts: "What the defined sample did. The record keeps the source, sample, string type, method, and date beside the observation.",
  meta: ["status · descriptive", "revision preserves history"]
}, {
  id: "<context>.target.proposed.v1",
  asserts: "A future-facing target someone has proposed from the evidence. It remains a proposal until an authorized owner decides.",
  meta: ["status · proposed", "rationale and open exceptions named"]
}, {
  id: "<context>.policy.adopted.v1",
  asserts: "The decision a named owner adopted, including where it applies, when it does not, and when it should be reviewed.",
  meta: ["status · adopted", "owner, scope, and exceptions named"]
}, {
  id: "<context>.check.executable.v1",
  asserts: "The versioned implementation of an adopted rule, with examples that should pass, fail, and remain outside its scope.",
  meta: ["method · code", "policy reference, tests, and version"]
}, {
  id: "<context>.interpretation.review.v1",
  asserts: "A contextual reading that still needs a person or validated classifier. Its evidence and uncertainty stay visible; it cannot quietly become a blocker.",
  meta: ["status · review with method and owner", "insufficient evidence · unresolved"]
}];
const VERSO_SOURCES = ["Central content guidance", "Product-area guidance", "Docs, chats, and spreadsheets", "Real shipped strings"];

/* ---- shared layout: compact pine band, ink-ground beats, paper doors ---- */

function SubHeader({
  eyebrow,
  title,
  purpose,
  onBack
}) {
  return /*#__PURE__*/React.createElement("header", {
    "data-tone": "stage",
    style: {
      background: "var(--stage-field-section)",
      color: "var(--stage-ink)"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      maxWidth: 640,
      margin: "0 auto",
      padding: "clamp(20px,4vh,32px) var(--gutter) clamp(30px,5vh,44px)"
    }
  }, onBack && /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: "clamp(14px,2.6vh,22px)"
    }
  }, /*#__PURE__*/React.createElement(StageAction, {
    accent: "stage",
    reverse: true,
    onClick: onBack,
    style: {
      padding: "11px 0 12px"
    }
  }, "Back to the story")), eyebrow && /*#__PURE__*/React.createElement(Eyebrow, {
    tone: "stage",
    style: {
      marginBottom: 12
    }
  }, eyebrow), /*#__PURE__*/React.createElement("h1", {
    "data-doc-heading": true,
    tabIndex: -1,
    style: {
      margin: 0,
      color: "var(--stage-ink)",
      fontFamily: "var(--font-sans)",
      fontSize: "var(--display-l-size)",
      fontWeight: "var(--display-l-weight)",
      lineHeight: "var(--display-l-leading)",
      letterSpacing: "var(--display-l-tracking)",
      textWrap: "balance"
    }
  }, title), purpose && /*#__PURE__*/React.createElement("p", {
    style: {
      maxWidth: 520,
      margin: "14px 0 0",
      color: "var(--stage-muted)",
      fontFamily: "var(--font-sans)",
      fontSize: "var(--lede-size)",
      lineHeight: "var(--lede-leading)",
      letterSpacing: "var(--lede-tracking)"
    }
  }, purpose)));
}
function Beat({
  id,
  first,
  title,
  children
}) {
  return /*#__PURE__*/React.createElement("section", {
    "data-tone": "dark",
    style: {
      background: "var(--story-bg)",
      color: "var(--story-ink)",
      padding: first ? SECTION_PAD_FIRST : SECTION_PAD
    }
  }, /*#__PURE__*/React.createElement("div", {
    id: id,
    style: {
      maxWidth: 640,
      margin: "0 auto",
      scrollMarginTop: 56,
      ...(first ? null : {
        borderTop: HAIRLINE,
        paddingTop: "clamp(36px,5.5vh,56px)"
      })
    }
  }, title && /*#__PURE__*/React.createElement("h2", {
    style: header
  }, title), /*#__PURE__*/React.createElement("div", {
    style: proseCol
  }, children)));
}
function SubDoors({
  onBack,
  onForward,
  forwardLabel
}) {
  return /*#__PURE__*/React.createElement("div", {
    "data-ds": "case-next",
    style: {
      minHeight: 150,
      display: "flex",
      flexWrap: "wrap",
      justifyContent: "space-between",
      gap: "18px 32px",
      alignItems: "center",
      padding: "clamp(28px,5vh,44px) var(--gutter)",
      background: "var(--paper)",
      borderTop: "1px solid var(--ink)"
    }
  }, /*#__PURE__*/React.createElement(StageAction, {
    accent: "ink",
    reverse: true,
    onClick: onBack,
    style: {
      padding: "12px 0 14px"
    }
  }, "Back to the story"), /*#__PURE__*/React.createElement(StageAction, {
    accent: "signal",
    onClick: onForward,
    style: {
      padding: "12px 0 14px"
    }
  }, forwardLabel));
}

/* ============================================================================================
   AGENT — the exact draft and its self-check loop
   ============================================================================================ */

function VersoAgentDocument({
  project,
  onNavigate,
  scrollRef
}) {
  const toStory = () => onNavigate && onNavigate("verso");
  const toEngine = () => onNavigate && onNavigate("verso/engine");
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SubHeader, {
    eyebrow: "Verso",
    title: "Agent",
    purpose: "What happened between a writing brief and the draft Verso returned: generate the text, measure that exact string, then check any revision.",
    onBack: toStory
  }), /*#__PURE__*/React.createElement(Beat, {
    id: "draft",
    first: true,
    title: "Verso was the part a content designer talked to."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "A designer gave the internal agent a brief or a draft. Verso proposed copy, sent that proposed string to the measurement service, and used the findings to decide whether another pass was needed. The model handled the open-ended act of writing. The Engine handled the repeatable measurement."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "The draft was the exact string that might be returned. Keeping it separate from the surrounding explanation mattered: a fluent rationale could not stand in for a check on the words a person might actually ship."), /*#__PURE__*/React.createElement(BeforeAfter, {
    style: {
      marginTop: 4
    },
    before: VERSO_REWRITE.before,
    after: VERSO_REWRITE.after,
    beforeLabel: "Example draft",
    afterLabel: "Revised draft"
  }), /*#__PURE__*/React.createElement("p", {
    style: artifactNote
  }, "This is portfolio copy built to show the sequence. It is not an internal Meta screen, and neither string came from a Meta product.")), /*#__PURE__*/React.createElement(Beat, {
    id: "self-check",
    title: "The check followed the draft when the words changed."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Verso used the same measurement service on its own writing that it used on a designer's draft. If the result fell outside the applicable target, the agent could adjust the copy and call the service again. The revision had to be measured as a new string. A result for the earlier draft said nothing about the changed one."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "That separation is the self-lint loop. Generation can vary. The check runs as its own operation, with the context and current draft made explicit each time."), /*#__PURE__*/React.createElement(EvidenceTrace, {
    label: "Self-check loop",
    steps: VERSO_AGENT_TRACE,
    style: {
      marginTop: 4
    }
  })), /*#__PURE__*/React.createElement(Beat, {
    id: "authority",
    title: "Policy still needed an owner."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "The agent could interpret a brief and propose or repair drafts. It did not get to turn a preference into policy. The applicable target came from a governed record, and the Engine applied only the check that record supported."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Some questions remained open after the checks ran. A person still had to decide whether the copy fit the situation, and a claimed effect on readers still required research with readers. When neither evidence nor an adopted decision settled the question, the honest result was unresolved.")), /*#__PURE__*/React.createElement(SubDoors, {
    onBack: toStory,
    onForward: toEngine,
    forwardLabel: "See how Engine bounded each claim"
  }));
}

/* ============================================================================================
   ENGINE — the method has to match the claim
   ============================================================================================ */

function VersoEngineDocument({
  project,
  onNavigate,
  scrollRef
}) {
  const toStory = () => onNavigate && onNavigate("verso");
  const toIndex = () => onNavigate && onNavigate("verso/index");
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SubHeader, {
    eyebrow: "Verso",
    title: "Engine",
    purpose: "What the Engine could establish about an exact string, which method supported the finding, and where the claim had to stop.",
    onBack: toStory
  }), /*#__PURE__*/React.createElement(Beat, {
    id: "object",
    first: true,
    title: "The Engine received one string in one context."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "The Engine was a Python measurement service running warm on Meta's infrastructure. It did not write. Verso sent it the current string and the product context. The service computed eleven dimensions of language and returned the findings to the agent."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "I used to describe that as measuring voice. I think the narrower account is more useful. The Engine measured linguistic evidence: sentence structure, directness, density, cadence, lexical choices, and other observable features. “Human,” “warm,” and “confident” remained interpretations people could form from that evidence in a particular situation.")), /*#__PURE__*/React.createElement(Beat, {
    id: "router",
    title: "Every claim needs the strongest computation it can honestly support."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "A number can make several different claims look interchangeable. They are not. An exact count, a corpus comparison, a contextual interpretation, and a reader-effect study require different evidence. The router below is how I describe that boundary now: it keeps the method attached to the claim."), /*#__PURE__*/React.createElement(IndexRows, {
    label: "Claim router",
    rows: VERSO_CLAIM_ROUTES,
    style: {
      marginTop: 4
    }
  })), /*#__PURE__*/React.createElement(Beat, {
    id: "research",
    title: "Published research supplied methods with narrower claims."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "I built the eleven-dimension system from computational linguistics and standard Python tools. A published framework can justify a definition or calculation. It does not validate my implementation, establish a product target, or prove how a reader will respond. Those are separate jobs with separate evidence."), /*#__PURE__*/React.createElement(ResearchGrid, {
    items: VERSO_RESEARCH,
    style: {
      marginTop: 4
    }
  })), /*#__PURE__*/React.createElement(Beat, {
    id: "profile",
    title: "A profile belongs to a defined kind of language."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "I derived context-specific profiles from real shipped strings. A button label and an error message do different jobs. A paragraph of explanation does another. Averaging them together mostly describes the sample mix. Each comparison needs the same kind of string and surface, with enough language for the method to mean anything."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Several dimensions need more text than a short label contains. In that case the Engine should return unavailable. Low and unavailable are different findings. A missing measurement cannot be repaired by drawing a zero."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "The observed range is descriptive evidence. It becomes a target only after an authorized owner adopts it for a stated scope. The Index carries that decision.")), /*#__PURE__*/React.createElement(SubDoors, {
    onBack: toStory,
    onForward: toIndex,
    forwardLabel: "See where policy lived in Index"
  }));
}

/* ============================================================================================
   INDEX — evidence, adoption, scope, and authority
   ============================================================================================ */

function VersoIndexDocument({
  project,
  onNavigate,
  scrollRef
}) {
  const toStory = () => onNavigate && onNavigate("verso");
  const toAgent = () => onNavigate && onNavigate("verso/agent");
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SubHeader, {
    eyebrow: "Verso",
    title: "Index",
    purpose: "How scattered content guidance and shipped-language evidence became records an agent could use without inventing the policy.",
    onBack: toStory
  }), /*#__PURE__*/React.createElement(Beat, {
    id: "definition",
    first: true,
    title: "Content Index is my name for the matrix behind the system."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "I built the first one inside Verso. I consolidated content guidance that lived across documents, chats, spreadsheets, and posts, then paired it with patterns computed from real product strings. The Index gave the agent one machine-readable place to find the context that applied to its draft."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "The model is general. Each implementation belongs to a particular product and writing job, with its own evidence. Verso used eleven language dimensions. Another system may need a different set entirely. The Content Index is the governed matrix, not a fixed dimension list."), /*#__PURE__*/React.createElement(SourceMap, {
    items: VERSO_SOURCES,
    style: {
      marginTop: 4
    }
  })), /*#__PURE__*/React.createElement(Beat, {
    id: "separation",
    title: "The matrix keeps an observation separate from a decision."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "A repeated construction in shipped copy can be strong evidence about what a product did. It cannot decide what the product must do next. The future-facing step needs an owner with authority to adopt a target and define its scope. The same record has to show the exceptions."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "I describe the record more precisely now than I did in the first build. Observed evidence, proposed targets, adopted policy, executable checks, and contextual interpretations need separate states. The shape below is public; the internal records and product strings are not."), /*#__PURE__*/React.createElement(IndexRows, {
    label: "Governed record shape",
    rows: VERSO_INDEX_ROWS,
    style: {
      marginTop: 4
    }
  })), /*#__PURE__*/React.createElement(Beat, {
    id: "dependability",
    title: "Code makes an adopted decision difficult to miss."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "People with authority make policy. Once an authorized rule exists, a deterministic check applies it inside the declared scope. The check still needs tests and versioning, plus correct scoping. Its dependable part is narrower: the same implemented rule returns the same answer for the same input."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "New evidence can revise the descriptive record without silently changing policy. A policy owner can change the adopted rule without pretending the earlier evidence never existed. If the owner, scope, or decision is missing, the Index can leave that state visible instead of asking the agent to fill it in.")), /*#__PURE__*/React.createElement(Beat, {
    id: "implementation",
    title: "Verso was one implementation of that structure."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "I created context-specific profiles for five Meta surfaces and stored them with the consolidated guidance the agent needed. The private records stay private. What I can show here is the separation that made the system governable: evidence describes, people adopt policy, code applies the adopted decision, and the agent works inside those boundaries.")), /*#__PURE__*/React.createElement(SubDoors, {
    onBack: toStory,
    onForward: toAgent,
    forwardLabel: "Follow the loop again in Agent"
  }));
}
Object.assign(window, {
  VersoAgentDocument,
  VersoEngineDocument,
  VersoIndexDocument
});
})();

/* ---- ui_kits/portfolio/screen-vr.jsx ---- */
(function () {
const {
  Stage,
  StageCopy,
  Outcome,
  StageAction,
  RegistrationMark,
  ArtifactFigure,
  CaptureFigure,
  Eyebrow,
  CaseMeta
} = window.CalebStacyPortfolioDesignSystem_4a3883;

/* Converted to the Horizon grammar (screen-horizon.jsx, "THE model"): one ink ground straight
   through the scroll, story-sized beats with reading-size headers, article-set evidence floating
   as light panels, one pine punctuation moment, a reflective close. Cut entirely: ChapterNav and
   its jump()/glide scroll machinery (dead now that there is no chapter nav to jump to), FactsPanel
   (replaced by CaseMeta), GateRun, Ledger, Pipeline, PullQuote, and ProvenanceNote — all either
   render a mono micro-label or a fixed size the "Three text sizes" law (CLAUDE.md, 2026-07-26)
   doesn't leave room for inside a case scroll. The three measured results move from a labelled
   Ledger into a single prose sentence instead, which is truer to how the résumé bullet states them
   anyway.

   Six beats: the before (the fourteen-plus-lesson syllabus that stood between a new person and
   anyone else), the reframe (a curriculum was never going to be the right shape — education had to
   become a property of the product), the decisions (teaching on the control that needs it,
   reinforcing on a state change), the results (the three real lifts, in prose), adoption (the Meta
   Quest onboarding team picked up the strategy afterward), and a reflective close that folds in the
   ownership boundary. Two artifacts survive, one per beat: a legacy vr-before-training.webp screen
   standing in for the syllabus in "the before," and the shipped controller-nudge.mp4 capture in
   "decisions" — both already in assets/work. The one pine interlude reuses Horizon's own
   quote-plate markup verbatim for the line that already carried the whole strategy: "Stop teaching
   everything once. Teach one action, in the moment it matters." */

const SECTION_PAD_FIRST = "clamp(40px,6vh,64px) var(--gutter) 0";
const SECTION_PAD = "0 var(--gutter) clamp(56px,8vh,96px)";
const HAIRLINE = "1px solid color-mix(in srgb, var(--story-ink) 25%, transparent)";
const header = {
  margin: 0,
  textAlign: "left",
  fontFamily: "var(--font-sans)",
  fontSize: "var(--display-m-size)",
  fontWeight: "var(--display-m-weight)",
  lineHeight: "var(--display-m-leading)",
  letterSpacing: "var(--display-m-tracking)"
};
const proseCol = {
  marginTop: 22,
  display: "flex",
  flexDirection: "column",
  gap: "1.15em",
  fontFamily: "var(--font-sans)",
  fontSize: "var(--prose-size)",
  lineHeight: "var(--prose-leading)",
  letterSpacing: "var(--prose-tracking)"
};
function Beat({
  id,
  first,
  title,
  children
}) {
  return /*#__PURE__*/React.createElement("section", {
    "data-tone": "dark",
    style: {
      background: "var(--story-bg)",
      color: "var(--story-ink)",
      padding: first ? SECTION_PAD_FIRST : SECTION_PAD
    }
  }, /*#__PURE__*/React.createElement("div", {
    id: id,
    style: {
      maxWidth: 640,
      margin: "0 auto",
      scrollMarginTop: 56,
      ...(first ? null : {
        borderTop: HAIRLINE,
        paddingTop: "clamp(40px,6vh,64px)"
      })
    }
  }, title && /*#__PURE__*/React.createElement("h2", {
    style: header
  }, title), /*#__PURE__*/React.createElement("div", {
    style: proseCol
  }, children)));
}
function VrHeroDiorama() {
  return /*#__PURE__*/React.createElement("figure", {
    "data-ds": "vr-diorama"
  }, /*#__PURE__*/React.createElement("img", {
    src: "assets/work/vr-onboarding-obstacle-course.png",
    width: "1672",
    height: "941",
    alt: "Clay diorama of a required setup, recording consent, fourteen-plus lessons, and world selection opening into a social world full of people"
  }), /*#__PURE__*/React.createElement("div", {
    "aria-hidden": "true"
  }, /*#__PURE__*/React.createElement("span", {
    "data-ds": "vr-diorama-label",
    "data-step": "setup"
  }, "Required", /*#__PURE__*/React.createElement("br", null), "setup"), /*#__PURE__*/React.createElement("span", {
    "data-ds": "vr-diorama-label",
    "data-step": "consent"
  }, "Consent to", /*#__PURE__*/React.createElement("br", null), "recording"), /*#__PURE__*/React.createElement("span", {
    "data-ds": "vr-diorama-label",
    "data-step": "lessons"
  }, "Complete", /*#__PURE__*/React.createElement("br", null), "14+ lessons"), /*#__PURE__*/React.createElement("span", {
    "data-ds": "vr-diorama-label",
    "data-step": "world"
  }, "Choose a", /*#__PURE__*/React.createElement("br", null), "world")));
}
function VrDocument({
  project,
  onNext,
  nextProject,
  scrollRef
}) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stage, {
    style: {
      minHeight: 0,
      display: "block",
      position: "relative"
    }
  }, /*#__PURE__*/React.createElement(RegistrationMark, null), /*#__PURE__*/React.createElement(StageCopy, {
    width: "100%",
    style: {
      width: "100%",
      maxWidth: 780,
      height: "auto",
      paddingBottom: "clamp(34px,5vh,52px)"
    },
    eyebrow: "Project " + project.number + " · " + project.context,
    title: project.title,
    statement: project.statement,
    deck: project.summary
  }, /*#__PURE__*/React.createElement(Outcome, {
    label: project.outcomeLabel,
    items: project.results
  })), /*#__PURE__*/React.createElement("img", {
    "data-ds": "case-cover-character",
    "data-character": "vr",
    src: project.character,
    width: "1029",
    height: "1528",
    alt: project.characterAlt
  }), /*#__PURE__*/React.createElement(VrHeroDiorama, null)), /*#__PURE__*/React.createElement(Beat, {
    id: "overview",
    first: true
  }, /*#__PURE__*/React.createElement(CaseMeta, {
    role: project.role,
    team: project.team,
    timeline: project.timeline,
    surface: project.surface
  })), /*#__PURE__*/React.createElement(Beat, {
    id: "before",
    title: "People came to be with people. The onboarding made them earn it first."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Horizon Worlds is a social product: the reason someone downloads it is other people. Before a new person reached any, they had to choose a world, consent to recording, complete a syllabus of fourteen-plus lessons, and wait out ninety seconds of loading. Seventy-two percent of people never made it through to the other side. Those are the numbers the team was working from when the project started. They describe the experience being replaced, not a result."), /*#__PURE__*/React.createElement(ArtifactFigure, {
    contain: true,
    style: {
      marginTop: 8
    },
    src: "assets/work/vr-before-training.webp",
    alt: "A legacy Meta Horizon Worlds onboarding tutorial panel, one stop on the original lesson syllabus",
    caption: "The onboarding tutorial panel a new person had to get through before reaching anyone: one stop on the fourteen-plus-lesson syllabus this case replaces. Shown as product context, not the exact original experiment screen."
  })), /*#__PURE__*/React.createElement(Beat, {
    id: "reframe",
    title: "The syllabus was the problem. Not what was in it."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Every proposal on the table made the curriculum better: shorter, clearer, better sequenced. None of them questioned whether a curriculum was the right shape. You cannot teach somebody to be social before they have met anyone, and a person holding a controller for the first time is only looking around, not ready to learn yet."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Which meant the education could not be a place in the flow. It had to be a property of the product: attached to the input that needs it, triggered by what somebody is actually doing, silent the rest of the time. The fastest onboarding is the one a person never notices they are in."), /*#__PURE__*/React.createElement("div", {
    "data-tone": "stage",
    style: {
      background: "var(--story-bg)",
      color: "var(--story-ink)",
      margin: "clamp(8px,1vw,14px) 0",
      padding: "clamp(30px,4vw,40px) clamp(22px,3vw,32px)",
      textAlign: "center"
    }
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      ...header,
      textAlign: "center"
    }
  }, "Stop teaching everything once. Teach one action, in the moment it matters."))), /*#__PURE__*/React.createElement(Beat, {
    id: "decisions",
    title: "The lesson lives on the control that performs it."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "When somebody tried to talk while muted, the answer arrived on the thing already in their hand rather than in a panel that took the world away to explain the world. Repetition was earned by something happening, never by a timer: when somebody's state changed, that was the one moment the explanation was worth their attention, so the second touch on a skill triggered off that change rather than a schedule."), /*#__PURE__*/React.createElement(CaptureFigure, {
    style: {
      marginTop: 8
    },
    src: "assets/work/vr/controller-nudge.mp4",
    caption: "In-headset capture of the shipped nudge. I wrote the string; the interaction was built with the product designer and engineering."
  }), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "I led the content design and education strategy. Product, interaction and visual design, engineering, research, data, and the partner teams each owned parts of the experience and the experiment. The overhaul belonged to all of us; the just-in-time education model and interaction language were my contribution.")), /*#__PURE__*/React.createElement(Beat, {
    id: "results",
    title: "It moved the three numbers that mattered."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Measured against the curriculum it replaced: onboarding completion rose 29%, weekly active use rose 20%, and new-user retention rose 7%. All three moved in the direction the just-in-time model predicted: a first run people could actually finish and want to come back to.")), /*#__PURE__*/React.createElement(Beat, {
    id: "adoption",
    title: "The Meta Quest onboarding team picked up the strategy afterward."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "The just-in-time model didn't stay scoped to this one first run. It was adopted by the team that owns onboarding across Meta Quest more broadly. That's the kind of proof a strategy actually worked: the next team building a first run reached for the same principle instead of a syllabus.")), /*#__PURE__*/React.createElement(Beat, {
    id: "close",
    title: "None of it taught someone to have fun. It got out of the way long enough for them to find it."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Explanations that only show up when something in someone's hand changes are easy to miss. That was the goal, on purpose. A person who finishes onboarding without remembering being taught anything is the version of this that worked.")), /*#__PURE__*/React.createElement("div", {
    id: "next",
    "data-ds": "case-next",
    style: {
      minHeight: 190,
      scrollMarginTop: 56,
      display: "flex",
      justifyContent: "space-between",
      gap: 24,
      alignItems: "center",
      padding: "0 var(--gutter)",
      background: "var(--paper)",
      borderTop: "1px solid var(--ink)"
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Eyebrow, {
    size: "micro",
    tone: "signal"
  }, "Next project"), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: "10px 0 0",
      fontFamily: "var(--font-sans)",
      fontSize: "var(--display-s-size)",
      fontWeight: "var(--display-s-weight)",
      letterSpacing: "var(--display-s-tracking)"
    }
  }, nextProject.title)), /*#__PURE__*/React.createElement(StageAction, {
    accent: "signal",
    onClick: onNext
  }, nextProject.statement)));
}
Object.assign(window, {
  VrDocument
});
})();

/* ---- ui_kits/portfolio/screen-portals.jsx ---- */
(function () {
const {
  Stage,
  StageCopy,
  Outcome,
  StageAction,
  RegistrationMark,
  ArtifactFigure,
  Eyebrow,
  CaseMeta
} = window.CalebStacyPortfolioDesignSystem_4a3883;

/* Converted to the Horizon grammar (screen-horizon.jsx, "THE model"): one ink ground straight
   through the scroll, story-sized beats with reading-size headers, article-set evidence floating
   as light panels, one pine punctuation moment, a reflective close that loops back to the cover's
   claim without repeating it verbatim. Cut entirely: ChapterNav and its jump()/glide scroll
   machinery, FactsPanel (replaced by CaseMeta), CardGrid/GridCard, DataTable, Pipeline, Ledger,
   PullQuote, and ProvenanceNote — all either render a mono micro-label or a fixed size the "Three
   text sizes" law (CLAUDE.md, 2026-07-26) doesn't leave room for inside a case scroll. The distance
   model (far / mid / close, what shows at each) is told in prose rather than as a DataTable for the
   same reason; it was the one place a table felt tempting, and prose does the job without a fourth
   register. The one pine interlude reuses Horizon's own quote-plate markup verbatim (a data-tone
   "stage" card sized to the beat header) for the line Caleb named as the fight he's proudest of.

   Six beats: the operating condition (people stepped through before they had the information to
   choose), the reframe (counting decisions instead of entries), the decisions (proximity as the
   information architecture, the metadata framework, the pushback), the keynote (Meta Connect 2024 —
   per the refined name rule, naming Zuckerberg is now allowed since the name carries the claim),
   the boundary (the physical/spatial layer belonged to a different discipline, role-credited), and
   a reflective close. The public Meta Connect footage now leads as the cover proof; the shipped
   card stays with the proximity decision it demonstrates. Several open questions from
   reference/intake-portals-2026-07-25.md (the reframe's
   originating moment, an earlier rejected fix, who argued against the distance model and what
   changed their mind, a sayable engagement number, the precise name of the boundary discipline)
   are marked inline as INTAKE GAP comments rather than guessed at. */

const SECTION_PAD_FIRST = "clamp(40px,6vh,64px) var(--gutter) 0";
const SECTION_PAD = "0 var(--gutter) clamp(56px,8vh,96px)";
const HAIRLINE = "1px solid color-mix(in srgb, var(--story-ink) 25%, transparent)";
const header = {
  margin: 0,
  textAlign: "left",
  fontFamily: "var(--font-sans)",
  fontSize: "var(--display-m-size)",
  fontWeight: "var(--display-m-weight)",
  lineHeight: "var(--display-m-leading)",
  letterSpacing: "var(--display-m-tracking)"
};
const proseCol = {
  marginTop: 22,
  display: "flex",
  flexDirection: "column",
  gap: "1.15em",
  fontFamily: "var(--font-sans)",
  fontSize: "var(--prose-size)",
  lineHeight: "var(--prose-leading)",
  letterSpacing: "var(--prose-tracking)"
};
function Beat({
  id,
  first,
  title,
  children
}) {
  return /*#__PURE__*/React.createElement("section", {
    "data-tone": "dark",
    style: {
      background: "var(--story-bg)",
      color: "var(--story-ink)",
      padding: first ? SECTION_PAD_FIRST : SECTION_PAD
    }
  }, /*#__PURE__*/React.createElement("div", {
    id: id,
    style: {
      maxWidth: 640,
      margin: "0 auto",
      scrollMarginTop: 56,
      ...(first ? null : {
        borderTop: HAIRLINE,
        paddingTop: "clamp(40px,6vh,64px)"
      })
    }
  }, title && /*#__PURE__*/React.createElement("h2", {
    style: header
  }, title), /*#__PURE__*/React.createElement("div", {
    style: proseCol
  }, children)));
}
function PortalsHeroMedia({
  project
}) {
  const reducedMotion = React.useMemo(() => !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches), []);
  const videoRef = React.useRef(null);
  const [playing, setPlaying] = React.useState(!reducedMotion);
  const togglePlayback = () => {
    const video = videoRef.current;
    if (!video) return;
    if (video.paused) video.play().catch(() => setPlaying(false));else video.pause();
  };
  return /*#__PURE__*/React.createElement("figure", {
    style: {
      position: "relative",
      zIndex: 2,
      margin: 0
    }
  }, reducedMotion ? /*#__PURE__*/React.createElement("img", {
    src: project.heroPoster,
    alt: "Mark Zuckerberg on the Meta Connect 2024 keynote stage beside a large screen showing the Horizon portal experience",
    style: {
      display: "block",
      width: "100%",
      height: "auto"
    }
  }) : /*#__PURE__*/React.createElement("video", {
    ref: videoRef,
    src: project.heroVideo,
    poster: project.heroPoster,
    autoPlay: true,
    muted: true,
    playsInline: true,
    loop: true,
    preload: "metadata",
    "aria-label": "Meta Connect 2024 keynote footage showing the Horizon portal experience and Mark Zuckerberg presenting it on stage",
    onPlay: () => setPlaying(true),
    onPause: () => setPlaying(false),
    style: {
      display: "block",
      width: "100%",
      height: "auto",
      background: "#000"
    }
  }), /*#__PURE__*/React.createElement("figcaption", {
    style: {
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      gap: 18,
      padding: "13px var(--gutter) 15px",
      borderTop: "1px solid var(--ink)",
      background: "var(--paper)",
      color: "var(--ink)",
      fontFamily: "var(--font-mono)",
      fontSize: 10,
      lineHeight: 1.45
    }
  }, /*#__PURE__*/React.createElement("span", null, project.heroCaption), !reducedMotion && /*#__PURE__*/React.createElement("button", {
    type: "button",
    onClick: togglePlayback,
    "aria-label": (playing ? "Pause" : "Play") + " the Meta Connect 2024 keynote loop",
    style: {
      flex: "0 0 auto",
      minHeight: 32,
      padding: "0 0 2px",
      border: 0,
      borderBottom: "1px solid currentColor",
      background: "transparent",
      color: "inherit",
      font: "inherit",
      fontWeight: 700,
      cursor: "pointer"
    }
  }, playing ? "Pause loop" : "Play loop")));
}
function PortalsDocument({
  project,
  onNext,
  nextProject,
  scrollRef
}) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stage, {
    style: {
      minHeight: 0,
      display: "block",
      position: "relative"
    }
  }, /*#__PURE__*/React.createElement(RegistrationMark, null), /*#__PURE__*/React.createElement(StageCopy, {
    width: "100%",
    style: {
      width: "100%",
      maxWidth: 780,
      height: "auto",
      paddingBottom: "clamp(34px,5vh,52px)"
    },
    eyebrow: "Project " + project.number + " · " + project.context,
    title: project.title,
    statement: project.statement,
    deck: project.summary
  }, project.results ? /*#__PURE__*/React.createElement(Outcome, {
    label: project.outcomeLabel,
    items: project.results
  }) : /*#__PURE__*/React.createElement(Outcome, {
    label: project.outcomeLabel
  }, project.outcomeProse)), /*#__PURE__*/React.createElement("img", {
    "data-ds": "case-cover-character",
    "data-character": "portals",
    src: project.character,
    width: "1024",
    height: "1536",
    alt: project.characterAlt
  }), /*#__PURE__*/React.createElement(PortalsHeroMedia, {
    project: project
  })), /*#__PURE__*/React.createElement(Beat, {
    id: "overview",
    first: true
  }, /*#__PURE__*/React.createElement(CaseMeta, {
    role: project.role,
    team: project.team,
    timeline: project.timeline,
    surface: project.surface
  })), /*#__PURE__*/React.createElement(Beat, {
    id: "condition",
    title: "People stepped through a portal before they had enough information to choose."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "In Horizon, a portal is how you cross from one world into another: a floating oval that works like a doorway. Step through, and you're somewhere else. What waited on the other side stayed a mystery until you were already standing in it. The name was clipped to a few characters, with no genre and no way to tell who else was around."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "The obvious fix assumes a 2D content pattern in a space that isn't 2D: bolt on a description field or a screenshot carousel. There's no scroll and no fixed reading distance in a room. A paragraph that reads fine up close is noise from across it, and people approach on foot or by pointing, not by tapping a menu.")), /*#__PURE__*/React.createElement(Beat, {
    id: "reframe",
    title: "The team was counting entries. I proposed counting decisions."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Portal entries were the tracked success metric, which rewarded exactly the pattern causing the problem: an uninformed arrival counted as a win even when the person looked around and left immediately. I proposed measuring state of intent instead: whether someone could reach a confident yes or a confident no before they ever stepped through."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Under the old frame, a confident pass read exactly like a failure: either way, the person never went in. Under the new one, a pass is proof the system is doing its job. Nobody wasted a trip, and nobody had to gamble on a world they knew nothing about.")), /*#__PURE__*/React.createElement(Beat, {
    id: "decisions",
    title: "Proximity became the information architecture."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "On a phone, depth is free: tuck anything behind a tap or a drawer, and the reader decides when to go looking for it. A body standing in a room doesn't have that option. There's no menu to defer to, so the only variable that decides what someone sees is how close they've chosen to walk. From six meters or more, a portal showed a title and nothing else: enough to register that something was there, not enough to weigh it. Pointing at it from mid-range added the one available action, because aiming at something is already a small commitment of attention. Only once someone closed the distance did the full picture arrive. That's the moment the decision actually gets made, so it's the only one that earns the complete picture."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "UXR testing decided what filled each distance. Three signals moved someone toward a confident decision: who the world is, who's already in it, and what you can do about it. None of them are stored as one fixed sentence. Each is structured data, so a translated label can run to a different length without touching the object it describes. The metadata framework that came out of this became the reference other travel surfaces across the company drew from as they built the same kind of decision into their own designs."), /*#__PURE__*/React.createElement(ArtifactFigure, {
    contain: true,
    style: {
      marginTop: 8
    },
    src: project.artifacts[0].src,
    alt: project.artifacts[0].alt,
    caption: project.artifacts[0].caption
  }), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Not everyone agreed. The two objections I heard most: that surfacing all of this would decrease portal entries, and that portals should stay mysterious. Fewer blind entries and better ones aren't the same number. A pass that saves someone's time is a win under the new frame, not a loss on the entry count. And the mystery was never what pulled people in; it was the reason they left the moment they arrived somewhere they hadn't chosen. The piece I fought hardest to keep was “View Details,” the second action for the person one beat away from committing who wanted a last look first."), /*#__PURE__*/React.createElement("div", {
    "data-tone": "stage",
    style: {
      background: "var(--story-bg)",
      color: "var(--story-ink)",
      margin: "clamp(8px,1vw,14px) 0",
      padding: "clamp(30px,4vw,40px) clamp(22px,3vw,32px)",
      textAlign: "center"
    }
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      ...header,
      textAlign: "center"
    }
  }, "It isn't friction. It's the only thing standing between a guess and an actual yes."))), /*#__PURE__*/React.createElement(Beat, {
    id: "keynote",
    title: "It went on stage at Meta Connect 2024."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "The portal this case describes was unveiled by Mark Zuckerberg at the Meta Connect 2024 keynote, live in front of the audience watching the future of Horizon get introduced. It shipped, portal engagement and retention both moved in the direction the reframe predicted, and the work earned VP alignment on that basis.")), /*#__PURE__*/React.createElement(Beat, {
    id: "boundary",
    title: "The physical layer belonged to a different discipline."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "The distance model, the metadata framework, and the case for keeping every piece of it against real pushback were content design's to own. A different discipline handled the physical layer this sits on top of: sizing a portal against how tall an average person actually is, and tuning how forgiving the pointing had to feel so aiming at it didn't fight your hand. What I decided was which piece of information each distance had earned the right to show."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "The framework outlived the keynote. The team that owns new-user onboarding picked up the portal-education work afterward, prototyping what teaching someone to read a portal well could look like before they ever step through one.")), /*#__PURE__*/React.createElement(Beat, {
    id: "close",
    title: "Raw entry counts never told the difference between a curious visitor and an informed one."
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Most content design questions start from what got tapped. This one started from where a body was standing, and that single swap rewrote the hierarchy: how much appeared on screen at once, and exactly when each piece was allowed to show."), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Designing navigation for a space with no page and no scroll. Proximity turned out to be the only interface that actually fit the room, because nothing had been built before it to borrow from.")), /*#__PURE__*/React.createElement("div", {
    id: "next",
    "data-ds": "case-next",
    style: {
      minHeight: 190,
      scrollMarginTop: 56,
      display: "flex",
      justifyContent: "space-between",
      gap: 24,
      alignItems: "center",
      padding: "0 var(--gutter)",
      background: "var(--paper)",
      borderTop: "1px solid var(--ink)"
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Eyebrow, {
    size: "micro",
    tone: "signal"
  }, "Next project"), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: "10px 0 0",
      fontFamily: "var(--font-sans)",
      fontSize: "var(--display-s-size)",
      fontWeight: "var(--display-s-weight)",
      letterSpacing: "var(--display-s-tracking)"
    }
  }, nextProject.title)), /*#__PURE__*/React.createElement(StageAction, {
    accent: "signal",
    onClick: onNext
  }, nextProject.statement)));
}
Object.assign(window, {
  PortalsDocument
});
})();

/* ---- ui_kits/portfolio/screen-utility.jsx ---- */
(function () {
const {
  Stage,
  StageCopy,
  StorySection,
  StageAction,
  PullQuote,
  RegistrationMark,
  Eyebrow,
  ProvenanceNote,
  ArtifactFigure,
  CaptureFigure
} = window.CalebStacyPortfolioDesignSystem_4a3883;

/* The About cover's transforming line introduces range through actions, then rests on the
   through-line: decisions a team can reuse. Reduced motion gets the resting answer directly. */
const ABOUT_LINES = ["I shape product strategy.", "I write interaction language.", "I design onboarding.", "I run experiments.", "I lead workshops.", "I write poems.", "I build tools.", "I build systems.", "I make decisions teams can reuse."];
const ABOUT_REST = ABOUT_LINES[ABOUT_LINES.length - 1];
function DesignRotator() {
  const reduced = React.useMemo(() => !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches), []);
  /* The film-credits trick: every character of the current word is in the layout from the word's
     first frame (untyped ones visibility:hidden), so the line geometry is final before the first
     letter shows and nothing can hop lines mid-word. Multi-word phrases wrap only at their
     spaces, exactly where the finished line wraps; letters inside a chunk are nowrap-bound. The
     caret is absolutely positioned after the last visible letter, outside the flow entirely. */
  const [i, setI] = React.useState(reduced ? ABOUT_LINES.length - 1 : 0);
  const [n, setN] = React.useState(reduced ? ABOUT_REST.length : 0);
  const hostRef = React.useRef(null);
  const caretRef = React.useRef(null);
  React.useEffect(() => {
    if (reduced) return undefined;
    let alive = true,
      t = 0,
      wi = 0;
    const later = (fn, ms) => {
      t = setTimeout(() => {
        if (alive) fn();
      }, ms);
    };
    const type = ci => {
      const w = ABOUT_LINES[wi];
      setI(wi);
      setN(ci);
      if (ci < w.length) later(() => type(ci + 1), 40);else later(() => erase(w.length - 1), w === ABOUT_REST ? 2400 : 950);
    };
    const erase = len => {
      setN(len);
      if (len > 0) later(() => erase(len - 1), 13);else {
        wi = (wi + 1) % ABOUT_LINES.length;
        later(() => type(1), 170);
      }
    };
    type(1);
    return () => {
      alive = false;
      clearTimeout(t);
    };
  }, [reduced]);
  const word = ABOUT_LINES[i];
  React.useLayoutEffect(() => {
    const host = hostRef.current,
      caret = caretRef.current;
    if (!host || !caret) return undefined;
    const place = () => {
      let ref = null;
      for (let k = n - 1; k >= 0 && !ref; k--) ref = host.querySelector('[data-ch="' + k + '"]');
      if (!ref) ref = host.querySelector("[data-ch-anchor]");
      if (!ref) return;
      const a = ref.getBoundingClientRect(),
        h = host.getBoundingClientRect();
      caret.style.left = a.right - h.left + "px";
      caret.style.top = a.top - h.top + a.height * 0.14 + "px";
      caret.style.height = a.height * 0.72 + "px";
    };
    place();
    window.addEventListener("resize", place);
    return () => window.removeEventListener("resize", place);
  }, [n, word]);
  const chunks = [];
  {
    let letters = [],
      start = 0;
    word.split("").forEach((c, idx) => {
      if (c === " ") {
        chunks.push(/*#__PURE__*/React.createElement("span", {
          key: "k" + start,
          style: {
            whiteSpace: "nowrap"
          }
        }, letters), " ");
        letters = [];
        start = idx + 1;
      } else {
        letters.push(/*#__PURE__*/React.createElement("span", {
          key: idx,
          "data-ch": idx,
          style: {
            visibility: idx < n ? "visible" : "hidden"
          }
        }, c));
      }
    });
    chunks.push(/*#__PURE__*/React.createElement("span", {
      key: "k" + start,
      style: {
        whiteSpace: "nowrap"
      }
    }, letters));
  }
  return /*#__PURE__*/React.createElement("span", {
    "data-ds": "design-rotator",
    ref: hostRef,
    role: "text",
    "aria-label": ABOUT_REST,
    style: {
      position: "relative"
    }
  }, /*#__PURE__*/React.createElement("span", {
    "aria-hidden": "true"
  }, /*#__PURE__*/React.createElement("span", {
    "data-ch-anchor": true
  }, "\u200B"), chunks, !reduced && /*#__PURE__*/React.createElement("span", {
    ref: caretRef,
    "data-ds": "design-rotator-caret",
    style: {
      position: "absolute",
      width: "0.045em",
      marginLeft: "0.05em",
      background: "var(--signal-stage)",
      animation: "rotator-caret-blink 1.05s steps(1) infinite"
    }
  })));
}
function AboutWaveScene({
  reducedMotion,
  credibilityMode = "marquee"
}) {
  const marks = [{
    brand: "meta-horizon",
    src: "assets/brands/meta-horizon.svg"
  }, {
    brand: "digbi",
    src: "assets/brands/digbi-health.svg"
  }, {
    brand: "8x8",
    src: "assets/brands/8x8.svg"
  }];
  const effectiveMode = reducedMotion ? "static" : credibilityMode;
  const mediaStyle = {
    position: "absolute",
    zIndex: 1,
    inset: 0,
    width: "100%",
    height: "100%",
    objectFit: "contain",
    objectPosition: "center"
  };
  return /*#__PURE__*/React.createElement("div", {
    "data-ds": "scene-character",
    "data-credibility-mode": effectiveMode,
    role: "group",
    "aria-label": "Clay Caleb waves hello once. The scene names teams where he has worked: Meta Horizon, Digbi Health, and 8x8.",
    tabIndex: effectiveMode === "marquee" ? 0 : undefined,
    style: {
      position: "absolute",
      zIndex: 5,
      top: 0,
      right: 0,
      bottom: 0,
      width: "51%",
      overflow: "hidden",
      background: "#000",
      pointerEvents: effectiveMode === "marquee" ? "auto" : "none",
      animation: "character-enter var(--dur-character) var(--delay-character) var(--ease-authored) both"
    }
  }, reducedMotion ? /*#__PURE__*/React.createElement("img", {
    src: "assets/work/caleb-about-wave-poster.webp",
    alt: "",
    "aria-hidden": "true",
    style: mediaStyle
  }) : /*#__PURE__*/React.createElement("video", {
    src: "assets/work/caleb-about-wave-once.mp4",
    poster: "assets/work/caleb-about-wave-poster.webp",
    autoPlay: true,
    muted: true,
    playsInline: true,
    preload: "auto",
    "aria-hidden": "true",
    tabIndex: -1,
    style: mediaStyle
  }), effectiveMode === "static" ? /*#__PURE__*/React.createElement("div", {
    "data-ds": "about-credibility",
    "data-mode": "static",
    "aria-hidden": "true"
  }, marks.map(mark => /*#__PURE__*/React.createElement("img", {
    key: mark.brand,
    "data-ds": "about-credibility-mark",
    "data-brand": mark.brand,
    src: mark.src,
    alt: ""
  }))) : /*#__PURE__*/React.createElement("div", {
    "data-ds": "about-credibility",
    "data-mode": "marquee",
    "aria-hidden": "true"
  }, /*#__PURE__*/React.createElement("div", {
    "data-ds": "about-credibility-track"
  }, [0, 1].map(copy => /*#__PURE__*/React.createElement("div", {
    key: copy,
    "data-ds": "about-credibility-set"
  }, marks.map(mark => /*#__PURE__*/React.createElement("img", {
    key: mark.brand,
    "data-ds": "about-credibility-mark",
    "data-brand": mark.brand,
    src: mark.src,
    alt: ""
  })))))));
}
function AboutDocument({
  data,
  onWork
}) {
  /* The original five-second clay take plays once and then holds its closing frame.
     Reduced-motion readers get the original poster instead. */
  const reducedMotion = React.useMemo(() => !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches), []);
  const credibilityMode = React.useMemo(() => {
    const requested = new URLSearchParams(window.location.search).get("credits");
    return requested === "static" ? "static" : "marquee";
  }, []);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stage, {
    style: {
      minHeight: "min(660px, calc(100svh - 84px))",
      display: "flex"
    }
  }, /*#__PURE__*/React.createElement(RegistrationMark, null), /*#__PURE__*/React.createElement(StageCopy, {
    eyebrow: "About",
    title: "Hi, I'm Caleb.",
    accent: /*#__PURE__*/React.createElement(DesignRotator, null),
    deck: "I'm a senior content designer. My work spans product strategy and interaction language. I design onboarding, run experiments, and build systems that make good decisions easier to repeat.",
    detail: "I've led that work on cross-functional teams spanning product, design, research, data and engineering. Before product, I spent seven years teaching writing and earned an MFA in poetry. I still care about the sentence. Sometimes the work also needs a workshop, an experiment or code."
  }, /*#__PURE__*/React.createElement(StageAction, {
    accent: "action",
    style: {
      marginTop: 23
    },
    onClick: onWork
  }, "See selected work")), /*#__PURE__*/React.createElement(AboutWaveScene, {
    reducedMotion: reducedMotion,
    credibilityMode: credibilityMode
  })), /*#__PURE__*/React.createElement("section", {
    "data-tone": "dark",
    style: {
      background: "var(--story-bg)",
      color: "var(--story-ink)",
      padding: "clamp(48px,7vh,84px) var(--gutter)"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      maxWidth: 640,
      margin: "0 auto"
    }
  }, /*#__PURE__*/React.createElement("h2", {
    style: {
      margin: 0,
      textAlign: "left",
      fontFamily: "var(--font-sans)",
      fontSize: "var(--display-m-size)",
      fontWeight: "var(--display-m-weight)",
      lineHeight: "var(--display-m-leading)",
      letterSpacing: "var(--display-m-tracking)"
    }
  }, "I start with the question."), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 22,
      display: "flex",
      flexDirection: "column",
      gap: "1.15em",
      fontFamily: "var(--font-sans)",
      fontSize: "var(--prose-size)",
      lineHeight: "var(--prose-leading)",
      letterSpacing: "var(--prose-tracking)"
    }
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "I ask questions because the discipline is changing, not because I have solved it. I want to know what someone is trying to do and what the product needs to decide. Then I ask what evidence would change that decision. The answer might be early product strategy or a line of interaction language. It might be just-in-time education or an experiment run with research and data partners. I've led all of that work, and I have concrete things to teach about it.")))), /*#__PURE__*/React.createElement("section", {
    "data-tone": "dark",
    style: {
      background: "var(--story-bg)",
      color: "var(--story-ink)",
      padding: "0 var(--gutter) clamp(56px,8vh,96px)"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      maxWidth: 640,
      margin: "0 auto",
      borderTop: "1px solid color-mix(in srgb, var(--story-ink) 25%, transparent)",
      paddingTop: "clamp(40px,6vh,64px)"
    }
  }, /*#__PURE__*/React.createElement("h2", {
    style: {
      margin: 0,
      textAlign: "left",
      fontFamily: "var(--font-sans)",
      fontSize: "var(--display-m-size)",
      fontWeight: "var(--display-m-weight)",
      lineHeight: "var(--display-m-leading)",
      letterSpacing: "var(--display-m-tracking)"
    }
  }, "I make the decision reusable."), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 22,
      fontFamily: "var(--font-sans)",
      fontSize: "var(--prose-size)",
      lineHeight: "var(--prose-leading)",
      letterSpacing: "var(--prose-tracking)"
    }
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Systems are one way I do that, not the whole job. I route each claim to the strongest computation it can honestly support. That might be a count or a deterministic check. It might be an experiment, or no computation at all. When a rule can be checked, I can write it into code. When the judgment belongs with people, I leave it there. The point is not to turn every content problem into infrastructure. It is to keep a good decision from being re-litigated.")))), /*#__PURE__*/React.createElement("section", {
    "data-tone": "dark",
    style: {
      background: "var(--story-bg)",
      color: "var(--story-ink)",
      padding: "0 var(--gutter) clamp(56px,8vh,96px)"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      maxWidth: 640,
      margin: "0 auto",
      borderTop: "1px solid color-mix(in srgb, var(--story-ink) 25%, transparent)",
      paddingTop: "clamp(40px,6vh,64px)"
    }
  }, /*#__PURE__*/React.createElement("h2", {
    style: {
      margin: 0,
      textAlign: "left",
      fontFamily: "var(--font-sans)",
      fontSize: "var(--display-m-size)",
      fontWeight: "var(--display-m-weight)",
      lineHeight: "var(--display-m-leading)",
      letterSpacing: "var(--display-m-tracking)"
    }
  }, "Teaching and poetry came first."), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 22,
      fontFamily: "var(--font-sans)",
      fontSize: "var(--prose-size)",
      lineHeight: "var(--prose-leading)",
      letterSpacing: "var(--prose-tracking)"
    }
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0
    }
  }, "Before product work, I taught composition and poetry workshops, then trained Army officers to turn complex, high-stakes information into clear, direct language. Seven years of watching what makes writing land is where the rest of this comes from. Teaching made me care about craft. I still teach what I learn and keep asking what the work could become next.")))));
}
function MicrocopyDocument({
  onNavigate
}) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stage, {
    variant: "section",
    style: {
      minHeight: 390,
      display: "flex"
    }
  }, /*#__PURE__*/React.createElement(RegistrationMark, null), /*#__PURE__*/React.createElement(StageCopy, {
    eyebrow: "Supporting work",
    title: "Microcopy.",
    deck: "A grab bag of microcopy."
  })), /*#__PURE__*/React.createElement("section", {
    "data-tone": "dark",
    style: {
      background: "var(--story-bg)",
      color: "var(--story-ink)",
      padding: "clamp(48px,7vh,84px) var(--gutter) clamp(64px,9vh,104px)"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      maxWidth: 920,
      margin: "0 auto"
    }
  }, /*#__PURE__*/React.createElement("article", null, /*#__PURE__*/React.createElement("h2", {
    style: {
      margin: 0,
      fontFamily: "var(--font-sans)",
      fontSize: "var(--display-m-size)",
      fontWeight: "var(--display-m-weight)",
      lineHeight: "var(--display-m-leading)",
      letterSpacing: "var(--display-m-tracking)"
    }
  }, "Your mic is on."), /*#__PURE__*/React.createElement(CaptureFigure, {
    style: {
      marginTop: 24
    },
    src: "assets/work/vr/controller-nudge.mp4",
    poster: "assets/work/vr-controller-nudge-poster.webp",
    caption: "In-headset capture of the shipped nudge. I wrote the string; the interaction was built with the product designer and engineering."
  }), /*#__PURE__*/React.createElement(StageAction, {
    accent: "signal",
    style: {
      marginTop: 18
    },
    onClick: () => onNavigate && onNavigate("vr-education")
  }, "Read VR NUX")), /*#__PURE__*/React.createElement("article", {
    style: {
      marginTop: "clamp(56px,8vh,88px)",
      paddingTop: "clamp(44px,6vh,64px)",
      borderTop: "1px solid color-mix(in srgb, var(--story-ink) 25%, transparent)"
    }
  }, /*#__PURE__*/React.createElement("h2", {
    style: {
      margin: 0,
      fontFamily: "var(--font-sans)",
      fontSize: "var(--display-m-size)",
      fontWeight: "var(--display-m-weight)",
      lineHeight: "var(--display-m-leading)",
      letterSpacing: "var(--display-m-tracking)"
    }
  }, "Go. View details."), /*#__PURE__*/React.createElement(ArtifactFigure, {
    contain: true,
    style: {
      marginTop: 24
    },
    src: "assets/work/card-portals.jpg",
    alt: "A portal card showing a world, who is inside, and the actions Go and View details",
    caption: "A portal at approach distance: identity, who is already inside, and the available actions."
  }), /*#__PURE__*/React.createElement(StageAction, {
    accent: "signal",
    style: {
      marginTop: 18
    },
    onClick: () => onNavigate && onNavigate("portals")
  }, "Read Horizon Portals")))));
}
function ResumeWebEntry({
  when,
  org,
  role,
  bullets = []
}) {
  return /*#__PURE__*/React.createElement("article", {
    "data-ds": "resume-entry",
    style: {
      display: "grid",
      gridTemplateColumns: "140px minmax(0,1fr)",
      gap: "clamp(18px,3vw,42px)",
      padding: "clamp(22px,3vw,34px) 0",
      borderTop: "1px solid var(--soft-line)"
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      paddingTop: 4,
      color: "var(--muted-ink)",
      fontFamily: "var(--font-mono)",
      fontSize: 10,
      fontWeight: 700,
      lineHeight: 1.45
    }
  }, when), /*#__PURE__*/React.createElement("div", {
    style: {
      minWidth: 0
    }
  }, /*#__PURE__*/React.createElement("h3", {
    style: {
      margin: 0,
      color: "var(--ink)",
      fontFamily: "var(--font-sans)",
      fontSize: "clamp(24px,2.4vw,34px)",
      fontWeight: 720,
      lineHeight: 1,
      letterSpacing: "-0.055em"
    }
  }, org), role && /*#__PURE__*/React.createElement("p", {
    style: {
      margin: "8px 0 0",
      color: "var(--muted-ink)",
      fontFamily: "var(--font-sans)",
      fontSize: 15,
      fontWeight: 520,
      lineHeight: 1.35,
      letterSpacing: "-0.025em"
    }
  }, role), bullets.length > 0 && /*#__PURE__*/React.createElement("ul", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: 11,
      margin: "20px 0 0",
      padding: 0,
      listStyle: "none"
    }
  }, bullets.map((bullet, index) => /*#__PURE__*/React.createElement("li", {
    key: index,
    style: {
      display: "grid",
      gridTemplateColumns: "14px minmax(0,1fr)",
      gap: 10,
      color: "var(--ink)",
      fontFamily: "var(--font-sans)",
      fontSize: "clamp(15px,1.35vw,17px)",
      lineHeight: 1.5,
      letterSpacing: "-0.02em",
      textWrap: "pretty"
    }
  }, /*#__PURE__*/React.createElement("i", {
    style: {
      marginTop: "0.7em",
      width: 7,
      height: 1,
      background: "var(--signal)"
    }
  }), bullet)))));
}
function ResumeDocument({
  data
}) {
  return /*#__PURE__*/React.createElement("article", {
    "data-ds": "resume-document",
    "data-tone": "paper",
    style: {
      minHeight: "100%",
      background: "var(--paper)",
      color: "var(--ink)"
    }
  }, /*#__PURE__*/React.createElement("header", {
    "data-ds": "resume-header",
    style: {
      display: "grid",
      gridTemplateColumns: "minmax(0,1fr) auto",
      gap: "clamp(28px,5vw,72px)",
      alignItems: "end",
      padding: "clamp(42px,7vw,86px) var(--gutter) clamp(28px,4vw,46px)",
      borderBottom: "1px solid var(--ink)"
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
    style: {
      margin: 0,
      fontFamily: "var(--font-sans)",
      fontSize: "clamp(48px,6vw,84px)",
      fontWeight: 780,
      lineHeight: 0.92,
      letterSpacing: "-0.075em"
    }
  }, data.identity.name), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: "15px 0 0",
      fontFamily: "var(--font-sans)",
      fontSize: "clamp(21px,2.4vw,32px)",
      fontWeight: 620,
      lineHeight: 1.1,
      letterSpacing: "-0.045em"
    }
  }, data.identity.title)), /*#__PURE__*/React.createElement("div", {
    "data-ds": "resume-contact",
    style: {
      display: "grid",
      justifyItems: "end",
      gap: 8,
      color: "var(--muted-ink)",
      fontFamily: "var(--font-mono)",
      fontSize: 10,
      fontWeight: 700,
      lineHeight: 1.5,
      textAlign: "right"
    }
  }, /*#__PURE__*/React.createElement("a", {
    href: "mailto:" + data.contact,
    style: {
      color: "var(--ink)"
    }
  }, data.contact), /*#__PURE__*/React.createElement("a", {
    href: "https://" + data.identity.site,
    style: {
      color: "var(--ink)"
    }
  }, data.identity.site), /*#__PURE__*/React.createElement("span", null, data.identity.location), /*#__PURE__*/React.createElement("a", {
    href: "Caleb-Stacy-Resume.pdf",
    download: true,
    style: {
      marginTop: 5,
      color: "var(--signal-deep)",
      fontFamily: "var(--font-sans)",
      fontSize: 14,
      fontWeight: 700
    }
  }, "Download PDF"))), /*#__PURE__*/React.createElement("div", {
    style: {
      padding: "clamp(34px,5vw,66px) var(--gutter) clamp(60px,8vw,108px)"
    }
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      maxWidth: 850,
      margin: 0,
      fontFamily: "var(--font-sans)",
      fontSize: "clamp(20px,2vw,28px)",
      fontWeight: 480,
      lineHeight: 1.42,
      letterSpacing: "-0.035em",
      textWrap: "pretty"
    }
  }, data.resumeSummary), /*#__PURE__*/React.createElement("section", {
    "aria-labelledby": "resume-experience",
    style: {
      maxWidth: 960,
      marginTop: "clamp(52px,7vw,82px)"
    }
  }, /*#__PURE__*/React.createElement("h2", {
    id: "resume-experience",
    style: {
      margin: "0 0 18px",
      fontFamily: "var(--font-sans)",
      fontSize: "clamp(30px,3.5vw,46px)",
      fontWeight: 740,
      lineHeight: 1,
      letterSpacing: "-0.06em"
    }
  }, "Experience"), /*#__PURE__*/React.createElement("div", {
    style: {
      borderBottom: "1px solid var(--soft-line)"
    }
  }, data.experience.map(entry => /*#__PURE__*/React.createElement(ResumeWebEntry, {
    key: entry.org,
    when: entry.when,
    org: entry.org,
    role: entry.role,
    bullets: entry.bullets
  })))), /*#__PURE__*/React.createElement("div", {
    "data-ds": "resume-lower",
    style: {
      display: "grid",
      gridTemplateColumns: "minmax(0,1.25fr) minmax(260px,0.75fr)",
      gap: "clamp(44px,7vw,96px)",
      maxWidth: 960,
      marginTop: "clamp(52px,7vw,82px)"
    }
  }, /*#__PURE__*/React.createElement("section", {
    "aria-labelledby": "resume-methods"
  }, /*#__PURE__*/React.createElement("h2", {
    id: "resume-methods",
    style: {
      margin: 0,
      fontFamily: "var(--font-sans)",
      fontSize: "clamp(26px,3vw,38px)",
      fontWeight: 720,
      lineHeight: 1,
      letterSpacing: "-0.055em"
    }
  }, "Methods and tools"), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: "20px 0 0",
      color: "var(--muted-ink)",
      fontFamily: "var(--font-sans)",
      fontSize: 16,
      lineHeight: 1.7,
      letterSpacing: "-0.02em",
      textWrap: "pretty"
    }
  }, data.tools.join(" · "))), /*#__PURE__*/React.createElement("section", {
    "aria-labelledby": "resume-education"
  }, /*#__PURE__*/React.createElement("h2", {
    id: "resume-education",
    style: {
      margin: 0,
      fontFamily: "var(--font-sans)",
      fontSize: "clamp(26px,3vw,38px)",
      fontWeight: 720,
      lineHeight: 1,
      letterSpacing: "-0.055em"
    }
  }, "Education"), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 20,
      borderBottom: "1px solid var(--soft-line)"
    }
  }, data.education.map(item => /*#__PURE__*/React.createElement("div", {
    key: item.org,
    style: {
      padding: "15px 0",
      borderTop: "1px solid var(--soft-line)"
    }
  }, /*#__PURE__*/React.createElement("p", {
    style: {
      margin: 0,
      fontFamily: "var(--font-sans)",
      fontSize: 17,
      fontWeight: 700,
      lineHeight: 1.25,
      letterSpacing: "-0.03em"
    }
  }, item.role), /*#__PURE__*/React.createElement("p", {
    style: {
      margin: "6px 0 0",
      color: "var(--muted-ink)",
      fontFamily: "var(--font-sans)",
      fontSize: 14,
      lineHeight: 1.4
    }
  }, item.org, " · ", item.when))))))));
}
Object.assign(window, {
  AboutDocument,
  MicrocopyDocument,
  ResumeDocument
});
})();

/* ---- ui_kits/portfolio/app.jsx ---- */
(function () {
const {
  PaperFrame,
  IndexRail,
  StageCurtain,
  MobileIdentityBar,
  MobileMenu
} = window.CalebStacyPortfolioDesignSystem_4a3883;

/* Tolerates a bundle that has not recompiled with StageCurtain / the phone nav yet. */
const Curtain = StageCurtain || (() => null);
const IdentityBar = MobileIdentityBar || (() => null);
const Menu = MobileMenu || (() => null);
const MOBILE_MENU_ID = "mobile-menu";
const COVER_MS = 380;
const REVEAL_MS = 560;

/* Sub-routes nest one level under a parent project's own hash destination — currently only
   Verso has any: three satellite documents (Agent, Engine, Index) its main story doors into.
   Each is addressable as its own hash (#verso/agent, ...), so it reloads and survives back/
   forward on its own, while the rail and the curtain's direction logic both treat it as sitting
   at its parent's position in `order` rather than growing a fourth navigation level of their
   own — see `baseId` below. */
const SUB_ROUTES = {
  "verso/agent": {
    base: "verso",
    label: "Agent"
  },
  "verso/engine": {
    base: "verso",
    label: "Engine"
  },
  "verso/index": {
    base: "verso",
    label: "Index"
  }
};

/* The id a sub-route's rail highlight and ordering both resolve to; a plain destination is its
   own base. */
function baseId(id) {
  const sub = SUB_ROUTES[id];
  return sub ? sub.base : id;
}
function isAddressable(id, order) {
  return order.indexOf(id) !== -1 || Object.prototype.hasOwnProperty.call(SUB_ROUTES, id);
}

/* Every destination is addressable as a hash (#verso, #verso/agent, #about, #resume, ...).
   `order` must already be built when this runs, so it takes the list rather than reading
   component state. */
function destinationFromHash(order) {
  const id = (window.location.hash || "").replace(/^#/, "");
  return isAddressable(id, order) ? id : order[0];
}
function PortfolioApp() {
  const data = window.PORTFOLIO;

  /* Documents are ordered so the curtain can travel the way the reader is moving:
     About, the three projects, the supporting microcopy shelf, then Résumé. Memoized so the
     popstate effect below doesn't
     resubscribe on every render. */
  const order = React.useMemo(() => ["about", ...data.projects.map(p => p.id), "microcopy", "resume"], [data]);
  const [active, setActive] = React.useState(() => destinationFromHash(order));
  const [curtain, setCurtain] = React.useState({
    state: "idle",
    direction: "forward",
    label: ""
  });
  const [menuOpen, setMenuOpen] = React.useState(false);
  const scrollRef = React.useRef(null);
  const menuToggleRef = React.useRef(null);
  const timers = React.useRef([]);
  const mounted = React.useRef(false);
  const labelFor = id => {
    const sub = SUB_ROUTES[id];
    if (sub) return sub.label + " — Verso";
    const project = data.projects.find(p => p.id === id);
    if (project) return project.title;
    if (id === "microcopy") return "Microcopy";
    return id === "resume" ? "Résumé" : "About";
  };
  React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
    /* Below the shell breakpoint the reader is no longer an internally-scrolled pane — the page
       itself scrolls (tokens/shell.css) — so resetting is a real navigation, not a no-op the
       way it is on desktop, where the page never scrolls in the first place. */
    if (window.scrollTo) window.scrollTo(0, 0);
  }, [active]);

  /* A destination change closes the phone menu, covering selection, back/forward, and a fresh
     deep link alike — the menu should never still be open over a document it did not open. */
  React.useEffect(() => {
    setMenuOpen(false);
  }, [active]);

  /* "Switching projects remounts at the top and moves focus to the new heading" (DESIGN_SPEC).
     Every document's opening scene renders exactly one <h1> (StageCopy), marked
     data-doc-heading and tabIndex={-1} so it is focusable without joining the tab order.
     Skipped on the very first mount: the browser's own load behavior is already correct
     there, and stealing focus from a reader arriving on a deep link would be the wrong move. */
  React.useEffect(() => {
    if (!mounted.current) {
      mounted.current = true;
      return;
    }
    const node = scrollRef.current;
    const heading = node && node.querySelector("[data-doc-heading]");
    if (heading) heading.focus();
  }, [active]);
  React.useEffect(() => () => timers.current.forEach(clearTimeout), []);

  /* Normalize the address bar to whatever destination actually opened (the deep link, or the
     "about" default when there wasn't one) and seed history.state so popstate below can read
     the destination straight back rather than re-parsing the hash. Runs once, on mount. */
  React.useEffect(() => {
    if (window.history) window.history.replaceState({
      id: active
    }, "", "#" + active);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  /* Back/forward restores the destination directly, with no curtain: the curtain is a forward
     motion cue for a chosen destination, and replaying it on a browser-initiated jump fights
     the instant, direction-agnostic way back/forward already reads to a user. */
  React.useEffect(() => {
    const onPopState = event => {
      let id = event.state && event.state.id;
      if (!id || !isAddressable(id, order)) id = destinationFromHash(order);
      timers.current.forEach(clearTimeout);
      setCurtain({
        state: "idle",
        direction: "forward",
        label: ""
      });
      setActive(id);
    };
    window.addEventListener("popstate", onPopState);
    return () => window.removeEventListener("popstate", onPopState);
  }, [order]);
  const go = id => {
    if (id === active) return;
    if (window.history) window.history.pushState({
      id
    }, "", "#" + id);
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      setActive(id);
      return;
    }
    const direction = order.indexOf(baseId(id)) < order.indexOf(baseId(active)) ? "backward" : "forward";
    timers.current.forEach(clearTimeout);
    setCurtain({
      state: "covering",
      direction,
      label: labelFor(id)
    });
    timers.current = [setTimeout(() => {
      setActive(id);
      setCurtain(c => ({
        ...c,
        state: "revealing"
      }));
    }, COVER_MS), setTimeout(() => setCurtain(c => ({
      ...c,
      state: "idle"
    })), COVER_MS + REVEAL_MS)];
  };

  /* A sub-route's project is its parent's — Verso's Agent/Engine/Index pages all resolve to the
     same `project` record the main Verso document uses, since they're facts about the same case,
     not a separate destination in `order`. */
  const subRoute = SUB_ROUTES[active];
  const railActive = baseId(active);
  const project = data.projects.find(p => p.id === railActive);
  const nextProject = project ? data.projects[(data.projects.findIndex(p => p.id === railActive) + 1) % data.projects.length] : null;
  const railProjects = data.projects.map(p => ({
    id: p.id,
    number: p.number,
    title: p.title,
    statement: p.statement,
    subPages: p.subPages
  }));
  const utilities = [{
    id: "about",
    label: "About"
  }, {
    id: "microcopy",
    label: "Microcopy"
  }, {
    id: "resume",
    label: "Résumé"
  }];
  return /*#__PURE__*/React.createElement(PaperFrame, null, /*#__PURE__*/React.createElement(IndexRail, {
    name: data.identity.name,
    title: data.identity.title,
    differentiator: data.identity.differentiator,
    thesis: data.identity.thesis,
    projects: railProjects,
    active: railActive,
    activeSub: active,
    onSelect: go,
    utilities: utilities,
    location: data.identity.location,
    contactHref: "mailto:calebstacy@gmail.com"
  }), /*#__PURE__*/React.createElement(IdentityBar, {
    name: data.identity.name,
    title: data.identity.title,
    isOpen: menuOpen,
    onToggle: () => setMenuOpen(v => !v),
    toggleRef: menuToggleRef,
    menuId: MOBILE_MENU_ID
  }), /*#__PURE__*/React.createElement(Menu, {
    isOpen: menuOpen,
    onClose: () => setMenuOpen(false),
    projects: railProjects,
    utilities: utilities,
    activeId: railActive,
    activeSubId: active,
    onSelect: go,
    location: data.identity.location,
    contactHref: "mailto:calebstacy@gmail.com",
    contactLabel: "Contact",
    menuId: MOBILE_MENU_ID,
    returnFocusRef: menuToggleRef
  }), /*#__PURE__*/React.createElement("div", {
    "data-ds": "reader",
    style: {
      position: "relative",
      minWidth: 0,
      minHeight: 0,
      overflow: "hidden"
    }
  }, /*#__PURE__*/React.createElement("div", {
    ref: scrollRef,
    "data-ds": "reader-scroll",
    style: {
      position: "absolute",
      inset: 0,
      overflowY: "auto",
      background: "var(--paper)"
    }
  }, /*#__PURE__*/React.createElement("div", {
    key: active
  }, active === "about" && /*#__PURE__*/React.createElement(AboutDocument, {
    data: data,
    onWork: () => go(data.projects[0].id)
  }), active === "microcopy" && typeof MicrocopyDocument === "function" && /*#__PURE__*/React.createElement(MicrocopyDocument, {
    onNavigate: go
  }), active === "resume" && /*#__PURE__*/React.createElement(ResumeDocument, {
    data: data
  }), project && (
  /* Verso is the hero and runs its own authored document, plus three satellite pages
     (Agent, Engine, Index) its story doors into — see SUB_ROUTES above. The rest
     share the case template. */
  project.id === "verso" && subRoute && active === "verso/agent" && typeof VersoAgentDocument === "function" ? /*#__PURE__*/React.createElement(VersoAgentDocument, {
    key: active,
    project: project,
    onNavigate: go,
    scrollRef: scrollRef
  }) : project.id === "verso" && subRoute && active === "verso/engine" && typeof VersoEngineDocument === "function" ? /*#__PURE__*/React.createElement(VersoEngineDocument, {
    key: active,
    project: project,
    onNavigate: go,
    scrollRef: scrollRef
  }) : project.id === "verso" && subRoute && active === "verso/index" && typeof VersoIndexDocument === "function" ? /*#__PURE__*/React.createElement(VersoIndexDocument, {
    key: active,
    project: project,
    onNavigate: go,
    scrollRef: scrollRef
  }) : project.id === "verso" && typeof VersoDocument === "function" ? /*#__PURE__*/React.createElement(VersoDocument, {
    key: project.id,
    project: project,
    nextProject: nextProject,
    onNext: () => go(nextProject.id),
    onNavigate: go,
    scrollRef: scrollRef
  }) : project.id === "vr-education" && typeof VrDocument === "function" ? /*#__PURE__*/React.createElement(VrDocument, {
    key: project.id,
    project: project,
    nextProject: nextProject,
    onNext: () => go(nextProject.id),
    scrollRef: scrollRef
  }) : project.id === "portals" && typeof PortalsDocument === "function" ? /*#__PURE__*/React.createElement(PortalsDocument, {
    key: project.id,
    project: project,
    nextProject: nextProject,
    onNext: () => go(nextProject.id),
    scrollRef: scrollRef
  }) : /*#__PURE__*/React.createElement(ProjectDocument, {
    key: project.id,
    project: project,
    chapters: data.chapters,
    nextProject: nextProject,
    onNext: () => go(nextProject.id),
    scrollRef: scrollRef
  })))), /*#__PURE__*/React.createElement(Curtain, {
    state: curtain.state,
    direction: curtain.direction,
    label: curtain.label
  })));
}
Object.assign(window, {
  PortfolioApp
});
})();

/* ---- ui_kits/portfolio (inline script) ---- */
(function () {
ReactDOM.createRoot(document.getElementById("root")).render(/*#__PURE__*/React.createElement(PortfolioApp, null));
})();