.home-page {
  /* The site's own paper and ink. The front page had a warmer pair of its own,
     so the map and the documents it opens onto were two surfaces; these are
     --bg and --ink from site.css, and the soft and rule tints are the same
     hairline family every other page draws with. The renderer overwrites
     --scene inline once it runs, from a table set to these same values — this
     is what the page is before that, so it does not flash. */
  --scene: #fff;
  --scene-ink: #131311;
  --scene-accent: #bd3f22;
  --scene-soft: rgba(19, 19, 17, 0.48);
  --scene-rule: rgba(19, 19, 17, 0.2);
  --home-copy-top: max(calc(var(--home-stage-header-clearance) + 0.4rem), 7.5vh);
  --home-copy-map-gap: clamp(1rem, 2vw, 2rem);
  --home-introduction-inset-block-start: 1rem;
  --home-stage-region-gap: 0.75rem;
  --home-map-edge-left: 33vw;
  --home-visible-map-edge-left: var(--home-map-edge-left);
  --home-visible-map-width: 100%;
  --home-visible-map-width-50: 0px;
  --home-reactive-map-max-width: none;
  --home-content-frame-edge-left: var(--chrome-content-frame-inset);
  --home-content-frame-edge-right: var(--chrome-content-frame-inset);
  /* Only cyan, yellow, and the graph join the shared Atlas body rail. */
  --home-body-max-inline-size:
    calc(
      var(--atlas-content-max-inline-size) -
      var(--home-content-frame-edge-left) -
      var(--home-content-frame-edge-right)
    );
  --home-page-inline-size:
    calc(100vw - var(--page-edge-left) - var(--page-edge-right));
  --home-body-secondary-gutter:
    calc((var(--home-page-inline-size) - var(--home-body-max-inline-size)) / 2);
  --home-body-edge-left:
    max(var(--home-content-frame-edge-left), var(--home-body-secondary-gutter));
  --home-body-edge-right:
    max(var(--home-content-frame-edge-right), var(--home-body-secondary-gutter));
  --home-context-title-line-box: clamp(4.73rem, 10.32vw, 8.256rem);
  --home-context-title-block-size:
    calc(var(--home-context-title-line-box) + var(--home-context-title-line-box));
  --home-context-title-bottom:
    calc(
      var(--chrome-content-frame-inset) +
      var(--home-context-title-block-size)
    );
  --context-title-space: clamp(9rem, 19.68vw, 15.744rem);
  display: flex;
  flex-direction: column;
  width: auto;
  block-size: calc(100dvh - var(--page-inset) * 2);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
  background: var(--scene);
  color: var(--scene-ink);
  transition: background-color 650ms var(--ease-out), color 450ms ease;
}

.home-page::before {
  z-index: 1;
  opacity: 0.13;
  background:
    radial-gradient(circle at 23% 17%, rgba(106, 75, 40, 0.15) 0 0.45px, transparent 0.75px) 0 0 / 4px 5px,
    radial-gradient(circle at 72% 63%, rgba(106, 75, 40, 0.1) 0 0.35px, transparent 0.7px) 0 0 / 7px 6px,
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(17,17,15,.07) 50%, transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(17,17,15,.05) 50%, transparent calc(50% + .5px));
  background-size: 4px 5px, 7px 6px, 12.5vw 12.5vh, 12.5vw 12.5vh;
}

@media (min-width: 821px) {
  .home-page .graph-stage {
    display: grid;
    grid-template-rows:
      minmax(0, 1fr)
      calc(
        100dvh -
        var(--home-copy-top) -
        var(--context-title-space) -
        var(--home-footer-surface-height)
      )
      minmax(0, 1fr);
    padding:
      var(--home-context-title-bottom)
      0
      var(--home-footer-surface-height);
  }

  .home-page .display-field {
    position: relative;
    inset: auto;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    margin-inline-start: var(--home-body-edge-left);
    min-width: var(--home-visible-map-width-50);
    width:
      calc(
        var(--home-visible-map-edge-left) -
        var(--home-body-edge-left) -
        var(--home-copy-map-gap)
      );
    padding: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--scene);
  }

  .home-page .display-bio {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    margin-top: 0;
    /* The column scrolls inside its cell, so its last line needs somewhere to
       arrive. Without this the closing sentence stops flush against the
       container's bottom edge and reads as though it were cut off rather than
       finished. Generous here because the cell is tall and the scroll is
       silent — the scrollbar is hidden, and the space is what tells a reader
       they have reached the end. */
    padding-bottom: clamp(5rem, 14vh, 11rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    touch-action: pan-y;
    scrollbar-width: none;
  }

  .home-page .display-bio::-webkit-scrollbar {
    display: none;
  }

  /* A little air on either side of the writing. The column is sized to the
     space between the page's left edge and the map, so before this the prose
     and the rules it draws sat flush against both — the last word of a line
     stopping about a dozen pixels short of the map frame. Inline padding only:
     the vertical rhythm above and below is the column's own and is already
     right, and below 821px the column is the whole page and reads well flush. */
  .home-page .display-bio .article-body {
    padding-inline: clamp(0.9rem, 1.3vw, 1.35rem);
  }

  .home-page.has-preview-node .display-bio {
    display: none;
  }

}

