/* Recruiter-focused presentation. Existing interaction geometry stays in style.css. */
:root {
  --radius: 5px;
  --radius-list: 8px;
  --radius-icon: 22%;
  --paper: oklch(0.1943 0.0137 258.36);
  --surface: oklch(0.2293 0.0173 259.75);
  --ink: oklch(0.9548 0.0058 264.53);
  --muted: oklch(0.7513 0.0225 259.19);
  --rule: oklch(0.3108 0.0243 258.36);
  --blue: oklch(0.8146 0.0642 255.12);
  --blue-light: color-mix(in oklch, var(--blue) 12%, var(--surface));
  --rust: oklch(0.7524 0.0724 46.38);
  --hover: color-mix(in oklch, var(--blue) 6%, var(--surface));
  --rail: 196px;
  color-scheme: dark;
}
body {
  font-size: 16px;
  line-height: 1.65;
}
::selection {
  background: var(--blue);
  color: var(--paper);
}
h1 {
  font-size: clamp(2.5rem, 1.8rem + 1.3vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -0.035em;
  font-weight: 500;
}
h2 {
  font-size: clamp(1.65rem, 1.35rem + 0.5vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 500;
}
h3 {
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 500;
}
.icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}
.text-link {
  font-size: 0.86rem;
  gap: 10px;
}
.button,
.quiet-button {
  border-radius: var(--radius);
  min-height: 44px;
  padding: 10px 16px;
  font-size: 0.86rem;
}
.button {
  color: var(--paper);
  background: var(--blue);
  border-color: var(--blue);
}
.button:hover {
  color: var(--paper);
  background: color-mix(in oklch, var(--blue) 80%, var(--ink));
}
a.quiet-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: 1px solid var(--rule);
  color: var(--blue);
}
.quiet-button:hover {
  background: var(--hover);
  border-color: var(--blue);
}
.skip {
  background: var(--blue);
  color: var(--paper);
}
.sidebar {
  padding: 34px 25px 22px;
}
.monogram {
  height: 40px;
  margin-bottom: 22px;
  font-size: 34px;
  letter-spacing: -3px;
}
.monogram span + span {
  font-size: 34px;
  transform: none;
}
.identity-name {
  font-size: 1.04rem;
}
.identity-role {
  font-size: 0.72rem;
}
.main-nav {
  margin: 44px -10px 0;
  gap: 5px;
}
.main-nav a {
  padding: 11px 10px;
  border-radius: var(--radius);
  font-size: 0.84rem;
  color: var(--muted);
}
.main-nav a[aria-current] {
  color: var(--blue);
  background: var(--blue-light);
}
.main-nav a[aria-current]::before {
  width: 2px;
  top: 9px;
  bottom: 9px;
}
.main-nav a:hover {
  color: var(--ink);
  background: var(--hover);
}
.sidebar-contact {
  font-size: 0.7rem;
}
.sidebar-contact > div {
  gap: 13px;
}
.page-shell {
  width: min(1280px, calc(100% - var(--rail)));
  margin-left: max(var(--rail), calc((100% + var(--rail) - 1280px) / 2));
  margin-right: auto;
  max-width: 1280px;
  padding: 78px clamp(32px, 3.2vw, 60px) 0;
}
.page-heading {
  margin-bottom: 48px;
}
.page-heading > p {
  font-size: 1rem;
  margin-top: 15px;
  max-width: 680px;
}
.section-space {
  margin-top: 76px;
}
.section-heading {
  display: flex;
  margin-bottom: 28px;
  gap: 26px;
  align-items: center;
}
.section-heading > p {
  font-size: 0.9rem;
}
.site-footer {
  margin-top: 64px;
  padding: 26px 0 34px;
  font-size: 0.73rem;
}
.contact-band {
  display: flex;
  margin-inline: 0;
  background: transparent;
  color: var(--ink);
  padding: 30px 0 0;
  margin-top: 50px;
  border-top: 1px solid var(--rule);
  gap: 32px;
}
.contact-band h2 {
  font-size: 1.9rem;
}
.contact-band p {
  color: var(--muted);
  font-size: 0.9rem;
}
.contact-band a {
  color: var(--blue);
  font-size: 0.94rem;
}
.contact-band a:hover {
  color: var(--ink);
}

/* Identity and qualifications lead; actual app screens link to their case studies. */
.recruiter-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(300px, 1fr);
  align-items: center;
  gap: 44px;
}
.recruiter-intro h1 {
  font-size: clamp(3rem, 2.7rem + 1.1vw, 4rem);
  line-height: 1.1;
}
.recruiter-intro .role-line {
  font-size: 1.5rem;
  color: var(--muted);
  margin-top: 18px;
  line-height: 1.35;
}
.recruiter-intro .hero-focus {
  font-size: 1.25rem;
  color: var(--ink);
  margin-top: 24px;
  line-height: 1.5;
}
.recruiter-intro .hero-background {
  margin-top: 27px;
  max-width: 48ch;
  font-size: 0.96rem;
  color: var(--muted);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.product-previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 390px;
  margin-left: auto;
}
.product-preview {
  display: block;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.product-preview img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.product-preview-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.94rem;
}
.product-preview-name .icon {
  width: 15px;
  height: 15px;
  color: var(--blue);
}
.product-preview-detail {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}
.product-preview:hover .product-preview-name {
  color: var(--blue);
}
.compact-studio {
  width: 100%;
  max-width: 480px;
  margin: 0 0 0 auto;
  align-self: center;
}
.compact-studio .studio-stage {
  width: 100%;
  aspect-ratio: 1.6;
  min-height: 0;
  margin: 0;
  position: relative;
}
.compact-studio .studio-poster,
.compact-studio .studio-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.compact-studio .studio-poster {
  object-fit: contain;
}
.compact-studio .studio-canvas canvas {
  width: 100%;
  height: 100%;
}
.studio-utility {
  display: grid;
  min-height: 46px;
  margin-top: 12px;
}
.compact-studio .studio-enable,
.compact-studio .studio-instruction {
  position: static;
  inset: auto;
}
.compact-studio .studio-enable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  padding: 9px 12px;
  min-height: 44px;
  box-shadow: none;
  border-radius: var(--radius);
  font-size: 0.75rem;
}
.compact-studio .studio-enable:hover {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--hover);
}
.studio-live button,
.studio-cancel {
  padding: 10px 12px;
  min-width: 44px;
  min-height: 44px;
  font-size: 0.75rem;
  color: var(--blue);
}
.studio-rotate.is-rotating {
  color: var(--ink);
}
.compact-studio .studio-instruction {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.73rem;
  color: var(--muted);
}
.studio-caption {
  margin-top: 3px;
  text-align: center;
  font-size: 0.65rem;
  color: var(--muted);
}

/* 3D viewer states. The loading and retry controls (.studio-start) and the live
   controls (.studio-live) share one grid cell. From the first "Explore in 3D" click
   the cell keeps the live controls' height, so the progress label, a failure note
   and the live view never move the caption or the page below. At 240px the live
   controls wrap onto a second line. */
.studio-start,
.studio-live {
  grid-area: 1 / 1;
  gap: 6px 8px;
}
.studio-live {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  justify-content: center;
}
.compact-studio:not(.is-live) .studio-live {
  visibility: hidden;
}
/* The enable button holds the center column in every state; Cancel sits beside it and
   keeps its place, invisible, after loading ends, so the button never re-centers. */
