.architecture-page {
  --architecture-width: 1240px;
  background: #090b0e;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 12px 16px;
  color: #090b0e;
  background: var(--cyan);
  font: 900 13px/1 ui-monospace, monospace;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.architecture-header .nav-shell {
  width: min(var(--architecture-width), calc(100% - 48px));
}

.architecture-header nav a {
  color: #a8b1b8;
}

.architecture-header nav a:hover {
  color: var(--lime);
}

.architecture-home-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #090b0e;
  background: var(--lime);
  padding: 0 15px;
  font: 900 12px/1 ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.architecture-main {
  width: min(var(--architecture-width), calc(100% - 48px));
}

.architecture-hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  align-items: center;
  gap: 90px;
  padding: 92px 0 96px;
  border-bottom: 1px solid var(--line);
}

.architecture-kicker,
.architecture-label {
  margin: 0;
  color: #a1abb3;
  font: 800 12px/1.4 ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.architecture-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
}

.architecture-kicker span:first-child {
  color: var(--orange);
}

.architecture-kicker span + span::before {
  content: "/";
  margin-right: 14px;
  color: #4e5a64;
}

.architecture-hero h1 {
  max-width: 850px;
  margin: 34px 0 30px;
  font: 900 clamp(64px, 8vw, 118px) / 0.82 Arial Black, Impact, sans-serif;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.architecture-hero h1 em {
  color: var(--lime);
  font-style: normal;
}

.architecture-lede {
  max-width: 760px;
  color: #b2bac0;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.65;
}

.architecture-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 34px;
}

.architecture-tags span {
  padding: 10px 12px;
  border: 1px solid #3b4650;
  color: #b6bec4;
  font: 800 12px/1 ui-monospace, monospace;
  text-transform: uppercase;
}

.mental-model {
  border: 1px solid #394550;
  border-top: 3px solid var(--cyan);
  padding: 28px;
  background: #10151a;
  box-shadow: var(--shadow);
}

.mental-model h2 {
  margin: 13px 0 26px;
  font: 900 28px/1.05 Arial Black, Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.025em;
}

.mental-model ol {
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid #303a43;
}

.mental-model li {
  min-height: 58px;
  display: grid;
  grid-template-columns: 35px 1fr auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #303a43;
}

.mental-model li > span {
  color: var(--orange);
  font: 900 12px/1 ui-monospace, monospace;
}

.mental-model li b {
  font-size: 15px;
}

.mental-model li small {
  color: #9da7af;
  font: 800 12px/1 ui-monospace, monospace;
  text-transform: uppercase;
}

.loop-note {
  margin: 22px 0 0;
  padding: 14px;
  color: #b3bbc1;
  background: #0b0f13;
  border-left: 2px solid var(--lime);
  font-size: 14px;
  line-height: 1.6;
}

.architecture-section {
  padding: 112px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 74px;
}

.architecture-section-heading {
  max-width: 850px;
  margin-bottom: 52px;
}

.architecture-section-heading h2 {
  margin: 16px 0 18px;
  font: 900 clamp(42px, 5.5vw, 72px) / 0.92 Arial Black, Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.05em;
}

.architecture-section-heading > p:last-child {
  max-width: 740px;
  margin-bottom: 0;
  color: #aab3ba;
  font-size: 17px;
  line-height: 1.7;
}

.compact-heading {
  max-width: 900px;
}

.system-map {
  position: relative;
  padding: 36px;
  border: 1px solid #38434c;
  background: #0c1014;
  overflow: hidden;
}

.map-lane {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 70px minmax(190px, 1.15fr) 70px minmax(190px, 1.15fr) 70px minmax(170px, 1fr);
  align-items: stretch;
  gap: 0;
  position: relative;
  padding-top: 32px;
}

.map-lane-name {
  position: absolute;
  top: 0;
  left: 0;
  color: #8e99a2;
  font: 900 12px/1 ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.map-node {
  min-width: 0;
  padding: 20px;
  border: 1px solid #39454f;
  background: #12171c;
}

.node-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #9ba5ad;
  font: 800 12px/1 ui-monospace, monospace;
  text-transform: uppercase;
}

.node-topline b {
  color: #9ba5ad;
}

.map-node h3 {
  margin: 24px 0 12px;
  font: 900 21px/1 Arial Black, Impact, sans-serif;
  text-transform: uppercase;
}

.map-node p {
  min-height: 66px;
  color: #aab3b9;
  font-size: 14px;
  line-height: 1.55;
}