.graph-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  block-size: 100%;
}

#graph {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  cursor: default;
  touch-action: none;
}

#graph.dragging,
#graph.panning {
  cursor: grabbing;
}

#graph.node-hover {
  cursor: pointer;
}

#graph:focus-visible {
  outline: 1px solid var(--scene-ink);
  outline-offset: -1.1rem;
}

.display-field {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 10;
  width: 38vw;
  pointer-events: none;
  color: var(--scene-ink);
  transition: color 450ms ease;
}

.mobile-return {
  display: none;
}

.display-bio {
  margin: 0;
  /* Below 821px the page itself scrolls and the footer follows the column, so
     this is breathing room between the writing and the footer rather than the
     end of a scroll. A little is enough. */
  padding-bottom: 2.5rem;
  font-family: var(--serif);
  font-size: clamp(0.94rem, 0.88rem + 0.12vw, 1rem);
  line-height: 1.5;
  letter-spacing: 0.003em;
  text-wrap: pretty;
}

.display-bio p + p {
  margin-top: 0.85em;
}

/* The front page's prose is an article body — the same /assets/article.css
   every other body on this origin wears — fitted to the one column it is read
   in. article.css loads last, as the grammar sheet does on every surface that
   carries it, so the fitting is done by specificity: these selectors name the
   column, which article.css cannot see.

   Three things change and nothing else. The measure is the column, not a
   42rem page, so the width roles stop centering a narrower block inside an
   already narrow space. The scale steps down to the column's, which is what
   the introduction has always read at beside the map. And the body's opening
   paragraph keeps the column's scale rather than taking an Article's lede
   treatment: that first sentence is the standfirst, which has always read at
   the same size as the prose it introduces.

   The relayout law is off here on purpose: it earns its keep on a document of
   tens of thousands of nodes, and this is three paragraphs inside a column
   that scrolls, where a deferred block would only cost a jump. */
.display-bio .article-body {
  --md-measure-prose: 100%;
  --md-measure-media: 100%;
  --md-space-paragraph: 0.85em;
  --md-space-resume: 1.1em;
  /* An Article's section space is set on .article-page, which this surface is
     not, so a rule or a heading would fall back to no space at all. The column
     keeps its own, smaller, and the rules the document draws stand clear of
     the prose on both sides. */
  --md-space-section: 2rem;
  font-size: clamp(0.94rem, 0.88rem + 0.12vw, 1rem);
  line-height: 1.5;
}
.display-bio .article-body > * {
  content-visibility: visible;
  contain-intrinsic-size: none;
}
.display-bio .article-body > p:first-child {
  font-size: inherit;
  line-height: inherit;
}

/* A list of works, set the way this site already sets a link to a work.
   Markdown gives each entry a strong title and a line of description; the two
   faces this page loads decide the rest. The serif has no bold cut — only
   400 and its italic — so `**` alone leaves a title the browser fakes weight
   for and a reader cannot pick out. The Article header's previous/next links
   solved the same problem long ago: the title in the sans, the gloss beneath
   it in the serif, muted. The same two faces, the same relationship, read
   here off the markup Markdown already produced. */
