/*
 * Layout of the site: a side menu and one calm column.
 * Menu and its motion come from denizors.design (numbered sections, case studies under
 * Work, the current item marked while you scroll, a bottom bar on phones).
 * The look stays krystianzun.com / andyryanweir.com. Every value comes from tokens.css.
 */

html {
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

[id] {
  scroll-margin-top: var(--space-8);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-text-strong);
  color: var(--color-bg);
  font-size: var(--text-sm);
}

.skip-link:focus {
  left: var(--space-4);
}

/* ---------- Logo (the S, A and D monogram in a tile) ---------- */
.logo {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
}

.logo-tile { fill: var(--logo-tile); }
.logo-mark { fill: var(--logo-mark); }

/* ---------- Page frame: menu + main ---------- */
.shell {
  --main-pad: var(--space-16);
  max-width: calc(var(--menu-width) + var(--column) + 2 * var(--main-pad));
  margin: 0 auto;
  padding-left: var(--menu-width);
}

main {
  padding: var(--space-16) var(--main-pad) var(--space-12);
}

.column {
  max-width: var(--column);
  margin: 0 auto;
}

/* ---------- Side menu ---------- */
.rail {
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(0px, calc(50% - (var(--menu-width) + var(--column) + 2 * var(--space-16)) / 2));
  width: var(--menu-width);
  padding: var(--space-16) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  overflow-y: auto;
}

.rail-head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  align-items: center;
  text-decoration: none;
}

.rail-head .logo {
  grid-row: span 2;
}

.rail-name {
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  line-height: 18px;
  font-weight: var(--weight-medium);
}

.rail-role {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
}

.route {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: var(--space-4);
}

/* The thin line along the menu, and the part of it that fills up to the current item. */
.route::before,
.route-fill {
  content: "";
  position: absolute;
  left: 3px;
  top: 14px;
  width: 1px;
}

.route::before {
  bottom: 14px;
  background: var(--color-line);
}

.route-fill {
  height: var(--fill, 0px);
  background: var(--color-text-strong);
  transition: height 300ms var(--ease-out);
}

.wp {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--duration-hover) var(--ease-out);
}

.wp .idx {
  font-family: var(--font-mono);
  color: var(--color-text-faint);
  letter-spacing: 0;
}

.wp .dot {
  position: absolute;
  left: calc(-1 * var(--space-4));
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
  transition:
    background-color var(--duration-hover) var(--ease-out),
    box-shadow var(--duration-hover) var(--ease-out);
}

.wp:hover,
.wp.is-active {
  color: var(--color-text-strong);
}

.wp.is-active .dot {
  background: var(--color-text-strong);
  box-shadow: inset 0 0 0 1px var(--color-text-strong);
}

.subroute {
  display: flex;
  flex-direction: column;
  margin: 2px 0 var(--space-2);
}

.subroute a {
  padding: 3px 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
  transition: color var(--duration-hover) var(--ease-out);
}

.subroute a:hover,
.subroute a.is-active,
.subroute a[aria-current="page"] {
  color: var(--color-text-strong);
}

.subroute a.is-active,
.subroute a[aria-current="page"] {
  font-weight: var(--weight-medium);
}

.rail-foot {
  margin-top: auto;
}

/* ---------- Theme toggle (sun / moon; icon shapes from Lucide, ISC licence) ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-strong);
  cursor: pointer;
  transition:
    transform var(--duration-press) var(--ease-press),
    background-color var(--duration-hover) var(--ease-out);
}

.theme-toggle:active {
  transform: scale(0.94);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Show the moon on light pages (go dark) and the sun on dark pages (go light). */
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}

/* ---------- Button icon (Download CV) ---------- */
.button svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ---------- Phone top bar and bottom bar (hidden on wide screens) ---------- */
.topbar,
.tabbar {
  display: none;
}

