Wire admin studio SSR and search infrastructure

resources/css/app.css

@@ -1,3 +1,13 @@
+/* ── Font Awesome font-display override ──────────────────────────────────
+   The CDN CSS doesn't set font-display, causing a Lighthouse FCP warning.
+   These @font-face blocks match the FA 6 font families by family name and
+   weight, adding font-display: swap without re-hosting the actual files.
+   The browser merges the descriptor with the CDN rule; `src` is omitted so
+   only the display hint is injected. */
+@font-face { font-family: 'Font Awesome 6 Free';   font-weight: 900; font-display: swap; src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-solid-900.woff2') format('woff2'); }
+@font-face { font-family: 'Font Awesome 6 Free';   font-weight: 400; font-display: swap; src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-regular-400.woff2') format('woff2'); }
+@font-face { font-family: 'Font Awesome 6 Brands'; font-weight: 400; font-display: swap; src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-brands-400.woff2') format('woff2'); }
+
 @font-face {
   font-family: 'Anton';
   font-style: normal;
@@ -540,10 +550,32 @@
   font-style: italic;
 }
 
-.tiptap hr {
+.tiptap hr,
+.story-prose hr {
+  position: relative;
   border: none;
-  border-top: 1px solid theme('colors.white / 10%');
-  margin: 1.5rem 0;
+  background: transparent;
+  height: 1.5rem;
+  margin: 2rem auto;
+  overflow: visible;
+}
+
+.tiptap hr::after,
+.story-prose hr::after {
+  content: '• • •';
+  display: block;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0.45rem;
+  text-indent: 0.45rem;
+  color: rgba(148, 163, 184, 0.72);
+}
+
+.tiptap hr.ProseMirror-selectednode {
+  outline: 1px dashed rgba(56, 189, 248, 0.4);
+  outline-offset: 0.25rem;
+  border-radius: 999px;
 }
 
 .tiptap ul {
@@ -582,6 +614,116 @@
   padding: 4rem 1.5rem 1.5rem !important;
 }
 
+.story-prose p {
+  padding-top: 0.18rem;
+  padding-bottom: 0.3rem;
+}
+
+.story-prose p:empty {
+  display: none;
+}
+
+.story-prose p + p {
+  margin-top: 1.5rem;
+}
+
+.story-prose h2,
+.story-prose h3,
+.story-prose h4,
+.story-prose h5,
+.story-prose h6 {
+  color: rgb(255 255 255);
+  font-weight: 600;
+  letter-spacing: -0.03em;
+}
+
+.story-prose h2 {
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
+  font-size: clamp(1.65rem, 1.2rem + 1vw, 2rem);
+}
+
+.story-prose h3 {
+  margin-top: 2rem;
+  margin-bottom: 0.75rem;
+  font-size: clamp(1.35rem, 1.05rem + 0.8vw, 1.6rem);
+}
+
+.story-prose h4,
+.story-prose h5,
+.story-prose h6 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.6rem;
+}
+
+.story-prose ul,
+.story-prose ol {
+  margin: 1.5rem 0;
+  padding-left: 1.5rem;
+}
+
+.story-prose ul {
+  list-style-type: disc;
+}
+
+.story-prose ol {
+  list-style-type: decimal;
+}
+
+.story-prose li {
+  color: rgb(255 255 255 / 0.72);
+}
+
+.story-prose li + li {
+  margin-top: 0.5rem;
+}
+
+.story-prose li::marker {
+  color: rgb(255 255 255 / 0.45);
+}
+
+.story-prose blockquote {
+  margin: 2rem 0;
+  border-left: 3px solid rgb(14 165 233 / 0.7);
+  background: rgb(255 255 255 / 0.03);
+  padding: 0.6rem 0 0.6rem 1.25rem;
+  color: rgb(255 255 255 / 0.68);
+}
+
+.story-prose a {
+  color: rgb(125 211 252);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: color 120ms ease;
+}
+
+.story-prose a:hover {
+  color: rgb(186 230 253);
+}
+
+.story-prose hr {
+  margin: 2rem 0;
+}
+
+.story-prose > img {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin: 2rem 0;
+  border-radius: 1.5rem;
+}
+
+.story-prose figure {
+  width: 100%;
+}
+
+.story-prose figure iframe {
+  display: block;
+  width: 100%;
+  min-width: 100%;
+  aspect-ratio: 16 / 9;
+}
+
 .story-prose pre[data-language]::before {
   content: attr(data-language);
   position: absolute;