/* The Agentic Workflows header component (markup: tools/agentic-components/header.html, stamped into the details pages and into the home card's laptop screen): Karam beside Claude Code, the heading, one line, four number tiles. It measures its own box (container queries), so one look fits a wide page, a small laptop screen or a phone. No movement of its own; scroll motion is in agentic-motion.css. */
.agentic-head-box { container: agentic-head / inline-size; } /* the box the component measures */
.agentic-head { --claude-coral: #d97757; --claude-coral-ink: #1c0f08; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4cqw, 48px); align-items: center; padding: clamp(18px, 3cqw, 36px); border: 1px solid rgb(243 239 230 / 0.2); border-radius: 28px; background: linear-gradient(135deg, rgb(217 119 87 / 0.16), var(--ink-raised) 60%); } /* one warm tile, the biggest thing in its section */
.agentic-pair { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; row-gap: 10px; max-width: 520px; } /* photo, link, mascot, then two captions */
.agentic-pair-tile { display: grid; place-items: center; width: 136px; height: 136px; overflow: hidden; border-radius: 32px; } /* two equal rounded squares */
.agentic-pair-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* his real photo fills its tile */
.agentic-pair-mascot { border: 1px solid #4a3328; background: #261d18; } /* the mascot sits on a dark warm tile */
.agentic-pair-mascot svg { width: 88px; height: 88px; } /* the official mark, unmodified */
.agentic-pair-name { width: 136px; color: var(--paper-soft); font: 600 14px var(--body); text-align: center; } /* captions under the tiles */
.agentic-pair-name-end { grid-column: 3; justify-self: end; } /* the caption under the mascot */
.agentic-bridge { position: relative; display: grid; place-items: center; height: 44px; } /* holds the line and its words */
.agentic-line { position: absolute; left: 4px; right: 4px; top: calc(50% - 1px); height: 2px; background: linear-gradient(90deg, rgb(243 239 230 / 0.3), rgb(217 119 87 / 0.8), rgb(243 239 230 / 0.3)); } /* the connector between the two */
.agentic-bridge-pill { position: relative; z-index: 1; max-width: 92%; padding: 6px 14px; border-radius: 99px; background: var(--claude-coral); color: var(--claude-coral-ink); box-shadow: 0 0 0 6px #201a17; font: 700 14px/1.2 var(--body); text-align: center; } /* "I ask, I approve" */
.agentic-head-title { margin: 0 0 12px; font: 750 clamp(26px, 4.2cqw, 40px)/1.08 var(--display); letter-spacing: -0.025em; text-wrap: balance; } /* the heading */
.agentic-lede { max-width: 46ch; color: var(--paper-soft); font: 400 clamp(15px, 1.7cqw, 18px)/1.5 var(--body); } /* one or two short lines */
.agentic-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin: 22px 0 0; } /* four tiles across when there is room, two by two when there is not */
.agentic-stat { --stat-mark: #d97757; position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 14px 14px 12px 14px; border: 1px solid rgb(243 239 230 / 0.14); border-radius: 16px; background: rgb(255 255 255 / 0.04); } /* one tile: number above its label */
.agentic-stat:hover { border-color: rgb(217 119 87 / 0.75); background: rgb(217 119 87 / 0.09); } /* a quiet hover cue, no movement */
.agentic-stat::before { content: ""; order: 3; width: 20px; height: 14px; margin-bottom: 4px; background-repeat: no-repeat; } /* the small mark, drawn with plain CSS shapes */
.agentic-stat dd { margin: 0; font: 750 clamp(30px, 3.6cqw, 44px)/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } /* the big number, same width digits */
.agentic-stat dt { color: var(--paper-soft); font: 500 12px/1.25 var(--mono); letter-spacing: 0; text-transform: uppercase; } /* the label in small capitals */
.agentic-stat-projects::before { background-image: linear-gradient(var(--stat-mark), var(--stat-mark)), linear-gradient(var(--stat-mark), var(--stat-mark)), linear-gradient(var(--stat-mark), var(--stat-mark)), linear-gradient(var(--stat-mark), var(--stat-mark)); background-size: 8px 6px; background-position: 0 0, 100% 0, 0 100%, 100% 100%; } /* projects: four tiles */
.agentic-stat-tools::before { background-image: linear-gradient(var(--stat-mark), var(--stat-mark)), linear-gradient(var(--stat-mark), var(--stat-mark)), linear-gradient(var(--stat-mark), var(--stat-mark)); background-size: 6px 100%, 6px 100%, 100% 2px; background-position: 0 0, 100% 0, 0 50%; } /* connected tools: two blocks joined by a line */
.agentic-stat-memory::before { background-image: linear-gradient(var(--stat-mark), var(--stat-mark)), linear-gradient(var(--stat-mark), var(--stat-mark)), linear-gradient(var(--stat-mark), var(--stat-mark)); background-size: 100% 3px, 75% 3px, 50% 3px; background-position: 0 0, 0 50%, 0 100%; } /* memory pieces: stacked notes that get shorter */
.agentic-stat-repos::before { background-image: linear-gradient(var(--stat-mark), var(--stat-mark)), linear-gradient(var(--stat-mark), var(--stat-mark)), linear-gradient(var(--stat-mark), var(--stat-mark)), linear-gradient(var(--stat-mark), var(--stat-mark)), linear-gradient(var(--stat-mark), var(--stat-mark)); background-size: 5px 5px, 5px 5px, 5px 5px, 2px 100%, 8px 2px; background-position: 0 50%, 100% 0, 100% 100%, 8px 0, 3px 50%; } /* repos: one node branching to two */
@container agentic-head (min-width: 760px) and (max-width: 999px) { /* a middle-sized box (a laptop screen): a smaller pair, so the link words fit */
  .agentic-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } /* the pair gets more room */
  .agentic-pair-tile { width: 108px; height: 108px; border-radius: 26px; } /* smaller pair */
  .agentic-pair-mascot svg { width: 68px; height: 68px; } /* smaller mark */
  .agentic-pair-name { width: 108px; } /* captions follow the tiles */
  .agentic-bridge-pill { padding: 5px 11px; font-size: 13px; } /* the words fit between the tiles */
}
@container agentic-head (max-width: 759px) { /* a narrower box: the pair sits above the words */
  .agentic-head { grid-template-columns: minmax(0, 1fr); gap: 24px; } /* one column */
}
@container agentic-head (max-width: 560px) { /* a phone-width box: smaller pair, same parts */
  .agentic-head { padding: 18px; border-radius: 22px; } /* tighter tile */
  .agentic-pair-tile { width: 96px; height: 96px; border-radius: 24px; } /* smaller pair */
  .agentic-pair-mascot svg { width: 58px; height: 58px; } /* smaller mark */
  .agentic-pair-name { width: 96px; font-size: 13px; } /* captions follow the tiles */
  .agentic-bridge-pill { padding: 5px 9px; font-size: 12px; } /* the words stay readable at 12 px */
}
@container agentic-head (max-width: 340px) { /* the narrowest phones: Karam, the link, Claude Code stacked, so the words never touch a tile */
  .agentic-pair { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "photoname" "bridge" "mascot" "mascotname"; justify-items: center; row-gap: 6px; } /* one column, five rows */
  .agentic-pair-photo { grid-area: photo; } /* his photo on top */
  .agentic-pair-photo ~ .agentic-pair-name:not(.agentic-pair-name-end) { grid-area: photoname; } /* his caption under it */
  .agentic-bridge { grid-area: bridge; width: 100%; } /* the link between them */
  .agentic-pair-mascot { grid-area: mascot; } /* Claude Code below */
  .agentic-pair-name-end { grid-area: mascotname; grid-column: auto; justify-self: center; } /* its caption under it */
}