CHAPTER 12 · PRACTICE WORKSPACE
在 320px 到桌機寬度都可閱讀、可操作的作品集
TASK STATUS
修改檔案：style.css
完成後看見：320px 圖片 right 不超過父容器，且圖片保留比例
修改檔案：style.css
完成後看見：390px／800px／1100px 實際為一欄／兩欄／三欄
修改檔案：style.css
完成後看見：320px 導覽可換行，連結留在導覽盒內且至少 44px 高，鍵盤與點擊都能到達三個錨點
WORKSPACE
已完成 TASK-01；先核對可見結果，再前往 TASK-02。
FOCUS TASK · TASK-02
比較：media query 的斷點應回應內容開始擁擠的時刻，不是照裝置名稱硬切。
現在做：暫時把 680px 改成 900px，依序測 800px 與 900px，觀察兩欄何時出現；恢復後再說明斷點應對應內容擁擠，而非裝置名稱。
預期：800px 在原規則為兩欄；暫改 900px 後 800px 回到一欄，證明 media query 條件會直接改變可見欄數。
證據：前後紀錄包含 viewport 與實際欄數，並指出 CSS 中 680px 條件與 800px 結果的因果關係。
比較：1fr 讓欄位依可用空間分配，固定寬度容易在窄畫面產生擠壓或溢出；本章不延伸 minmax。
現在做：暫時把 .work-grid 的欄位改成固定 320px，於 390px 檢查是否產生水平溢出；恢復 1fr 與 repeat(2, 1fr) 後重跑三個 viewport。
預期：固定欄寬會在窄畫面擠壓或溢出；恢復 1fr／repeat(2, 1fr) 後，卡片能依可用寬度排列。
證據：前後紀錄包含作品卡邊界、頁面 scrollWidth 與實際欄數，並說明固定欄寬與可用寬度的差異。
完成條件：DONE-02：390px／800px／1100px 實際為一欄／兩欄／三欄，且與 680px／1020px CSS 斷點一致
清楚整理活動資訊。
呈現品牌故事。
提供可使用的聯絡入口。
第 11 章 → 第 12 章
第 11 章的 .work-card／.work-card__action DOM 不直接複製到本章；保留 --color-brand、--color-ink、--space-card 與 CTA／focus／reduced-motion 責任，移植到 .hero-media img／.work-grid／.portfolio-nav，並把 320／390／800／1100 viewport 證據交給第 13 章的 .portfolio-shell／.portfolio-links。
CONTINUE
前往 Checkpoint 2，依要求完成「設定由內容決定的卡片斷點」。