.map-node ul {
  display: grid;
  gap: 8px;
  padding: 15px 0 0;
  margin: 0;
  border-top: 1px solid #303941;
  list-style: none;
}

.map-node li {
  position: relative;
  padding-left: 14px;
  color: #bdc4c9;
  font-size: 12px;
  line-height: 1.35;
}

.map-node li::before {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  left: 0;
  top: 6px;
  background: var(--cyan);
}

.map-control {
  border-top: 3px solid var(--lime);
}

.map-runner {
  border-top: 3px solid var(--orange);
}

.map-cs2 {
  border-top: 3px solid var(--cyan);
}

.map-connector {
  min-width: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: #84909a;
  text-align: center;
  font: 800 12px/1.25 ui-monospace, monospace;
  text-transform: uppercase;
}

.map-connector i {
  color: var(--lime);
  font: normal 24px/1 ui-monospace, monospace;
}

.outbound-connector i {
  color: var(--orange);
}

.database-branch {
  width: min(430px, 36%);
  margin: 64px 0 0 22.5%;
  position: relative;
}

.branch-line {
  width: 1px;
  height: 65px;
  position: absolute;
  top: -65px;
  left: 50%;
  background: #4b5862;
}

.branch-line::before,
.branch-line::after {
  content: "";
  position: absolute;
  left: -4px;
  width: 9px;
  height: 9px;
  background: #4b5862;
  transform: rotate(45deg);
}

.branch-line::before {
  top: -1px;
}

.branch-line::after {
  bottom: -1px;
}

.map-database {
  border-top: 3px solid #8f7cff;
}

.map-database p {
  min-height: 0;
}

.database-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.database-chips span {
  padding: 6px 8px;
  color: #c3bbc9;
  border: 1px solid #4a4257;
  font: 800 12px/1 ui-monospace, monospace;
  text-transform: uppercase;
}

.game-lane {
  display: grid;
  grid-template-columns: 210px minmax(160px, 1fr) 260px;
  align-items: center;
  gap: 18px;
  position: relative;
  margin-top: 54px;
  padding: 52px 24px 24px;
  border: 1px dashed #3e4b55;
  background: #0a0d10;
}

.game-lane .map-lane-name {
  top: 18px;
  left: 24px;
}

.game-player {
  display: flex;
  align-items: center;
  gap: 13px;
}

.game-player > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #090b0e;
  background: var(--lime);
  font: 900 12px/1 ui-monospace, monospace;
}

.game-player div {
  display: grid;
  gap: 4px;
}

.game-player b,
.game-destination b {
  font-size: 14px;
}

.game-player small,
.game-destination small {
  color: #9aa4ac;
  font-size: 12px;
}

.game-route {
  min-width: 0;
  display: grid;
  gap: 10px;
  color: #a8b1b8;
  text-align: center;
  font: 800 12px/1.35 ui-monospace, monospace;
  text-transform: uppercase;
}

.game-route i {
  height: 2px;
  position: relative;
  background: var(--cyan);
}

.game-route i::after {
  content: "";
  width: 9px;
  height: 9px;
  position: absolute;
  top: -4px;
  right: 0;
  border-top: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
  transform: rotate(45deg);
}

.game-destination {
  display: grid;
  gap: 5px;
  padding: 16px;
  border-left: 3px solid var(--cyan);
  background: #111820;
}

.boundary-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.boundary-notes article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 15px;
  padding: 22px;
  border: 1px solid var(--line);
  background: #0e1216;
}

.note-number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #090b0e;
  background: var(--orange);
  font: 900 14px/1 ui-monospace, monospace;
}

.boundary-notes h3 {
  margin: 1px 0 10px;
  font: 900 16px/1.1 Arial Black, Impact, sans-serif;
  text-transform: uppercase;
}

.boundary-notes p {
  margin: 0;
  color: #a9b2b9;
  font-size: 13px;
  line-height: 1.6;
}

.lifecycle {
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid #35414a;
}

.lifecycle > li {
  min-height: 130px;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 170px;
  align-items: center;
  gap: 34px;
  padding: 24px 18px;
  border-bottom: 1px solid #35414a;
  transition: background 160ms ease;
}

.lifecycle > li:hover {
  background: #10151a;
}

.lifecycle-index {
  display: flex;
  align-items: center;
  gap: 15px;
}

.lifecycle-index span {
  color: var(--orange);
  font: 900 30px/1 Arial Black, Impact, sans-serif;
}

.lifecycle-index small {
  color: #9ca6ae;
  font: 800 12px/1.3 ui-monospace, monospace;
  text-transform: uppercase;
}

