作品圖片與主要連結的操作

本堂不增加新網格斷點、不加入JS或後端。沿用三張本機圖、原alt與角色文字；APPA維持原比例與動態。

1. 圖片和框分開看

原圖是3:2，本次作品圖片框用4:3。contain完整顯示原圖，可能留白；cover填滿但可能裁切；硬把原圖拉成不同寬高才是變形。

只對.work-card img設定4:3框與contain，不能寫成全域img規則而改到APPA。不要替整張卡片設固定高度，以免文字或連結被切掉。

2. 先AI整理，再親手改位置

附上三頁HTML、完整CSS與三張原圖，用生成Prompt整理卡片：圖片、標題、兩句摘要、原角色文字、前往services.html的「了解合作服務」。第二句只說明示意圖，不編造客戶或業績。

確認三圖完整顯示後，親手加入：

.work-card:first-child img { object-position:center top; }

觀察第一張圖內的留白從上下分配變成靠下，其他兩張仍置中。若比較cover，請先在獨立副本觀察裁切，正式練習仍保留contain，記下自己的理由。

3. 先親手畫焦點

現有網站原本就有hover與全域焦點。這次新增主要連結的專屬規則，深底用白色、淺卡用深紫，保持可見對比：

.hero .primary-link:focus-visible {
  outline:3px solid var(--white);
  outline-offset:4px;
}
.work-card .primary-link:focus-visible {
  outline:3px solid var(--navy);
  outline-offset:4px;
}

用Tab先確認手動成果，再用延伸Prompt只把.primary-link:hover改成亮紫底白字。輪廓不會像border一樣佔用盒模型空間，但仍要實際看是否被其他容器遮住。

4. 分開操作四種狀態

導覽是a配有效href，不為了外觀換成無作用button。手機可看與點擊，重要內容不能等hover才出現；鍵盤驗收需有鍵盤，不假稱觸控螢幕也做過hover。