@import url("fonts/roboto-mono.css");
@import url("fonts/inter.css");

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--height-topbar) + var(--space-5)); }
body {
  margin: 0;
  color: var(--page-text);
  background: var(--color-gray-200) url("assets/backdrop.jpg") center / cover fixed;
  font: var(--font-size-body) / var(--line-height-body) var(--font-mono);
  letter-spacing: var(--letter-spacing-body);
}
a { color: var(--page-link); text-underline-offset: 2px; overflow-wrap: anywhere; }
a:focus-visible { outline: 2px solid var(--page-link); outline-offset: var(--space-1); }
.skip-link { position: fixed; top: -100px; z-index: 3; padding: var(--space-3); background: var(--surface-paper); }
.skip-link:focus { top: var(--space-2); }
.topbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: var(--height-topbar); padding: 0 var(--space-5);
  background: var(--surface-topbar); backdrop-filter: blur(var(--blur-topbar));
  font: var(--font-size-ui) / var(--line-height-ui) var(--font-sans); letter-spacing: normal;
}
.topbar a { color: var(--page-text); text-decoration: none; }
.breadcrumb { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.breadcrumb > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-shell { width: min(var(--width-sheet), calc(100% - var(--space-7))); margin: var(--space-7) auto; position: relative; left: calc((100vw - 100%) / 2); }
.sheet {
  padding: var(--sheet-padding-block) var(--sheet-padding-inline);
  background: var(--surface-paper); border-radius: var(--radius-sheet);
}
.page-break { height: var(--sheet-gap); }
h1,h2,h3,h4,h5,h6 { font-weight: var(--font-weight-strong); }
h1,h2,h3 { font-size: var(--font-size-heading); line-height: var(--line-height-heading); }
h1 { margin: 0; }
h2,h3 { margin: var(--space-4) 0 var(--space-5); }
h4,h5,h6 { font-size: var(--font-size-body); line-height: var(--line-height-body); margin: var(--space-5) 0 var(--space-2); }
.page-heading { margin-bottom: var(--heading-gap); }
.profile-heading { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--heading-gap-with-author); }
.profile-heading img { width: var(--avatar-size); height: var(--avatar-size); object-fit: cover; border-radius: var(--avatar-radius-fallback); flex-shrink: 0; }
.profile-heading h1 { min-width: 0; overflow-wrap: anywhere; }
.profile-heading sup { font-size: .65em; line-height: 0; }
.profile-alias { white-space: nowrap; }
.profile-heading sup a { text-decoration: none; }
#name-note { margin-top: var(--space-5); color: var(--text-muted); font-size: var(--font-size-ui-small); line-height: var(--line-height-ui); }
@supports (corner-shape: squircle) {
  .profile-heading img { border-radius: 50%; corner-shape: squircle; }
}
.source-block { margin: var(--block-gap) 0; }
.source-block:first-child { margin-top: 0; }
p { margin: 0; }
p + p { margin-top: var(--block-gap); }
ul,ol { margin: 0; padding-left: var(--space-6); }
.source-block:has(> ul),.source-block:has(> ol) { margin: var(--space-1) 0; }
li { padding-left: var(--space-1); }
.callout { background: var(--surface-callout); padding: var(--space-3) var(--space-4); border-radius: var(--space-1); }
hr { border: 0; border-top: 1px solid var(--border-divider); margin: var(--space-5) 0; }
hr.extraLight { opacity: .6; }
figure { margin: var(--space-5) 0; }
figure img { display: block; width: 100%; height: auto; border-radius: var(--space-1); }
figcaption,.local-copy { font: var(--font-size-ui) / var(--line-height-ui) var(--font-sans); color: var(--text-muted); }
figcaption { margin-top: var(--space-2); }
.local-copy { display: inline-block; margin-top: var(--space-2); }
.agent-flow {
  container: agent-flow / inline-size;
  padding: var(--space-4); background: var(--surface-callout); border-radius: var(--radius-card);
}
.agent-flow-track {
  position: relative; display: grid; gap: 0; list-style: none; padding: 0;
}
.agent-flow-track::before {
  content: ""; position: absolute; z-index: 0;
  top: calc(var(--flow-marker-size) / 2); bottom: calc(var(--flow-marker-size) / 2);
  left: calc(var(--flow-marker-size) / 2); width: 1px; background: var(--border-divider);
}
.agent-flow-step {
  position: relative;
  display: grid; grid-template-columns: var(--flow-marker-size) minmax(0, 1fr);
  grid-template-rows: auto auto; column-gap: var(--space-3); row-gap: var(--space-1);
  align-content: start;
  min-width: 0; padding: 0 0 var(--space-5);
  font: var(--font-size-ui) / var(--line-height-ui) var(--font-sans); letter-spacing: normal;
}
.agent-flow-step:last-child { padding-bottom: 0; }
.agent-flow-index {
  position: relative; z-index: 1; grid-column: 1; grid-row: 1 / span 2;
  display: grid; place-items: center; width: var(--flow-marker-size); height: var(--flow-marker-size);
  border-radius: 50%; color: var(--flow-marker-text); background: var(--flow-marker-surface);
  font-size: var(--font-size-ui-small); font-weight: var(--font-weight-strong); line-height: 1;
}
.agent-flow-step > strong,.agent-flow-step > span:not(.agent-flow-index) { display: block; grid-column: 2; overflow-wrap: anywhere; }
.agent-flow-step strong { grid-row: 1; color: var(--page-text); }
.agent-flow-step > span:not(.agent-flow-index) { grid-row: 2; }
@container agent-flow (min-width: 600px) {
  .agent-flow-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .agent-flow-track::before {
    top: calc(var(--flow-marker-size) / 2); right: calc(var(--flow-marker-size) / 2);
    bottom: auto; width: auto; height: 1px;
  }
  .agent-flow-step {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--flow-marker-size) auto auto;
    row-gap: var(--space-2); padding: 0 var(--space-4) 0 0;
  }
  .agent-flow-step + .agent-flow-step { padding-left: var(--space-4); }
  .agent-flow-step:last-child { padding-right: 0; }
  .agent-flow-index { grid-column: 1; grid-row: 1; }
  .agent-flow-step > strong,.agent-flow-step > span:not(.agent-flow-index) { grid-column: 1; }
  .agent-flow-step strong { grid-row: 2; }
  .agent-flow-step > span:not(.agent-flow-index) { grid-row: 3; }
}
.case-card {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--card-media-width); gap: var(--card-column-gap);
  position: relative; min-height: var(--card-height); padding: var(--card-padding);
  margin: var(--space-5) calc(-1 * var(--space-1)); border-radius: var(--card-radius);
  box-shadow: var(--card-shadow); overflow: hidden; text-decoration: none;
  color: var(--card-text); background: var(--card-surface);
  font: var(--card-font-size) / var(--card-line-height) var(--font-mono); letter-spacing: normal;
}
.case-card-copy { min-width: 0; }
.case-card-summary { margin-top: var(--space-3); }
.case-card-title { display: block; margin-bottom: var(--card-title-gap); color: var(--card-title-color); font-size: var(--card-title-size); line-height: var(--card-title-line-height); font-weight: var(--font-weight-strong); }
.case-card-block { margin: var(--card-block-gap) 0; }
.case-card-block p + p { margin-top: var(--card-block-gap); }
.case-card-block h2,.case-card-block h3,.case-card-block h4,.case-card-block h5,.case-card-block h6 { margin: var(--card-block-gap) 0; font-size: inherit; line-height: inherit; }
.case-card-callout { padding: var(--card-callout-padding); margin-inline: calc(-1 * var(--card-callout-bleed)); background: var(--card-callout-surface); }
.case-card-media { position: relative; margin-top: var(--space-2); }
.case-card-media > img {
  position: absolute; width: var(--card-thumb-width); height: var(--card-thumb-height);
  object-fit: cover; object-position: var(--card-thumb-position); border: var(--card-thumb-border) solid var(--color-white);
  border-radius: var(--card-thumb-radius); box-shadow: var(--card-thumb-shadow); transform: rotate(var(--card-thumb-tilt));
}
.case-card-media > img:nth-child(2) { left: var(--card-thumb-middle-x); top: var(--card-thumb-middle-y); transform: rotate(var(--card-thumb-tilt)); }
.case-card-media > img:nth-child(3) { left: var(--card-thumb-last-x); top: var(--card-thumb-last-y); transform: rotate(calc(-1 * var(--card-thumb-tilt))); }
.case-card-media > img:nth-child(n+2) { display: var(--card-thumb-extra-display); }
.case-card[data-case="tripment-health"] { --card-thumb-width: var(--card-single-thumb-width); --card-thumb-height: var(--card-single-thumb-height); --card-thumb-position: var(--card-single-thumb-position); --card-thumb-tilt: var(--card-single-thumb-tilt); --card-thumb-extra-display: none; }
.case-card[data-case="astrolab"],.case-card[data-case="mooncart"],.case-card[data-case="ai-bartini"] { --card-thumb-width: var(--card-single-thumb-width); --card-thumb-height: var(--card-single-thumb-height); --card-thumb-tilt: var(--card-single-thumb-tilt); }
.case-card[data-case="astrolab"] { --card-thumb-position: var(--card-astrolab-focus); }
.case-card[data-case="ai-bartini"] { --card-thumb-position: var(--card-bartini-focus); }
.case-card-miniature {
  position: absolute; left: var(--card-document-offset); top: 0; z-index: 1;
  width: var(--card-document-width); min-height: var(--card-document-height); padding: var(--space-8);
  background: var(--surface-paper); color: var(--page-text); border-radius: var(--radius-sheet);
  box-shadow: var(--card-thumb-shadow); transform: scale(var(--card-document-scale)) rotate(calc(-1 * var(--card-thumb-tilt))); transform-origin: top left;
  font-size: var(--card-document-font-size); line-height: var(--card-document-line-height);
}
.case-card-miniature + .case-card-miniature { left: calc(var(--card-document-offset) + var(--card-document-step)); z-index: var(--card-document-second-layer); }
.case-card[data-case="binology"] { --card-media-width: var(--card-binology-media-width); --card-document-offset: var(--card-binology-document-offset); --card-document-step: var(--card-binology-document-step); --card-document-second-layer: 1; }
.case-card-miniature .case-card-callout { background: var(--surface-callout); }
.case-card-miniature h4,.case-card-miniature h5 { color: var(--card-document-accent); }
.case-card:hover { outline: 1px solid var(--page-link); }
.case-card + .case-card { margin-top: var(--card-gap); }
.case-pagination {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5);
  margin-top: var(--sheet-gap); padding: var(--space-5) var(--sheet-padding-inline);
  border-radius: var(--radius-sheet); background: var(--surface-paper);
}
.case-pagination a { display: grid; align-content: start; gap: var(--space-2); text-decoration: none; }
.case-pagination a[rel="next"] { grid-column: 2; text-align: right; }
.case-pagination span { color: var(--text-muted); font: var(--font-size-ui) / var(--line-height-ui) var(--font-sans); letter-spacing: normal; }
.case-pagination strong { font-size: var(--font-size-body); line-height: var(--line-height-body); }
.case-pagination a:hover strong { text-decoration: underline; }
.site-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-5); padding: var(--space-5) var(--sheet-padding-inline);
  border-radius: var(--radius-sheet); background: var(--surface-paper);
  font: var(--font-size-ui) / var(--line-height-ui) var(--font-sans); letter-spacing: normal;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
