/* Hallmark · shape: per page (home: index-first with the operating map; work: catalogue; notes, work records, about, now: long document; proof and services: ledger) · genre: editorial · theme: brand (locked DESIGN.md: paper, carbon ink, vector lime, deep violet, condensed display, Helvetica body) · redesign: full · posture: restrained · hero: settled (/), banner (every other page) · nav: wordmark left, four links and one lime action, kept · footer: wordmark and line over the links, kept · imagery: the operating map figure, no photographs · signature: the operating map beside the home headline, and the lime action that ends each persuade page
 * axes: left-biased, hairline then card ladder, ink and lime bands on the home page only, one reveal (the operating map's entrance on load; the scroll fades were removed) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, every reading page shares one long-document shape by design; the home map, the ink services band and the lime closing band carry the variety */
/* Hallmark · hero-review: judged in the finish review · finish-review: subagent · fix · 15 items scored 5 or more with the Impeccable critique (29/40), all 15 fixed · owner list (map decorative text, "Operating map 001", an InboxPolicy screenshot, a services-hero booking button, onward links on work records) sent to Aria */
/* Hallmark · copy: verbatim · the owner asked for every page's content to stay byte for byte; only eyebrows, index labels, glued arrows and dot-joined meta were changed, each on the record below */
/* Hallmark · waive 44c · banner posture on every reading and browsing page, the head hands over to the content · notes, work records, proof and about open on their heading and lede, and the first screen must show where the reading starts */
/* Hallmark · waive 77 · long-document and ledger pages hold one reading column at the shared 40rem measure · stretching prose or lists to ten columns would break the 65ch reading measure the long-form scale sets */
/* Hallmark · waive 78 · long-document shape, section heads at the shared --longform-h2 (24 to 32px) annotate the reading column · a 52px section head on a note or a work record would outshout the 54px page title */
/* Hallmark · waive 59 · sections inside one work record are parts of a single document, parted by the 48 to 72px long-form gap and a heading · a 120px gap would split one record into four pages */
/* Hallmark · dropped "01 / Selected work", "02 / Field evidence", "03 / Work with me", "04 / Latest notes", "05 / A bounded invitation" · 54 names the index labels; the home sections keep their own headings word for word */
/* Hallmark · dropped "Measured, dated, and public." and the "Read the field notes" link · the thin field-evidence section merged into the notes section: its paragraph is that section's lede and both links went to /notes/, so one remains */
/* Hallmark · waive 79 · banner posture; on a note the linter reads the whole <article> as the hero, so the gap it measures is the reading column below the fold line · the note's head and its first paragraph are both on the first screen at 1440 x 900 */
/* Hallmark · reworded "queries · behavior", "sources · limits", "agents · policy", "action · proof" to the same words joined by a comma · 63 names the dot-joined meta inside the operating map */
/* Hallmark · dropped "SRCR/AI", "RECORD 026", "STATUS: BUILDING" (hero code strip) and "AI search · agent systems · applied AI · operational evidence" (hero topic line) · 54 (eyebrow before the h1), 63 (dot-joined meta), 66 (decoration text) */
/* Hallmark · dropped "About Aria", "Notes and rambles", "Claim governance", "Publication rules", "Selected engagements", "Process", "Index 001 / Project record", "Project record" (three work groups), "01 / Notes", "01 / Legend", "02 / Project ledger" · 54, eyebrows and index labels over headings */
/* Hallmark · dropped "Now · " before "July 31, 2026" (the date stays, as a time element under the h1) and moved "404" from above the h1 to below it · 54 and 63 */
/* Hallmark · reworded "01 / The thesis" to "The thesis", "02 / Evidence state" to "Evidence state", "03 / What exists" to "What exists", "04 / Limits and boundaries" to "Limits and boundaries" · 54, numbered section markers */
/* Hallmark · dropped "01 / ", "02 / ", "03 / ", "04 / " from the work-record section heads and the "006 / " serial from the record kicker, whose category moved under the title · 54 and PRODUCT.md (no arbitrary serial numbers) */
/* Hallmark · dropped the service numbers "01", "02", "03" beside the service titles on / and /services/ (the ids #01 to #03 stay as anchors) · 54, index labels */
/* Hallmark · dropped "PUBLIC RECORD / 026", the nav numbers "01" to "04", the "REC/" card tabs and the card serials ("002", "001") · 66 (decoration text) and PRODUCT.md (no arbitrary serial numbers) */
/* Hallmark · dropped the arrows glued to links ("View the full project index →", "Read the field notes →", "See outputs and related work →", "Open all notes →", "Read AI-search field notes →", "Read the proof policy →", "← Back to notes") and the "↗" on "Work with me" · 63 (arrow glued to link text) */
/* Hallmark · dropped the operating map's micro layer ("SORCERAI / OPERATING RECORD", "FOUND → ANSWER → BUILD → MEASURE", "SYSTEM STATE", "PUBLIC / WORKING / PRIVATE / SPEC", "ARIA PRAMESI / HOUSTON / GLOBAL") and the lime, violet and white blocks that backed it · 40 (8px labels under contrast) and 66 (rotated decoration text); the map's title, description and four nodes stay */
/* Hallmark · reworded the /services/ "Related work — a · b" lines to "Related work — a, b" · 63 (dot-joined meta); the dash and the words stay */
/* Hallmark · reworded the category "Research system · AEO / GEO" (and the seven like it) to "Research system, AEO / GEO" on cards and record meta · 63 (dot-joined meta); the JSON-LD genre keeps the string */
/* Hallmark · moved the /services/ service titles from h3 to h2 · F21 (the page went from h1 straight to h3); the words are unchanged */
/* Hallmark · answered F15 · the hero, the card grid, the list rows and the CTA band keep their own column gaps because each is a different object */
/* Hallmark · answered F20 · work groups hold one, three and four records; the last row of a two-column catalogue shows the real count rather than padding it */
@layer reset, base, components, utilities;
@layer reset, base, components, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body,
  h1,
  h2,
  h3,
  p,
  ul,
  ol,
  figure {
    margin: 0;
  }

  ul,
  ol {
    padding: 0;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }
}

