feat: add responsive professional information layer

src/styles/print.css

@@ -0,0 +1,61 @@
+@media print {
+  :root {
+    color-scheme: light;
+    --text: #121820;
+    --text-muted: #374151;
+    --cyan: #0e5c72;
+    --surface: #fff;
+    --line: #8b98a5;
+  }
+
+  html,
+  body {
+    background: #fff;
+    color: var(--text);
+  }
+
+  .skip-link,
+  .site-navigation,
+  [data-decorative-world],
+  [data-scene-control] {
+    display: none !important;
+  }
+
+  .portfolio-shell,
+  .site-header,
+  .portfolio-main,
+  .site-footer {
+    display: block;
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  .site-header {
+    margin-block-end: 1.5rem;
+  }
+
+  .portfolio-section {
+    width: 100%;
+    margin: 0 0 1.25rem;
+    padding: 0 0 1.25rem;
+    break-inside: avoid;
+    border: 0;
+    border-block-end: 1px solid var(--line);
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+  }
+
+  a[href^='http']::after,
+  a[href^='mailto:']::after {
+    content: ' (' attr(href) ')';
+    font-size: 0.85em;
+    overflow-wrap: anywhere;
+  }
+}