style(surface): polish Govern Act layout and doctrine transitions

Author: ccamel

src/App.vue

@@ -218,7 +218,6 @@ onBeforeUnmount(() => {
 
 <template>
   <main class="surface-home" :class="{ 'is-reduced-motion': prefersReducedMotion }">
-
     <section class="surface-document" aria-label="Axone Surface">
       <nav class="surface-bar" aria-label="Surface heading">
         <p class="surface-mark">AXONE <span class="surface-mark-separator">/</span> SURFACE</p>
@@ -390,23 +389,24 @@ onBeforeUnmount(() => {
       </nav>
 
       <header class="doctrine-hero">
-        <Transition name="law-fade" mode="out-in">
-          <p
-            :key="activeLaw.id"
-            class="law-line"
-            :aria-label="`${activeLaw.number} / ${activeLaw.title} - ${activeLaw.paraphrase}`"
-            aria-live="polite"
-            aria-atomic="true"
-          >
-            <span class="law-number">{{ activeLaw.number }}</span>
-            <span class="law-content">
-              <span class="law-title">{{ activeLaw.title }}</span>
-              <span class="law-separator" aria-hidden="true">—</span>
-              <span class="law-paraphrase">{{ activeLaw.paraphrase }}</span>
+        <p
+          class="law-line"
+          :aria-label="`${activeLaw.number} / ${activeLaw.title} - ${activeLaw.paraphrase}`"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          <Transition name="law-fade" mode="out-in">
+            <span :key="activeLaw.id" class="law-statement">
+              <span class="law-number">{{ activeLaw.number }}</span>
+              <span class="law-content">
+                <span class="law-title">{{ activeLaw.title }}</span>
+                <span class="law-separator" aria-hidden="true">—</span>
+                <span class="law-paraphrase">{{ activeLaw.paraphrase }}</span>
+              </span>
             </span>
-            <span class="law-rule" aria-hidden="true"></span>
-          </p>
-        </Transition>
+          </Transition>
+          <span class="law-rule" aria-hidden="true"></span>
+        </p>
         <h1>GOVERN<br /><span class="act">ACT</span></h1>
         <p class="actor-line" aria-live="polite" aria-atomic="true">
           <Transition name="actor-turn" mode="out-in">

src/styles.css

@@ -79,8 +79,6 @@
     background: var(--color-surface-bg);
   }
 
-
-
   .surface-document {
     position: relative;
     z-index: 1;
@@ -544,6 +542,14 @@
     word-break: break-word;
   }
 
+  .law-statement {
+    display: flex;
+    flex: 0 1 auto;
+    gap: 12px;
+    align-items: baseline;
+    min-width: 0;
+  }
+
   .law-number {
     flex: none;
     color: var(--color-surface-gold);
@@ -609,7 +615,7 @@
   }
 
   .doctrine-hero h1 .act {
-    color: var(--color-surface-text-quiet);
+    color: #5a574d;
     font-style: italic;
   }
 
@@ -994,13 +1000,19 @@
 
     .law-line {
       display: grid;
-      grid-template-columns: auto minmax(0, 1fr);
-      gap: 8px 10px;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 8px;
       width: 100%;
       max-width: 100%;
       line-height: 1.4;
     }
 
+    .law-statement {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      gap: 10px;
+    }
+
     .law-content {
       display: block;
     }
@@ -1589,21 +1601,6 @@
       margin: 16px 0 0;
     }
   }
-
-  @media (min-width: 761px) {
-    .surface-act-stream {
-      --surface-act-gutter: clamp(24px, 4vw, 64px);
-      width: 100vw;
-      margin-left: calc(50% - 50vw);
-      padding-right: var(--surface-act-gutter);
-      padding-left: var(--surface-act-gutter);
-    }
-
-    .surface-act-stream-head {
-      padding-right: 0;
-      padding-left: 0;
-    }
-  }
 }
 
 @keyframes heartbeat {