.studio-start {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-content: start;
  align-items: center;
}
.compact-studio .studio-enable {
  grid-column: 2;
  justify-content: center;
}
.studio-cancel {
  grid-column: 3;
  justify-self: start;
}
.compact-studio:not(.is-loading) .studio-cancel {
  visibility: hidden;
}
.studio:not(.is-live) .studio-canvas {
  pointer-events: none;
}
/* Context loss swaps straight to the poster: a fade would start from an empty stage. */
.studio.is-fallback .studio-poster {
  transition: none;
}
/* Busy, not disabled: the label carries the progress at full strength. */
.compact-studio .studio-enable {
  font-variant-numeric: tabular-nums;
}
.compact-studio .studio-enable[aria-disabled="true"],
.compact-studio .studio-enable[aria-disabled="true"]:hover {
  cursor: progress;
  color: var(--muted);
  border-color: var(--rule);
  background: transparent;
}
/* The percentage grows rightward from a fixed start. */
.compact-studio .studio-enable[aria-disabled="true"] {
  justify-content: flex-start;
}
.compact-studio .studio-enable[aria-disabled="true"] .icon {
  display: none;
}
.studio-note {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.73rem;
  line-height: 1.5;
  color: var(--muted);
}
.studio-tilt[aria-pressed="true"] {
  border-color: var(--blue);
  color: var(--ink);
}
/* Both labels share one cell, so "Pause rotation" never rewraps the row. */
.studio-rotate {
  display: inline-grid;
  place-items: center;
}
.studio-rotate > span {
  grid-area: 1 / 1;
}
.studio-rotate:not(.is-rotating) > span + span,
.studio-rotate.is-rotating > span:first-child {
  visibility: hidden;
}
/* Reduced motion keeps the instant angle steps and drops the timed turn. */
@media (prefers-reduced-motion: reduce) {
  .studio-rotate {
    display: none;
  }
}
@media (max-width: 900px) {
  .studio-start,
  .studio-live {
    gap: 6px;
  }
  .studio-live button,
  .studio-cancel {
    padding-inline: 8px;
  }
  /* In the 240px column Cancel sits under the button, in the row the note uses. */
  .studio-cancel,
  .studio-note {
    grid-row: 2;
    grid-column: 1 / -1;
  }
  .studio-cancel {
    justify-self: center;
  }
}
.career-evidence {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  border-block: 1px solid var(--rule);
  padding: 30px 0;
  margin-top: 54px;
  gap: 26px;
}
.career-evidence a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.career-evidence a + a {
  border-left: 1px solid var(--rule);
  padding-left: 28px;
}
.career-evidence strong {
  font-family: var(--serif);
  font-size: 1.85rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.career-evidence span {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 5px;
}
.career-evidence small {
  font-size: 0.7rem;
  margin-top: 2px;
}
.selected-work {
  margin-top: 58px;
}
.compact-projects {
  border: 1px solid var(--rule);
  border-radius: var(--radius-list);
  overflow: hidden;
  background: color-mix(in oklch, var(--surface) 72%, var(--paper));
}
.project-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(140px, 0.65fr) 18px;
  gap: 22px;
  align-items: center;
  padding: 30px 28px;
  text-decoration: none;
}
.project-row + .project-row {
  border-top: 1px solid var(--rule);
}
.project-row:hover,
.project-row:focus-visible {
  background: var(--hover);
  color: var(--ink);
}
.project-row:focus-visible {
  outline-offset: -3px;
}
.project-row > img {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-icon);
  object-fit: contain;
}
.project-row h3 {
  font-size: 1.25rem;
}
.project-row p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
  margin-top: 6px;
}
.project-stack {
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.6;
}
.project-row > .icon {
  color: var(--muted);
}
.project-row:hover h3,
.career-evidence a:hover strong {
  color: var(--blue);
}

/* Public code complements the product list with inspectable engineering work. */
.github-selection {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.45fr);
  gap: clamp(36px, 4vw, 68px);
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}
.github-intro .section-kicker {
  color: var(--blue);
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.github-intro h2 {
  margin-top: 14px;
  font-size: 2.2rem;
}
.github-intro > p:not(.section-kicker) {
  color: var(--muted);
  font-size: 0.94rem;
  max-width: 32ch;
  margin-top: 20px;
}
.github-intro > .text-link {
  min-height: 44px;
  margin-top: 18px;
}
.source-entry {
  padding: 22px 0 17px;
}
.source-entry:first-child {
  padding-top: 0;
}
.source-entry:last-child {
  padding-bottom: 0;
}
.source-entry + .source-entry {
  border-top: 1px solid var(--rule);
}
.source-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.source-title h3,
.repository-identity h3 {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.source-title h3 a,
.repository-identity h3 a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: none;
}
.source-title .icon,
.repository-identity .icon {
  width: 15px;
  height: 15px;
  color: var(--blue);
}
.source-title > span {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}
.source-entry > p {
  color: var(--muted);
  font-size: 0.89rem;
  line-height: 1.7;
  max-width: 64ch;
  margin-top: 4px;
}
.source-entry > .text-link {
  min-height: 44px;
  margin-top: 4px;
  font-size: 0.78rem;
}
.profile-columns {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 52px;
  margin-top: 72px;
}
.profile-columns > section + section {
  border-left: 1px solid var(--rule);
  padding-left: 40px;
}
.profile-columns h2 {
  font-size: 1.8rem;
  padding-bottom: 21px;
  border-bottom: 1px solid var(--rule);
}
.expertise-list {
  list-style: none;
  padding: 0;
  margin: 26px 0 20px;
  color: var(--muted);
  font-size: 0.94rem;
}
.expertise-list li + li {
  margin-top: 16px;
}
.experience-preview > div {
  padding: 21px 0;
}
.experience-preview > div + div {
  border-top: 1px solid var(--rule);
}
.experience-preview h3 {
  font-size: 1.2rem;
}
.experience-preview p {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 4px;
}
.experience-preview small {
  font-size: 0.7rem;
  margin-top: 4px;
}
.recruiter-contact {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  margin-top: 68px;
  padding-top: 38px;
  border-top: 1px solid var(--rule);
}
.recruiter-contact h2 {
  font-size: 2.05rem;
}

/* Compact project directory and bounded product previews. */
.work-entry {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 185px;
  gap: 28px;
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.work-entry:first-child {
  padding-top: 30px;
}
.work-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-icon);
}
.work-entry h2 {
  font-size: 1.55rem;
}
.work-entry h2 a {
  text-decoration: none;
}
.work-entry-copy > p {
  font-size: 0.96rem;
  color: var(--muted);
  margin-top: 9px;
  max-width: 66ch;
}
.work-entry-copy .stack {
  font-size: 0.76rem;
  margin-top: 10px;
}
.work-entry-copy .work-result {
  font-size: 0.77rem;
  margin-top: 12px;
}
.work-result strong {
  color: var(--ink);
  margin-right: 12px;
}
.work-result span {
  display: inline-block;
}
.work-entry-copy .text-link {
  margin-top: 5px;
  font-size: 0.8rem;
}
.work-preview {
  align-self: center;
  text-align: center;
}
.work-preview > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 144px;
}
.work-preview img {
  max-width: 100%;
  max-height: 144px;
  object-fit: contain;
  border-radius: var(--radius);
}
.work-preview figcaption {
  font-size: 0.64rem;
  color: var(--muted);
  margin-top: 8px;
}
.workbench > div {
  grid-template-columns: 1fr 2fr;
  gap: 34px;
  padding: 22px 0;
}
.workbench dt {
  font-size: 1.35rem;
}
.workbench dt small {
  font-size: 0.7rem;
}
.workbench dd {
  font-size: 0.88rem;
}
.workbench dd > span {
  font-size: 0.75rem;
}

