diff --git a/README.md b/README.md
index 8495103..29fac79 100644
--- a/README.md
+++ b/README.md
@@ -214,10 +214,11 @@ only loads when clicked, so the page stays fast even with many videos.
 }
 ```
 
-| field   | required? | notes |
-|---------|-----------|-------|
-| `id`    | yes       | YouTube video ID (the `v=` parameter from the URL). |
-| `title` | yes       | Shown over the thumbnail and as the iframe's accessible title. |
+| field      | required? | notes |
+|------------|-----------|-------|
+| `id`       | yes       | YouTube video ID (the `v=` parameter from the URL). |
+| `title`    | yes       | Shown over the thumbnail and as the iframe's accessible title. |
+| `featured` | no        | When `true`, the video card spans the full row at 78% max-width centered (like a portfolio plate). Default layout is 2-per-row on tablet+. Use sparingly to promote a hero video. |
 
 #### `type: "client"` — logo tile
 
diff --git a/assets/css/styles.css b/assets/css/styles.css
index b90e76f..08484c7 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -270,22 +270,28 @@ main > .section:first-child { margin-top: var(--space-3xl); }
 @media (min-width: 600px) {
   .grid > .card--link    { grid-column: span 6; }
   .grid > .card--project { grid-column: span 6; }
+  .grid > .card--youtube { grid-column: span 6; }
 }
 @media (min-width: 960px) {
   .grid > .card--link    { grid-column: span 4; }
   .grid > .card--project { grid-column: span 6; }
+  .grid > .card--youtube { grid-column: span 6; }
   .grid > .card--featured{ grid-column: span 8; }
 }
 
-/* portfolio + video items — full row on mobile, ~78% centered with extra breathing */
-.grid > .card--portfolio,
-.grid > .card--youtube {
+/* portfolio item — always full row, capped at 78% with breathing room */
+.grid > .card--portfolio {
+  grid-column: span 12;
+  margin-block: clamp(0.5rem, 1.5vw, 1.25rem);
+}
+/* featured/wide youtube — opt-in via `featured: true` in JSON */
+.grid > .card--youtube.card--wide {
   grid-column: span 12;
   margin-block: clamp(0.5rem, 1.5vw, 1.25rem);
 }
 @media (min-width: 700px) {
   .grid > .card--portfolio,
-  .grid > .card--youtube {
+  .grid > .card--youtube.card--wide {
     width: 100%;
     max-width: 78%;
     justify-self: center;
diff --git a/assets/js/app.js b/assets/js/app.js
index cbb5e53..8cce617 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -60,8 +60,9 @@
   }
 
   function renderYouTube(it) {
+    const wide = it.featured ? " card--wide" : "";
     return `
-      <div class="card card--youtube reveal">
+      <div class="card card--youtube${wide} reveal">
         <div class="yt" role="button" tabindex="0" aria-label="Play: ${esc(it.title)}" data-yt="${esc(it.id)}" style="background-image:url('${esc(ytThumb(it.id))}')">
           <div class="yt__play" aria-hidden="true">
             <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>