.lifecycle h3 {
  margin: 0 0 9px;
  font: 900 21px/1 Arial Black, Impact, sans-serif;
  text-transform: uppercase;
}

.lifecycle p {
  max-width: 740px;
  margin: 0;
  color: #abb4ba;
  font-size: 14px;
  line-height: 1.6;
}

.lifecycle code,
.mode-card code {
  color: var(--cyan);
  font-family: ui-monospace, monospace;
}

.lifecycle-owner {
  justify-self: end;
  padding: 8px 10px;
  color: #b8c0c5;
  border: 1px solid #3b4650;
  font: 800 12px/1 ui-monospace, monospace;
  text-align: center;
  text-transform: uppercase;
}

.capacity-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.capacity-card,
.queue-card {
  padding: 28px;
  border: 1px solid #39444d;
  background: #10151a;
}

.capacity-duel {
  border-top: 3px solid var(--cyan);
}

.capacity-team {
  border-top: 3px solid var(--lime);
}

.capacity-card-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  color: #9fa9b1;
  font: 800 12px/1 ui-monospace, monospace;
  text-transform: uppercase;
}

.capacity-card-top strong {
  color: #929ca4;
  font: 900 64px/0.75 Arial Black, Impact, sans-serif;
}

.capacity-card h3,
.queue-card h3 {
  margin: 30px 0 20px;
  font: 900 24px/1 Arial Black, Impact, sans-serif;
  text-transform: uppercase;
}

.capacity-card p,
.queue-card p {
  margin: 20px 0 0;
  color: #aab3ba;
  font-size: 14px;
  line-height: 1.6;
}

.instance-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.instance-row i {
  min-height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid #3a6670;
  color: var(--cyan);
  background: #0b1216;
  font: normal 900 12px/1 ui-monospace, monospace;
}

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

.team-instances i {
  color: var(--lime);
  border-color: #596329;
  background: #111409;
}

.queue-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 25px;
  background: #0c1014;
}

.queue-icon {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 1px dashed #59656f;
  color: var(--orange);
  font: 900 22px/1 ui-monospace, monospace;
}

.queue-card h3,
.queue-card p {
  margin-top: 0;
}

.secret-matrix {
  overflow-x: auto;
  border: 1px solid #39454e;
}

.secret-matrix table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: #0d1115;
}

.secret-matrix th,
.secret-matrix td {
  min-height: 64px;
  padding: 18px;
  border-right: 1px solid #303a42;
  border-bottom: 1px solid #303a42;
  text-align: left;
  font-size: 13px;
}

.secret-matrix thead th {
  color: #9ca6ae;
  background: #141a20;
  font: 800 12px/1.3 ui-monospace, monospace;
  text-transform: uppercase;
}

.secret-matrix tbody th {
  color: #e0e4e1;
  font-weight: 800;
}

.secret-matrix tr:last-child th,
.secret-matrix tr:last-child td {
  border-bottom: 0;
}

.secret-matrix th:last-child,
.secret-matrix td:last-child {
  border-right: 0;
}

.matrix-no,
.matrix-yes,
.matrix-limited {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 8px;
  font: 800 12px/1 ui-monospace, monospace;
  text-transform: uppercase;
}

.matrix-no {
  color: #ff9aa7;
  border: 1px solid #603841;
}

.matrix-yes {
  color: var(--lime);
  border: 1px solid #596329;
}

.matrix-limited {
  color: var(--cyan);
  border: 1px solid #35616b;
}

.guardrail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.guardrail-grid article {
  padding: 22px;
  border: 1px solid var(--line);
  background: #101419;
}

.guardrail-grid article > span {
  color: var(--orange);
  font: 900 12px/1 ui-monospace, monospace;
  letter-spacing: 0.12em;
}

.guardrail-grid h3 {
  min-height: 42px;
  margin: 24px 0 12px;
  font: 900 17px/1.1 Arial Black, Impact, sans-serif;
  text-transform: uppercase;
}

.guardrail-grid p {
  margin: 0;
  color: #aab3ba;
  font-size: 13px;
  line-height: 1.6;
}

.recovery-loop {
  display: grid;
  grid-template-columns: 1fr 270px 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}

.recovery-loop article,
.recovery-center {
  min-height: 210px;
  padding: 26px;
  border: 1px solid #39454e;
  background: #10151a;
}

.recovery-loop article:nth-of-type(1) {
  grid-column: 1;
  grid-row: 1;
}

.recovery-loop article:nth-of-type(2) {
  grid-column: 3;
  grid-row: 1;
}