/* Case studies use a résumé-like hierarchy: project, role, evidence, decisions. */
.breadcrumb {
  margin-bottom: 20px;
  font-size: 0.77rem;
}
.case-hero {
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
  gap: 45px;
  min-height: 0;
}
.case-hero h1 {
  font-size: clamp(2.15rem, 1.7rem + 1.2vw, 3rem);
  overflow-wrap: anywhere;
}
.case-lede {
  font-size: 1.08rem;
  margin-top: 17px;
}
.case-intro .usage {
  margin-top: 17px;
  font-size: 0.83rem;
}
.case-intro .usage small {
  font-size: 0.72rem;
}
.case-intro .link-pair {
  margin-top: 12px;
}
.case-art {
  width: 100%;
  max-width: 300px;
  justify-self: end;
}
.case-art figcaption {
  font-size: 0.66rem;
  margin-top: 10px;
  color: var(--muted);
}
/* Device silhouettes, reflections and depth come from the Blender render. */
.case-hero:has(.product-art) {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 55px);
}
.case-art.product-art {
  max-width: 460px;
  margin: 0;
  padding: 0;
}
.product-art > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.case-art.single-device-art {
  max-width: 340px;
  justify-self: center;
}
.product-art figcaption {
  text-align: center;
  margin-top: 0;
}
.rendered-preview > a {
  height: 165px;
}
.rendered-preview img {
  width: 100%;
  height: 165px;
  max-height: 165px;
  border-radius: 0;
}
.case-meta {
  grid-template-columns: 1fr 1.4fr 0.8fr;
  margin-top: 27px;
  padding: 20px 0;
  gap: 20px;
}
.case-meta dt {
  font-family: var(--sans);
  font-size: 0.73rem;
  color: var(--muted);
}
.case-meta dd {
  font-size: 0.8rem;
  color: var(--ink);
}
.case-meta > div + div {
  padding-left: 20px;
}
.case-overview {
  grid-template-columns: 0.6fr 1.6fr;
  gap: 40px;
}
.case-overview h2 {
  font-size: 1.6rem;
}
.case-overview > p {
  font-size: 1rem;
}
.case-decisions {
  margin-top: 30px;
}
.case-decisions article {
  grid-template-columns: 26px 1fr;
  gap: 18px;
  padding: 23px 0;
}
.case-decisions article > div {
  grid-template-columns: 0.8fr 1.6fr;
  gap: 35px;
}
.case-decisions h3 {
  font-size: 1.25rem;
}
.case-decisions p {
  font-size: 0.9rem;
}
.architecture {
  padding: 25px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.architecture h2 {
  font-size: 1.6rem;
}
.architecture-flow {
  margin: 25px 0 0;
  gap: 24px;
}
.architecture-flow li {
  border-top-width: 1px;
  padding-top: 12px;
}
.architecture-flow strong {
  font-size: 0.82rem;
}
.architecture-flow span {
  font-size: 0.7rem;
}
.case-tradeoff {
  grid-template-columns: 0.6fr 1.6fr;
  gap: 40px;
  margin-top: 36px;
}
.case-tradeoff h2 {
  font-size: 1.6rem;
}
.case-tradeoff p {
  font-size: 0.9rem;
}
.next-project {
  margin-top: 40px;
  padding-top: 23px;
}
.next-project strong {
  font-size: 1.5rem;
}

/* Technical detail is available after the readable account of the work. */
.engineering-heading h1 {
  font-size: clamp(2.5rem, 1.8rem + 1.3vw, 3.1rem);
}
.ai-engineering {
  margin-top: 0;
}
.ai-story {
  gap: 40px;
  margin-top: 25px;
}
.ai-story h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}
.ai-story p {
  font-size: 0.89rem;
}
.memory-flow {
  padding-left: 24px;
}
.memory-flow > div {
  padding: 11px 0;
}
.memory-flow strong {
  font-size: 1.15rem;
}
.evaluation-story {
  padding-top: 30px;
  margin-top: 36px;
}
.evaluation-sheet {
  padding: 21px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.engineering-links {
  gap: 0 35px;
}
.engineering-links a {
  padding: 21px 0;
}
.engineering-links h3 {
  font-size: 1.28rem;
}
.engineering-links p {
  font-size: 0.86rem;
  margin-top: 10px;
}
.engineering-links a > span {
  font-size: 0.78rem;
  margin-top: 12px;
}
.repository-case {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.55fr);
  gap: 56px;
  border-top: 1px solid var(--rule);
  padding: 32px 0;
  scroll-margin-top: 32px;
}
.repository-identity > p {
  color: var(--muted);
  font-size: 0.74rem;
  margin-top: 4px;
}
.repository-identity > span {
  display: block;
  color: var(--blue);
  font-size: 0.78rem;
  margin-top: 16px;
}
.repository-detail > p {
  font-size: 0.92rem;
  line-height: 1.75;
}
.repository-detail > p + p {
  color: var(--muted);
  margin-top: 13px;
}
.repository-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin-top: 13px;
}
.repository-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 9px;
  color: var(--blue);
  font-size: 0.78rem;
  text-decoration: none;
}
.repository-links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.repository-links .icon {
  width: 14px;
  height: 14px;
}
.lab-disclosure {
  margin-top: 42px;
  border-block: 1px solid var(--rule);
}
.lab-disclosure > summary {
  padding: 23px 0;
  cursor: pointer;
  color: var(--blue);
  font-size: 0.93rem;
}
.lab-disclosure > summary span {
  color: var(--muted);
  font-size: 0.8rem;
  margin-left: 14px;
}
.lab-disclosure .pipeline-lab {
  margin-bottom: 24px;
  padding: 22px;
  border-radius: var(--radius);
}
.pipeline-stage {
  border-color: var(--rule);
}
.pipeline-stage strong {
  color: var(--ink);
}
/* Pipeline lab: event status. Hue is backed by a second channel that survives forced colours:
   solid for committed, dashed for waiting to retry, double for dead letter, dotted for invalid,
   a filled circle for processing, a struck numeral for a duplicate, and the plain rule border
   for events not processed yet. The legend under the grid (.event-key) repeats each treatment. */
