test(styles): regression test for markdown max-width (#1452)

[JoseRodriguez26]

Summary

Adds a regression test guarding against the tutorial-layout bug reported in #1452, where the GLSL tutorial (/tutorials/intro-to-glsl/) — and other rendered-markdown pages — collapsed into a thin, unreadable vertical column of text.

The bug itself is already fixed (by #1457). This PR does not re-fix it; it adds the missing guardrail so the bug — and its whole class — cannot silently return, and documents the root cause so the "it broke then healed itself" mystery is explained.

Co-authored with @julian-men.

Root cause & timeline (answers "why did it break ~2 weeks ago but not today?")

The width cap on .rendered-markdown > * in styles/markdown.scss is what keeps tutorial text at a readable column width.

State	The line	Works?	Effect
Before	@apply max-w-screen-md;	✅	Text capped, renders normally
Broken	@reference max-w-screen-md;	❌	No cap → vertical column
Fixed (now)	max-width: variables.$breakpoint-tablet;	✅	Text capped at 770px

• 2026-05-27 — broke: commit adb24d3e4 "Upgrade Astro to v6" (a large upgrade, almost certainly an automated codemod) rewrote @apply max-w-screen-md; → @reference max-w-screen-md;. In Tailwind v4, @reference is only valid pointing at a file (@reference "app.css";); pointed at a utility name it is invalid and silently dropped by the browser — no error. The max-width cap vanished and the layout collapsed. This is Shader tutorial continues to have vertical text problem on beta #1452.
• 2026-05-27 → 2026-06-21 — broken window (~3.5 weeks): matches the maintainer's "broken a couple weeks ago, fine now" report.
• 2026-06-21 — fixed: commit 3ed344be6 "Fix tutorial content too wide" (Tutorial content too wide #1457) replaced the broken line with max-width: variables.$breakpoint-tablet;. That PR targeted a different symptom (content too wide) and healed Shader tutorial continues to have vertical text problem on beta #1452 as a side effect — which is why the fix was never connected to this issue.

What this PR adds

test/styles/markdown-scss.test.ts (Vitest, 5 tests). It compiles styles/markdown.scss with sass and asserts:

1. Rendered content has a real, positive max-width (not missing/zero).
2. That max-width equals $breakpoint-tablet.
3. .full-width correctly opts out to a wider limit.
4. No stray @reference survives into the compiled CSS.
5. A source scan of styles/ + src/ fails on any @reference <utility>; — guarding the whole bug class, not just this one line.

Also includes ISSUE-1452-WRITEUP.md with the full root-cause writeup (happy to move or drop this if maintainers prefer it not live in the repo).

Verification

• ✅ 5/5 pass against current (fixed) code.
• ✅ 4/5 fail when pointed at the pre-fix broken file — confirming the test genuinely catches the regression rather than passing vacuously.

Closes #1452 (adds regression coverage; fix already landed in #1457).