CHAPTER 12 · PRACTICE WORKSPACE
在 320px 到桌機寬度都可閱讀、可操作的作品集
TASK STATUS
修改檔案：style.css
完成後看見：320px 圖片 right 不超過父容器，且圖片保留比例
修改檔案：style.css
完成後看見：390px／800px／1100px 實際為一欄／兩欄／三欄
修改檔案：style.css
完成後看見：320px 導覽可換行，連結留在導覽盒內且至少 44px 高，鍵盤與點擊都能到達三個錨點
WORKSPACE
已完成 TASK-02；先核對可見結果，再前往 TASK-03。
FOCUS TASK · TASK-03
比較：換行保留所有導覽入口，隱藏或裁切會讓使用者找不到可操作內容。
現在做：暫時把 .portfolio-nav 設成 overflow:hidden 或保留 nowrap，在 320px 記錄被裁切／超出盒子的連結；恢復 flex-wrap:wrap 後重跑。
預期：nowrap 或裁切會讓連結超出可視範圍；flex-wrap:wrap 會保留所有導覽入口並讓它們留在導覽盒內。
證據：前後紀錄包含導覽盒與三個連結的邊界，以及三個 hash 都仍可點擊到達。
比較：連結的內距與可點擊範圍要足夠，不只看文字是否塞得下。
現在做：暫時移除導覽連結的 min-height 與 padding，在 320px 量每個 anchor 的 height；恢復 44px 與 10px 14px 後，以 Tab 與點擊重跑。
預期：只保留文字會讓 anchor 高度不足；補上 min-height:44px 與 padding 後，觸控區變大且焦點仍能依序走完。
證據：前後紀錄包含每個 anchor 的 height、padding、focus 順序與三個 hash 目標。
完成條件：DONE-03：320px 導覽可換行，連結留在導覽盒內且至少 44px 高，鍵盤與點擊都能到達三個錨點
清楚整理活動資訊。
呈現品牌故事。
提供可使用的聯絡入口。
第 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
前往 Solution，依要求完成「讓手機導覽可換行且好點擊」。