/* ---------- Image cards (Andy's framed card: 16 outer, 4 frame, 12 inner) ---------- */
.media {
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: inset 0 0 0 1px var(--color-card-line);
}

.media-inner {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.media img {
  width: 100%;
  transition: transform 500ms var(--ease-out);
}

figure.media-figure figcaption {
  margin-top: var(--space-3);
}

/* HumanOS screens: the app's dark screens in a light card, the phone frame drawn by CSS. */
.phones-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4%;
  padding: 6% 4%;
  background: #E9FBFC;              /* the HumanOS tint of the Home card (aqua #9FEDFC at 22 %) */
}

.phone {
  flex: none;
  width: 27%;
  padding: 1.6%;
  border-radius: 12% / 5.6%;
  background: #1A1D21;
  box-shadow: 0 10px 28px rgb(11 15 20 / 0.22);
}

.phones-stage--3 .phone {
  width: 25%;
}

.phone img {
  width: 100%;
  border-radius: 10.5% / 4.9%;
}

@media (max-width: 600px) {
  .phone { width: 40%; }
  .phones-stage--3 .phone { width: 30%; }
}

/* ---------- Home ---------- */
.intro-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.intro-head .logo {
  display: none;
}

.intro-name {
  color: var(--color-text-strong);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: var(--weight-medium);
}

.intro-role {
  color: var(--color-text-muted);
}

.intro-text {
  margin-top: var(--space-6);
}

.intro-text > * + * {
  margin-top: var(--space-4);
}

.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.work {
  margin-top: var(--space-16);
}

.work > .label {
  display: block;
}

.project {
  position: relative;
  margin-top: var(--space-6);
}

.project + .project {
  margin-top: var(--space-12);
}

.project-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.project-title {
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

/* The whole card is one link: the title's link covers the card. */
.project-title::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

/* With the keyboard, the focus ring goes round the whole card, not only the title. */
.project-title:focus-visible {
  outline: none;
}

.project-title:focus-visible::after {
  outline: 2px solid var(--color-text-strong);
  outline-offset: 4px;
}

.project-years {
  flex: none;
  color: var(--color-text-faint);
}

.project .row {
  margin-top: var(--space-2);
}

@media (hover: hover) and (pointer: fine) {
  .project .media {
    transition: transform var(--duration-hover) var(--ease-out);
  }
  .project:hover .media {
    transform: translateY(-2px);
  }
  .project:hover .media img {
    transform: scale(1.015);
  }
  .project:hover .project-title {
    text-decoration: underline;
    text-decoration-color: var(--color-text-faint);
  }
}

/* ---------- Case study ---------- */
.cs-head .subtitle {
  margin-top: var(--space-2);
}

.cs-head .meta {
  margin-top: var(--space-1);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-6);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.fact-value {
  color: var(--color-text-strong);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.cs-head .row {
  margin-top: var(--space-4);
}

.cs-hero {
  margin-top: var(--space-12);
}

.cs-section {
  margin-top: var(--space-16);
}

.cs-section > * + * {
  margin-top: var(--space-3);
}

.cs-section > .media-figure {
  margin-top: var(--space-6);
}

.bullets {
  padding-left: 1.2em;
}

.bullets li + li {
  margin-top: var(--space-1);
}

.bullets li::marker {
  color: var(--color-text-faint);
}

.metric {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.metric-label {
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}

.metric-name {
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
}

/* Dark "At a glance" panel: the width of the main area, rounded. Full width on phones. */
.band {
  margin: var(--space-16) calc(-1 * var(--main-pad)) 0;
  padding: var(--space-12) var(--main-pad);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1px var(--band-line, transparent);
}

.band-heading {
  margin-top: var(--space-2);
  color: var(--band-text-strong);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}

.band-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.band-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
}

.band-card .caption {
  color: var(--band-text-muted);
}

/* An odd last card takes the whole row, so one or three stats still look balanced. */
.band-grid > .band-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.band-metrics {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.band-metrics-title {
  color: var(--band-text);
  font-weight: var(--weight-medium);
}

.band-metrics dl {
  margin: var(--space-2) 0 0;
}

.band-metrics dt {
  margin-top: var(--space-3);
  color: var(--band-text-strong);
  font-weight: var(--weight-medium);
}

.band-metrics dd {
  margin: 0;
  color: var(--band-text-muted);
}

.closing {
  margin-top: var(--space-12);
}

/* "Next case study" link at the end of a case study. */
.next {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--color-line);
  text-decoration: none;
  transition:
    box-shadow var(--duration-hover) var(--ease-out),
    transform var(--duration-press) var(--ease-press);
}

.next:hover {
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
}

.next:active {
  transform: scale(0.99);
}

/* A picture of the next project: the image of its card on Home. */
.next-thumb {
  flex: none;
  width: 160px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: var(--color-card);
}

.next-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}

.next:hover .next-thumb img {
  transform: scale(1.04);
}

/* How I work with AI has no screen image: its sparkles icon on the lilac tint instead. */
.next-thumb--ai {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent-ai) 12%, var(--color-bg));
  color: var(--accent-ai);
}

