/* Shared visual storytelling layer.
   These components express real relationships already documented elsewhere on
   the portfolio. Native HTML supplies the reading order and link destinations;
   CSS adds connectors, bars and compact cover diagrams without making the
   evidence dependent on JavaScript or raster screenshots. */

/* Homepage evidence map: each row keeps a claim, its public artifact and its
   recorded evidence together. Three columns are the widest horizontal flow;
   the narrow layout becomes a top-to-bottom path with the same source order. */
.evidence-map-section {
  padding-top: 78px;
  padding-bottom: 86px;
  border-bottom: 1px solid var(--line);
}
.evidence-map-intro {
  max-width: 54rem;
  margin: -8px 0 30px;
  font-size: 1rem;
  line-height: 1.8;
}
.evidence-map {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #111522, #0c111d 72%);
}
.evidence-map-head,
.evidence-lane {
  display: grid;
  grid-template-columns: .88fr 1.12fr 1fr;
  gap: 34px;
}
.evidence-map-head {
  padding: 15px 25px;
  border-bottom: 1px solid var(--line);
  color: #aaa4ba;
  font: .75rem/1.6 Consolas, monospace;
  letter-spacing: .1em;
}
.evidence-lane {
  position: relative;
  padding: 25px;
}
.evidence-lane + .evidence-lane { border-top: 1px solid var(--line); }
.evidence-node {
  position: relative;
  display: block;
  min-width: 0;
  padding: 20px;
  border: 1px solid #554263;
  background: #151522;
  color: var(--ink);
  text-decoration: none;
}
.evidence-node::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  width: 34px;
  height: 1px;
  background: #7f7691;
}
.evidence-node::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(50% - 4px);
  left: calc(100% + 29px);
  width: 7px;
  height: 7px;
  border-top: 1px solid #7f7691;
  border-right: 1px solid #7f7691;
  transform: rotate(45deg);
}
.evidence-node:last-child::before,
.evidence-node:last-child::after { content: none; }
.evidence-node:hover { border-color: var(--purple); background: #1a1728; }
.evidence-node:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.evidence-node-artifact { border-color: #427788; background: #101c27; }
.evidence-node-proof { border-color: #73507e; background: #191426; }
.evidence-kind {
  display: block;
  margin-bottom: 9px;
  color: #c5a8d9;
  font: .75rem/1.6 Consolas, monospace;
  letter-spacing: .075em;
}
.evidence-node-artifact .evidence-kind { color: var(--cyan); }
.evidence-node-proof .evidence-kind { color: #e9a7d0; }
.evidence-node strong {
  display: block;
  margin-bottom: 7px;
  font-size: 1.05rem;
  line-height: 1.5;
}
.evidence-node small {
  display: block;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.7;
}
.evidence-map-boundary {
  margin: 18px 0 0;
  color: #aaa5b8;
  font-size: .875rem;
  line-height: 1.75;
}

/* Editorial covers use diagrammatic motifs instead of generic technology
   photography. They are real links, while the concise labels inside are hidden
   from assistive technology because each article title follows immediately. */
.engineering-card {
  grid-template-columns: minmax(15.5rem, .72fr) minmax(0, 1.55fr);
  align-items: stretch;
}
.engineering-card-cover {
  position: relative;
  display: flex;
  min-height: 15rem;
  overflow: hidden;
  padding: 24px;
  border: 1px solid #554263;
  background: #101421;
  color: var(--ink);
  text-decoration: none;
}
.engineering-card-cover::after {
  content: "";
  position: absolute;
  inset: auto -12% -45% 22%;
  height: 75%;
  border: 1px solid #784e905c;
  border-radius: 50%;
  box-shadow: 0 0 70px #7f45a62d;
}
.engineering-card-cover:hover { border-color: var(--cyan); }
.engineering-card-cover:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.cover-frame { position: relative; z-index: 1; width: 100%; }
.cover-topline {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: #bba5cd;
  font: .75rem/1.5 Consolas, monospace;
  letter-spacing: .08em;
}
.cover-number { color: var(--cyan); }
.cover-diagram { display: grid; align-content: center; min-height: 10.5rem; margin-top: 14px; }
.cover-pill,
.cover-box {
  border: 1px solid #665077;
  background: #171525;
  color: #e7deee;
  font: .75rem/1.5 Consolas, monospace;
  text-align: center;
}
.cover-pill { padding: 8px; }
.cover-box { padding: 12px 10px; }
.cover-arrow { color: #8d829d; font: 1rem/1 Consolas, monospace; text-align: center; }
.cover-action-before { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.cover-action-before .cover-pill { border-color: #704f78; }
.cover-action-down { padding: 8px 0; color: #a49aae; text-align: center; }
.cover-action-shared { border-color: #4c8a9d; background: #10202a; color: var(--cyan); }
.cover-migration-line {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr auto 1fr;
  gap: 8px;
  align-items: center;
}
.cover-migration-line .cover-box:nth-of-type(2) { border-color: var(--purple); }
.cover-migration-line b { display: block; color: var(--cyan); font-size: 1.4rem; }
.cover-ai-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.cover-ai-branches { display: grid; gap: 8px; }
.cover-ai-branches .cover-pill:first-child { border-color: #4c8a9d; color: var(--cyan); }
.cover-ai-branches .cover-pill:last-child { border-color: #7e4e85; color: #e9a7d0; }
.cover-ai-result { border-color: var(--purple); }

/* Before/after delivery comparison. The left side shows duplicated ownership;
   the right side makes repository variation and platform ownership distinct. */
.pipeline-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
  margin: 38px 0;
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.pipeline-state {
  min-width: 0;
  padding: 24px;
  border: 1px solid #60466c;
  background: #171522;
}
.pipeline-state-after { border-color: #4d8496; background: #101d28; }
.pipeline-state .eyebrow { margin-bottom: 10px; font-size: .75rem; }
.pipeline-state h3 { margin-bottom: 18px; font-size: 1.25rem; line-height: 1.45; }
.pipeline-copies,
.pipeline-callers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pipeline-copies span,
.pipeline-callers span {
  padding: 10px 6px;
  border: 1px solid #694e73;
  color: #d9cde2;
  font: .75rem/1.5 Consolas, monospace;
  text-align: center;
}
.pipeline-callers span { border-color: #4b7887; }
.pipeline-shared {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font: 600 .875rem/1.6 Consolas, monospace;
  text-align: center;
}
.pipeline-shared::before {
  content: "";
  display: block;
  width: 1px;
  height: 22px;
  margin: -23px auto 8px;
  background: #6b8f9c;
}
.pipeline-result {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.7;
  text-align: center;
}
.pipeline-transition {
  display: grid;
  place-content: center;
  color: var(--purple);
  font: 600 .75rem/1.5 Consolas, monospace;
  letter-spacing: .06em;
  text-align: center;
}
.pipeline-transition span { display: block; margin-top: 8px; font-size: 1.5rem; }
.pipeline-comparison figcaption {
  grid-column: 1 / -1;
  margin-top: 4px;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.75;
}

/* The chart renders only the committed fictional classifier sample. Counts are
   written as text as well as bars, so color and geometry are never the sole
   way to recover the result. */
.classifier-figure {
  margin: 32px 0 0;
  padding: 30px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #111722, #0e121d);
}
.classifier-figure figcaption { max-width: 54rem; margin-bottom: 26px; }
.classifier-figure figcaption h3 { margin-bottom: 10px; font-size: 1.35rem; line-height: 1.5; }
.classifier-figure figcaption p { margin: 0; font-size: 1rem; line-height: 1.8; }
.classifier-chart { display: grid; gap: 16px; }
.classifier-row {
  display: grid;
  grid-template-columns: minmax(11rem, .55fr) minmax(12rem, 1fr) 2rem;
  gap: 18px;
  align-items: center;
}
.classifier-label { color: #dcd4e5; font-size: .95rem; line-height: 1.5; }
.classifier-track { height: 1.1rem; overflow: hidden; background: #242233; }
.classifier-bar { display: block; width: var(--bar); height: 100%; background: var(--cyan); }
.classifier-row-review .classifier-bar { background: #d6a257; }
.classifier-row-transform .classifier-bar { background: #d47ac6; }
.classifier-count { color: var(--ink); font: 600 1rem/1 Consolas, monospace; text-align: right; }
.classifier-note {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: #aaa5b8;
  font-size: .875rem;
  line-height: 1.75;
}
.classifier-note a { color: var(--cyan); }

/* Azure foundation cover. The optional spoke uses the same dashed amber
   boundary as the full case study, preserving the implemented/proposed cue. */
.cover-azure-foundation .cover-diagram { gap: 16px; }
.cover-azure-hub { width: min(15rem, 72%); margin-inline: auto; border-color: var(--purple); text-align: center; }
.cover-azure-hub b, .cover-azure-hub span { display: block; }
.cover-azure-hub b { margin-bottom: 5px; color: var(--ink); }
.cover-azure-hub span { color: #c5a8d9; font: .7rem/1.4 Consolas, monospace; }
.cover-azure-spokes { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 18px; }
.cover-azure-spokes::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 1px; background: #827590; }
.cover-azure-spokes .cover-pill { border-color: #4c8a9d; text-align: center; }
.cover-azure-spokes .cover-azure-optional { border-color: #d6a257; border-style: dashed; }

/* Azure modernization cover: the inherited hosting estate becomes a shared
   operating model. Labels stay deliberately high level and do not imply that
   every application used the same Azure service topology. */
.cover-modernization .cover-diagram { gap: 10px; }
.cover-modernization-estate,
.cover-modernization-target { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.cover-modernization-estate .cover-pill { border-color: #72516f; background: #1a1420; }
.cover-modernization-target .cover-pill { border-color: #4c8a9d; background: #10202a; color: var(--cyan); }

@media (max-width: 62rem) {
  .evidence-map-head { display: none; }
  .evidence-lane { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .evidence-node::after { top: 100%; left: 50%; width: 1px; height: 28px; }
  .evidence-node::before { top: calc(100% + 21px); left: calc(50% - 3px); transform: rotate(135deg); }
  .engineering-card { grid-template-columns: minmax(0, 1fr); }
  .engineering-card-cover { min-height: 13rem; }
  .pipeline-comparison { grid-template-columns: minmax(0, 1fr); }
  .pipeline-transition { min-height: 3.5rem; }
  .pipeline-transition span { transform: rotate(90deg); }
  .pipeline-comparison figcaption { grid-column: auto; }
}
@media (max-width: 48rem) {
  .evidence-map-section { padding-block: 54px 60px; }
  .evidence-lane { padding: 20px; }
  .engineering-card-cover { min-height: 12rem; padding: 20px; }
  .pipeline-comparison, .classifier-figure { padding: 22px 18px; }
  .pipeline-state { padding: 20px 16px; }
  .classifier-row { grid-template-columns: minmax(0, 1fr) 2rem; gap: 10px 14px; }
  .classifier-track { grid-column: 1 / -1; grid-row: 2; }
  .classifier-count { grid-column: 2; grid-row: 1; }
}
@media (max-width: 24rem) {
  .cover-migration-line { grid-template-columns: 1fr; }
  .cover-migration-line .cover-arrow { transform: rotate(90deg); }
  .cover-ai-flow { grid-template-columns: 1fr; }
  .cover-ai-flow .cover-arrow { transform: rotate(90deg); }
  .pipeline-copies, .pipeline-callers { grid-template-columns: 1fr; }
  .cover-azure-spokes { grid-template-columns: 1fr; }
  .cover-modernization-estate,
  .cover-modernization-target { grid-template-columns: 1fr; }
}
@media print {
  .evidence-lane, .engineering-card-cover, .pipeline-comparison, .classifier-figure { break-inside: avoid; }
}