feat: one plate rule for every card, with scroll-linked entrances

Panels, records and grid groups share .plate: a registration plate, a
lit accent edge, focus that reads like hover, and a 28 px rise with a
top-down unmask on view() entry, or an IntersectionObserver fallback.

src/components/ExperienceTimeline.vue

@@ -10,7 +10,7 @@ defineProps<{
 <template>
   <ol class="experience-timeline">
     <li v-for="record in experience" :key="record.id">
-      <article class="experience-record">
+      <article class="experience-record plate plate--record">
         <h3>{{ record.role }}</h3>
         <p class="experience-record__meta">{{ record.organization }} · {{ record.dates }}<template v-if="record.location"> · {{ record.location }}</template></p>
         <ul>
@@ -20,7 +20,7 @@ defineProps<{
     </li>
   </ol>
 
-  <article class="systems-operations">
+  <article class="systems-operations plate plate--panel">
     <h3>{{ systemsOperations.title }}</h3>
     <p>{{ systemsOperations.summary }}</p>
     <ul>

src/components/InfrastructureDiagram.vue

@@ -6,7 +6,7 @@ defineProps<{ infrastructure: Readonly<InfrastructureCaseStudy> }>();
 </script>
 
 <template>
-  <article class="infrastructure-case">
+  <article class="infrastructure-case plate plate--panel">
     <h3 :id="`${infrastructure.id}-diagram-title`">
       {{ infrastructure.title }}
     </h3>

src/components/ProjectCard.vue

@@ -16,7 +16,7 @@ withDefaults(defineProps<{
 
 <template>
   <article
-    class="project-card"
+    class="project-card plate plate--panel"
     :data-project-id="project.id"
     :data-maturity="project.maturity"
     :data-media-layout="project.mediaLayout ?? 'none'"

src/components/ToolkitGrid.vue

@@ -8,7 +8,7 @@ defineProps<{ groups: readonly ToolkitGroup[] }>();
 
 <template>
   <div class="toolkit-grid">
-    <section v-for="group in groups" :key="group.title" class="toolkit-group" :aria-labelledby="`${group.title}-heading`">
+    <section v-for="group in groups" :key="group.title" class="toolkit-group plate plate--grid" :aria-labelledby="`${group.title}-heading`">
       <h3 :id="`${group.title}-heading`">{{ group.title }}</h3>
       <ul class="toolkit-items">
         <li v-for="technology in group.technologies" :key="technology.name" class="toolkit-item" data-testid="toolkit-technology">