feat(portfolio): add featured project dossier card

components/portfolio/CapabilityRows.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { m, useReducedMotion } from "motion/react";
+
+import { capabilities } from "@/lib/portfolio";
+
+export function CapabilityRows() {
+  const shouldReduceMotion = useReducedMotion();
+
+  return (
+    <section
+      id="capabilities"
+      aria-labelledby="capabilities-heading"
+      className="mx-auto max-w-7xl px-4 py-20 text-blacksite-text sm:px-6 sm:py-28 lg:px-8"
+    >
+      <div className="mb-10 flex items-end justify-between gap-6">
+        <div>
+          <p className="section-label mb-3">CAPABILITIES</p>
+          <h2
+            id="capabilities-heading"
+            className="font-display text-3xl font-semibold tracking-[-0.05em] text-blacksite-text sm:text-5xl"
+          >
+            Built for hostile constraints.
+          </h2>
+        </div>
+        <p className="section-label hidden text-right sm:block">/.01—/.05</p>
+      </div>
+
+      <div className="border-t border-blacksite-line">
+        {capabilities.map((capability, index) => (
+          <m.div
+            key={capability.index}
+            className="grid gap-5 border-b border-blacksite-line py-6 sm:grid-cols-[1fr_auto] sm:items-center sm:py-8"
+            initial={shouldReduceMotion ? false : { opacity: 0, y: 14 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: "-12%" }}
+            transition={{
+              duration: shouldReduceMotion ? 0 : 0.45,
+              delay: shouldReduceMotion ? 0 : index * 0.07,
+              ease: "easeOut",
+            }}
+          >
+            <p className="font-display text-[clamp(28px,4.5vw,64px)] font-semibold leading-[0.95] tracking-[-0.06em] text-blacksite-text">
+              {capability.text}
+            </p>
+            <p className="section-label text-left text-blacksite-faint sm:text-right">
+              /.{capability.index}
+            </p>
+          </m.div>
+        ))}
+      </div>
+    </section>
+  );
+}

components/portfolio/FeaturedDossier.tsx

@@ -34,7 +34,7 @@ export function FeaturedDossier() {
             id="featured-dossier-title"
             className="font-display translate-y-4 text-[clamp(4.5rem,18vw,15rem)] font-semibold uppercase leading-[0.72] tracking-[-0.08em] text-blacksite-text"
           >
-            {featuredDossier.title}
+            {featuredDossier.title.toUpperCase()}
           </h2>
         </div>
 
@@ -74,7 +74,7 @@ export function FeaturedDossier() {
                     key={link.href}
                     href={link.href}
                     target="_blank"
-                    rel="noreferrer"
+                    rel="noopener noreferrer"
                     className="group flex items-center justify-between gap-4 border border-blacksite-line px-4 py-3 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-text transition-colors hover:border-signal-cyan/70 hover:text-signal-cyan focus-visible:outline-signal-cyan"
                   >
                     <span>{link.label}</span>

components/portfolio/Manifesto.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { m, useReducedMotion } from "motion/react";
+
+import { manifesto } from "@/lib/portfolio";
+
+export function Manifesto() {
+  const shouldReduceMotion = useReducedMotion();
+  const [beforeSurvive, afterSurvive = ""] = manifesto.split("survive contact");
+  const [betweenAccents, afterProof = ""] = afterSurvive.split("proof");
+
+  return (
+    <m.section
+      aria-labelledby="manifesto-heading"
+      className="mx-auto max-w-7xl px-4 py-20 text-blacksite-muted sm:px-6 sm:py-28 lg:px-8"
+      initial={shouldReduceMotion ? false : { opacity: 0, y: 18 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "-15%" }}
+      transition={{ duration: shouldReduceMotion ? 0 : 0.6, ease: "easeOut" }}
+    >
+      <p className="section-label mb-6">OPERATING PRINCIPLE</p>
+      <h2
+        id="manifesto-heading"
+        className="max-w-5xl font-display text-[clamp(28px,4vw,56px)] font-semibold leading-[0.98] tracking-[-0.06em] text-blacksite-muted"
+      >
+        {beforeSurvive}
+        <span className="text-signal-cyan">survive contact</span>
+        {betweenAccents}
+        <span className="text-signal-orange">proof</span>
+        {afterProof}
+      </h2>
+    </m.section>
+  );
+}