fix: validate responsive real-content targets

src/components/AppShell.vue

@@ -34,6 +34,7 @@ const canonicalNavigation = computed(() => canonicalSectionIds.map((id) => ({ id
   <header class="site-header">
     <h1>{{ content.identity.name }}</h1>
     <p>{{ content.identity.role }}</p>
+    <p class="print-portfolio-label" aria-hidden="true">Portfolio</p>
     <SiteNavigation :items="canonicalNavigation" />
   </header>
 

src/components/ContactDestination.vue

@@ -10,11 +10,11 @@ defineProps<{
 <template>
   <p>{{ identity.name }}</p>
   <p>{{ identity.role }}</p>
-  <a :href="`mailto:${contact.email}`">{{ contact.email }}</a>
+  <a class="contact-link" :href="`mailto:${contact.email}`">{{ contact.email }}</a>
   <p>{{ contact.cvMessage }}</p>
   <ul>
     <li v-for="link in contact.social" :key="link.service">
-      <a :href="link.url" target="_blank" rel="noopener noreferrer">{{ link.service }}</a>
+      <a class="contact-social-link" :href="link.url" target="_blank" rel="noopener noreferrer">{{ link.service }}</a>
     </li>
   </ul>
 </template>

src/components/ProjectCard.vue

@@ -10,6 +10,6 @@ defineProps<{ project: Readonly<PublicProject> }>();
     <p>{{ project.summary }}</p>
     <p>{{ project.contribution }}</p>
     <p>{{ project.outcome }}</p>
-    <a v-if="project.visibility === 'public' && project.url" :href="project.url" target="_blank" rel="noopener noreferrer">{{ project.title }}</a>
+    <a v-if="project.visibility === 'public' && project.url" class="project-link" :href="project.url" target="_blank" rel="noopener noreferrer">{{ project.title }}</a>
   </article>
 </template>

src/components/ProjectCaseStudy.vue

@@ -22,6 +22,6 @@ defineProps<{ project: Readonly<PublicProject> }>();
       <dt>Outcome</dt>
       <dd>{{ project.outcome }}</dd>
     </dl>
-    <a v-if="project.visibility === 'public' && project.url" :href="project.url" target="_blank" rel="noopener noreferrer">{{ project.title }}</a>
+    <a v-if="project.visibility === 'public' && project.url" class="project-link" :href="project.url" target="_blank" rel="noopener noreferrer">{{ project.title }}</a>
   </article>
 </template>

src/styles/base.css

@@ -109,6 +109,10 @@ canvas {
   transform: translateY(0);
 }
 
+.print-portfolio-label {
+  display: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,

src/styles/layout.css

@@ -88,6 +88,18 @@
   background: #0b111b;
 }
 
+@media (max-width: 767px) {
+  .project-link,
+  .contact-link,
+  .contact-social-link {
+    display: inline-flex;
+    align-items: center;
+    min-inline-size: 44px;
+    min-block-size: 44px;
+    padding-inline: 0.55rem;
+  }
+}
+
 @media (min-width: 768px) {
   .site-header {
     padding-inline: 5vw;

src/styles/print.css

@@ -35,6 +35,17 @@
     margin-block-end: 1.5rem;
   }
 
+  .print-portfolio-label {
+    display: block;
+    margin-block: 0.25rem 1rem;
+    color: var(--text-muted);
+    font-family: var(--mono);
+    font-size: 0.9rem;
+    font-weight: 650;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
   .portfolio-section {
     width: 100%;
     margin: 0 0 1.25rem;