@media (max-width: 800px) {
  .case-card {
    --card-padding: var(--space-5); --card-gap: var(--space-5);
    --card-title-size: 18px; --card-title-line-height: var(--line-height-body);
    --card-title-gap: var(--space-3); --card-font-size: var(--font-size-ui);
    --card-line-height: var(--line-height-ui);
    grid-template-columns: minmax(0, 1fr); height: auto; gap: var(--space-5);
  }
  .case-card-copy > .case-card-block { margin: 0; }
  .case-card-media { height: var(--card-mobile-media-height); margin: 0; overflow: hidden; border-radius: var(--card-thumb-radius); }
  .case-card-media > img {
    position: static; width: 100%; height: 100%; border: 0; border-radius: 0;
    box-shadow: none; transform: none;
  }
  .case-card-media > img:nth-child(n+2),.case-card-document .case-card-media { display: none; }
  .case-card[data-case="astrolab"] { --card-thumb-position: var(--card-astrolab-focus-mobile); }
}
@media (max-width: 600px) {
  .profile-heading { gap: var(--space-4); }
  .profile-heading img { width: var(--avatar-size-mobile); height: var(--avatar-size-mobile); }
  :root { --sheet-padding-inline: var(--space-5); --sheet-padding-block: var(--space-6); --sheet-gap: var(--space-4); }
  .page-shell { width: calc(100% - var(--space-4)); margin: var(--space-4) auto; left: 0; }
  .topbar { padding: 0 var(--space-3); }
  .topbar .breadcrumb { font-size: var(--font-size-ui-small); }
  .breadcrumb > a { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .breadcrumb > span { display: none; }
  h1,h2,h3 { overflow-wrap: anywhere; }
  .case-pagination { grid-template-columns: minmax(0, 1fr); }
  .case-pagination a[rel="next"] { grid-column: 1; text-align: left; }
  .case-pagination a + a { border-top: 1px solid var(--border-divider); padding-top: var(--space-5); }
}