@layer base {
  :root {
    --paper: #f4f1e8;
    --white: #fffef8;
    --ink: #111413;
    --ink-soft: #1b211e;
    --muted: #5c625d;
    --line: #bfc3ba;
    --signal: #c9f342;
    --signal-ink: #29300f;
    --violet: #4d2f82;
    --violet-wash: #e7e0f1;
    --display: "Arial Narrow", "Aptos Narrow", "Helvetica Neue Condensed", "Franklin Gothic Medium", Arial, sans-serif;
    --sans: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --page: min(76rem, 100% - 2rem);
    --prose: 44rem;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    /* Type scale. Display and section sizes for the persuade pages (home, services), uppercase at
       line-height 1.0 or more; title for cards and list items; label is the body face a step smaller. */
    --text-display: clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem);
    --text-section: clamp(2rem, 1.25rem + 2.6vw, 3.5rem);
    --text-title: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
    --text-label: 0.875rem;
    /* Long-form scale, shared by notes, work records, the method page and research articles. */
    --longform-h1: clamp(2.125rem, 1.25rem + 2.6vw, 3.375rem);
    --longform-h1-lh: 1.04;
    --longform-h2: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
    --longform-h2-lh: 1.12;
    --longform-h2-after: 0.55em;
    --longform-standfirst: clamp(1.1875rem, 1rem + 0.7vw, 1.4375rem);
    --longform-standfirst-lh: 1.45;
    --longform-body: clamp(1.0625rem, 0.95rem + 0.5vw, 1.1875rem);
    --longform-body-lh: 1.6;
    --longform-para: 1em;
    --longform-section-gap: clamp(3rem, 2rem + 3vw, 4.5rem);
    --longform-measure: 40rem;
  }

  html {
    overflow-x: clip;
  }

  /* A column, so a short page (the 404) still puts the footer at the foot of the screen. */
  body {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    min-width: 320px;
    overflow-x: clip;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.62;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body::before {
    content: "";
    position: fixed;
    z-index: 80;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--signal);
    pointer-events: none;
  }

  main {
    flex: 1;
    overflow: clip;
  }

  ::selection {
    background: var(--signal);
    color: var(--ink);
  }

  a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
  }

  a:hover {
    color: var(--violet);
  }

  /* One instant ring: ink on paper and lime, lime on the dark surfaces (both clear 3:1). */
  :focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 4px;
  }

  .site-header :focus-visible,
  .site-footer :focus-visible,
  .section--ink :focus-visible {
    outline-color: var(--signal);
  }

  a:active {
    color: var(--ink);
  }

  /* Heads are sentence case on reading and browsing pages; the persuade pages (home, services) set
     their display and section heads in capitals, never under line-height 1.0 (Hallmark 55a). */
  h1,
  h2,
  h3 {
    min-width: 0;
    font-family: var(--display);
    font-stretch: condensed;
    font-weight: 700;
    letter-spacing: -0.012em;
    line-height: 1.04;
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--longform-h1);
    line-height: var(--longform-h1-lh);
  }

  h2 {
    font-size: var(--longform-h2);
    line-height: var(--longform-h2-lh);
  }

  h3 {
    font-size: var(--text-title);
    line-height: 1.12;
  }

  [data-route="/"] main h1,
  [data-route="/"] main h2,
  [data-route="/services/"] main h1,
  [data-route="/services/"] main h2,
  [data-route="/services/"] main .cta-band h3 {
    letter-spacing: -0.012em;
    line-height: 1.02;
    text-transform: uppercase;
  }

  [data-route="/"] main h1 {
    font-size: var(--text-display);
  }

  /* Section heads on the persuade and browse pages sit at section size (40px or more at 1440). */
  [data-route="/"] main h2,
  [data-route="/services/"] main h1,
  [data-route="/services/"] main .section-heading h2,
  [data-route="/services/"] main .cta-band h3,
  [data-route="/work/"] main .section-heading h2,
  [data-route="/proof/"] main .section-heading h2,
  [data-route="/proof/"] main .prose > h2 {
    font-size: var(--text-section);
  }

  p {
    max-width: var(--prose);
  }

  strong {
    font-weight: 700;
  }
}

