/* 整合版 v1：以 Codex v2 為基礎，套入陽陽指定的方向與 Claude 版被採用的部分。
   載於 study.css / entry-study.css 之後，只做覆寫。 */

:root {
  /* 版面左右邊界改用 Claude 版的較寬設定（Codex 為 4vw/76px，1440 下 57.6px） */
  --side: clamp(20px, 3.1vw, 64px);
  --container: 1680px;
  /* 文字區的寬度：照片滿版，文字收窄置中 */
  --text-w: 1140px;
}

/* ── 1. 入口：LOGO 本身就是進入按鈕，品牌名留在最底 ──────────────── */
/* 換頁間隔 5 秒（entry.js）＋淡入 1.5 秒 → 每張靜止約 3.5 秒。
   原本是 7.2 秒／1.7 秒。 */
.entrance-photo { transition-duration: 1500ms; }
/* 品牌橫列只剩中英文，LOGO 已成為進入鍵 */
/* LOGO 組整體下移後，品牌橫列也往下讓出間距 */
.entry-brand { bottom: 3%; gap: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 12px rgba(0, 0, 0, .5); }
.entry-name { gap: 20px; }
.entry-brand h1 { font-size: 18px; letter-spacing: .12em; }
.entry-english { font-size: 17px; letter-spacing: .08em; }

/* LOGO 取代 ENTER：平常只有 LOGO，滑過／鍵盤聚焦才浮出 ENTER 小字，
   讓畫面乾淨又不會讓人不知道可以按。 */
.enter-link {
  top: 86.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  /* LOGO 與 ENTER 的間距約等於 ENTER 字級再大一點 */
  gap: 11px;
  min-width: 0;
  min-height: 0;
  /* 框貼近 LOGO 與 ENTER，不要留一圈多餘的空間 */
  padding: 12px 18px;
  border: 0;
  border-radius: 0;
  background: none;
  text-indent: 0;
  letter-spacing: normal;
}
.enter-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, .22);
  opacity: 0;
  transition: opacity .48s ease;
}
.enter-link:hover::before,
.enter-link:focus-visible::before {
  opacity: 1;
  transition-delay: .66s;
}
.enter-mark {
  display: block;
  position: relative;
  z-index: 1;
  width: 56px;
  height: auto;
  /* 封面隨機輪播，白色 LOGO 會落在亮天花板上；用兩層陰影撐住對比 */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)) drop-shadow(0 2px 16px rgba(0, 0, 0, .45));
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), filter .3s ease;
}
/* 在 flex 流裡佔位，滑過時只有透明度變化，版面不會跳動 */
.enter-word {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  font: 400 12px/1.6 "Day Navigation", sans-serif;
  letter-spacing: .26em;
  text-indent: .26em;
  color: #fff;
  opacity: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 10px rgba(0, 0, 0, .5);
  transition: opacity .28s ease;
}
.enter-link:hover .enter-word,
.enter-link:focus-visible .enter-word { opacity: .95; }

/* 滑過時：先從底部中央拉出一條橫線，兩側各自往上長，最後上緣由兩邊往中央闔起，
   把 LOGO 與 ENTER 包成一個框。五段線各自 scale，線寬永遠 1px，
   不會被容器尺寸縮放拉變形。收回時整個順序反向。 */
.enter-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.enter-frame i {
  position: absolute;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  transition: transform .22s linear;
}
/* 1 底邊：由中央往兩側 */
.enter-frame i:nth-child(1) { bottom: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: center; transition-delay: .44s; }
/* 2、3 左右邊：同時由下往上 */
.enter-frame i:nth-child(2) { left: 0; top: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: center bottom; transition-delay: .22s; }
.enter-frame i:nth-child(3) { right: 0; top: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: center bottom; transition-delay: .22s; }
/* 4、5 上緣兩半：由兩側往中央闔起。
   兩半各佔一半、在中央「接合」而不是重疊——先前各設 51% 寬，
   中央那 2% 會有兩層半透明白疊加，闔起後看得到一個更亮的白點。
   右半改用 left:50%＋right:0 定出寬度，接縫精確到 0。 */
