diff --git a/site/css/components.css b/site/css/components.css
index c33218f..d87cfcd 100644
--- a/site/css/components.css
+++ b/site/css/components.css
@@ -3608,7 +3608,7 @@ html[data-theme="halo"] aside {
 
 .study-card__media {
   position: relative;
-  aspect-ratio: 16 / 10;
+  aspect-ratio: 16 / 7;
   background: var(--color-paper-2);
   border-block-end: var(--rule-card, 1px) solid var(--color-rule);
   overflow: hidden;
@@ -3651,15 +3651,21 @@ html[data-theme="halo"] aside {
 
 [data-theme="riso"] .study-card__badge { text-transform: lowercase; }
 
-/* DNA panel — structured 10-field key/value table. */
+/* DNA panel — structured 10-field key/value table. Tightened vertical
+   rhythm so the study card doesn't dominate the page: panel padding
+   one step lighter, per-row padding-block reduced from sm → xs. */
 .study-card__dna {
   list-style: none;
   margin: 0;
-  padding: var(--space-md) var(--space-lg) var(--space-lg);
+  padding: var(--space-sm) var(--space-md) var(--space-md);
   display: grid;
   gap: 0;
 }
 
+.study-card__dna .dna__row {
+  padding-block: var(--space-xs);
+}
+
 .dna__row {
   display: grid;
   grid-template-columns: 8.5rem 1fr;
diff --git a/site/css/sections.css b/site/css/sections.css
index 93153df..9ec886a 100644
--- a/site/css/sections.css
+++ b/site/css/sections.css
@@ -656,6 +656,13 @@
   grid-template-columns: 1fr;
 }
 
+/* Mobile — only show one study example. Two stacked DNA cards (image
+   + 10-field key/value table each) eat too much vertical scroll on
+   phones; one example is enough to make the point. */
+@media (max-width: 48rem) {
+  .skill-row__body--study .study-card + .study-card { display: none; }
+}
+
 .skill-row__demo {
   position: relative;
   margin: 0;