.event-grid button[data-status="committed"],
.event-key[data-status="committed"] {
  color: var(--blue);
  background: var(--blue-light);
  border: 2px solid var(--blue);
}
.event-grid button[data-status="processing"],
.event-key[data-status="processing"] {
  color: var(--paper);
  background: var(--blue);
  border-color: var(--blue);
}
.event-grid button[data-status="retry-wait"],
.event-grid button[data-status="dead-letter"],
.event-grid button[data-status="invalid"],
.event-key[data-status="retry-wait"],
.event-key[data-status="dead-letter"],
.event-key[data-status="invalid"] {
  color: var(--rust);
  background: color-mix(in oklch, var(--rust) 12%, var(--surface));
  border-color: var(--rust);
}
.event-grid button[data-status="retry-wait"],
.event-key[data-status="retry-wait"] {
  border-width: 2px;
  border-style: dashed;
}
.event-grid button[data-status="dead-letter"],
.event-key[data-status="dead-letter"] {
  border-width: 3px;
  border-style: double;
}
.event-grid button[data-status="invalid"],
.event-key[data-status="invalid"] {
  border-width: 2px;
  border-style: dotted;
}
.event-grid button[data-status="duplicate"],
.event-key[data-status="duplicate"] {
  color: var(--ink);
  background: var(--rule);
  border-color: var(--muted);
}
.event-grid button[data-status="duplicate"] {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
/* Selection is a heavier ink ring and a bold numeral, and keeps the status's border style.
   The outline belongs to keyboard focus alone. */
.event-grid button[aria-checked="true"] {
  border-width: 3px;
  border-color: var(--ink);
  font-weight: 700;
}
.event-grid button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.event-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}
.event-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.event-key {
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
  border: 1px solid var(--rule);
  border-radius: 50%;
}
.event-key[data-status="duplicate"]::after {
  content: "";
  position: absolute;
  inset: 50% 2px auto;
  border-top: 1.5px solid var(--ink);
  translate: 0 -50%;
}
/* Pipeline lab: particles. pipeline-ui.js sets --x and --y, so only transform and opacity
   animate. A pending dot is parked: hidden at Ingest with no transition, so reruns never
   fly it backward. data-instant re-anchors every dot at once after a resize. */
.event-particles {
  position: absolute;
  inset: 0;
}
.event-particle[data-parked="true"] {
  opacity: 0;
}
.event-particle[data-parked="true"],
.event-particles[data-instant] .event-particle {
  transition: none;
}
/* Pipeline lab: the diagram follows the lab's own width. Below 48rem it turns vertical:
   stages stack top to bottom, the rejected, retry and dead-letter branches sit between
   them, and dots rest in a column to the right, so nothing scrolls sideways. The script
   reads --pipeline-form to anchor the dots on whichever axis is showing. */
.pipeline-lab {
  container: pipeline-lab / inline-size;
}
.pipeline-map {
  --pipeline-form: horizontal;
}
@container pipeline-lab (width < 48rem) {
  .pipeline-scroll {
    padding-bottom: 28px;
  }
  .pipeline-map {
    --pipeline-form: vertical;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem;
    gap: 12px;
    min-width: 0;
    max-width: 32rem;
    height: auto;
  }
  .pipeline-map::before {
    content: "";
    position: absolute;
    inset: 20px auto 20px 20px;
    border-left: 1px solid color-mix(in oklch, var(--blue) 55%, transparent);
  }
  .pipeline-paths {
    display: none;
  }
  .pipeline-map > .pipeline-stage {
    position: relative;
    inset: auto;
    grid-column: 1;
    width: auto;
    min-block-size: 4.75rem;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    padding: 10px 12px;
    text-align: left;
  }
  .pipeline-map > .pipeline-stage small {
    order: 1;
    margin-top: 0;
  }
  .pipeline-map > .pipeline-stage > span {
    order: 2;
    flex-basis: 100%;
    margin-top: 0;
  }
  .pipeline-map > .branch-label {
    position: relative;
    inset: auto;
    grid-column: 1;
    padding-left: 40px;
    line-height: 1.4;
  }
  .pipeline-map > .branch-label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 20px;
    width: 14px;
    border-top: 1px solid var(--rust);
  }
  .pipeline-map > .retry-label::before {
    border-top: 1px dashed color-mix(in oklch, var(--blue) 55%, transparent);
  }
  .pipeline-map > [data-stage="ingest"] {
    grid-row: 1;
  }
  .pipeline-map > [data-stage="validate"] {
    grid-row: 2;
  }
  .pipeline-map > .invalid-label {
    grid-row: 3;
  }
  .pipeline-map > [data-stage="queue"] {
    grid-row: 4;
  }
  .pipeline-map > [data-stage="worker"] {
    grid-row: 5;
  }
  .pipeline-map > .retry-label {
    grid-row: 6;
  }
  .pipeline-map > .dead-label {
    grid-row: 7;
  }
  .pipeline-map > [data-stage="store"] {
    grid-row: 8;
  }
}
/* Native controls keep 44px hit areas. The event circles size from the inspector's own width:
   12, 8, 6, 5 or 4 columns, whichever keeps every circle at 44px or more. */