.display-bio .article-body > :where(ul, ol) li {
  font-size: var(--type-small);
  line-height: 1.42;
  color: var(--ink-muted);
}
.display-bio .article-body > :where(ul, ol) li > strong {
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* The headings the body authors, in one voice. Both are the column's own
   headings — there are no sections here to rank one above the other — so both
   are set the same way: the condensed display face in caps, at the size an
   Article gives an h3. The h3 already read this way, but only because
   article.css won a specificity tie against a rule in this file that meant to
   make it a small label; stating both here means the two stay matched on
   purpose rather than by accident, and neither can drift if the grammar
   sheet's own heading scale moves.

   Top margins stay per-heading below: the h3 opens the column, the h2 follows
   a rule, and they are spaced for where they sit rather than as a pair. */
.display-bio .article-body > h2,
.display-bio .article-body > h3 {
  width: 100%;
  font-family: var(--display);
  font-size: clamp(1.65rem, 2.1vw, 1.95rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
}

/* The h3 opens the column, so its top margin is not space between two things
   — it is a gap above the first line, and where that line sits is the grid
   cell's job, not the heading's. article.css gives it 3.5vw because in an
   Article an h3 always has prose above it. Above 821px there is nothing above
   it, so nearly all of that goes.

   Desktop only. Below 821px the page itself scrolls and the map sits directly
   on top of this heading, so the margin is doing real work there — it is the
   gap between the frame's bottom edge and the first line of the writing. */
@media (min-width: 821px) {
  .display-bio .article-body > h3:first-child {
    margin-top: 0.5rem;
  }
}

/* What an Article's h2 carries that a heading here does not: the rule above
   it, the space that rule needs, and the section number before it. This
   column is one continuous piece of writing, so there are no sections to
   number and nothing for a rule to divide. */
.display-bio .article-body > h2 {
  margin-top: 1.8rem;
  padding-top: 0;
  border-top: 0;
}
.display-bio .article-body > h2::before {
  content: none;
}
.display-bio .article-body > h2 + p {
  margin-top: 0.65rem;
}

/* The one sentence that says what this is was lifted out of the introduction
   into a slot of its own, so the head, the feed, and the front page could
   state the same thing without restating it. It is back in the introduction —
   its first paragraph, in content/pages/home.md — and it still names
   {summary}, so it is still one fact stated once. The column is one piece of
   writing again, and it is authored as one document. */

/* The page's one biographical statement, in the same column and the same
   voice as the introduction above it — a few paragraphs of prose, not a
   panel. The map is the navigation; this is the person behind it. */

.display-bio h2,
.display-bio h3 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
}

.display-bio h2 {
  margin-top: 1.8rem;
  font-size: clamp(1.35rem, 1.15rem + 0.5vw, 1.75rem);
  letter-spacing: -0.025em;
}

.display-bio h3 {
  margin-top: 1.5rem;
  font-size: clamp(0.72rem, 0.68rem + 0.1vw, 0.8rem);
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.display-bio h2 + p,
.display-bio h3 + p {
  margin-top: 0.65rem;
}

.display-bio a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 48%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.display-bio a:hover,
.display-bio a:focus-visible {
  text-decoration-color: currentColor;
}

.home-reading {
  max-width: 38ch;
  margin: clamp(1.5rem, 3vh, 2.25rem) 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--scene-rule);
  font-size: var(--type-small);
  line-height: 1.35;
  text-wrap: pretty;
}

.home-reading p {
  margin: 0;
}

.home-reading-source {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28em;
  margin-top: 0.45rem;
  font-family: var(--sans);
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0.62;
}

.home-reading-author::after {
  content: ",";
}

.home-reading-work {
  font-style: italic;
}

.home-header {
  overflow: visible;
}

@media (min-width: 501px) {
  .home-page .home-header .context-title {
    position: absolute;
    display: block;
    width: min(36vw, 28.8rem);
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: none;
    font-family: var(--display);
    font-size: clamp(3.75rem, 12vw, 9.6rem);
    font-weight: 600;
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    text-wrap: balance;
    cursor: default;
  }

  .home-page .home-header .context-title span {
    display: block;
    width: max-content;
    max-width: min(38vw, 30.4rem);
    margin: 0;
    transform-origin: left center;
    transition: transform 650ms var(--ease-out), opacity 300ms ease;
  }

  .home-page .home-header .context-title.changing span {
    opacity: 0;
    transform: translateY(0.5em) scaleX(0.88);
  }

  .home-page .home-header .context-title[data-length="long"] {
    font-size: clamp(4.4rem, 9vw, 7.2rem);
    line-height: 0.85;
  }

  .home-page .home-header .context-title[data-length="very-long"] {
    font-size: clamp(3.6rem, 7.2vw, 5.76rem);
    line-height: 0.86;
  }

  .home-page.has-preview-node .home-header .context-title[data-lines="1"] {
    transform: translateY(100%);
  }
}

@media (min-width: 821px) {
  .home-page .home-header .context-title {
    top: 0;
    left:
      calc(
        var(--home-body-edge-left) -
        var(--home-content-frame-edge-left)
      );
  }
}

.mobile-concept {
  display: none;
}

.map-slot {
  display: contents;
}

.map-field {
  position: absolute;
  top: 10.5vh;
  right: 8vw;
  bottom: calc(var(--home-footer-height) + clamp(1rem, 2vh, 1.75rem));
  left: 33vw;
  z-index: 8;
  pointer-events: none;
  border: 1px solid var(--scene-rule);
  transition: border-color 450ms ease;
}

/*
 * The permanent relief plate uses one 49 × 41 proportion at every viewport.
 * The slot supplies responsive room; the renderer contains the border at this
 * ratio without stretching the map. Other graph SKUs retain their historical
 * frame geometry.
 */
.graph-frame-locked .map-slot {
  position: absolute;
  top: max(10.5vh, calc(var(--home-stage-header-clearance) + 0.35rem));
  right: max(1.25vw, var(--page-inset));
  bottom: max(10.5vh, calc(var(--home-footer-height) + 0.75rem));
  left: var(--home-map-edge-left);
  z-index: auto;
  display: grid;
  place-items: center end;
  container-type: size;
  pointer-events: none;
}

.graph-frame-locked .map-field {
  position: relative;
  inset: auto;
  z-index: 8;
  grid-area: 1 / 1;
  width: min(100cqi, 119.51219512cqb);
  height: auto;
  aspect-ratio: 49 / 41;
}

@media (min-width: 821px) {
  .graph-frame-locked .map-field {
    max-width: var(--home-reactive-map-max-width);
  }
}

/*
 * M4 restores the approved desktop plate to its leftward composition.
 * M3 keeps its accepted frame unchanged at its historical route.
 */
.home-page.graph-frame-canonical {
  --home-map-edge-left: 29.25vw;
}

.graph-frame-canonical .map-slot {
  right: var(--home-body-edge-right);
  place-items: center end;
}

.corner {
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
}

.corner::before,
.corner::after {
  position: absolute;
  content: "";
  background: var(--scene-ink);
}

.corner::before { width: 100%; height: 1px; }
.corner::after { width: 1px; height: 100%; }
.corner-a { top: -1px; left: -1px; }
.corner-b { top: -1px; right: -1px; transform: rotate(90deg); }
.corner-c { right: -1px; bottom: -1px; transform: rotate(180deg); }
.corner-d { bottom: -1px; left: -1px; transform: rotate(270deg); }

.graph-access:focus-within {
  position: fixed !important;
  top: 5.5rem !important;
  left: clamp(1.45rem, 3vw, 3rem) !important;
  z-index: 95 !important;
  display: flex !important;
  width: min(27rem, calc(100vw - 3rem)) !important;
  height: min(34rem, calc(100vh - 7rem)) !important;
  margin: 0 !important;
  padding: 1rem !important;
  overflow: auto !important;
  clip: auto !important;
  white-space: normal !important;
  border: 1px solid var(--scene-ink) !important;
  background: var(--scene);
  flex-wrap: wrap;
  gap: 0.35rem;
  align-content: flex-start;
}

.graph-access button {
  min-height: 2.4rem;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  border: 1px solid var(--scene-rule);
  background: transparent;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.graph-access button:focus-visible {
  color: var(--scene);
  background: var(--scene-ink);
  outline: none;
}

/* A concept opens as a new editorial surface, not a drawer. */
#panel {
  --panel-bg: #fff;
  --panel-ink: #171713;
  position: fixed;
  inset: 0;
  z-index: 140;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 clamp(1.45rem, 3vw, 3rem) clamp(2rem, 4vw, 4rem);
  visibility: hidden;
  color: var(--panel-ink);
  background: var(--panel-bg);
  clip-path: inset(100% 0 0 0);
  transition:
    clip-path 800ms var(--ease-out),
    visibility 0ms linear 800ms;
}

#panel::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.16;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), currentColor 50%, transparent calc(50% + .5px));
  background-size: 12.5vw 100%;
}