.next-thumb--ai svg {
  width: 34px;
  height: 34px;
}

.next-text {
  flex: 1;
  min-width: 0;
}

.next-title {
  display: block;
  margin-top: 2px;
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
}

.next-arrow {
  color: var(--color-text-muted);
  transition: transform var(--duration-hover) var(--ease-out);
}

.next:hover .next-arrow {
  transform: translateX(3px);
}

/* ---------- Commerce map (built in HTML from the approved map v3, Figma 235:2) ----------
   Two columns (member, staff) with the money line between them; one column on phones. */
.cmap {
  --spine-gap: 40px;
  margin: var(--space-12) calc(-1 * var(--main-pad)) 0;
}

.cmap-head,
.cmap-foot {
  padding-inline: var(--main-pad);
}

.cmap-title {
  margin-top: var(--space-2);
}

.cmap-title span {
  color: var(--color-text-faint);
}

.cmap-head .caption {
  margin-top: var(--space-2);
}

.cmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.cmap-pill-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-line);
  color: var(--color-text-strong);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
}

.dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-strong);
}

.dot--shipped { background: var(--status-shipped); }
.dot--designed { background: var(--status-designed); }

.cmap-cols {
  display: grid;
  grid-template-columns: 1fr var(--spine-gap) 1fr;
  margin-top: var(--space-8);
}

.cmap-cols span:last-child {
  grid-column: 3;
}

.cmap-stages {
  position: relative;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

/* The money line. */
.cmap-stages::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--color-line-strong);
}

.cmap-stage {
  position: relative;
  padding-top: var(--space-6);
}

.cmap-step,
.cmap-money {
  position: relative;
  display: flex;
  justify-content: center;
}

.cmap-step span {
  display: inline-flex;
  gap: var(--space-2);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-text-strong);
  color: var(--color-bg);
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--weight-medium);
}

.cmap-step b {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  opacity: 0.6;
}

.cmap-pair {
  display: grid;
  grid-template-columns: 1fr var(--spine-gap) 1fr;
  margin-top: var(--space-4);
}

.cmap-card {
  display: flex;
  flex-direction: column;
}

.cmap-card + .cmap-card {
  grid-column: 3;
}

.cmap-shot {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-card);
}

.cmap-shot img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.05);
}

.cmap-phones {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

/* In a flex row the <picture> is the item, so it carries the width. */
.cmap-phones picture {
  width: calc(50% - 6px);
  max-width: 140px;
}

.cmap-phones img {
  border-radius: 14px;
}

.cmap-badge {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-text-strong);
  color: var(--color-bg);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
}

.cmap-receipt {
  align-self: center;
  width: min(100%, 240px);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.06), 0 0 0 1px var(--color-line);
}