@layer components {
  .shell {
    width: var(--page);
    margin-inline: auto;
  }

  .skip-link {
    position: fixed;
    z-index: 100;
    top: 0.5rem;
    left: 0.75rem;
    transform: translateY(-170%);
    background: var(--signal);
    color: var(--ink);
    padding: 0.75rem 1rem;
    font-size: var(--text-label);
    font-weight: 700;
    text-decoration: none;
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  /* ---- Command bar: the wordmark, four links and one action ------------------------------------ */
  .site-header {
    position: sticky;
    z-index: 30;
    top: 0;
    color: var(--white);
    background: var(--ink);
    border-bottom: 1px solid var(--ink);
  }

  .site-header__inner {
    min-height: 4.5rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
  }

  .brand {
    min-width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
  }

  .brand:hover {
    color: inherit;
  }

  .brand__mark {
    width: 3.75rem;
    min-height: 2rem;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    column-gap: 0.12rem;
    align-items: center;
    padding-inline: 0.5rem;
    background: var(--signal);
    color: var(--ink);
    clip-path: polygon(0 0, 100% 0, 100% 72%, 86% 100%, 0 100%);
    font-family: var(--display);
    font-size: 0.95rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
  }

  .brand__mark i {
    color: var(--violet);
    font-style: normal;
  }

  /* The wordmark keeps its capitals: a wordmark is the one legal capital lockup. */
  .brand__word {
    font-family: var(--display);
    font-size: 1.15rem;
    font-stretch: condensed;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .site-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.85rem, 2vw, 1.75rem);
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .site-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--white);
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 2px solid transparent;
  }

  .site-nav a:hover {
    color: var(--signal);
  }

  .site-nav a[aria-current="page"] {
    color: var(--signal);
    border-bottom-color: var(--signal);
  }

  .site-nav__cta {
    min-height: 44px;
    margin-left: 0.2rem;
    padding: 0.65rem 0.95rem;
    border-bottom: 0 !important;
    background: var(--signal);
    color: var(--ink) !important;
    clip-path: polygon(0 0, 100% 0, 100% 72%, 90% 100%, 0 100%);
  }

  .site-nav__cta:focus-visible,
  .button:focus-visible {
    clip-path: none;
  }

  .site-nav__cta:hover {
    background: var(--white);
  }

  .site-nav__cta[aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--ink);
  }

  .site-header .site-nav__cta:focus-visible {
    outline-color: var(--white);
  }

  /* ---- Home hero: the headline, one lede, two actions, the operating map ---------------------- */
  .hero {
    position: relative;
    padding-block: clamp(2rem, 4vw, 3.75rem) 1.4rem;
    display: grid;
    gap: clamp(2rem, 4.5vw, 3.75rem);
  }

  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }

  .hero__copy {
    position: relative;
    z-index: 2;
  }

  .hero h1 {
    max-width: 16ch;
  }

  .hero__lede {
    margin-top: 1.5rem;
    max-width: 40rem;
    color: var(--ink-soft);
    font-size: clamp(1.08rem, 1.6vw, 1.3rem);
    line-height: 1.5;
  }

  /* ---- Labels: the body face a step smaller, sentence case, untracked (Hallmark 67) ------------ */
  .meta,
  .project-card__topline,
  .status {
    font-size: var(--text-label);
    line-height: 1.4;
  }

  .hero__actions,
  .button-row {
    margin-top: 1.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
    align-items: center;
  }

  .button {
    position: relative;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.15rem;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    clip-path: polygon(0 0, 100% 0, 100% 72%, 92% 100%, 0 100%);
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out), color 140ms var(--ease-out);
  }

  /* The outline button draws its cut corner: a 2px stroke on the diagonal the clip leaves open. */
  .button:not(.button--primary):not(.button--signal) {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  }

  .button:not(.button--primary):not(.button--signal)::after {
    content: "";
    position: absolute;
    right: -2.5px;
    bottom: 5px;
    width: 17px;
    height: 2px;
    background: currentColor;
    transform: rotate(-45deg);
  }

  .button--primary {
    background: var(--ink);
    color: var(--white);
  }

  .button--signal {
    border-color: var(--signal);
    background: var(--signal);
    color: var(--ink);
  }

  .button:hover {
    background: var(--violet);
    border-color: var(--violet);
    color: var(--white);
    transform: translate(2px, -2px);
  }

  .button:active {
    transform: none;
  }

  .button:hover::after {
    background: var(--violet);
  }

  .button:focus-visible::after {
    display: none;
  }

  .button--signal:hover {
    background: var(--ink);
    border-color: var(--ink);
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px; /* WCAG 2.2 SC 2.5.8 target minimum */
    font-size: 1rem;
    font-weight: 700;
    text-decoration-color: var(--violet);
    text-decoration-thickness: 2px;
  }
}