.pipeline-lab select {
  min-height: 44px;
}
.event-inspector {
  container: event-inspector / inline-size;
}
.event-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@container event-inspector (width >= 15.75rem) {
  .event-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@container event-inspector (width >= 19rem) {
  .event-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@container event-inspector (width >= 25.5rem) {
  .event-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@container event-inspector (width >= 38.5rem) {
  .event-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
/* Pipeline lab in forced colours: paths draw in CanvasText at full strength with the
   failure routes dotted, dots and the processing fill keep system colours, and the
   selected event's ring takes Highlight. Border styles already survive untouched. */
@media (forced-colors: active) {
  .pipeline-paths,
  .pipeline-paths .failure-path {
    stroke: CanvasText;
    opacity: 1;
  }
  .pipeline-paths .failure-path {
    stroke-dasharray: 2 3;
  }
  .pipeline-map > .invalid-label::before,
  .pipeline-map > .dead-label::before {
    border-top-style: dotted;
  }
  .pipeline-stage[data-stage="worker"].has-failure {
    border-style: dashed;
  }
  .event-particle {
    forced-color-adjust: none;
    background: CanvasText;
    box-shadow: 0 0 0 2px Canvas;
  }
  .event-particle[data-status="retry-wait"],
  .event-particle[data-status="dead-letter"],
  .event-particle[data-status="invalid"] {
    background: Canvas;
    border: 2px solid CanvasText;
  }
  .event-particle[data-status="duplicate"] {
    background: GrayText;
  }
  .event-grid button[data-status="processing"],
  .event-key[data-status="processing"] {
    forced-color-adjust: none;
    color: Canvas;
    background: CanvasText;
    border-color: CanvasText;
  }
  .event-grid button[aria-checked="true"] {
    border-color: Highlight;
  }
  .event-grid button:focus-visible {
    outline-color: CanvasText;
  }
}
.notice {
  background: var(--blue-light);
  color: var(--ink);
}
.lab-toolbar > p {
  color: var(--muted);
}

/* Experience and writing remain concise and readable. */
.experience-timeline {
  margin-top: 0;
}
.timeline {
  margin-top: 0;
}
.timeline article {
  grid-template-columns: 1fr 1.65fr;
  gap: 40px;
  padding: 24px 0;
}
.timeline h2 {
  font-size: 1.4rem;
}
.timeline article > p {
  font-size: 0.9rem;
}
.timeline strong {
  font-size: 0.79rem;
}
.timeline article > div > p {
  font-size: 0.75rem;
  margin-top: 8px;
}
.education {
  padding-top: 23px;
}
.education h2 {
  font-size: 1.4rem;
}
.education p {
  font-size: 0.85rem;
}
.about-intro {
  gap: 40px;
}
.about-intro .large-copy {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
}
.about-intro p:not(.large-copy) {
  font-size: 0.91rem;
}
.language-index {
  padding-left: 25px;
}
.language-index dt {
  font-size: 1.55rem;
}
.language-index dd {
  font-size: 0.73rem;
}
.approach {
  gap: 40px;
}
.approach h3 {
  font-size: 1.25rem;
  margin-bottom: 9px;
}
.approach p {
  font-size: 0.9rem;
}
.approach p + h3 {
  margin-top: 22px;
}
.writing-index > a {
  grid-template-columns: 44px 1fr 80px 18px;
  gap: 24px;
  padding: 26px 0;
}
.writing-index h2 {
  font-size: 1.65rem;
}
.writing-index p {
  margin-top: 8px;
  font-size: 0.91rem;
}
.article-page main {
  max-width: 850px;
  margin: 0;
}
.article-head h1 {
  font-size: clamp(2.4rem, 1.9rem + 1.25vw, 3.35rem);
}
.article-page main > section {
  font-size: 1.15rem;
  line-height: 1.78;
}
.article-page section .lede {
  font-size: 1.25rem;
}
.article-page section h2 {
  font-size: 1.75rem;
}
.error-page main {
  min-height: 65svh;
}

@media (min-width: 1800px) {
  .recruiter-intro h1 {
    font-size: 4rem;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .main-nav a,
  .project-row,
  .project-row h3,
  .career-evidence strong {
    transition: color 160ms ease, background-color 160ms ease;
  }
  .project-row > .icon {
    transition: transform 160ms ease;
  }
  .project-row:hover > .icon {
    transform: translateX(3px);
  }
}
@media (max-width: 1100px) and (min-width: 761px) {
  :root {
    --rail: 170px;
  }
  .sidebar {
    padding-inline: 20px;
  }
  .main-nav {
    margin-inline: -8px;
  }
  .main-nav a {
    padding-inline: 8px;
  }
  .identity-name {
    font-size: 0.95rem;
  }
  .sidebar-contact {
    font-size: 0.65rem;
  }
  .page-shell {
    padding-inline: 30px;
    padding-top: 42px;
  }
  .recruiter-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.9fr);
    gap: 20px;
  }
  .recruiter-intro h1 {
    font-size: 2.85rem;
  }
  .recruiter-intro .role-line {
    font-size: 1.16rem;
  }
  .recruiter-intro .hero-focus {
    font-size: 1.06rem;
  }
  .desktop-break {
    display: none;
  }
  .project-row {
    grid-template-columns: 46px 1fr 18px;
    gap: 16px;
    padding: 18px;
  }
  .project-row > img {
    width: 46px;
    height: 46px;
  }
  .project-stack {
    grid-column: 2;
    margin-top: -10px;
  }
  .project-row > .icon {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .profile-columns {
    gap: 24px;
  }
  .profile-columns > section + section {
    padding-left: 22px;
  }
  .profile-columns h2 {
    font-size: 1.35rem;
  }
  .github-selection {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
    gap: 30px;
  }
  .github-intro h2 {
    font-size: 1.9rem;
  }
  .source-title {
    flex-wrap: wrap;
    gap: 0 16px;
  }
  .repository-case {
    gap: 30px;
  }
  .career-evidence {
    gap: 20px;
  }
  .career-evidence a + a {
    padding-left: 20px;
  }
  .career-evidence strong {
    font-size: 1.4rem;
  }
  .career-evidence span {
    font-size: 0.74rem;
  }
  .career-evidence small {
    font-size: 0.65rem;
  }
  .work-entry {
    grid-template-columns: 48px 1fr 130px;
    gap: 17px;
  }
  .work-icon {
    width: 48px;
    height: 48px;
  }
  .work-preview > a,
  .work-preview img {
    max-height: 120px;
  }
  .case-hero {
    grid-template-columns: minmax(0, 1.4fr) minmax(190px, 1fr);
    gap: 26px;
  }
  .case-hero h1 {
    font-size: 2.2rem;
  }
  .case-meta,
  .case-overview,
  .case-decisions article > div,
  .ai-story,
  .about-intro,
  .timeline article {
    gap: 24px;
  }
}
@media (max-width: 900px) and (min-width: 761px) {
  .recruiter-hero {
    grid-template-columns: minmax(0, 1fr) 240px;
  }
  .recruiter-intro h1 {
    font-size: 2.5rem;
  }
  .hero-actions {
    gap: 8px;
  }
  .hero-actions .button,
  .hero-actions .quiet-button {
    padding-inline: 12px;
    font-size: 0.77rem;
  }
  .career-evidence {
    margin-top: 26px;
  }
}
@media (max-width: 760px) {
  :root {
    --rail: 0px;
  }
  .sidebar {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 16px 22px 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    gap: 0;
  }
  .identity {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 0 12px;
  }
  .monogram {
    grid-row: 1 / 3;
    margin: 0;
    height: 40px;
    font-size: 30px;
  }
  .monogram span + span {
    font-size: 30px;
  }
  .identity-name {
    font-size: 0.98rem;
  }
  .identity-role {
    font-size: 0.7rem;
    margin: 0;
  }
  .main-nav {
    flex-direction: row;
    justify-content: space-between;
    gap: 0 6px;
    margin: 10px 0 0;
    flex-wrap: wrap;
  }
  .main-nav a {
    font-size: 0.75rem;
    padding: 11px 0;
    min-height: 44px;
    background: none;
    border-radius: 0;
  }
  .main-nav a[aria-current] {
    background: none;
  }
  .main-nav a[aria-current]::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: -1px;
    width: auto;
    height: 2px;
  }
  .sidebar-contact {
    display: none;
  }
  .page-shell {
    margin: 0;
    width: 100%;
    padding: 32px 22px 0;
    max-width: none;
  }
  h1,
  .engineering-heading h1,
  .case-hero h1,
  .article-head h1 {
    font-size: 2.35rem;
    line-height: 1.14;
  }
  h2 {
    font-size: 1.65rem;
  }
  .page-heading {
    margin-bottom: 28px;
  }
  .page-heading > p {
    font-size: 0.94rem;
  }
  .section-space {
    margin-top: 38px;
  }
  .section-heading {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
    align-items: start;
  }
  .section-heading > p {
    font-size: 0.84rem;
  }
  .recruiter-hero {
    display: flex;
    flex-direction: column;
    gap: 19px;
    align-items: stretch;
  }
  .recruiter-intro h1 {
    font-size: clamp(2.45rem, 8.5vw, 3.1rem);
    white-space: normal;
  }
  .recruiter-intro .role-line {
    font-size: 1.16rem;
    margin-top: 10px;
  }
  .recruiter-intro .hero-focus {
    font-size: 1.08rem;
    margin-top: 14px;
  }
  .recruiter-intro .hero-background {
    font-size: 0.85rem;
    margin-top: 16px;
  }
  .desktop-break {
    display: none;
  }
  .hero-actions {
    margin-top: 20px;
    gap: 10px;
  }
  .hero-actions .button,
  .hero-actions .quiet-button {
    font-size: 0.82rem;
    padding-inline: 13px;
  }
  .compact-studio {
    width: min(100%, 240px);
    margin: 0 auto;
  }
  .product-previews {
    max-width: 320px;
    margin: 8px auto 0;
    gap: 16px;
  }
  .studio-utility {
    margin-top: 2px;
  }
  .studio-caption {
    font-size: 0.61rem;
  }
  .career-evidence {
    grid-template-columns: 1fr 1fr;
    padding: 19px 0;
    gap: 16px 18px;
    margin-top: 24px;
  }
  .career-evidence a + a {
    padding-left: 17px;
  }
  .career-evidence a:last-child {
    grid-column: 1 / -1;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .career-evidence a:last-child span {
    display: none;
  }
  .career-evidence a:last-child small {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .career-evidence strong {
    font-size: 1.48rem;
  }
  .career-evidence a:last-child strong {
    font-size: 1.12rem;
  }
  .career-evidence span {
    font-size: 0.7rem;
  }
  .career-evidence small {
    font-size: 0.63rem;
  }
  .selected-work {
    margin-top: 29px;
  }
  .selected-work .section-heading {
    flex-direction: row;
    align-items: center;
  }
  .selected-work h2 {
    font-size: 1.5rem;
  }
  .selected-work .text-link {
    font-size: 0.75rem;
    gap: 5px;
  }
  .project-row {
    grid-template-columns: 40px minmax(0, 1fr) 15px;
    gap: 14px;
    padding: 20px 16px;
  }
  .project-row > img {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-icon);
    align-self: start;
  }
  .project-row h3 {
    font-size: 1.12rem;
  }
  .project-row p {
    font-size: 0.85rem;
  }
  .project-stack {
    grid-column: 2;
    font-size: 0.71rem;
    margin-top: -6px;
  }
  .project-row > .icon {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 15px;
  }
  .github-selection {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 44px;
    padding-top: 30px;
  }
  .github-intro h2 {
    font-size: 1.85rem;
    margin-top: 10px;
  }
  .github-intro > p:not(.section-kicker) {
    max-width: 48ch;
    font-size: 0.9rem;
    margin-top: 14px;
  }
  .github-intro > .text-link {
    margin-top: 10px;
  }
  .source-title {
    flex-wrap: wrap;
    gap: 0 16px;
  }
  .source-entry > p {
    font-size: 0.87rem;
  }
  .repository-case {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 25px 0;
    scroll-margin-top: 20px;
  }
  .repository-identity > span {
    margin-top: 10px;
  }
  .repository-detail > p {
    font-size: 0.9rem;
  }
  .repository-links {
    gap: 0 18px;
  }
  .profile-columns {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 34px;
  }
  .profile-columns > section + section {
    border: 0;
    padding: 0;
  }
  .profile-columns h2 {
    font-size: 1.5rem;
  }
  .recruiter-contact {
    flex-direction: column;
    align-items: start;
    gap: 5px;
    margin-top: 28px;
    padding-top: 23px;
  }
  .recruiter-contact h2 {
    font-size: 1.6rem;
  }
  .site-footer {
    margin-top: 24px;
    gap: 20px;
    font-size: 0.67rem;
    padding-top: 19px;
  }
  .contact-band {
    flex-direction: column;
    align-items: start;
    margin-top: 35px;
    padding-top: 24px;
    gap: 16px;
  }
  .contact-band h2 {
    font-size: 1.65rem;
  }
  .work-entry {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px;
    padding: 23px 0;
  }
  .work-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-icon);
  }
  .work-entry h2 {
    font-size: 1.4rem;
  }
  .work-entry-copy > p {
    font-size: 0.83rem;
  }
  .work-entry-copy .stack {
    font-size: 0.71rem;
  }
  .work-result span {
    display: block;
    margin-top: 3px;
    font-size: 0.7rem;
  }
  .work-preview {
    display: none;
  }
  .work-preview.rendered-preview {
    display: block;
    grid-column: 2;
    width: min(100%, 220px);
    justify-self: center;
    margin: 0;
  }
  .rendered-preview > a,
  .rendered-preview img {
    height: 160px;
    max-height: 160px;
  }
  .workbench > div {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 0;
  }
  .workbench dt {
    font-size: 1.25rem;
  }
  .workbench dd {
    font-size: 0.86rem;
  }
  .case-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .case-hero:has(.product-art) {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .case-art.product-art {
    width: min(100%, 390px);
    justify-self: center;
  }
  .case-art.single-device-art {
    max-width: 280px;
  }
  .case-art {
    justify-self: center;
    max-width: 280px;
  }
  .case-lede {
    font-size: 0.95rem;
  }
  .case-meta {
    grid-template-columns: 1fr;
    padding: 15px 0;
    gap: 14px;
    margin-top: 23px;
  }
  .case-meta > div {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 12px;
  }
  .case-meta > div + div {
    border: 0;
    padding: 0;
  }
  .case-meta dd {
    margin: 0;
    font-size: 0.78rem;
  }
  .case-overview,
  .case-tradeoff {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .case-decisions article {
    grid-template-columns: 22px 1fr;
    gap: 12px;
    padding: 21px 0;
  }
  .case-decisions article > div {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .case-decisions h3 {
    font-size: 1.22rem;
  }
  .case-decisions p {
    font-size: 0.86rem;
  }
  .architecture {
    padding: 20px;
  }
  .architecture .section-heading {
    align-items: start;
  }
  .architecture-flow {
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
  }
  .architecture-flow li {
    padding: 10px 0 0;
  }
  .architecture-flow li + li::before {
    display: none;
  }
  .architecture-flow span {
    margin-top: 3px;
  }
  .next-project {
    margin-top: 28px;
    gap: 15px;
  }
  .next-project strong {
    font-size: 1.3rem;
  }
  .ai-story {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 23px;
  }
  .ai-story h3 {
    font-size: 1.4rem;
  }
  .memory-flow {
    border-left: 0;
    padding-left: 0;
  }
  .evaluation-story {
    padding-top: 24px;
    margin-top: 30px;
  }
  .evaluation-sheet {
    padding: 17px;
  }
  .engineering-links {
    grid-template-columns: 1fr;
  }
  .lab-disclosure > summary span {
    display: block;
    margin: 5px 0 0;
  }
  .lab-disclosure .pipeline-lab {
    padding: 15px;
  }
  .about-intro,
  .timeline article,
  .approach {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .timeline article {
    padding: 22px 0;
  }
  .timeline article > p {
    font-size: 0.86rem;
  }
  .language-index {
    border-left: 0;
    padding-left: 0;
    margin-top: 10px;
  }
  .language-index dt {
    font-size: 1.4rem;
  }
  .education {
    flex-direction: column;
    align-items: start;
    gap: 5px;
  }
  .writing-index > a {
    grid-template-columns: 25px 1fr 17px;
    gap: 11px;
    padding: 23px 0;
  }
  .writing-index h2 {
    font-size: 1.4rem;
  }
  .writing-index p {
    font-size: 0.83rem;
  }
  .writing-index time {
    grid-column: 2;
    margin-top: 0;
  }
  .writing-index .icon {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .article-page main > section {
    font-size: 1.08rem;
  }
  .article-page section .lede {
    font-size: 1.15rem;
  }
  .article-page section h2 {
    font-size: 1.5rem;
  }
}
@media (max-width: 370px) {
  .sidebar {
    padding-inline: 17px;
  }
  .page-shell {
    padding-inline: 17px;
  }
  .main-nav {
    gap: 4px;
  }
  .main-nav a {
    font-size: 0.7rem;
  }
  .hero-actions {
    gap: 7px;
  }
  .hero-actions .button,
  .hero-actions .quiet-button {
    font-size: 0.77rem;
    padding-inline: 10px;
  }
  .career-evidence {
    gap: 14px;
  }
  .career-evidence a + a {
    padding-left: 14px;
  }
  .career-evidence small {
    font-size: 0.59rem;
  }
  .career-evidence a:last-child {
    padding-left: 0;
  }
  .selected-work h2 {
    font-size: 1.4rem;
  }
  .selected-work .text-link {
    font-size: 0.7rem;
  }
}
@media print {
  :root {
    --paper: oklch(0.99 0 0);
    --surface: oklch(0.96 0 0);
    --ink: oklch(0.2 0 0);
    --muted: oklch(0.4 0 0);
    --blue: oklch(0.3 0.05 255);
    --rule: oklch(0.8 0 0);
  }
  .page-shell {
    margin: 0;
    padding: 0;
    width: auto;
  }
  .compact-studio,
  .product-previews,
  .studio-utility,
  .lab-disclosure {
    display: none;
  }
  .recruiter-hero {
    display: block;
  }
}

/* September 2026 content upgrade: four headline figures, experience highlights,
   the toolbox, contact links, and a related-work ending on each essay. */
.career-evidence {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.career-evidence a {
  justify-content: flex-start;
}
.career-evidence span {
  text-wrap: pretty;
}
.recruiter-contact h2 {
  max-width: 31ch;
  text-wrap: balance;
}
/* Education and security research read as rows of the timeline above them. */
.education {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: 40px;
  align-items: baseline;
  padding-bottom: 21px;
}
.education p {
  text-align: left;
}
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin-top: 12px;
}
.timeline article > div > p + p {
  margin-top: 2px;
}
.experience-points {
  margin: 0;
  padding-left: 1.1em;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.experience-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.experience-points li + li {
  margin-top: 10px;
}
.experience-points li::marker {
  color: var(--blue);
}
.experience-points a {
  color: var(--ink);
  text-decoration-color: color-mix(in oklch, var(--blue) 60%, transparent);
  text-underline-offset: 3px;
}
.role-history {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}
.role-history > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 14px;
}
.role-history dt {
  font-size: 0.79rem;
  color: var(--ink);
}
.role-history dd {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.toolbox {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: 40px;
}
.toolbox dl {
  display: grid;
  gap: 20px;
  margin: 0;
}
.toolbox dt {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
}
.toolbox dd {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.article-end {
  max-width: 760px;
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.95rem;
}
.article-end .link-pair {
  margin-top: 14px;
}
/* Engineering: every story after the first opens with a rule, like the evaluation story. */
.ai-story + .ai-story {
  margin-top: 56px;
  padding-top: 38px;
  border-top: 1px solid var(--rule);
}
.ai-story:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}
.ai-story > :only-child {
  max-width: 64ch;
}
.plugin-index {
  margin: 0;
  align-self: start;
}
.plugin-index > div {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: center;
  border-top: 1px solid var(--rule);
}
.plugin-index > div:last-child {
  border-bottom: 1px solid var(--rule);
}
.plugin-index dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84rem;
  letter-spacing: -0.02em;
}
.plugin-index dt a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  text-decoration: none;
}
.plugin-index dt a:hover {
  color: var(--blue);
}
.plugin-index dt .icon {
  width: 13px;
  height: 13px;
}
.plugin-index dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}
/* Case study figures reuse the homepage band's type and rules. */
.case-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  margin: 0;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.case-figures > div + div {
  border-left: 1px solid var(--rule);
  padding-left: 26px;
}
.case-figures dt {
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.case-figures dd {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}
@media (max-width: 1100px) and (min-width: 761px) {
  .case-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
  }
  .case-figures > div:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .career-evidence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 22px;
  }
  .career-evidence a:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .career-evidence a:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
    padding-top: 20px;
  }
}
@media (max-width: 760px) {
  .career-evidence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .career-evidence a:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
    padding-top: 14px;
  }
  .career-evidence a:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .career-evidence a:last-child {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 14px 0 0 17px;
    border-left: 1px solid var(--rule);
  }
  .career-evidence a:last-child span {
    display: block;
  }
  .career-evidence a:last-child small {
    align-self: auto;
  }
  .recruiter-contact h2 {
    max-width: none;
  }
  .toolbox,
  .education {
    grid-template-columns: 1fr;
    gap: 6px 16px;
  }
  .ai-story + .ai-story {
    margin-top: 38px;
    padding-top: 28px;
  }
  .plugin-index > div {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 12px;
  }
  .plugin-index dt a {
    min-height: 40px;
  }
  .case-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .case-figures > div:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .case-figures dt {
    font-size: 1.3rem;
  }
  .article-end {
    margin-top: 40px;
  }
}

/* ui-craft review fixes (September 24, 2026). Palette, faces, the 196px rail and the 1280px container are unchanged. */
:root {
  --panel: color-mix(in oklch, var(--surface) 72%, var(--paper));
  --motion-hover: 160ms;
  --ease-hover: cubic-bezier(0.25, 1, 0.5, 1);
}
/* The rail scrolls inside itself when a window is shorter than its links. */
.sidebar {
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 761px) and (max-height: 35rem) {
  .sidebar {
    padding-block: 18px 14px;
  }
  .monogram {
    margin-bottom: 10px;
  }
  .main-nav {
    margin-top: 18px;
    gap: 0;
  }
  /* The footer's contact row carries these links at every size. */
  .sidebar-contact {
    display: none;
  }
}
/* Footer: copyright, a contact row that exists at every width, and back to top. */
.site-footer {
  flex-wrap: wrap;
  gap: 4px 28px;
}
.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.site-footer .icon {
  width: 13px;
  height: 13px;
}
/* Return links keep the site's 44px targets. */
.next-project > a:first-child,
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Text links carry a quiet underline instead of a trailing arrow. */
.text-link {
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--blue) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}
.text-link:hover,
.text-link:focus-visible {
  text-decoration-color: currentColor;
}
.contact-links,
.link-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 26px;
}
.copy-button {
  min-height: 44px;
  font: inherit;
  font-size: 0.8rem;
}
/* Lists of technologies: a hairline between items instead of middle dots. Every item
   carries the hairline; the list is shifted left and clipped so the item that starts
   each wrapped line shows none. */