.recovery-loop article:nth-of-type(3) {
  grid-column: 1;
  grid-row: 2;
}

.recovery-loop article:nth-of-type(4) {
  grid-column: 3;
  grid-row: 2;
}

.recovery-loop article > span {
  color: var(--orange);
  font: 900 12px/1 ui-monospace, monospace;
}

.recovery-loop h3 {
  margin: 28px 0 12px;
  font: 900 18px/1 Arial Black, Impact, sans-serif;
  text-transform: uppercase;
}

.recovery-loop p {
  margin: 0;
  color: #aab3ba;
  font-size: 13px;
  line-height: 1.6;
}

.recovery-center {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  place-content: center;
  text-align: center;
  border-color: #63702e;
  background: #13170c;
}

.recovery-center span {
  color: var(--lime);
  font: 900 12px/1 ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.recovery-center strong {
  margin-top: 18px;
  font: 900 24px/1.1 Arial Black, Impact, sans-serif;
  text-transform: uppercase;
}

.recovery-rule {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 20px 24px;
  border-left: 3px solid var(--lime);
  background: #101419;
}

.recovery-rule > span {
  color: var(--lime);
  font-size: 38px;
}

.recovery-rule p {
  margin: 0;
  color: #bdc4c9;
  font-size: 15px;
  line-height: 1.6;
}

.mode-comparison {
  display: grid;
  grid-template-columns: 1fr 110px 1fr;
  align-items: stretch;
  gap: 18px;
}

.mode-card {
  padding: 28px;
  border: 1px solid #39454e;
  background: #10151a;
}

.current-mode {
  border-top: 3px solid var(--cyan);
}

.target-mode {
  border-top: 3px solid var(--lime);
}

.mode-status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #a8b1b8;
  font: 800 12px/1 ui-monospace, monospace;
  text-transform: uppercase;
}

.mode-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.target-mode .mode-status i {
  background: var(--lime);
  box-shadow: none;
}

.mode-card h3 {
  margin: 30px 0 24px;
  font: 900 24px/1 Arial Black, Impact, sans-serif;
  text-transform: uppercase;
}