.enter-frame i:nth-child(4) { top: 0; left: 0; width: 50%; height: 1px; transform: scaleX(0); transform-origin: left center; transition-delay: 0s; }
.enter-frame i:nth-child(5) { top: 0; left: 50%; right: 0; height: 1px; transform: scaleX(0); transform-origin: right center; transition-delay: 0s; }
.enter-link:hover .enter-frame i:nth-child(1),
.enter-link:focus-visible .enter-frame i:nth-child(1) { transform: scaleX(1); transition-delay: 0s; }
.enter-link:hover .enter-frame i:nth-child(2),
.enter-link:hover .enter-frame i:nth-child(3),
.enter-link:focus-visible .enter-frame i:nth-child(2),
.enter-link:focus-visible .enter-frame i:nth-child(3) { transform: scaleY(1); transition-delay: .22s; }
.enter-link:hover .enter-frame i:nth-child(4),
.enter-link:hover .enter-frame i:nth-child(5),
.enter-link:focus-visible .enter-frame i:nth-child(4),
.enter-link:focus-visible .enter-frame i:nth-child(5) { transform: scaleX(1); transition-delay: .44s; }
.enter-link:hover .enter-mark,
.enter-link:focus-visible .enter-mark {
  transform: scale(1.05);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)) drop-shadow(0 2px 20px rgba(0, 0, 0, .6));
}
.enter-link:hover, .enter-link:focus-visible { background: none; border: 0; }
/* 觸控裝置沒有滑過狀態，ENTER 字樣常駐，否則不知道 LOGO 可以按。
   框線仍保留：在觸控上點下去時會繞出來，剛好是按下的回饋。 */
@media (hover: none) {
  .enter-word { opacity: .82; }
}
/* 關閉動態效果時不做繞行，四條邊直接一起淡入 */
@media (prefers-reduced-motion: reduce) {
  .enter-link::before { transition: opacity .2s ease; transform: none; opacity: 0; }
  .enter-link:hover::before,
  .enter-link:focus-visible::before { opacity: 1; transition-delay: 0s; }
  .enter-frame i { transition: opacity .2s ease !important; transition-delay: 0s !important; opacity: 0; }
  .enter-frame i:nth-child(1), .enter-frame i:nth-child(3) { transform: scaleX(1); }
  .enter-frame i:nth-child(2), .enter-frame i:nth-child(4) { transform: scaleY(1); }
  .enter-link:hover .enter-frame i,
  .enter-link:focus-visible .enter-frame i { opacity: 1; }
}
/* 最初的無框 ENTER 搭配的是「下半從 40% 就開始壓暗」的入口（before-layout-v6），
   v18 為了讓照片更亮改成 50% 才起漸層，白色元素才會在淡柔那種亮封面上撐不住。
   這裡把下半拉回最初的起點；照片上緣到 40% 完全不受影響。 */
.entrance::after {
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .07) 60%, rgba(0, 0, 0, .40));
}
@media (max-width: 600px) {
  .enter-mark { width: 48px; }
  .entry-name { gap: 14px; }
  /* 手機畫面短，85% 會讓框底貼到底部品牌橫列 */
  .enter-link { top: 83%; padding: 10px 14px; gap: 10px; }
}
/* 筆電常見的 720／768 高度，畫面短，框底要留出品牌橫列的位置 */
@media (max-height: 820px) {
  .enter-link { top: 83%; }
}
/* 短螢幕（iPhone SE 等）再往上收 */
@media (max-height: 620px) {
  .enter-mark { width: 44px; }
  .enter-link { top: 78%; }
}

/* ── 2. 全站共用同一條左右邊界（Codex 審查也建議採用這點） ──────────── */
.site-header,
.works-page,
.about-reading,
.process-page,
.contact-page,
.project-opening,
.project-cover,
.project-story,
.project-gallery,
.project-end {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--side);
}
/* LOGO 移到頁首最右，接在 FB／IG／LINE 之後，與選單同一列垂直置中。
   尺寸從 88px 收到 64px：在 18px 選單與 16px 社群圖示旁邊，
   88px 會把頁首整個撐高，也壓過選單。 */
.site-header { justify-content: flex-end; align-items: center; gap: clamp(20px, 2.4vw, 34px); min-height: 112px; }
.header-right { order: 1; }
/* 改用只有圖形的 Logo：原圖下方的 DAY2DAY DESIGN 在這個尺寸只有 3–4px 高，
   讀不出來、只會變成一條灰痕。品牌全名在入口底部已經完整呈現過。
   同樣 56px 的框，拿掉字之後圖形反而從 52.7px 變成 56px，更清楚。 */