.cmap-amount {
  margin: var(--space-1) 0;
  color: var(--color-text-strong);
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: var(--weight-semibold);
}

.cmap-card-title {
  margin-top: var(--space-3);
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  line-height: 20px;
  font-weight: var(--weight-medium);
}

.cmap-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.cmap-money {
  margin-top: var(--space-6);
}

.cmap-foot {
  margin-top: var(--space-8);
}

/* ---------- Diagrams built in HTML ----------
   A panel the width of the main area. Lines are borders and pseudo-elements, so they
   follow the theme. On phones every diagram becomes one column. */
.diagram {
  margin: var(--space-12) calc(-1 * var(--main-pad)) 0;
}

.diagram-panel {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--dg-bg);
  box-shadow: inset 0 0 0 1px var(--dg-line);
}

.cs-section > .diagram {
  margin-top: var(--space-6);
}

.diagram > figcaption {
  margin-top: var(--space-3);
  padding-inline: var(--main-pad);
}

.diagram-title {
  margin-top: var(--space-2);
}

.diagram-title span {
  color: var(--color-text-faint);
}

.diagram-panel > .caption {
  margin-top: var(--space-1);
}

.node {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--dg-card);
  box-shadow: inset 0 0 0 1px var(--dg-line);
}

.node b {
  display: block;
  color: var(--color-text-strong);
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--weight-semibold);
}

.node small {
  display: block;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 18px;
}

.node-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-text-strong);
  color: var(--color-bg);
}

.node-icon svg {
  width: 18px;
  height: 18px;
}

/* The person is the one inverted card: the diagram says a person rules. */
.node--person {
  background: var(--color-text-strong);
  box-shadow: none;
}

.node--person b { color: var(--color-bg); }
.node--person small { color: color-mix(in srgb, var(--color-bg) 70%, var(--color-text-strong)); }
.node--person .node-icon { background: var(--color-bg); color: var(--color-text-strong); }

/* A short vertical line with a label, between two nodes. */
.link {
  position: relative;
  height: 40px;
}

.link::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 1px;
  background: var(--dg-line-strong);
}

.link::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--dg-line-strong);
  border-bottom: 1px solid var(--dg-line-strong);
  transform: translateY(-1px) rotate(45deg);
}

.link span {
  position: absolute;
  top: 50%;
  left: calc(50% + 12px);
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.outline-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--dg-line-strong);
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 18px;
  font-weight: var(--weight-medium);
}

/* ---------- Design-system diagram ---------- */
.dsd-top {
  display: grid;
  grid-template-columns: 1fr minmax(0, 260px) 1fr;
  margin-top: var(--space-8);
}

.dsd-top > .node,
.dsd-top > .link {
  grid-column: 2;
}

.dsd-rules .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* The dashed line from the agents back to "Me": right of the top part, down to the groups. */
.dsd-loop {
  grid-column: 3;
  grid-row: 1 / 5;
  position: relative;
  padding: 72px var(--space-6) 0 var(--space-4);
}

.dsd-loop::before {
  content: "";
  position: absolute;
  top: 28px;
  right: 8px;
  bottom: calc(-1 * var(--space-6));  /* down to the top of the agent groups */
  left: 0;
  border-top: 1px dashed var(--accent-ds);
  border-right: 1px dashed var(--accent-ds);
  border-top-right-radius: 12px;
}

.dsd-loop::after {
  content: "";
  position: absolute;
  top: 25px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-left: 1px solid var(--accent-ds);
  border-bottom: 1px solid var(--accent-ds);
  transform: rotate(45deg);
}

.dsd-loop-label {
  font-size: 12px;
  line-height: 17px;
  color: var(--color-text-muted);
}

.dsd-loop-label b {
  display: block;
  color: var(--accent-ds);
  font-size: 13px;
  font-weight: var(--weight-semibold);
}

.dsd-back {
  display: none;
}

