src/shared/styles/theme.css

@@ -20,7 +20,6 @@
   --font-weight-body: 600;
   --font-weight-normal: 400;
 
-  /* Fluid section title: scales from 2rem at ~267px to 8rem at ~1707px */
   --text-section-title: clamp(2rem, 7.5vw, 8rem);
 
   /* === LINE HEIGHT === */
@@ -72,8 +71,7 @@
   --border-width: 1.5px;
   --radius: 5px;
 
-  /* Muted offset shadow — quieter than the old hard-blue brutalist stamp.
-   * Softer alpha + tighter offsets keep the offset-shadow feel, just lighter. */
+  /* Low-alpha blue so the offset shadow reads as a muted stamp, not a hard block. */
   --shadow-color: rgba(4, 28, 243, 0.25);
 
   /* === OFFSET SHADOWS === */
@@ -246,18 +244,14 @@
   }
 }
 
-/* Button elevation transition — transform + shadow animate together over 130ms
- * on the micro easing curve; the spring feel comes from the curve, no keyframes. */
+/* Spring feel comes from the easing curve, not keyframes. */
 @utility btn-transition {
   transition: transform 130ms var(--ease-micro);
 }
 
-/* Offset "shadow" as a static pseudo-block instead of box-shadow. box-shadow
- * swims because it repaints on the main thread while the button's translate
- * runs on the compositor — the two desync per frame. Here both the button and
- * its ::before are transforms, so they stay frame-synced. The ::before counter-
- * translates to hold a fixed 3px world offset while the button lifts/presses,
- * so the shadow appears frozen and only the button moves. */
+/* Offset "shadow" as a pseudo-block, not box-shadow: box-shadow repaints on
+ * the main thread while the button's translate runs on the compositor, so the
+ * two desync per frame. Animating both as transforms keeps them frame-synced. */
 .btn-shadow {
   position: relative;
   z-index: 0;
@@ -328,20 +322,16 @@
   outline: var(--border-width) solid var(--blue);
   border-radius: var(--radius);
 }
-/* Tiled blue dot pattern — applied to body::before (page-wide) and reusable
- * on any surface that should share the same paper-grain texture. The SVG
- * tile is rasterized once and composited cheaply via repeating background. */
+/* Shared paper-grain texture: a tiled blue dot for any surface that needs it. */
 @utility grain-pattern {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23041cf3' opacity='0.10'/%3E%3C/svg%3E");
 }
-/* Apply Fraunces variable axes to non-heading elements using the heading font */
 .font-wonk {
   font-variation-settings:
     "WONK" var(--fraunces-wonk),
     "SOFT" var(--fraunces-soft);
 }
 
-/* Sidebar divider: bottom border on mobile, right border on desktop */
 .brutal-border-sidebar {
   border-bottom: var(--border-width) solid var(--blue);
 }
@@ -568,12 +558,9 @@ dialog.lightbox {
   z-index: 30;
 }
 
-/* Lightbox image sizing — leaves vertical headroom for the fixed close button
- * (sits at top-3, ~2.5rem tall). 8rem total = ~4rem top/bottom after centering,
- * so the button never overlaps the image.
- * box-sizing: content-box so max-w/max-h apply to the image pixels and the
- * 3px brutal-border sits outside them — avoids subpixel clipping of the
- * border by the dialog's overflow:hidden when both have border-box. */
+/* Lightbox image sizing — max-height leaves vertical headroom so the fixed
+ * close button never overlaps the image. content-box keeps the border outside
+ * the image pixels, avoiding subpixel clipping by the dialog's overflow:hidden. */
 @utility lightbox-image {
   box-sizing: content-box;
   max-width: calc(100vw - 2rem);