.brand { order: 2; width: 56px; }
/* 純黑的圖形在白底上太搶眼，會一直把視線拉過去。
   壓到和旁邊的社群圖示（.64）同一個灰階區間，但比它們實一點，
   畢竟它是品牌標誌不是次要圖示。 */
.brand .official-logo { opacity: .74; transition: opacity .3s ease; }
.brand:hover .official-logo,
.brand:focus-visible .official-logo { opacity: 1; }

/* ── 三頁模板統一：ABOUT／PROCESS／CONTACT 的內文同一個字級 ────────
   原本 ABOUT 16px、PROCESS 步驟 15px、CONTACT 聯絡資料 15px。 */
.step-body > p,
.step-body ul { font-size: 16px; }
.contact-information address { font-size: 16px; }

/* ── 3. WORKS：最寬的版面配最高的照片 ───────────────────────────── */
.works-page { padding-block: 32px 96px; }
.works-grid { gap: 52px 24px; }
.work-card figure { aspect-ratio: 3 / 2; }
/* 案名靠近照片，收成文字本身的寬度，讓滑過底線跟著字數變化。 */
.work-card h2 {
  width: fit-content;
  max-width: 100%;
  margin: 4px auto 0;
  position: relative;
}
/* 滑過的訊號：案名下方一條短線由中央展開——和入口的框線、內頁導覽底線
   是同一套語言。線用絕對定位，不佔高度，卡片不會因為滑過而變高。 */
.work-card img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
/* 只讓滑鼠所在的作品輕微放大；其他照片保持原色與原亮度。 */
.work-card:hover img,
.work-card:focus-visible img { opacity: 1; transform: scale(1.015); }
/* 觸控沒有滑過狀態，不保留照片放大。 */
@media (hover: none) {
  .work-card:hover img { transform: none; }
}
.work-card h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%) scaleX(0);
  transition: transform .38s cubic-bezier(.22, .61, .36, 1);
}
.work-card:hover h2::after,
.work-card:focus-visible h2::after { transform: translateX(-50%) scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .work-card h2::after { transition: opacity .2s ease; transform: translateX(-50%) scaleX(1); opacity: 0; }
  .work-card:hover h2::after,
  .work-card:focus-visible h2::after { opacity: 1; }
  .work-card img { transition: opacity .2s ease; }
  .work-card:hover img,
  .work-card:focus-visible img { transform: none; }
}
/* 商空空狀態留在同一條主軸上，內容不動 */
.empty-collection { text-align: left; padding: 8px 0 180px; max-width: 640px; }

/* ── 4. ABOUT / PROCESS：沿用 Codex 的右下面板與側欄索引，只對齊邊界 ── */
.about-reading { max-width: var(--text-w); grid-template-columns: 180px minmax(0, 680px); }
/* 中文預設可以在任兩個字之間換行，所以會出現「我們在意／的」「讓後續／的生活」
   這種把詞拆開的斷點。keep-all 關掉字元間斷行，再由 about.html 裡的 <wbr>
   指定只能斷在標點之後。任何寬度都成立，不必固定行數。 */
.about-body p { word-break: keep-all; }
/* 三段同字級同顏色，讀起來像一整塊沒有起伏。
   照 PROCESS 的做法：字級一樣（16px），只用深淺分層——
   導言 #303030、後續 #707070，和「先認識你期待的生活」對「聊聊居住成員…」
   是同一組對比。文案一個字沒動。 */
.about-body p { color: var(--muted); }
.about-body p:first-child { color: var(--ink); margin-bottom: 30px; }
.process-page { max-width: var(--text-w); margin-block: 80px 100px; }

/* 流程讀完後只保留一個明確去向：前往 CONTACT。
   沿用作品頁尾的細線與水平位移語言，但不把整個區塊做成巨大按鈕。 */