@layer components {
  .hero__visual {
    min-width: 0;
  }

  /* The violet offset sits behind the map only. Anchoring it to the whole
     <figure> put it under the caption, which is unreadable on violet. */
  .hero__visual-frame {
    position: relative;
    isolation: isolate;
  }

  .hero__visual-frame::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1.75rem -1rem -1rem 2rem;
    background: var(--violet);
    clip-path: polygon(10% 0, 100% 0, 100% 82%, 80% 100%, 0 100%, 0 10%);
    transform: rotate(1.4deg);
  }

  .vector-map {
    width: 100%;
    background: var(--ink);
    color: var(--white);
    clip-path: polygon(0 0, 100% 0, 100% 88%, 89% 100%, 0 100%);
  }

  .vector-map__field {
    fill: var(--ink);
    stroke: var(--muted);
    stroke-width: 1;
  }

  .vector-map__rail,
  .vector-map__tick {
    fill: none;
    stroke: var(--signal);
    stroke-width: 5;
    vector-effect: non-scaling-stroke;
  }

  .vector-map__rail--thin {
    stroke: var(--white);
    stroke-width: 1;
    opacity: 0.58;
  }

  .vector-map__tick {
    stroke-width: 2;
  }

  .vector-map__outline {
    fill: none;
    stroke: var(--white);
    stroke-width: 2;
  }

  .vector-map__node rect {
    fill: var(--ink-soft);
    stroke: var(--white);
    stroke-width: 1;
  }

  /* Diagram labels: the body face, untracked; the map is a named figure of the operating flow. */
  .vector-map__node text {
    fill: var(--white);
    font-family: var(--sans);
    font-size: 12px;
  }

  .vector-map__node-title {
    font-family: var(--display) !important;
    font-size: 25px !important;
    font-weight: 700;
  }

  .vector-map__node--lime rect {
    fill: var(--signal);
    stroke: var(--signal);
  }

  .vector-map__node--lime text {
    fill: var(--ink);
  }

  .vector-map__node--violet rect {
    fill: var(--violet);
    stroke: var(--white);
  }

  .vector-map__node--paper rect {
    fill: var(--white);
    stroke: var(--white);
  }

  .vector-map__node--paper text {
    fill: var(--ink);
  }

  .vector-map__layer {
    transform-box: fill-box;
    transform-origin: center;
    animation: vector-enter 620ms var(--ease-out) both;
  }

  .vector-map__layer--1 {
    animation-delay: 60ms;
  }

  .vector-map__layer--2 {
    animation-delay: 120ms;
  }

  .vector-map__layer--3 {
    animation-delay: 190ms;
  }

  .vector-map__layer--4 {
    animation-delay: 260ms;
  }

  .vector-map__layer--5 {
    animation-delay: 330ms;
  }

  .vector-map__layer--6 {
    animation-delay: 400ms;
  }

  .hero__visual-caption {
    /* Clears the violet offset, which extends 1rem below the frame. */
    margin-top: 1.4rem;
    color: var(--muted);
    font-size: var(--text-label);
  }

  .hero__rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    color: var(--white);
    background: var(--ink);
  }

  .hero__rail div {
    min-height: 6.2rem;
    padding: 1rem 1.2rem;
    display: grid;
    align-content: center;
    gap: 0.25rem;
    border-right: 1px solid var(--muted);
  }

  .hero__rail div:last-child {
    border-right: 0;
  }

  .hero__rail strong {
    color: var(--signal);
    font-size: var(--text-label);
  }

  .hero__rail span {
    color: var(--white);
    font-size: 0.9rem;
    line-height: 1.4;
  }

}

