diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index 479712d5..01c146f2 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -3139,10 +3139,16 @@
     .profile-modal__layout[data-mobile-view="pane"] .profile-modal__menu {
       display: none;
     }
+  }
 
-    /* Mobile: the profile tab nav (full-width menu view) becomes an app-grid —
-       icon tiles with the title centered below each icon, instead of the desktop
-       vertical list. Desktop (>=lg) keeps its vertical nav, unchanged. */
+  /* Mobile: the profile tab nav (full-width menu view) becomes an app-grid — icon
+     tiles with the title centered below each icon, instead of the desktop vertical
+     list. Desktop (>=lg) keeps its vertical nav (the min-width:lg rule below wins
+     at the exact breakpoint via source order). NOTE: the @media condition must NOT
+     use a CSS `var()` — custom properties are invalid inside media conditions and
+     Chromium drops the whole block. `theme("screens.lg")` resolves to a literal at
+     build time, which is valid. */
+  @media (max-width: theme("screens.lg")) {
     .profile-modal__nav {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
diff --git a/todo/TODO_2026-06-20_pre-launch.md b/todo/TODO_2026-06-20_pre-launch.md
index 397fb0ea..cba04e73 100644
--- a/todo/TODO_2026-06-20_pre-launch.md
+++ b/todo/TODO_2026-06-20_pre-launch.md
@@ -1098,3 +1098,21 @@ has a persisted cache; channel/search now render optimistically from
       dedupe-by-root + canAccess in `buildRenderableChannelVideos` handle
       precedence/gating. Logic extracted to a helper so channelProfile.js stayed
       under its size cap. Tests + mutation-verified.
+
+### 40. Dead @media queries: `var()` in media conditions is invalid (BUG, broad)
+Found 2026-06-25 while fixing the profile-modal mobile grid. Many media queries use
+`@media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset)))`.
+CSS custom properties are NOT allowed inside `@media` conditions — Chromium/Brave
+drop the ENTIRE block, so all those rules are DEAD (confirmed via matchMedia: the
+`var()` form returns false where it should match; the literal `calc(... - 0.02px)`
+works). The `--breakpoint-edge-offset` token was introduced to satisfy the
+design-token lint (no raw measurements), but it silently broke every media query
+that used it.
+- [ ] Audit all `var(--breakpoint-edge-offset)` (and any other `var()`) inside
+      `@media` conditions in `css/tailwind.source.css` and replace with a valid
+      literal-resolving form (e.g. `@media (max-width: theme("screens.lg"))`, which
+      compiles to a literal). The profile-modal nav grid (#7) already uses this.
+- [ ] Decide whether the token-lint should EXEMPT @media conditions (so the offset
+      token can stay) or whether to drop the offset pattern entirely.
+- [ ] Re-verify the responsive rules that were silently dead (e.g. the profile-modal
+      menu/pane-hide block, and the line ~1398/1433 player/modal rules).