.process-contact-cta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.process-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  width: fit-content;
  padding: 8px 0;
}
.process-contact-text { display: grid; justify-items: end; gap: 3px; }
.process-contact-text > span {
  font: 400 14px/1.6 "Day Navigation", sans-serif;
  letter-spacing: .08em;
  color: var(--muted);
}
.process-contact-text strong {
  position: relative;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: .03em;
}
.process-contact-text strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.22, .61, .36, 1);
}
.process-contact-arrow {
  font-size: 23px;
  line-height: 1;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.process-contact-link:hover .process-contact-text strong::after,
.process-contact-link:focus-visible .process-contact-text strong::after { transform: scaleX(1); }
.process-contact-link:hover .process-contact-arrow,
.process-contact-link:focus-visible .process-contact-arrow { transform: translateX(6px); }

@media (max-width: 800px) {
  .process-contact-cta { justify-content: flex-start; margin-top: 6px; padding-top: 28px; }
  .process-contact-text { justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .process-contact-arrow { transition: none; }
  .process-contact-link:hover .process-contact-arrow,
  .process-contact-link:focus-visible .process-contact-arrow { transform: none; }
  .process-contact-text strong::after { transition: opacity .2s ease; transform: scaleX(1); opacity: 0; }
  .process-contact-link:hover .process-contact-text strong::after,
  .process-contact-link:focus-visible .process-contact-text strong::after { opacity: 1; }
}

/* ── 5. CONTACT ─────────────────────────────────────────────────
   面板放大到與 ABOUT／PROCESS 同寬，位置維持 Codex 的右下角。 */
.contact-photo-introduction .photo-panel { width: 620px; max-width: 100%; min-width: 0; padding: 34px 38px; }
.contact-details-link { margin-top: 18px; }
/* ABOUT／PROCESS／CONTACT 的段內導引，沿用各頁左上角英文標籤的字型層級。 */
.compact-link {
  font: 400 14px/1.7 "Day Navigation", sans-serif;
  letter-spacing: .055em;
  color: var(--muted);
}
/* ── CONTACT 的兩個按鈕 ─────────────────────────────────────
   原本一個是深色實心塊、一個是淺灰細框（#bdbdbd）。面板變透之後，
   實心塊成了整個面板最重的元素，淺灰框卻幾乎看不見——輕重差太多。
   改成同尺寸、同圓角的兩個線框，只用框的深淺分主次，
   和入口框線、導覽底線、作品案名底線是同一套語言。
   主要動作在滑過時填滿深色，份量留在互動的那一刻。 */
.photo-panel .inquiry-primary,
.photo-panel .inquiry-secondary {
  padding: 11px 20px;
  font-size: 14px;
  letter-spacing: .04em;
  border-radius: 4px;
  background: transparent;
  color: #1f1f1f;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
/* 兩個框同一個顏色。原本用框的深淺分主次，但這兩個其實是對等的
   聯絡管道（填表單／加 LINE），沒有誰該被壓下去。 */
.photo-panel .inquiry-primary,
.photo-panel .inquiry-secondary { border: 1px solid rgba(31, 31, 31, .55); }
/* 兩個滑過時填同一個顏色，主次只在平常的框深淺上分 */
.photo-panel .inquiry-primary:hover,
.photo-panel .inquiry-primary:focus-visible,
.photo-panel .inquiry-secondary:hover,
.photo-panel .inquiry-secondary:focus-visible { background: #1f1f1f; border-color: #1f1f1f; color: #fff; }
/* LINE 圖示是黑色 SVG，填黑之後會消失，滑過時反白 */
.photo-panel .inquiry-secondary img { transition: filter .3s ease; }
.photo-panel .inquiry-secondary:hover img,
.photo-panel .inquiry-secondary:focus-visible img { filter: invert(1); }

/* 聯絡導言固定分成「生活期待」與「聯絡方式」兩行，手機也不重新接回同一行。 */
.contact-photo-introduction .photo-panel > p:not(.section-label) span { display: block; }

/* 桌面在逗號後斷行，讓說明成為完整的兩行，不要第二行只剩幾個字。
   字級不覆寫——上一版寫成 17px 時連 .section-label 一起放大，
   害 CONTACT 的標籤（17px）和 ABOUT／PROCESS（14px）對不起來。 */
@media (min-width: 801px) {
  .about-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .about-panel .compact-link { margin-top: auto; }
  .process-photo-introduction .photo-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .process-photo-introduction .compact-link { margin-top: auto; }
  .contact-photo-introduction .photo-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .contact-photo-introduction .photo-panel > p:not(.section-label) { margin-bottom: 15px; }
  .contact-photo-introduction .inquiry-actions { margin-top: 0; }
  .contact-photo-introduction .contact-details-link { margin-top: auto; }
  .photo-panel .compact-link { color: #3f3f3f; }

  /* 三頁面板等高：原本高度是 246／358／316，面板底部對齊，
     所以標籤位置差到 112px，切換分頁時整塊會上下跳。
     取最高的 358 當底線；實測 801–1920px 七種寬度下三頁高度都不變，
     不會有某個寬度被撐破的情況。 */
  .photo-panel { min-height: 358px; }

  /* 第一屏只留「上白 → 照片 → 下白」，下方內容完全不露出。
     頁首 112px 當上留白，照片高度用扣的，下留白再補回來，
     三者加起來剛好 100svh。1224px 高以下（涵蓋絕大多數螢幕）上下留白等寬；
     再高的螢幕照片會被 1000px 上限卡住（超過就會水平裁掉構圖），
     多出來的空間讓下留白吸收，第一屏仍然乾淨。 */
  :root { --hero-h: clamp(380px, calc(100svh - 224px), 1000px); }
  .photo-introduction { height: var(--hero-h); min-height: 0; }
  .about-reading,
  .process-page,
  .contact-page {
    margin-top: 0;
    padding-top: max(112px, calc(100svh - 112px - var(--hero-h)));
  }
  /* 三個照片面板統一使用 60% 白底與 1px 輕霧化：保留照片質感，
     同時讓文字在不同照片明暗區域仍維持穩定可讀性。 */
  .photo-panel {
    background: rgba(250, 250, 250, .60);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    border-radius: 4px;
  }
  .photo-panel,
  .photo-panel h1,
  .about-panel .about-statements p { color: #181818; }
  .photo-panel .section-label { color: #383838; }
  .photo-panel .section-label,
  .photo-panel h1,
  .photo-panel p,
  .photo-panel .about-brand-heading { text-shadow: 0 0 2px rgba(255, 255, 255, .9), 0 0 5px rgba(255, 255, 255, .45); }
  .photo-panel .small-note { color: #181818; }
}
.contact-page { max-width: var(--text-w); align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; }
/* 聯絡資訊上緣對齊地圖上緣 */
.contact-information { padding-top: 0; }
.contact-map { height: 400px; }
/* 地圖維持彩色 */
.map-link { margin-top: 20px; padding-bottom: 4px; }

/* ── 全站底線統一 ─────────────────────────────────────────────
   原本六處底線離文字下緣是 4.7／7.8／8.9／9.5／11.3／11.5px 六種距離。
   這裡全部收斂到約 4.5px（比原本平均近一倍）。
   border-bottom 受 line-height 的半行距影響、無法壓到那麼近，
   所以改用絕對定位的 ::after，位置與 padding 脫鉤。 */
.site-header nav a::after { bottom: 7px; }
.work-card h2::after { bottom: -2px; }
.text-link,
.compact-link,
.map-link { border-bottom: 0; position: relative; }
.text-link::after,
.compact-link::after,
.map-link::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; }
/* bottom 值各自不同是因為每個元素的 line-height 半行距不同；
   實測後的「離字距離」才是統一的（4.4–4.8px）。 */
.text-link::after { bottom: 6.3px; background: var(--line); }
.compact-link::after { bottom: 6.5px; background: #b0b0b0; }
.map-link::after { bottom: 4px; background: #c4c4c4; }

/* 這三個是常駐的連結樣式：線平常就要在，不然看不出可以點。
   所以不採「hover 才長出線」，改成滑過時一條深線由左往右覆蓋上去，
   收回時也往右退場——動作方向和入口框線、導覽底線一致。 */
.text-link::before,
.compact-link::before,
.map-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}
.text-link::before { bottom: 6.3px; }
.compact-link::before { bottom: 6.5px; }
.map-link::before { bottom: 4px; }
.text-link:hover::before, .text-link:focus-visible::before,
.compact-link:hover::before, .compact-link:focus-visible::before,
.map-link:hover::before, .map-link:focus-visible::before { transform: scaleX(1); }

/* 滑過時整塊往右挪一點——線變深之外再給一個位移，
   「可以點」的訊號比單純變色明顯得多。 */
.text-link,
.compact-link,
.map-link { transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
.text-link:hover, .text-link:focus-visible,
.compact-link:hover, .compact-link:focus-visible,
.map-link:hover, .map-link:focus-visible { transform: translateX(4px); }

/* 六階段索引也收進同一套語言：原本是瀏覽器原生的 text-decoration，
   改成同樣「線由左往右展開」。
   justify-self:start 讓每個項目收縮到內容寬度——原本是 grid 子項預設
   撐滿整欄，線會從 01 一路拉到欄位右邊，遠超過文字，讀的時候視線被帶走。 */
.process-index a { position: relative; justify-self: start; }
.process-index a:hover,
.process-index a:focus-visible { text-decoration: none; }
.process-index a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.22, .61, .36, 1);
}
.process-index a:hover::after,
.process-index a:focus-visible::after { transform: scaleX(1); }
/* 捲到哪一階段，索引就標出哪一階段（process-index.js）。
   線常駐、文字轉深，和 hover 的「線由左展開」區分得開。 */
.process-index a.is-current { color: var(--ink); }
.process-index a.is-current::after { transform: scaleX(1); }
.process-index a.is-current span { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .text-link::before, .compact-link::before, .map-link::before,
  .process-index a::after { transition: opacity .2s ease; transform: scaleX(1); opacity: 0; }
  .text-link:hover::before, .compact-link:hover::before, .map-link:hover::before,
  .process-index a:hover::after { opacity: 1; }
}
.process-index a:hover,
.process-index a:focus-visible { text-underline-offset: 7px; }

/* ── 6. 作品內頁：維持 Codex 的「照片先於文字」與照片尺寸 ──────────
   照片大小回到 4175 的格式：封面限高 78svh、橫圖 1180px，
   一屏就能看完整張，不必上下捲。 */
/* 坪數／房型／攝影原本獨立在右欄，和標題沒有關係；
   移到左欄，緊接在 RESIDENTIAL WORKS 底下。
   右欄跨兩列，左欄才會是「標籤 → 規格」兩段，而不是被撐到下一列。 */
.project-opening {
  max-width: var(--text-w);
  grid-template-columns: 150px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  row-gap: 0;
}
.project-opening > .section-label { grid-column: 1; grid-row: 1; }
.project-opening > div:not(.project-facts) { grid-column: 2; grid-row: 1 / span 2; }
.project-facts { grid-column: 1; grid-row: 2; align-self: start; flex-direction: column; gap: 5px; margin-top: 16px; padding-top: 0; }
/* 概要與設計說明維持同一個閱讀寬度，不要一行拉到 900px */
.project-intro { max-width: 690px; }
.project-story { max-width: var(--text-w); }
.project-intro,
.project-story p:last-child { white-space: pre-line; }
/* 單張直圖原本上限 390px，左右留白比照片本身還寬；放大但仍一屏可見 */
/* 封面原本被 max-height:78svh 限成 1053 寬，下面的橫圖卻是 1180 寬——
   點進去第一張反而比後面小。改成兩者都以「高度」為準，
   同比例的照片就會完全一樣大，不必去對寬度。
   高度用和三頁 hero 同一條算式：頁首 112 ＋ 照片 ＋ 下留白 112 = 滿屏，
   所以第一屏只有封面，文字要捲動才出現。 */
/* 作品照片比三頁的主視覺再大一階：這裡的照片就是作品本身。
   但底部仍要留白——貼齊視窗底會像被切掉。
   頁首 112 ＋ 照片 ＋ 下留白 72 = 滿屏；下留白比上方小一點，
   照片才拿得到空間，同時看得出來是「有留白」而不是切邊。
   上限 880（對應寬 1320，仍在容器 1350 之內）。
   橫圖用同一個 --shot-h，所以後面的照片永遠不會比封面大。 */
:root { --shot-h: clamp(400px, calc(100svh - 184px), 880px); }
.project-cover img,
.gallery-row.landscape img {
  max-height: var(--shot-h);
  max-width: 100%;
  width: auto;
  height: auto;
  margin-inline: auto;
}
.gallery-row.landscape { max-width: none; }
.gallery-row.landscape figure { width: auto; max-width: 100%; }
/* 封面區填滿桌面首屏剩餘高度，案名等捲動後才完整出現。
   手機版不套此高度，避免照片後出現過長空白。 */
@media (min-width: 801px) {
  .project-cover {
    min-height: calc(100svh - 112px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}

.gallery-row.portraits figure { width: min(100%, calc(66svh * var(--ratio))); max-width: 440px; }
.gallery-row.portraits.pair figure { width: min(calc((100% - 22px) / 2), calc(66svh * var(--ratio))); max-width: 420px; }
/* 頁尾分隔線原本比所有照片都寬 */
.project-end { max-width: calc(var(--container) - var(--side) * 2); padding-inline: 0; width: calc(100% - var(--side) * 2); }

/* ── 7. 全站字級規範 ─────────────────────────────────────────
   整合前全站散落 12 種字級：28／24／22／20／18／17／16／15／14／13／12。
   收斂成七級，每一級只有一個用途：

     28  作品標題   作品內頁的案名
     24  頁面主標   各頁面板主標、ABOUT 的品牌中文
     20  段落標題   六階段中文標題與編號、聯絡單位名、ABOUT 的品牌英文
     18  導覽       主選單、入口的品牌中文
     16  內文       所有內文／清單／聯絡資料／作品案名／頁面英文標題
     14  標籤註記   section-label、作品分類、小註記、地圖連結、欄位標籤
     12  極小       入口的 ENTER

   規則：品牌中英文並列時，英文一律比中文低一級
   （入口 18／16、ABOUT 24／20），對應 v6 的「英文略小於中文品牌」。 */

/* 22 → 20：六階段的中文標題與編號 */
.step-number { font-size: 20px; }
.step-body h2 { font-size: 20px; }
/* 17 → 16：頁面英文標題、流程那句引言 */
.collection-heading h1 { font-size: 16px; }
.process-detail-heading > p:last-of-type { font-size: 16px; }
/* 15 → 16：作品案名、作品概要與設計說明 */
.work-card h2 { font-size: 16px; }
.project-intro { font-size: 16px; }
.project-story p:last-child { font-size: 16px; }
/* 13 → 14：階段英文標籤、地圖連結、作品分類 */
.step-body .section-label { font-size: 14px; }
.map-link { font-size: 14px; }
.project-category { font-size: 14px; }
/* 16 → 14：聯絡欄位標籤比它的值低一級，層次才分得開 */
.contact-field-label { font-size: 14px; }
/* 13 → 14：坪數／房型／攝影 */
.project-facts { font-size: 14px; }
/* 17 → 16：入口品牌英文，比品牌中文（18）低一級 */
/* 入口品牌英文改全大寫。navigation.woff2 收錄完整 A–Z／a–z／0–9，
   實測不缺字、不會掉到系統字型。大寫字母本身較方正，字距要放大才不會擠。
   （HTML 原文仍是 Day2Day Design，只用 text-transform 顯示，要改回來拿掉這兩行即可。） */
.entry-english { font-size: 16px; text-transform: uppercase; letter-spacing: .12em; }
/* 站內其他兩處品牌英文一起大寫，否則入口大寫、內頁小寫會對不起來。
   navigation.woff2 有完整 A–Z，實測不缺字。 */
.about-brand-heading .about-english { text-transform: uppercase; letter-spacing: .08em; }
.contact-name span { text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 1050px) {
  .about-reading { grid-template-columns: 140px minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 800px) {
  .brand { width: 62px; }
  .works-page { padding-top: 22px; }
  .contact-map { height: 340px; }
  .project-cover img { max-height: none; }
  .project-end { width: calc(100% - var(--side) * 2); }
}

@media (max-width: 540px) {
  .brand { width: 54px; }
  .work-card h2 { margin-top: 4px; }
  .contact-map { height: 300px; }
  .gallery-row.portraits:not(.pair) figure { width: min(86%, calc(72svh * var(--ratio))); max-width: 330px; }
}

/* ── 8. 作品文案：案名與文字形成單一閱讀區塊 ───────────────────
   作品分類已由住宅／商空列表交代，內頁不再重複標示；原本的
   DESIGN NOTE 也拿掉，讓使用者直接閱讀完整文案。 */
.project-opening,
.project-story {
  display: block;
  max-width: 760px;
  text-align: center;
}
.project-opening {
  padding-top: 52px;
  margin-bottom: 18px;
  position: relative;
}
/* 封面大圖與案名文案之間加入與頁尾同寬的淡灰細線，
   把視覺開場與閱讀段落分開，不改變原有留白高度。 */
.project-opening::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(calc(100vw - var(--side) * 2), calc(var(--container) - var(--side) * 2));
  height: 1px;
  background: var(--line);
  transform: translateX(-50%);
}
.project-opening > .section-label,
.project-category,
.project-story > .section-label {
  display: none;
}
.project-opening h1 {
  margin-bottom: 20px;
  letter-spacing: .11em;
  text-indent: .11em;
}
.project-intro,
.project-story p:last-child {
  max-width: none;
  color: #555;
  font-size: 16px;
  line-height: 1.78;
  letter-spacing: .01em;
  text-align: center;
  text-wrap: pretty;
}
.project-story {
  margin: 0 auto 68px;
}
.project-facts:empty {
  display: none;
}
.project-facts:not(:empty) {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 20px;
  margin-top: 18px;
}

@media (max-width: 540px) {
  .project-opening {
    padding-top: 40px;
    margin: 0 auto 14px;
  }
  .project-opening h1 {
    margin-bottom: 14px;
  }
  .project-intro,
  .project-story p:last-child {
    line-height: 1.72;
  }
  .project-story {
    margin: 0 auto 48px;
  }
}

/* ── 9. 作品頁尾：上一案／全部作品／下一案 ─────────────────── */
.project-end {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 24px;
}
.project-end a {
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  position: relative;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1), color .25s ease;
}
#previous-project {
  justify-self: start;
  text-align: left;
}
#all-works {
  justify-self: center;
  text-align: center;
}
#next-project {
  justify-self: end;
  text-align: right;
}
.project-end small {
  overflow-wrap: anywhere;
}

/* 頁尾導覽的動作跟著實際去向：上一案往左、下一案往右，
   返回作品集稍微上浮並顯示短線。觸控裝置不套滑鼠動畫。 */
#all-works::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%) scaleX(0);
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
@media (hover: hover) and (pointer: fine) {
  #previous-project:hover,
  #previous-project:focus-visible { transform: translateX(-6px); }
  #next-project:hover,
  #next-project:focus-visible { transform: translateX(6px); }
  #all-works:hover,
  #all-works:focus-visible { transform: translateY(-3px); }
  #all-works:hover::after,
  #all-works:focus-visible::after { transform: translateX(-50%) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .project-end a,
  #all-works::after { transition: none; }
  #previous-project:hover,
  #previous-project:focus-visible,
  #all-works:hover,
  #all-works:focus-visible,
  #next-project:hover,
  #next-project:focus-visible { transform: none; }
}

@media (max-width: 540px) {
  .project-end {
    gap: 10px;
    font-size: 12px;
    letter-spacing: .035em;
  }
  .project-end small {
    font-size: 12px;
    line-height: 1.55;
    margin-top: 4px;
  }
}

/* ── 10. 桌面作品列表 ─────────────────────────────────────────
   保留完整 3:2 大圖，不限制 figure 高度；只收緊頁首與排間留白。 */
@media (min-width: 1100px) {
  .works-page { padding-top: 12px; }
  .collection-heading { margin-bottom: 18px; }
  .works-grid { row-gap: 18px; column-gap: 16px; }
}
/* 寬而矮的桌面視窗才收窄整個網格，圖片與案名一起等比縮放。
   不再限制單張 figure，所以不會出現小圖漂在大欄位內的錯位。 */
@media (min-width: 1400px) and (min-height: 850px) and (max-height: 979px) {
  .works-page {
    max-width: min(var(--container), calc(225svh - 563px + var(--side) + var(--side)));
  }
  /* 作品照片為了在一屏容納兩排而收窄時，頁首也沿用同一條右邊界，
     右上角 Logo 才不會突出於最右欄照片之外。 */
  .site-header {
    max-width: min(var(--container), calc(225svh - 563px + var(--side) + var(--side)));
  }
}