@layer components {
  .section {
    position: relative;
    padding-block: clamp(4rem, 8vw, 7.5rem);
    border-top: 1px solid var(--line);
  }

  /* The lime tab marks a section seam on the persuade pages only (home, services). */
  .section::after {
    display: none;
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    width: min(9vw, 6rem);
    height: 1.15rem;
    background: var(--signal);
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  }

  [data-route="/"] .section::after,
  [data-route="/services/"] .section::after {
    display: block;
  }

  .section--ink {
    color: var(--white);
    background: var(--ink);
    border-color: var(--ink);
  }

  .section--ink::after {
    background: var(--violet);
  }

  .section--ink .section-heading__copy p,
  .section--ink .service-item__body p {
    color: var(--line);
  }

  .section--ink .text-link {
    color: var(--white);
    text-decoration-color: var(--signal);
  }

  .section--signal {
    color: var(--ink);
    background: var(--signal);
    border-color: var(--ink);
  }

  .section--signal::after {
    background: var(--ink);
  }

  /* One band per persuade page breaks the stacked rhythm: the heading holds a left column while
     the list or the prose runs beside it (the home services band, the services process section). */
  .section--split > .shell {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }

  .section--split .section-heading {
    position: sticky;
    top: 6.5rem;
    margin-bottom: 0;
  }

  .section--split .service-list {
    border-top: 0;
  }

  .section--split .service-item:first-child {
    padding-top: 0;
  }

  .section--split .prose > :first-child {
    margin-top: 0;
  }

  /* A section opens on its heading: no index label above it (Hallmark 54). */
  .section-heading {
    max-width: 48rem;
    margin-bottom: clamp(2.25rem, 5vw, 4rem);
  }

  .section-heading__copy h2 {
    max-width: none;
  }

  .section-heading__copy p {
    margin-top: 1rem;
    color: var(--ink-soft);
    font-size: 1.125rem;
    line-height: 1.55;
  }

  /* The frame sits on each card, so an empty cell in a short group shows nothing. */
  .project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1px 0 0 1px;
  }

  .project-card {
    position: relative;
    min-height: 20rem;
    padding: clamp(1.3rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    margin: -1px 0 0 -1px;
    overflow: clip;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--ink);
    text-decoration: none;
    transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out), color 160ms var(--ease-out);
  }

  .project-card::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 3.5rem;
    height: 3.5rem;
    background: var(--paper);
    border-top: 1px solid var(--ink);
    transform: translate(1.8rem, 1.8rem) rotate(45deg);
  }

  .project-card__topline {
    margin-bottom: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    color: var(--muted);
  }

  .project-card h3 {
    margin-top: auto;
    max-width: 16ch;
  }

  .project-card p {
    margin-top: 1rem;
    color: var(--ink-soft);
  }

  .project-card__footer {
    margin-top: 2rem;
    padding-top: 0.95rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
    border-top: 1px solid var(--line);
    font-size: var(--text-label);
  }

  .project-card:hover {
    z-index: 2;
    color: var(--ink);
    background: var(--signal);
    transform: translate(-4px, -4px);
  }

  .project-card:hover p,
  .project-card:hover .project-card__topline {
    color: var(--signal-ink);
  }

  .project-card:hover::after {
    background: var(--violet);
  }

  .project-card:focus-visible {
    z-index: 2;
  }

  /* Status: the text is the state; a border and a fill carry it again, never a decorative dot. */
  .status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.15rem 0.5rem;
    border: 2px solid currentColor;
    background: var(--white);
    color: var(--ink);
    white-space: nowrap;
  }

  .status[data-state="live"],
  .status[data-state="public"] {
    color: var(--signal-ink);
    border-color: var(--signal-ink);
    background: var(--signal);
  }

  .status[data-state="active"],
  .status[data-state="working"] {
    color: var(--violet);
    background: var(--violet-wash);
  }

  .status[data-state="foundation"],
  .status[data-state="private"] {
    color: var(--white);
    border-color: var(--ink);
    background: var(--ink);
  }

  .status[data-state="experiment"],
  .status[data-state="pending"],
  .status[data-state="specification"] {
    color: var(--ink);
    border-style: dashed;
    background: transparent;
  }

  /* A lifecycle word (live, active, pending...) is one neutral style; colour is for evidence states. */
  .status.status--lifecycle {
    padding: 0.15rem 0;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-weight: 700;
  }

  .service-list,
  .note-list,
  .proof-list {
    list-style: none;
    border-top: 1px solid var(--line);
  }

  .section--ink .service-list {
    border-color: var(--muted);
  }

  .service-item {
    padding-block: 1.6rem;
    border-bottom: 1px solid var(--line);
  }

  .note-item,
  .proof-item {
    padding-block: 1.6rem;
    display: grid;
    grid-template-columns: minmax(7rem, 0.24fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    border-bottom: 1px solid var(--line);
  }

  .section--ink .service-item {
    border-color: var(--muted);
  }

  .service-item__body,
  .note-item__body,
  .proof-item__body {
    display: grid;
    gap: 0.85rem;
  }

  .proof-item > .status,
  .proof-item > div:first-child {
    align-self: start;
  }

  .service-item__body h2,
  .service-item__body h3,
  .note-item__body h3,
  .proof-item__body h3 {
    max-width: 44rem;
    font-size: var(--text-title);
  }

  .service-item__body p,
  .service-item__body li {
    max-width: 62ch;
    color: var(--ink-soft);
  }

  .note-item__body p,
  .proof-item__body p {
    max-width: 62ch;
    color: var(--muted);
  }

  .section--ink .service-item__body p {
    color: var(--line);
  }

  .note-item .meta {
    display: grid;
    align-content: start;
    gap: 0.2rem;
    color: var(--muted);
  }

  .note-item__body h3 a,
  .proof-item__body h3 a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
  }

  .service-item ul,
  .detail-list {
    list-style: none;
    display: grid;
    gap: 0.45rem;
    margin-top: 0.55rem;
  }

  .service-item li,
  .detail-list li {
    position: relative;
    padding-left: 1.2rem;
  }

  .service-item li::before,
  .detail-list li::before {
    content: "";
    position: absolute;
    top: 0.66em;
    left: 0;
    width: 0.45rem;
    height: 0.45rem;
    background: var(--violet);
    transform: rotate(45deg);
  }

  .section--ink .service-item li::before {
    background: var(--signal);
  }
}