#panel.open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 800ms var(--ease-out),
    visibility 0ms linear 0ms;
}

.panel-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--panel-ink) 24%, transparent);
  background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
  backdrop-filter: blur(10px);
}

.panel-index,
.panel-close {
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.panel-close {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 2.8rem;
  cursor: pointer;
  border: 0;
  background: transparent;
}

.panel-close i {
  position: relative;
  display: block;
  width: 1.2rem;
  height: 1.2rem;
}

.panel-close i::before,
.panel-close i::after {
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
}

.panel-close i::before {
  width: 100%;
  height: 1px;
  background: currentColor;
}

.panel-close i::after {
  width: 0.46rem;
  height: 0.46rem;
  border-bottom: 1px solid currentColor;
  border-left: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.panel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
  gap: clamp(3rem, 8vw, 9rem);
  min-height: calc(100vh - 12.8rem);
  padding: clamp(3rem, 7vh, 6rem) 0;
}

.panel-intro {
  align-self: start;
}

.panel-kicker,
.panel-section-label,
.panel-related-label {
  margin-bottom: 1.1rem;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

#panel h2 {
  max-width: 8ch;
  font-family: var(--display);
  font-size: clamp(6.5rem, 14vw, 15rem);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.panel-gloss {
  max-width: 35rem;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  font-family: var(--serif);
  font-size: var(--type-lead);
  font-style: italic;
  line-height: var(--leading-lead);
  text-wrap: pretty;
}

.panel-count {
  margin-top: 1rem;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0.52;
}

.panel-content {
  align-self: center;
}

.panel-work {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 0.85rem;
  align-items: center;
  min-height: 5.4rem;
  padding: 0.85rem 0;
  border-top: 1px solid color-mix(in srgb, var(--panel-ink) 25%, transparent);
}

.panel-work:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--panel-ink) 25%, transparent);
}

.panel-work .work-number {
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  opacity: 0.46;
}

.panel-work .work-title {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.25rem);
  line-height: 1.16;
  text-wrap: balance;
}

.panel-work .work-type {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0.48;
}

.panel-work .work-arrow {
  position: relative;
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  transition: transform 350ms var(--ease-out);
}

.panel-work:hover .work-arrow {
  transform: translate(0.25rem, -0.25rem);
}

.panel-unwritten {
  padding: 1.5rem 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  font-family: var(--serif);
  font-size: clamp(1rem, 0.96rem + 0.12vw, 1.08rem);
  font-style: italic;
  line-height: 1.45;
}

.panel-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--panel-ink) 25%, transparent);
}

.panel-pill {
  min-height: 2.5rem;
  margin: 0 0.35rem 0.35rem 0;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--panel-ink) 35%, transparent);
  background: transparent;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: color 200ms ease, background 200ms ease;
}

.panel-pill:hover {
  color: var(--panel-bg);
  background: var(--panel-ink);
}