.dsd-branches {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-3);
  padding-top: var(--space-6);
}

/* The line from the rules splits to both groups. */
.dsd-branches::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc((100% - var(--space-3)) / 6);
  right: calc((100% - var(--space-3)) / 3);
  height: var(--space-6);
  border: 1px solid var(--dg-line-strong);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.dsd-branch {
  display: flex;
  flex-direction: column;
}

.dsd-group {
  flex: 1;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--dg-group);
  box-shadow: inset 0 0 0 1px var(--dg-line);
}

.dsd-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 16px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.ai-tag {
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-ds) 16%, transparent);
  color: var(--accent-ds);
  font-size: 10px;
  letter-spacing: 0;
}

.dsd-agents {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), 1fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.agent {
  padding: var(--space-3);
  border-radius: 12px;
  background: var(--dg-card);
  box-shadow: inset 0 0 0 1px var(--dg-line);
}

.agent-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agent-top .node-icon {
  width: 30px;
  height: 30px;
  background: color-mix(in srgb, var(--accent-ds) 14%, transparent);
  color: var(--accent-ds);
}

.agent-top .node-icon svg {
  width: 16px;
  height: 16px;
}

.agent-num {
  color: var(--color-text-faint);
  font-family: var(--font-mono);
  font-size: 12px;
}

.agent b {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-strong);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--weight-semibold);
}

.agent small {
  display: block;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 17px;
}

.dsd-out {
  justify-content: center;
}

.dsd-out .node-icon {
  width: 28px;
  height: 28px;
  background: var(--dg-group);
  color: var(--color-text-muted);
}

.dsd-out .node-icon svg {
  width: 15px;
  height: 15px;
}

/* "Learned the hard way": a short list under a divider. */
.dsd-lessons {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  box-shadow: inset 0 1px 0 var(--dg-line);
}

.dsd-lessons .label {
  padding-top: 2px;
}

.dsd-lessons ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text);
  font-size: 13px;
  line-height: 20px;
}

/* ---------- HumanOS money diagram ---------- */
.hmd-eyebrow {
  color: var(--st-paid);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Two columns: the main path down the left, what can happen beside each step on the right,
   the three outcomes in a full row at the bottom. */
.hmd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  grid-template-areas:
    "s1  .  notes"
    "a1  .  ."
    "s2  c2 ret"
    "a2  .  ."
    "s3  c3 reopen"
    "a3  .  ."
    "out out out";
  margin-top: var(--space-6);
}

.hmd-s1 { grid-area: s1; }
.hmd-a1 { grid-area: a1; }
.hmd-s2 { grid-area: s2; }
.hmd-c2 { grid-area: c2; }
.hmd-ret { grid-area: ret; align-self: center; }
.hmd-a2 { grid-area: a2; }
.hmd-s3 { grid-area: s3; }
.hmd-c3 { grid-area: c3; }
.hmd-reopen { grid-area: reopen; align-self: center; }
.hmd-a3 { grid-area: a3; }
.hmd-out { grid-area: out; }
.hmd-notes { grid-area: notes; align-self: center; }

.mcard {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-radius: 14px;
  background: var(--dg-card);
  box-shadow: inset 0 0 0 1px var(--dg-line);
}

.mcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 24px;
}

.mcard-num {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--dg-group);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
}

.mcard b {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-strong);
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--weight-semibold);
}

.mcard small {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 19px;
}

.status {
  --st: var(--st-held);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--st) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st) 28%, transparent);
  color: var(--st);
  font-size: 12px;
  line-height: 18px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status--paid { --st: var(--st-paid); }
.status--returned { --st: var(--st-returned); }
.status--review { --st: var(--st-review); }

.mcard--paid { box-shadow: inset 3px 0 0 var(--st-paid), inset 0 0 0 1px var(--dg-line); }
.mcard--review { box-shadow: inset 3px 0 0 var(--st-review), inset 0 0 0 1px var(--dg-line); }