.mode-card ul {
  display: grid;
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mode-card li {
  padding-bottom: 14px;
  border-bottom: 1px solid #303a42;
  color: #abb4ba;
  font-size: 13px;
  line-height: 1.55;
}

.mode-card li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.mode-card li b {
  color: #e1e5e1;
}

.mode-arrow {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: #8f9aa2;
  text-align: center;
  font: 800 12px/1.3 ui-monospace, monospace;
  text-transform: uppercase;
}

.mode-arrow i {
  color: var(--orange);
  font: normal 28px/1 ui-monospace, monospace;
}

.production-note {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  margin-top: 14px;
  padding: 24px 28px;
  border: 1px solid #544637;
  background: #17130f;
}

.production-note span {
  color: var(--orange);
  font: 900 12px/1.4 ui-monospace, monospace;
  text-transform: uppercase;
}

.production-note p {
  margin: 0;
  color: #c1b9b2;
  font-size: 14px;
  line-height: 1.65;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.glossary-grid details {
  min-height: 72px;
  border: 1px solid #36414a;
  background: #101419;
}

.glossary-grid summary {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  cursor: pointer;
  font: 900 15px/1.2 Arial Black, Impact, sans-serif;
  text-transform: uppercase;
}

.glossary-grid summary::after {
  content: "+";
  color: var(--lime);
  font: 900 22px/1 ui-monospace, monospace;
}

.glossary-grid details[open] summary::after {
  content: "−";
}

.glossary-grid details p {
  margin: 0;
  padding: 0 18px 20px;
  color: #abb4ba;
  font-size: 13px;
  line-height: 1.6;
}

.architecture-summary {
  min-height: 520px;
  display: grid;
  place-content: center;
  justify-items: start;
  padding: 100px 0;
}

.architecture-summary h2 {
  max-width: 1060px;
  margin: 20px 0 38px;
  font: 900 clamp(38px, 5.7vw, 72px) / 0.98 Arial Black, Impact, sans-serif;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.architecture-summary .primary {
  min-height: 52px;
  font-size: 12px;
}

.architecture-footer {
  width: min(var(--architecture-width), calc(100% - 48px));
}

@media (max-width: 1120px) {
  .architecture-header nav {
    display: none;
  }

  .architecture-hero {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .mental-model {
    max-width: 650px;
  }

  .map-lane {
    grid-template-columns: 1fr 54px 1fr;
    row-gap: 30px;
  }

  .map-browser {
    grid-column: 1;
    grid-row: 1;
  }

  .map-lane > .map-connector:nth-of-type(1) {
    grid-column: 2;
    grid-row: 1;
  }

  .map-control {
    grid-column: 3;
    grid-row: 1;
  }

  .outbound-connector {
    grid-column: 2;
    grid-row: 2;
  }

  .map-runner {
    grid-column: 1;
    grid-row: 2;
  }

  .map-lane > .map-connector:nth-of-type(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .map-cs2 {
    grid-column: 3;
    grid-row: 2;
  }

  .database-branch {
    width: calc(50% - 27px);
    margin-left: calc(50% + 27px);
  }

  .boundary-notes,
  .guardrail-grid {
    grid-template-columns: 1fr 1fr;
  }

  .guardrail-grid article:last-child,
  .boundary-notes article:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .architecture-main,
  .architecture-header .nav-shell,
  .architecture-footer {
    width: calc(100% - 28px);
  }

  .architecture-home-link {
    padding: 0 10px;
    font-size: 12px;
  }

  .architecture-hero {
    min-height: auto;
    padding: 62px 0 72px;
  }

  .architecture-hero h1 {
    font-size: clamp(52px, 15vw, 82px);
  }

  .architecture-section {
    padding: 82px 0;
  }

  .system-map {
    padding: 22px;
  }

  .map-lane {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .map-lane-name {
    position: static;
    margin-bottom: 8px;
  }

  .map-connector {
    min-height: 44px;
  }

  .map-connector i {
    transform: rotate(90deg);
  }

  .outbound-connector {
    order: 5;
  }

  .outbound-connector i {
    transform: rotate(-90deg);
  }

  .map-runner {
    order: 6;
  }

  .map-lane > .map-connector:nth-of-type(3) {
    order: 7;
  }

  .map-cs2 {
    order: 8;
  }

  .map-node p {
    min-height: 0;
  }

  .database-branch {
    width: 100%;
    margin: 62px 0 0;
  }

  .branch-line {
    height: 62px;
    top: -62px;
  }

  .game-lane {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .game-route i::after {
    right: 2px;
  }

  .boundary-notes,
  .guardrail-grid,
  .capacity-layout,
  .glossary-grid {
    grid-template-columns: 1fr;
  }

  .boundary-notes article:last-child,
  .guardrail-grid article:last-child {
    grid-column: auto;
  }

  .lifecycle > li {
    grid-template-columns: 115px 1fr;
    gap: 20px;
  }

  .lifecycle-owner {
    grid-column: 2;
    justify-self: start;
  }

  .recovery-loop {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .recovery-center {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 170px;
  }

  .recovery-loop article:nth-of-type(1),
  .recovery-loop article:nth-of-type(2),
  .recovery-loop article:nth-of-type(3),
  .recovery-loop article:nth-of-type(4) {
    grid-column: auto;
    grid-row: auto;
  }

  .mode-comparison {
    grid-template-columns: 1fr;
  }

  .mode-arrow {
    min-height: 80px;
  }

  .mode-arrow i {
    transform: rotate(90deg);
  }
}

@media (max-width: 560px) {
  .architecture-header .brand small {
    display: none;
  }

  .architecture-home-link {
    max-width: 115px;
    text-align: center;
    line-height: 1.2;
  }

  .architecture-kicker {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .architecture-kicker span + span::before {
    content: none;
  }

  .architecture-hero h1 {
    margin-top: 25px;
  }

  .mental-model,
  .system-map,
  .capacity-card,
  .queue-card,
  .mode-card {
    padding: 20px;
  }

  .architecture-section-heading {
    margin-bottom: 38px;
  }

  .architecture-section-heading h2 {
    font-size: 42px;
  }

  .boundary-notes article {
    grid-template-columns: 1fr;
  }

  .lifecycle > li {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 8px;
  }

  .lifecycle-owner {
    grid-column: auto;
  }

  .queue-card {
    grid-template-columns: 1fr;
  }

  .recovery-loop {
    grid-template-columns: 1fr;
  }

  .recovery-center {
    grid-column: auto;
  }

  .recovery-rule,
  .production-note {
    grid-template-columns: 1fr;
  }

  .production-note {
    gap: 10px;
  }

  .architecture-summary {
    min-height: 430px;
  }

  .architecture-summary h2 br {
    display: none;
  }

  .architecture-footer {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .architecture-footer span {
    width: 100%;
    margin-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lifecycle > li {
    transition: none;
  }
}