feat: surface availability and operations evidence

src/styles/components.css

@@ -23,6 +23,19 @@
   font-size: var(--step-0);
 }
 
+.hero-journey__availability {
+  max-inline-size: 52ch;
+  color: var(--text-muted);
+  font-size: var(--step--1);
+}
+
+.hero-journey__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  align-items: center;
+}
+
 .hero-journey__action,
 .project-link,
 .contact-link,
@@ -43,6 +56,17 @@
   text-decoration: none;
 }
 
+.hero-journey__action--primary {
+  padding-inline: 0.9rem;
+  border: 1px solid var(--cyan);
+  background: var(--cyan);
+  color: #041017;
+}
+
+.hero-journey__action--primary::after {
+  content: none;
+}
+
 .hero-journey__action::after {
   content: "→";
   transition: transform var(--transition);
@@ -189,6 +213,50 @@
   background: rgb(5 12 23 / 90%);
 }
 
+.operations-proof {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: var(--space-2) var(--space-3);
+  margin-block-start: var(--space-3);
+  padding-block-start: var(--space-3);
+  border-block-start: 2px solid var(--line-strong);
+}
+
+.operations-proof > h4,
+.operations-proof__outcome {
+  grid-column: 1 / -1;
+  margin: 0;
+}
+
+.operations-proof > h4 {
+  color: var(--text);
+  font-size: var(--step-0);
+}
+
+.operations-proof > p:not(.operations-proof__outcome),
+.operations-proof > ol {
+  margin: 0;
+}
+
+.operations-proof > ol {
+  padding-inline-start: 1.2rem;
+}
+
+.operations-proof__outcome {
+  color: var(--text) !important;
+}
+
+@media (max-width: 48rem) {
+  .operations-proof {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .operations-proof > h4,
+  .operations-proof__outcome {
+    grid-column: auto;
+  }
+}
+
 .portfolio-section[data-layout="full-diagram"] figure {
   background: rgb(10 24 38 / 72%);
 }

src/styles/layout.css

@@ -85,6 +85,7 @@
 
 .hero-journey__content {
   display: grid;
+  min-inline-size: 0;
   inline-size: min(34rem, 39vw);
   gap: 1rem;
   padding: clamp(1.4rem, 2.2vw, 2.1rem);

src/styles/print.css

@@ -50,6 +50,20 @@
     margin-block-start: 0.4rem;
   }
 
+  .hero-journey__actions,
+  .operations-proof {
+    display: block;
+  }
+
+  .operations-proof {
+    margin-block-start: 1rem;
+    padding-block-start: 1rem;
+  }
+
+  .operations-proof > * + * {
+    margin-block-start: 0.6rem;
+  }
+
   .print-portfolio-label {
     display: block;
     margin-block: 0.25rem 1rem;