/* Down arrows on the main path. */
.hmd-down {
  position: relative;
  height: 32px;
}

.hmd-down::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 1px;
  background: var(--dg-line-strong);
}

.hmd-down::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--dg-line-strong);
  border-bottom: 1px solid var(--dg-line-strong);
  transform: rotate(45deg);
}

.hmd-down span {
  position: absolute;
  top: 50%;
  left: calc(50% + 12px);
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

/* Side arrows from a step to what can happen there. */
.hmd-side {
  position: relative;
  align-self: center;
  height: 12px;
}

.hmd-side::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 4px;
  border-top: 1px solid var(--st-returned);
}

.hmd-side--dashed::before {
  border-top: 1px dashed var(--color-text-faint);
}

.hmd-side::after {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  right: 4px;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--st-returned);
  border-right: 1px solid var(--st-returned);
  transform: rotate(45deg);
}

.hmd-side--dashed::after {
  border-color: var(--color-text-faint);
}

.hmd-reopen {
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-text-faint);
  border-radius: 12px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 19px;
}

/* The three outcomes, fed by one line that splits. */
.hmd-out-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding-top: 20px;
}

.hmd-out-cards::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc((100% - 2 * var(--space-3)) / 6);
  right: calc((100% - 2 * var(--space-3)) / 6);
  height: 20px;
  border: 1px solid var(--dg-line-strong);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.hmd-out-cards > .mcard:nth-child(2) {
  position: relative;
}

.hmd-out-cards > .mcard:nth-child(2)::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  width: 1px;
  height: 20px;
  background: var(--dg-line-strong);
}

.hmd-notes .caption {
  margin-top: var(--space-1);
}

/* ---------- How I work with AI ---------- */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-12);
}

.panel {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
  box-shadow: inset 0 0 0 1px var(--color-panel-line);
}

.ai-card .label {
  display: block;
}

.ai-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  color: var(--color-text-strong);
  font-size: var(--text-base);
  line-height: 22px;
  font-weight: var(--weight-medium);
}

.ai-card p {
  margin-top: var(--space-3);
}

.icon-tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--accent-ai);
  background: color-mix(in srgb, var(--accent-ai) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-ai) 25%, transparent);
}

.icon-tile svg {
  width: 18px;
  height: 18px;
}

.stays {
  margin-top: var(--space-3);
}

.stays p {
  margin-top: var(--space-2);
  color: var(--color-text-strong);
}

.contact-card {
  margin-top: var(--space-12);
}

.contact-card .heading {
  margin-top: var(--space-2);
}

.contact-card .contact-row {
  margin-top: var(--space-4);
}

/* ---------- Back to top (js/top.js) ----------
   A round button like the theme button, centred at the end of the page: above the "Next case study"
   card, or above the footer on pages without one. */
.to-top-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-12);
}

.to-top-row + .next {
  margin-top: var(--space-3);
}

.to-top-row + .site-foot {
  margin-top: var(--space-6);
}

.to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-strong);
  cursor: pointer;
  transition:
    transform var(--duration-press) var(--ease-press),
    background-color var(--duration-hover) var(--ease-out);
}

.to-top svg {
  width: 18px;
  height: 18px;
  transition: transform var(--duration-hover) var(--ease-out);
}

.to-top:hover svg {
  transform: translateY(-2px);
}

.to-top:active {
  transform: scale(0.94);
}

/* The page itself takes focus after "Back to top"; it needs no outline. */
#main:focus {
  outline: none;
}

/* ---------- Sign-in page (made by functions/_middleware.js at /login) ---------- */
.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-12) var(--gutter);
}

.login {
  width: 100%;
  max-width: 440px;
}

.login-home {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-12);
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.login .subtitle {
  margin-top: var(--space-2);
}

.login-error {
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--st-review) 12%, transparent);
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.login-form {
  margin-top: var(--space-8);
}