@layer components {
  /* ---- Page heads: the heading, one lede ------------------------------------------------------ */
  .page-hero {
    position: relative;
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
  }

  .page-hero h1 {
    max-width: 20ch;
  }

  .page-hero p {
    margin-top: 1.25rem;
    max-width: 60ch;
    color: var(--ink-soft);
    font-size: var(--longform-standfirst);
    line-height: var(--longform-standfirst-lh);
  }

  /* A reading page's first section follows its head closely: the head is a banner, not a screen. */
  .page-hero + .section,
  .page-hero + .button-row + .section {
    padding-top: clamp(2.25rem, 4.5vw, 3.5rem);
  }

  .page-hero + .button-row {
    margin-top: 0;
    padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  }

  .page-hero .page-hero__date {
    margin-top: 0.75rem;
    color: var(--muted);
    font-size: var(--text-label);
  }

  /* ---- Long-form reading: notes, work records, about, now, proof rules, method ---------------- */
  /* The reading column keeps the page's left edge: the shell spans, its children hold the measure. */
  .prose {
    max-width: var(--longform-measure);
  }

  .shell.prose {
    max-width: none;
  }

  .shell.prose > * {
    max-width: var(--longform-measure);
  }

  .prose > * + * {
    margin-top: var(--longform-para);
  }

  .prose p,
  .prose li {
    font-size: var(--longform-body);
    line-height: var(--longform-body-lh);
  }

  .prose > p,
  .prose > ul,
  .prose > ol {
    max-width: none;
  }

  .prose h2,
  .prose h3 {
    margin-top: var(--longform-section-gap);
  }

  .prose > :first-child {
    margin-top: 0;
  }

  .prose h2 + *,
  .prose h3 + * {
    margin-top: var(--longform-h2-after);
  }

  .prose h3 {
    font-size: var(--text-title);
  }

  .prose a {
    font-weight: 700;
  }

  .longform__head {
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
  }

  .longform__head h1 {
    max-width: 24ch;
  }

  .longform__standfirst {
    margin-top: 1.25rem;
    max-width: var(--longform-measure);
    color: var(--ink-soft);
    font-size: var(--longform-standfirst);
    line-height: var(--longform-standfirst-lh);
  }

  .longform__meta {
    margin-top: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.1rem;
    color: var(--muted);
    font-size: var(--text-label);
  }

  .longform__head .button-row {
    margin-top: 1.5rem;
  }

  .longform__body {
    display: grid;
    gap: var(--longform-section-gap);
    padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 8vw, 6.5rem);
    border-top: 1px solid var(--line);
  }

  .longform__body > * {
    max-width: var(--longform-measure);
  }

  .longform__section > h2 {
    margin-bottom: var(--longform-h2-after);
  }

  .longform__section p,
  .longform__section li {
    font-size: var(--longform-body);
    line-height: var(--longform-body-lh);
  }

  .longform__section > p {
    max-width: none;
  }

  .longform__section > p + p {
    margin-top: var(--longform-para);
  }

  .longform__back {
    margin-top: calc(var(--longform-section-gap) * -0.5);
  }

  .cta-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.44fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;
  }

  .cta-band h2 {
    max-width: 14ch;
  }

  .cta-band p {
    font-size: 1.125rem;
  }

  .prose + .cta-band {
    margin-top: 2rem;
  }

  /* ---- Footer: the wordmark and its line over the links --------------------------------------- */
  .site-footer {
    padding-block: 2rem;
    color: var(--white);
    background: var(--ink);
    border-top: 1px solid var(--muted);
  }

  .site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: end;
  }

  .brand--footer {
    display: flex;
    width: fit-content;
    margin-bottom: 0.75rem;
  }

  .site-footer small {
    display: block;
    color: var(--line);
    font-size: var(--text-label);
  }

  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.8rem 1.3rem;
    font-size: var(--text-label);
    font-weight: 700;
  }

  .site-footer__links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.2 SC 2.5.8: short labels ("Now", "RSS") fell under 24px wide too. */
    min-height: 24px;
    min-width: 24px;
    color: var(--white);
    white-space: nowrap;
    text-decoration: none;
  }

  .site-footer__links a:hover {
    color: var(--signal);
  }

  @keyframes vector-enter {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.985);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

}

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 980px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__copy {
    max-width: 52rem;
  }

  .hero__visual {
    width: min(100%, 43rem);
    justify-self: end;
  }
}