.panel-permalink {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.8rem;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.panel-permalink span {
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
}

.panel-permalink span::before,
.panel-permalink span::after,
.work-arrow::before,
.work-arrow::after,
.mobile-work-arrow::before,
.mobile-work-arrow::after {
  position: absolute;
  content: "";
}

.panel-permalink span::before,
.work-arrow::before,
.mobile-work-arrow::before {
  top: 50%;
  left: 0.08rem;
  width: 0.72rem;
  height: 1px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
}

.panel-permalink span::after,
.work-arrow::after,
.mobile-work-arrow::after {
  top: 0.05rem;
  right: 0.05rem;
  width: 0.42rem;
  height: 0.42rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.locator {
  --locator-bg: var(--scene);
  --locator-ink: var(--scene-ink);
  position: fixed;
  inset: 0;
  z-index: 138;
  overflow-y: auto;
  padding: 0 clamp(1.45rem, 3vw, 3rem) clamp(2rem, 4vw, 4rem);
  visibility: hidden;
  color: var(--locator-ink);
  background: var(--locator-bg);
  clip-path: inset(0 0 0 100%);
  transition:
    clip-path 700ms var(--ease-out),
    visibility 0ms linear 700ms;
}

.locator::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.14;
  background:
    radial-gradient(circle, currentColor 0 0.35px, transparent 0.5px) 0 0 / 3px 3px,
    linear-gradient(90deg, transparent calc(50% - .5px), currentColor 50%, transparent calc(50% + .5px));
  background-size: 3px 3px, 12.5vw 100%;
}

.locator.open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 700ms var(--ease-out),
    visibility 0ms linear 0ms;
}

.locator-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 7rem;
  border-bottom: 1px solid var(--scene-rule);
  background: color-mix(in srgb, var(--scene) 92%, transparent);
  backdrop-filter: blur(12px);
}

.locator-body label,
.locator-purpose {
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.locator-header h2 {
  margin-top: 0.45rem;
  font-family: var(--display);
  font-size: clamp(2.5rem, 4vw, 4.8rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.locator-close {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.8rem;
  cursor: pointer;
  border: 0;
  background: transparent;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.locator-close i {
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
}

.locator-close i::before,
.locator-close i::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: currentColor;
}

.locator-close i::before { transform: rotate(45deg); }
.locator-close i::after { transform: rotate(-45deg); }

.locator-body {
  width: min(68rem, 100%);
  padding: clamp(3rem, 7vw, 7rem) 0;
}

.locator-query {
  position: relative;
}

#locator-input {
  width: 100%;
  margin-top: 0.9rem;
  padding: 0 0 0.35rem;
  border: 0;
  border-bottom: 1px solid var(--scene-ink);
  border-radius: 0;
  outline: 0;
  color: currentColor;
  background: transparent;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 4.8rem);
  font-style: italic;
  line-height: 1.08;
  letter-spacing: -0.01em;
  appearance: none;
}

#locator-input::placeholder {
  color: transparent;
}

#locator-input:placeholder-shown {
  caret-color: transparent;
}

.locator-prompt {
  position: absolute;
  inset: 0 0 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.35rem;
  pointer-events: none;
  color: currentColor;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 4.8rem);
  font-style: italic;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

#locator-input:not(:placeholder-shown) + .locator-prompt {
  display: none;
}

.locator-prompt-words {
  position: relative;
  display: block;
  width: 100%;
  height: 1.08em;
}

.locator-prompt-words > span {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
}

.locator.open .locator-prompt-words > span {
  animation: locator-word-once 1.5s steps(1, end) forwards;
}

.locator.open .locator-prompt-words > span:nth-child(2) { animation-delay: 1.5s; }
.locator.open .locator-prompt-words > span:nth-child(3) { animation-delay: 3s; }

.locator-focus-cursor {
  display: none;
  flex: 0 0 auto;
  width: 0.15em;
  height: 1.08em;
  margin-right: 0.12em;
  background: currentColor;
  animation: locator-cursor-blink 760ms steps(1, end) infinite;
}

.locator-query:focus-within .locator-focus-cursor {
  display: block;
}

.locator-purpose {
  display: flex;
  gap: 1.25rem;
  margin-top: 1.35rem;
  line-height: 1;
}

/* A built page is an anchor here and an unbuilt one is an inert span; both
   wear the one rule, so the panel looks the same either way and the
   difference is whether it goes anywhere. */
.locator-purpose span,
.locator-purpose a {
  padding-bottom: 0.25rem;
  border-bottom: 1px solid currentColor;
  color: inherit;
  text-decoration: none;
}

@keyframes locator-word-once {
  0%, 99.99% { opacity: 0.3; }
  100% { opacity: 0; }
}

@keyframes locator-cursor-blink {
  0%, 49.99% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

#locator-input[aria-invalid="true"] {
  border-bottom-color: var(--scene-accent);
  color: var(--scene-accent);
}

.locator-empty {
  padding: 2rem 0;
  font-family: var(--serif);
  font-size: clamp(1rem, 0.96rem + 0.12vw, 1.08rem);
  font-style: italic;
  line-height: 1.45;
}

.noscript-message {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: block;
  padding: clamp(3rem, 9vh, 7rem) clamp(1.5rem, 6vw, 6rem);
  overflow-y: auto;
  color: #11110f;
  background: #dedbd1;
}

.noscript-message p {
  max-width: 32rem;
  margin: 0 auto 2.5rem;
  font-family: var(--serif);
  font-size: var(--type-lead);
  line-height: var(--leading-lead);
}

.noscript-message ul {
  max-width: 72rem;
  margin: 0 auto;
  columns: 4 12rem;
  column-gap: 2rem;
  list-style: none;
}