.login-form .label {
  display: block;
  margin-bottom: var(--space-2);
}

.login-row {
  display: flex;
  gap: var(--space-2);
}

.login-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-line);
  color: var(--color-text-strong);
  font: inherit;
  font-size: var(--text-base);
}

.login-input:focus-visible {
  outline: 2px solid var(--color-text-strong);
  outline-offset: 2px;
}

.login-submit {
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.login-help {
  margin-top: var(--space-6);
}

@media (max-width: 420px) {
  .login-row {
    flex-direction: column;
  }

  .login-input {
    flex: none;
  }
}

/* ---------- Footer ---------- */
.site-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.site-foot .links {
  display: flex;
  gap: var(--space-6);
}

.site-foot a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-foot a:hover {
  color: var(--color-text-strong);
}

/* ---------- Phones and small tablets: no side menu ---------- */
@media (max-width: 899px) {
  .shell {
    --main-pad: var(--gutter);
    max-width: none;
    padding-left: 0;
  }

  .rail {
    display: none;
  }

  main {
    padding: var(--space-8) var(--gutter) calc(var(--space-12) + 56px);
  }

  .topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--gutter) 0;
    color: var(--color-text-strong);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }

  .topbar .logo,
  .intro-head .logo {
    display: block;
    width: 40px;
    height: 40px;
  }

  .intro-head {
    flex-wrap: wrap;
  }

  .tabbar {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 56px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 var(--color-line);
  }

  .tabbar a,
  .tabbar .theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    color: var(--color-text-strong);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
  }

  .tabbar a + a,
  .tabbar .theme-toggle {
    box-shadow: inset 1px 0 0 var(--color-line);
  }

  .tabbar .theme-toggle {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
  }

  .tabbar a:active {
    background: var(--color-surface);
  }

  .band {
    border-radius: 0;
  }
}

@media (max-width: 600px) {
  .band-grid,
  .ai-grid {
    grid-template-columns: 1fr;
  }

  .next {
    gap: var(--space-3);
    padding-right: var(--space-4);
  }

  .next-thumb {
    width: 96px;
  }
}

@media (max-width: 899px) {
  .cmap-cols,
  .cmap-stages {
    padding-inline: var(--main-pad);
  }

  .diagram {
    margin-inline: 0;
  }

  .diagram > figcaption {
    padding-inline: 0;
  }
}

/* Phones: one column; the money line runs down the left, cards sit to its right. */
@media (max-width: 640px) {
  .cmap-cols {
    display: none;
  }

  .cmap-stages::before {
    left: calc(var(--main-pad) + 12px);
  }

  .cmap-step,
  .cmap-money {
    justify-content: flex-start;
  }

  .cmap-pair {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-left: var(--space-8);
  }

  .cmap-card + .cmap-card {
    grid-column: auto;
  }

  .diagram-panel {
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-lg);
  }

  /* Design-system diagram: one column; the loop becomes a note under the groups. */
  .dsd-top {
    grid-template-columns: 1fr;
  }

  .dsd-top > .node,
  .dsd-top > .link {
    grid-column: 1;
  }

  .dsd-loop,
  .dsd-branches::before {
    display: none;
  }

  .dsd-branches {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-top: 0;
  }

  .dsd-agents {
    grid-template-columns: repeat(2, 1fr);
  }

  .dsd-back {
    display: block;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--accent-ds);
    border-radius: 12px;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 19px;
  }

  .dsd-back b {
    color: var(--accent-ds);
  }

  /* HumanOS diagram: one column; what can happen sits indented under its step. */
  .hmd-grid {
    display: flex;
    flex-direction: column;
  }

  .hmd-side {
    display: none;
  }

  .hmd-down::before {
    left: 24px;
  }

  .hmd-down::after {
    left: 21px;
  }

  .hmd-down span {
    left: 36px;
  }

  .hmd-ret,
  .hmd-reopen,
  .hmd-notes {
    align-self: stretch;
  }

  .hmd-ret,
  .hmd-reopen {
    margin: var(--space-3) 0 0 24px;
  }

  .hmd-ret {
    padding-left: var(--space-4);
    border-left: 1px solid var(--st-returned);
  }

  .hmd-out-cards {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding-top: 0;
  }

  .hmd-out-cards::before,
  .hmd-out-cards > .mcard:nth-child(2)::before {
    display: none;
  }

  .hmd-notes {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    box-shadow: inset 0 1px 0 var(--dg-line);
  }

  .dsd-lessons {
    grid-template-columns: 1fr;
  }
}