@media (max-width: 760px) {
  :root {
    --page: min(100% - 2rem, 76rem);
  }

  body::before {
    width: 3px;
  }

  /* The phone header keeps the wordmark on its own row; the links scroll beneath it. */
  .site-header__inner {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
    padding-block: 0.75rem 0.25rem;
  }

  .brand {
    justify-self: start;
  }

  .site-nav {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 1.1rem;
    padding-bottom: 0.15rem;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-nav a {
    flex: 0 0 auto;
  }

  .site-nav__cta {
    margin-left: auto;
  }

  .site-nav a:focus-visible {
    outline-offset: -3px;
  }

  .site-nav a.site-nav__cta:focus-visible {
    outline-color: var(--ink);
    outline-offset: -6px;
  }

  .hero {
    padding-top: 1.75rem;
  }

  .hero__grid {
    gap: 2.5rem;
  }

  .hero__visual-frame::before {
    inset: 1rem -0.35rem -0.45rem 1rem;
  }

  .section--split > .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .section--split .section-heading {
    position: static;
  }

  .hero__rail,
  .service-item,
  .note-item,
  .proof-item,
  .cta-band,
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__rail div {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--muted);
  }

  .hero__rail div:last-child {
    border-bottom: 0;
  }

  .service-item,
  .note-item,
  .proof-item {
    gap: 0.75rem;
  }

  .project-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-card {
    min-height: 16rem;
  }

  .project-card:hover {
    transform: none;
  }

  .site-footer__links {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: start;
    gap: 0.6rem 1.5rem;
  }

  .site-footer__links a {
    justify-content: flex-start;
  }
}

@media (max-width: 460px) {
  .site-nav {
    gap: 0.9rem;
    font-size: 0.875rem;
  }

  .site-nav__cta {
    padding-inline: 0.7rem;
  }

  .hero__visual {
    margin-inline: -0.2rem;
  }

  .project-card__topline,
  .project-card__footer {
    display: grid;
    justify-content: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Anchor destinations stay clear of the sticky command bar. */
section[id],
.service-item[id] {
  scroll-margin-top: 9rem;
}