.noscript-message li {
  margin-bottom: 0.45rem;
  break-inside: avoid;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.noscript-message a {
  border-bottom: 1px solid;
}

@media (max-width: 820px) {
  .home-page {
    --mobile-copy-height: min(19rem, 38dvh);
    overflow: hidden;
    transition: none;
  }

  .graph-stage {
    display: grid;
    grid-template-rows:
      minmax(0, 1fr)
      var(--home-stage-region-gap)
      var(--mobile-copy-height);
    padding:
      calc(var(--home-stage-header-clearance) + 0.35rem)
      0
      var(--home-footer-surface-height);
  }

  .display-field {
    position: relative;
    inset: auto;
    z-index: 10;
    grid-row: 3;
    width: auto;
    height: auto;
    min-height: 0;
    margin:
      0
      var(--home-content-frame-edge-right)
      0
      var(--home-content-frame-edge-left);
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    border: 0;
    background: var(--scene);
    touch-action: pan-y;
    transition: none;
    scrollbar-width: none;
  }

  .display-field::-webkit-scrollbar {
    display: none;
  }

  .display-bio {
    width: 100%;
    margin-inline: 0;
    font-size: clamp(0.84rem, 3.45vw, 0.94rem);
    line-height: 1.48;
  }

  .has-focused-node .display-bio {
    display: none;
  }

  .has-focused-node .display-field {
    position: fixed;
    inset:
      var(--home-stage-header-clearance)
      var(--home-content-frame-edge-right)
      var(--home-footer-surface-height)
      var(--home-content-frame-edge-left);
    height: auto;
    margin: 0;
    padding: var(--home-introduction-inset-block-start) 1rem 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    background: var(--scene);
    touch-action: pan-y;
    scrollbar-width: none;
  }

  .has-focused-node .display-field::-webkit-scrollbar {
    display: none;
  }

  .has-focused-node .mobile-return {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% + 2rem);
    min-height: 3.4rem;
    margin: -1rem -1rem 1.2rem;
    padding: 0 1rem;
    cursor: pointer;
    border: 0;
    border-bottom: 1px solid var(--scene-rule);
    background: var(--scene);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    font-size: var(--type-caption);
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .mobile-return i {
    position: relative;
    width: 1.8rem;
    height: 1px;
    background: currentColor;
  }

  .mobile-return i::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.45rem;
    height: 0.45rem;
    content: "";
    border-bottom: 1px solid currentColor;
    border-left: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
  }

  .has-focused-node .mobile-concept {
    display: block;
  }

  .mobile-concept {
    margin-top: 1.5rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--scene-rule);
  }

  .mobile-gloss {
    max-width: 32rem;
    padding: 1.1rem 0 1.35rem;
    font-family: var(--serif);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.45;
    text-wrap: pretty;
  }

  .mobile-work {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    min-height: 4.45rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--scene-rule);
  }

  .mobile-work:last-child {
    border-bottom: 1px solid var(--scene-rule);
  }

  .mobile-work-number,
  .mobile-work-type {
    font-size: var(--type-caption);
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    opacity: 0.5;
  }

  .mobile-work-title {
    display: block;
    font-family: var(--serif);
    font-size: 1.04rem;
    line-height: 1.16;
    text-wrap: balance;
  }

  .mobile-work-type {
    display: block;
    margin-top: 0.28rem;
  }

  .mobile-work-arrow {
    position: relative;
    width: 0.9rem;
    height: 0.9rem;
  }

  .mobile-unwritten {
    padding: 1.2rem 0;
    border-top: 1px solid var(--scene-rule);
    border-bottom: 1px solid var(--scene-rule);
    font-family: var(--serif);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.45;
  }

  .map-field {
    top: calc(var(--home-stage-header-clearance) + 0.35rem);
    right: 0.75rem;
    bottom: calc(var(--home-footer-height) + var(--mobile-copy-height) + 0.75rem);
    left: 0.75rem;
  }

  .graph-frame-locked .map-slot {
    position: relative;
    inset: auto;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    margin-inline: 0.75rem;
    place-items: center;
  }

  .locator {
    padding: 0 1rem max(1.5rem, env(safe-area-inset-bottom));
  }

  .locator-header {
    min-height: 5.4rem;
  }

  .locator-header h2 {
    font-size: 2.5rem;
  }

  .locator-body { padding: 2.5rem 0; }

  #locator-input {
    margin-top: 1rem;
    font-size: clamp(2.5rem, 14vw, 4.2rem);
  }

  .locator-prompt {
    font-size: clamp(2.5rem, 14vw, 4.2rem);
  }

  .graph-access:focus-within {
    top: 4rem !important;
    left: 1rem !important;
    width: calc(100vw - 2rem) !important;
  }

  .panel-header {
    height: 4.2rem;
    margin: 0 -1rem;
    padding: 0 1rem;
    border-bottom-color: color-mix(in srgb, var(--panel-ink) 45%, transparent);
  }

  .panel-close {
    min-height: 3.35rem;
    padding: 0.25rem 0 0.25rem 0.8rem;
    font-size: var(--type-label);
    letter-spacing: var(--tracking-label);
    border-left: 1px solid color-mix(in srgb, var(--panel-ink) 26%, transparent);
  }

  .panel-close i {
    width: 1.35rem;
    height: 1.35rem;
  }

  .panel-layout {
    display: block;
    min-height: 0;
    padding: 2rem 0 4rem;
  }

  #panel h2 {
    max-width: 100%;
    font-size: clamp(4.35rem, 21vw, 7.5rem);
    line-height: 0.84;
  }

  .panel-gloss {
    margin-top: 2.2rem;
  }

  .panel-content {
    margin-top: 4rem;
  }

  .panel-work {
    grid-template-columns: 2rem 1fr auto;
  }

  .panel-footer {
    display: block;
  }

  .panel-permalink {
    margin-top: 2rem;
  }

}

