feat(01-02): add pt-safe and pb-safe @utility blocks for safe-area insets

- Append @utility pt-safe { padding-top: env(safe-area-inset-top); }
- Append @utility pb-safe { padding-bottom: env(safe-area-inset-bottom); }
- Co-located with existing brand utilities; brand.css already imported by globals.css
- Closes PWA-04 (REQUIREMENTS.md) and ROADMAP Phase 1 SC #3
- Phase 2 sticky header → pt-safe; fixed bottom nav → pb-safe

app/styles/brand.css

@@ -139,6 +139,29 @@
   letter-spacing: 0.01em;
 }
 
+/* === Safe-area insets =================================================
+ *
+ * Opt-in padding helpers for sticky top / fixed bottom bars on devices
+ * with notches, dynamic islands, or gesture home indicators.  Pair with
+ * the viewport-fit=cover viewport meta (set in app/layout.tsx) — without
+ * that, env(safe-area-inset-*) resolves to 0 and these utilities are
+ * no-ops, which is the desired fallback on non-PWA / non-mobile contexts.
+ *
+ * Usage:
+ *   <header class="sticky top-0 pt-safe ...">      // header clears notch
+ *   <nav class="fixed bottom-0 pb-safe ...">       // bottom bar clears home bar
+ *
+ * Closes PWA-04 (REQUIREMENTS.md) and ROADMAP Phase 1 SC #3.
+ * ==================================================================== */
+
+@utility pt-safe {
+  padding-top: env(safe-area-inset-top);
+}
+
+@utility pb-safe {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
 /* === Wolf-mark watermark ============================================
  *
  * Apply .has-mark-watermark to a positioned container; place a child