/* ---------- Motion: cards answer the mouse, groups come in one after another ----------
   From the reference sites: a small lift and a stronger outline on hover (0.25 s), images zoom
   a little inside their frame (0.5 s). Only with a mouse, and never for reduced motion. */
.ai-card,
.band-card,
.agent,
.mcard,
.cmap-shot,
.media-figure .media,
.panel.stays {
  transition:
    transform var(--duration-hover) var(--ease-out),
    box-shadow var(--duration-hover) var(--ease-out),
    background-color var(--duration-hover) var(--ease-out);
}

.icon-tile,
.agent .node-icon,
.cmap-shot img {
  transition:
    transform 500ms var(--ease-out),
    background-color var(--duration-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .ai-card:hover,
  .panel.stays:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 0 0 0 1px var(--color-line-strong),
      0 12px 28px -12px rgb(0 0 0 / 0.18);
  }

  .ai-card:hover .icon-tile {
    transform: scale(1.08) rotate(-4deg);
    background: color-mix(in srgb, var(--accent-ai) 20%, transparent);
  }

  .band-card:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--band-card) 88%, white);
  }

  .agent:hover,
  .mcard:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 0 0 1px var(--dg-line-strong),
      0 10px 22px -12px rgb(0 0 0 / 0.2);
  }

  .mcard--paid:hover {
    box-shadow: inset 3px 0 0 var(--st-paid), inset 0 0 0 1px var(--dg-line-strong), 0 10px 22px -12px rgb(0 0 0 / 0.2);
  }

  .mcard--review:hover {
    box-shadow: inset 3px 0 0 var(--st-review), inset 0 0 0 1px var(--dg-line-strong), 0 10px 22px -12px rgb(0 0 0 / 0.2);
  }

  .agent:hover .node-icon {
    transform: scale(1.08);
  }

  .cmap-shot:hover img {
    transform: scale(1.02);
  }

  .media-figure .media:hover {
    transform: translateY(-2px);
  }

  .media-figure .media:hover .media-inner:not(.phones-stage) img {
    transform: scale(1.015);
  }
}

/* Groups (cards in a grid): each child fades up a little after the one before.
   js/reveal.js numbers the children (--i), arms the group (only then are the cards hidden, so
   nothing stays hidden if the script does not run) and adds .is-visible on scroll. */
.js .reveal-group.is-armed:not(.is-visible) > * {
  opacity: 0;
}

.js .reveal-group.is-visible > * {
  animation: reveal-in var(--duration-reveal) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal-group.is-armed:not(.is-visible) > * {
    opacity: 1;
  }

  .js .reveal-group.is-visible > * {
    animation: none;
  }

  .ai-card,
  .band-card,
  .agent,
  .mcard,
  .cmap-shot img,
  .icon-tile,
  .media-figure .media {
    transition: none;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-fill,
  .wp,
  .wp .dot,
  .theme-toggle,
  .to-top,
  .to-top svg,
  .media img,
  .next,
  .next-arrow {
    transition: none;
  }
  .project:hover .media,
  .project:hover .media img,
  .next:hover .next-arrow,
  .next:hover .next-thumb img,
  .next:active,
  .to-top:hover svg,
  .to-top:active {
    transform: none;
  }
}