@media (max-width: 350px) {
  .display-bio {
    width: 100%;
    font-size: clamp(0.78rem, 4vw, 0.84rem);
    line-height: 1.45;
  }
}

/*
 * The phone composition is always one ordinary document. The map keeps its
 * proportion, the introduction takes its natural height, and the page owns the
 * only vertical scrollbar.
 */
@media (max-width: 820px) {
  .home-page {
    --home-flow-top-clearance:
      calc(var(--home-stage-header-clearance) + 0.35rem);
    block-size: auto;
    min-block-size: calc(100dvh - var(--page-inset) * 2);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }

  .graph-stage {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    block-size: auto;
    min-block-size: 0;
    padding:
      var(--home-flow-top-clearance)
      0
      0;
    overflow: visible;
  }

  .graph-frame-locked .map-slot {
    position: relative;
    inset: auto;
    order: 1;
    align-self: flex-start;
    width:
      calc(
        100% -
        var(--home-body-edge-left) -
        var(--home-body-edge-right)
      );
    min-height: 0;
    margin-right: var(--home-body-edge-right);
    margin-left: var(--home-body-edge-left);
    aspect-ratio: 49 / 41;
    container-type: normal;
    place-items: stretch;
  }

  .graph-frame-locked .map-field {
    width: 100%;
    height: auto;
    max-width: none;
  }

  .home-page .display-field {
    order: 2;
    display: block;
    flex: none;
    width: auto;
    height: auto;
    min-height: 0;
    margin:
      var(--home-stage-region-gap)
      var(--home-content-frame-edge-right)
      0
      var(--home-content-frame-edge-left);
    overflow: visible;
  }

  .home-page .display-bio {
    overflow: visible;
  }

  #graph {
    position: absolute;
    inset: 0 auto auto 0;
  }
}

/*
 * The stacked composition has one bounded map region. It starts below the
 * complete title, ends above the copy/footer allocation, and is centered after
 * the narrow-layout defaults resolve. The graph therefore fits by the tighter
 * of the region's width and height at every zoom level.
 */
@media (min-width: 501px) and (max-width: 820px) {
  .home-page {
    --home-stacked-map-boundary: 500px;
    --home-stacked-map-gutter: 0.75rem;
    --home-stacked-copy-reserve: min(19rem, 38dvh);
    --home-stacked-map-block-size:
      max(
        6rem,
        calc(
          100dvh -
          var(--home-context-title-bottom) -
          var(--home-stacked-copy-reserve) -
          var(--home-stage-region-gap) -
          var(--home-footer-surface-height)
        )
      );
    --home-stacked-map-max-inline-size:
      calc(
        var(--home-stacked-map-boundary) -
        var(--home-stacked-map-gutter) -
        var(--home-stacked-map-gutter)
      );
  }

  .home-page .home-header .context-title {
    top: 0;
    left:
      calc(
        var(--home-body-edge-left) -
        var(--home-content-frame-edge-left)
      );
    line-height: var(--home-title-line);
  }

  .graph-stage {
    padding-block-start: var(--home-context-title-bottom);
  }

  .home-page .display-field {
    align-self: center;
    inline-size:
      min(
        calc(
          100% -
          var(--home-content-frame-edge-left) -
          var(--home-content-frame-edge-right)
        ),
        var(--home-stacked-map-max-inline-size)
      );
    max-width: none;
    margin-inline: auto;
  }

  .graph-frame-locked .map-slot {
    align-self: center;
    inline-size:
      min(
        calc(
          100% -
          var(--home-stacked-map-gutter) -
          var(--home-stacked-map-gutter)
        ),
        var(--home-stacked-map-max-inline-size)
      );
    block-size: var(--home-stacked-map-block-size);
    margin-inline: auto;
    aspect-ratio: auto;
    container-type: size;
    place-items: center;
  }

  .graph-frame-locked .map-field {
    width: min(100cqi, 119.51219512cqb);
  }
}

/*
 * A short desktop viewport keeps the desktop left-right grammar in one
 * explicitly constrained work row. The stacked 501–820 composition does not
 * need this height exception: its map parent already caps graph growth.
 */