.stack,
.project-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin-inline-start: calc(-0.6em - 1px);
  clip-path: inset(0 0 0 1px);
}
.stack > span,
.project-stack > span {
  border-inline-start: 1px solid var(--rule);
  padding-inline: 0.6em 0;
  margin-inline-end: 0.6em;
}
.case-meta dd.stack {
  display: flex;
  margin-inline-start: calc(-0.6em - 1px);
}
/* Blue marks interactive text only. */
.repository-identity > span,
.github-intro .section-kicker,
.memory-flow span {
  color: var(--ink);
  font-weight: 500;
}
.career-evidence span {
  color: var(--blue);
}
/* Required periods and disclosures stay readable. */
.career-evidence small,
.work-result span,
.case-intro .usage small {
  font-size: 0.8125rem;
}
.studio-caption,
.work-preview figcaption,
.case-art figcaption {
  font-size: 0.75rem;
}
/* Employers outrank the language list. */
.timeline h2,
.education h2 {
  font-size: 1.625rem;
}
.language-index dt {
  font-size: 1.125rem;
}
.about-intro h2 {
  font-size: 1.75rem;
  margin-bottom: 16px;
}
.language-block h3 {
  margin-bottom: 14px;
}
.button,
.quiet-button {
  gap: 8px;
}
.article-head {
  margin-bottom: 36px;
}
.language-block h3 {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
  padding-left: 25px;
}
/* Case studies: decision titles take the leading column now that the numerals are gone. */
.case-decisions article {
  grid-template-columns: minmax(0, 1fr);
}
.case-tradeoff {
  margin-top: 76px;
}
/* BootyBayBroker's last architecture step fans out to three clients. */
.architecture-flow .fan-out ul {
  list-style: none;
  margin: 7px 0 0;
  padding: 0;
  font-size: 0.73rem;
  color: var(--muted);
  line-height: 1.5;
}
.architecture-flow .fan-out li {
  border: 0;
  padding: 0 0 0 12px;
  position: relative;
}
.architecture-flow .fan-out li::before {
  content: "" / "";
  display: block;
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 7px;
  border-top: 1px solid var(--blue);
}
/* Writing index: the date leads each row. */
.writing-index > a {
  grid-template-columns: 5.5rem minmax(0, 1fr) 18px;
}
.writing-index time {
  align-self: start;
  padding-top: 0.55em;
}
/* Essay notes: a hairline block, moved into the free margin where the width exists. */
.article-page .note {
  border-left: 0;
  background: none;
  border-block: 1px solid var(--rule);
  padding: 10px 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1360px) {
  .article-page .note {
    float: right;
    clear: right;
    width: 220px;
    margin: 6px -276px 16px 0;
    border-block: 0;
    border-top: 1px solid var(--rule);
    padding-top: 8px;
  }
}
.article-head .art-meta {
  max-width: 62ch;
  line-height: 1.6;
}
/* Work entries: previews sit beside the copy they illustrate. */
.work-entry {
  justify-content: start;
}
.source-title {
  justify-content: flex-start;
  gap: 0 16px;
}
/* The scanner's transparent mark gets the same tile as the other app icons. */
.project-row > img[src*="scanner-icon"],
.work-icon[src*="scanner-icon"] {
  box-sizing: border-box;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-icon);
}
/* One panel fill everywhere a framed block sits on the page. */
.architecture,
.evaluation-sheet,
.compact-projects {
  background: var(--panel);
}
/* One hover timing and curve for every icon nudge and colour change. */
a:is(:hover, :focus-visible) > .icon {
  transform: translateX(3px);
}
a[href="#main"]:is(:hover, :focus-visible) .icon {
  transform: translateY(-3px);
}
a[href^="http"]:is(:hover, :focus-visible) .icon {
  transform: translate(2px, -2px);
}
a[href^="mailto:"]:is(:hover, :focus-visible) .icon {
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  a .icon {
    transition: transform var(--motion-hover) var(--ease-hover);
  }
  .button,
  .quiet-button,
  .text-link {
    transition: color var(--motion-hover) linear, background-color var(--motion-hover) linear,
      border-color var(--motion-hover) linear, text-decoration-color var(--motion-hover) linear;
  }
}
/* Windows contrast themes keep the current page marker. */
@media (forced-colors: active) {
  .main-nav a[aria-current] {
    text-decoration: underline 2px;
    text-underline-offset: 5px;
  }
  .main-nav a[aria-current]::before {
    forced-color-adjust: none;
    background: Highlight;
  }
}
/* Dual-screen devices: the rail on one screen, the page on the other. */
@media (horizontal-viewport-segments: 2) {
  .sidebar {
    width: env(viewport-segment-width 0 0);
  }
  .page-shell {
    margin-left: env(viewport-segment-left 1 0);
    width: env(viewport-segment-width 1 0);
  }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .writing-index > a {
    grid-template-columns: 4.5rem minmax(0, 1fr) 18px;
  }
}
@media (max-width: 760px) {
  .writing-index > a {
    grid-template-columns: minmax(0, 1fr) 18px;
  }
  .writing-index time {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0;
  }
  .writing-index > a > div {
    grid-column: 1;
    grid-row: 2;
  }
  .writing-index .icon {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .site-footer > a:last-child {
    margin-left: 0;
  }
  .language-block h3 {
    padding-left: 0;
  }
}

/* One type ladder on design/dark/POV.md's numbers: body 16px at every width, section headings
   26-30px, interior titles 42-48px, the hero name 54-64px. Phones never get smaller running text
   than desktop. Paragraphs keep a readable measure (about 70-75 characters). */
:root {
  --step-0: 1rem;
  --step-2: clamp(1.625rem, 1.5417rem + 0.3704vw, 1.875rem);
  --step-3: clamp(2.625rem, 2.5rem + 0.5556vw, 3rem);
  --step-4: clamp(3.375rem, 3.1667rem + 0.9259vw, 4rem);
  --step-role: clamp(1.125rem, 1rem + 0.556vw, 1.5rem);
  --step-lede: clamp(1rem, 0.958rem + 0.185vw, 1.125rem);
  --measure: 31em;
}
.project-row p,
.source-entry > p,
.experience-preview p,
.about-intro p,
.timeline article > p,
.experience-points,
.approach p,
.ai-story p,
.repository-detail > p,
.case-overview > p,
.case-decisions p,
.case-tradeoff p,
.expertise-list,
.hero-background,
.work-entry-copy > p:not(.stack, .work-result),
.engineering-links p,
.toolbox dd,
.workbench dd,
.writing-index p,
.github-intro > p,
.article-end p {
  font-size: var(--step-0);
  line-height: 1.65;
}
.section-heading h2,
.github-intro h2,
.profile-columns h2,
.recruiter-contact h2,
.contact-band h2,
.case-overview h2,
.case-tradeoff h2,
.architecture h2,
.approach h2,
.toolbox h2,
.about-intro h2 {
  font-size: var(--step-2);
}
.page-heading h1,
.case-intro h1,
.article-head h1 {
  font-size: var(--step-3);
}
.recruiter-intro h1 {
  font-size: var(--step-4);
}
.recruiter-intro .role-line {
  font-size: var(--step-role);
}
.case-lede,
.page-heading > p {
  font-size: var(--step-lede);
}
p,
.experience-points,
.workbench dd,
.toolbox dd {
  max-width: var(--measure);
}
.article-page main > section > p {
  max-width: 34em;
}
/* Earlier, more specific rules the ladder has to meet at their own specificity. */
.recruiter-intro .hero-background,
.github-selection .github-intro > p,
.about-intro p:not(.large-copy),
.education p,
.section-heading > p,
.open-source > p {
  font-size: var(--step-0);
}
.source-entry > p,
.work-entry-copy > p,
.expertise-list,
.education p {
  max-width: var(--measure);
}
.evaluation-sheet dl {
  font-size: 0.875rem;
}
.evaluation-sheet dl > div {
  font-size: inherit;
}
.article-head .art-meta {
  font-size: 0.875rem;
}
/* A case overview with more than one paragraph keeps them together in the text column. */
.case-overview-copy > p {
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--muted);
  max-width: var(--measure);
}
.case-overview-copy > p + p {
  margin-top: 1em;
}
/* A four-item meta strip (Limerino adds its tests) keeps one row. */
.case-meta:has(> div:nth-child(4)) {
  grid-template-columns: 1fr 1.2fr 1fr 1fr;
}
@media (max-width: 760px) {
  .case-meta:has(> div:nth-child(4)) {
    grid-template-columns: 1fr;
  }
}
.case-overview-copy a {
  white-space: nowrap;
}
/* Component columns follow the width the page column actually has (tablets beside the rail
   get less than phones), not the viewport. Below 44rem the two-column blocks stack. */
main {
  container: page / inline-size;
}
@container page (width < 44rem) {
  .case-overview,
  .case-tradeoff,
  .case-decisions article > div,
  .timeline article,
  .education,
  .toolbox,
  .approach,
  .about-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px 16px;
  }
  .language-index {
    border-left: 0;
    padding-left: 0;
  }
  .language-block h3 {
    padding-left: 0;
  }
}
/* Technology lists keep one size everywhere (this used to be forced with !important). */
p.stack,
span.stack,
dd.stack,
.case-meta dd.stack,
.workbench dd > .stack,
.work-entry-copy > p.stack {
  font-size: 0.76rem;
}