@media (min-width: 821px) and (max-height: 500px) {
  .home-page {
    --home-flow-top-clearance: var(--home-context-title-bottom);
    --home-column-work-height:
      max(
        10rem,
        calc(
          100dvh -
          var(--home-flow-top-clearance) -
          var(--home-footer-surface-height)
        )
      );
  }

  .graph-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    grid-template-rows: var(--home-column-work-height);
    column-gap: var(--home-copy-map-gap);
    align-items: start;
    padding-block-start: var(--home-flow-top-clearance);
    padding-block-end: 0;
    padding-inline-end: var(--home-body-edge-right);
    padding-inline-start: var(--home-body-edge-left);
  }

  .home-page .display-field {
    grid-column: 1;
    grid-row: 1;
    order: initial;
    width: auto;
    height: 100%;
    min-height: 0;
    max-width: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    scrollbar-width: none;
  }

  .home-page .display-field::-webkit-scrollbar {
    display: none;
  }

  .graph-frame-locked .map-slot {
    grid-column: 2;
    grid-row: 1;
    order: initial;
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
    container-type: size;
    place-items: center;
  }

  .graph-frame-locked .map-field {
    width: min(100cqi, 119.51219512cqb);
  }
}

/*
 * Homepage chrome is always ordinary document content. On the one-viewport
 * composition the flexible column merely leaves the footer at the bottom, so
 * header and footer appear anchored without either being fixed. If the stage
 * becomes taller, the same three elements continue in their natural order.
 */
.home-page > .atlas-header {
  position: relative;
  inset: auto;
  block-size: 0;
  min-height: 0;
  flex: none;
}

.home-page > .atlas-footer {
  position: relative;
  inset: auto;
  margin-block-start: auto;
  flex: none;
}

@media (min-width: 821px) and (max-height: 760px) {
  .home-page {
    --home-copy-top: max(calc(var(--home-stage-header-clearance) + 0.15rem), 7vh);
    --home-context-title-line-box: clamp(4.25rem, 8.5vw, 6.8rem);
  }

  .home-page .home-header .context-title {
    font-size: clamp(5rem, 10vw, 8rem);
    line-height: 0.85;
  }

  .home-page .display-bio {
    width: 100%;
    font-size: 0.85rem;
    line-height: 1.42;
  }
}

@media (min-width: 821px) and (max-height: 650px) {
  .home-page {
    --home-copy-top: max(calc(var(--home-stage-header-clearance) - 0.1rem), 6vh);
    --home-context-title-line-box: clamp(3.825rem, 7.65vw, 6.12rem);
  }

  .home-page .home-header .context-title {
    font-size: clamp(4.5rem, 9vw, 7.2rem);
  }

  .home-page .display-bio {
    width: 100%;
    font-size: 0.78rem;
    line-height: 1.38;
  }
}

@media (hover: none) {
  #graph {
    cursor: grab;
  }

  #graph.dragging {
    cursor: grabbing;
  }
}

@media (prefers-reduced-motion: reduce) {
  .context-title span,
  #panel,
  .home-page {
    transition-duration: 0.01ms !important;
  }

  .locator.open .locator-prompt-words > span,
  .locator-focus-cursor {
    animation: none;
  }

  .locator-prompt-words > span:first-child {
    opacity: 0.3;
  }
}

.home-page > .atlas-header > .header-bounds,
.home-page > .atlas-footer > .footer-bounds {
  background: var(--scene);
}

/*
 * TEMPORARY CHROME DIAGNOSTICS
 * Outlines reveal container bounds without changing layout measurements.
 */
.home-page > .atlas-header,
.home-page > .atlas-header > .header-bounds,
.home-page > .atlas-header > .header-bounds > .header-content-frame,
.home-page > .atlas-header > .header-bounds > .header-content-frame > .wordmark,
.home-page > .atlas-header > .header-bounds > .header-content-frame > .locate-trigger,
.home-page > .atlas-footer,
.home-page > .atlas-footer > .footer-bounds,
.home-page > .atlas-footer > .footer-bounds > .footer-content-frame,
.home-page > .atlas-footer > .footer-bounds > .footer-content-frame > .footer-wordmark,
.home-page > .atlas-footer > .footer-bounds > .footer-content-frame > .footer-year {
  outline-width: 0;
  outline-style: solid;
  outline-offset: 0;
}

.home-page > .atlas-header,
.home-page > .atlas-footer {
  outline-color: #ff00d4;
}

.home-page > .atlas-header > .header-bounds,
.home-page > .atlas-footer > .footer-bounds {
  outline-color: #7c3cff;
}

.home-page > .atlas-header > .header-bounds > .header-content-frame,
.home-page > .atlas-footer > .footer-bounds > .footer-content-frame {
  outline-color: #ff2d55;
}

.home-page > .atlas-header > .header-bounds > .header-content-frame > .wordmark,
.home-page > .atlas-footer > .footer-bounds > .footer-content-frame > .footer-wordmark {
  outline-color: #00e5ff;
}

.home-page > .atlas-header > .header-bounds > .header-content-frame > .locate-trigger,
.home-page > .atlas-footer > .footer-bounds > .footer-content-frame > .footer-year {
  outline-color: #39ff14;
}

.home-page .display-field {
  outline: 0 solid #ffe600;
  outline-offset: 0;
}

/* The column's last word: the feed line, small and centered, held a few
   breaths below the rule that closes the list. It follows the last rule
   and nothing follows it — the quiet way a colophon sits. */
.display-bio .article-body > hr + p:last-child {
  margin-block-start: clamp(3.25rem, 7vh, 6rem);
  font-size: 0.78rem;
  text-align: center;
  color: var(--ink-muted);
}