/* ================================================================
   而沃設計 aworkdesign 客戶樣式表（2026-09-23）
   依據：開工單〈四之四、風格卡〉——原站實測的字型、顏色、版面。
   只放標準旋鈕做不到的；每一段都對應風格卡的一列，改之前先對原站。
   ================================================================ */

/* 字型：選單與內文 Roboto；標題原站是 Droid Serif（Google Fonts 已下架，用後繼的 Noto Serif）。
   Droid Serif 沒有中文字，原站的中文標題其實是瀏覽器退回系統黑體（Mac 蘋方、Windows 微軟正黑），
   所以中文不配明體，照原站走系統黑體（2026-09-24 Rex：/residence 字型要跟原站一樣） */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Noto+Serif:wght@700&display=swap");

.ms-root {
  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", sans-serif;
  --font-heading: "Noto Serif", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --aw-black: #0a0a0a;          /* 原站首頁、About 內容區的黑 */
  --aw-heading: #2a2a2a;        /* 原站標題色 */
  --aw-text: #626262;           /* 原站內文灰 */
  --aw-text-on-dark: #c8c8c8;
  color: var(--aw-text);
}

/* 內文：原站 #wsite-content p 一律 #626262（2026-09-24 Rex：Awards 文字兩種顏色，沒帶顏色的字吃到版型的近黑色） */
.ms-root .ms-prose { color: var(--aw-text); }

.ms-root .ms-h1,
.ms-root .ms-h2,
.ms-root .ms-h3,
.ms-root .ms-prose h1,
.ms-root .ms-prose h2,
.ms-root .ms-prose h3 {
  color: var(--aw-heading);
}

/* ---------- 選單：Roboto 14px 粗體全大寫、字距 0.7px；目前頁用細框框起來；原站選單列不放站名 ---------- */
.ms-nav__logo { visibility: hidden; }

.ms-root .ms-nav__link {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #000;
  border: 1px solid transparent;
  padding: 6px 14px;
}

.ms-root .ms-nav__link.is-active {
  border-color: currentColor;
  color: #000;
}

/* ---------- 首頁：滿版照（100vh）＋正中方形 logo、沒有暗色遮罩；選單透明浮在照片上，捲動後變白 ---------- */
.ms-page--home .ms-nav {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.ms-page--home .ms-nav.is-scrolled { background: #fff; }

.ms-page--home .ms-nav:not(.is-scrolled) .ms-nav__link { color: #fff; }

/* 手機選單按鈕只顯示漢堡圖示，不顯示「選單」兩個字（2026-09-29 Rex）；字只是視覺上藏起來，螢幕閱讀器仍讀得到按鈕名稱 */
.ms-root .ms-nav__toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 手機選單按鈕（「選單」＋三條線）疊在照片上時也要白色：首頁、About、Awards */
.ms-page--home .ms-nav:not(.is-scrolled) .ms-nav__toggle,
.ms-page--about .ms-nav:not(.is-scrolled) .ms-nav__toggle,
.ms-page--awards .ms-nav:not(.is-scrolled) .ms-nav__toggle { color: #fff; }

.ms-page--home .ms-hero--home {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-page--home .ms-hero__veil { display: none; }

/* 首屏照片固定不動、內容往上捲時蓋過去（原站 background-attachment: fixed，對齊照片上緣）。
   不用 background-attachment：iOS Safari 不支援；改成照片 position: fixed，再用 clip-path 把它裁在首屏範圍內 */
.ms-page--home .ms-hero--home { clip-path: inset(0); }

.ms-page--home .ms-hero--home .ms-hero__media {
  position: fixed;
  inset: 0;
  height: 100vh;
}

.ms-page--home .ms-hero--home .ms-hero__media img { object-position: 50% 0; }

.ms-page--home .ms-hero--home .ms-hero__content {
  padding: 0;
  width: 100%;
  text-align: center;
}

.ms-page--home .ms-hero__logo { width: min(280px, 55vw); }

/* 首頁 ABOUT／AWARDS 與 PROJECTS：黑底白字 */
.ms-page--home main .ms-section,
.ms-page--about main .ms-section {
  background: var(--aw-black);
  color: var(--aw-text-on-dark);
}

.ms-page--home main .ms-section .ms-prose,
.ms-page--about main .ms-section .ms-prose { color: var(--aw-text-on-dark); }

.ms-page--home main .ms-section h1,
.ms-page--home main .ms-section h2,
.ms-page--home main .ms-section h3,
.ms-page--about main .ms-section h1,
.ms-page--about main .ms-section h2,
.ms-page--about main .ms-section h3 { color: #fff; }

.ms-page--home .ms-home-list__title { color: #fff; }

/* ---------- About／Awards：原站頁首是 600px 高的橫幅照，從畫面最頂端開始，選單透明疊在照片上（白字、目前頁白框），
   捲動後選單變白；只放照片、不加遮罩、不放標題（標題在內文裡）。2026-09-24 對原站量過：桌機固定 600px ---------- */
.ms-page--about .ms-nav,
.ms-page--awards .ms-nav {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.ms-page--about .ms-nav.is-scrolled,
.ms-page--awards .ms-nav.is-scrolled { background: #fff; }

.ms-page--about .ms-nav:not(.is-scrolled) .ms-nav__link,
.ms-page--awards .ms-nav:not(.is-scrolled) .ms-nav__link { color: #fff; }

.ms-page--about .ms-hero,
.ms-page--awards .ms-hero { height: 600px; min-height: 0; }

.ms-page--about .ms-hero__veil,
.ms-page--awards .ms-hero__veil { display: none; }

.ms-page--about .ms-hero__media img { object-position: 50% 0; }
.ms-page--awards .ms-hero__media img { object-position: 50% 58%; }   /* 原站 background-position 50% 57.97% */

.ms-page--awards main .ms-section { padding-top: 56px; }

@media (max-width: 767px) {
  .ms-page--about .ms-hero,
  .ms-page--awards .ms-hero { height: 62vw; }   /* 原站手機只剩 120px，太扁，照桌機比例縮 */
}

/* ---------- 住宅／商業列表：原站沒有頁首色塊，直接是作品列表 ---------- */
.ms-page--list .ms-hero {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ms-page--list main .ms-section { padding-top: 56px; }


/* ---------- 作品頁：沒有灰色頁首、襯線字兩行標題靠左；資訊是純文字行不是表格 ---------- */
.ms-page--detail .ms-hero {
  background: #fff;
}

.ms-page--detail .ms-hero .ms-h1 {   /* 照原站：32px、#626262、粗體、行高 54px（2026-09-24 Rex） */
  color: var(--aw-text);
  font-size: 32px;
  font-weight: 700;
  line-height: 54px;
}

.ms-page--detail .ms-breadcrumb a { color: var(--aw-text); }

.ms-page--detail .ms-work-info {
  border: 0;
  padding: 0;
  margin: 8px 0 28px;
  gap: 2px;
}

.ms-page--detail .ms-work-info__row {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0;
}

.ms-page--detail .ms-work-info dt {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--aw-text);
}

.ms-page--detail .ms-work-info dt::after { content: "："; }

.ms-page--detail .ms-work-info dd { font-size: 15px; color: var(--aw-text); }

/* ---------- 頁尾：原站淺灰底（白底疊 5% 黑）、只有靠右的四個實心黑色社群圖示（20px、間距 10px），下面一行版權小字 ---------- */
.ms-root .ms-footer {
  background: #f2f2f2;
  padding-top: 64px;
  padding-bottom: 56px;
}

.ms-footer__grid > .ms-footer__col:not(:has(.ms-footer__social)) { display: none; }

.ms-footer__grid {
  display: flex;
  justify-content: flex-end;
}

.ms-footer__col > .ms-nav__logo,
.ms-footer__col > .ms-body { display: none; }

.ms-footer__social--icons .ms-social { gap: 10px; }

.ms-root .ms-footer__social--icons .ms-social__link { color: #000; }
.ms-root .ms-footer__social--icons .ms-social__link:hover { color: #000; opacity: .6; }
.ms-footer__social--icons .ms-social__link svg { width: 20px; height: 20px; }

.ms-root .ms-footer__bottom {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
  justify-content: flex-end;
}

.ms-footer__bottom .ms-caption {
  font-size: 10px;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- 原站沒有任何圓角：選單框、按鈕、卡片、輪播一律方角 ---------- */
.ms-root {
  --radius-md: 0;
  --radius-card: 0;
  --radius-pill: 0;
}

.ms-root .ms-carousel__stage,
.ms-root .ms-carousel__slide img,
.ms-root .ms-carousel__thumb,
.ms-root .ms-carousel__thumb img { border-radius: 0; }

/* 作品頁輪播：照原站 Weebly 相簿，舞台 4:3（原站 1120×840）、透明底，照片完整顯示不裁切、在舞台裡置中——
   直式照片左右留白、橫式上下留白（2026-09-29 客戶反映直的照片被裁掉，原本是固定橫式比例＋cover） */
.ms-root .ms-post__carousel .ms-carousel__stage {
  aspect-ratio: 4 / 3;
  background: transparent;
  border: 0;
}

.ms-root .ms-post__carousel .ms-carousel__slide img { object-fit: contain; }

/* ---------- 列表：原站沒有搜尋框。一行一個作品，照原站量的（2026-09-24）：
   容器 1150px、照片欄 74%／文字欄 26%（兩欄各 15px 內距 → 中間 30px）、照片 803×448、
   標題 24px 粗體灰字、行高 54px（兩行之間很開）、SEE MORE 12px 內距 14/30、每列間距約 80px ---------- */
.ms-page--list .ms-list-search { display: none; }

.ms-root .ms-feature-rows { gap: 79px; }

.ms-root .ms-feature-row {
  grid-template-columns: minmax(0, 838fr) minmax(0, 312fr);   /* 原站兩欄實測 838px／312px */
  gap: 0;
}

.ms-root .ms-feature-row__media { aspect-ratio: 803 / 448; margin: 0 15px; }

.ms-root .ms-feature-row__body { gap: 22px; padding: 0 15px; }

.ms-root .ms-feature-row__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 54px;   /* 原站 h2 的行高，字比照片上緣低一點、兩行之間很開 */
}

.ms-root .ms-feature-row__title a { color: var(--aw-text); }

.ms-root .ms-feature-row .ms-btn--outline {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.36px;
  padding: 14px 30px;
  line-height: 12px;
  color: #000;
  border-color: #000;
}

/* ---------- 作品頁：標題下緊接資訊（原站中間只有一條細線） ---------- */
/* 標題跟下面的資訊、照片同一條左緣（原站是這樣；2026-09-24 Rex「作品內頁的文字對齊」）。
   版型的明細頁頁首是窄版 820px 置中，這裡放寬成跟內容同寬 */
.ms-page--detail .ms-hero--narrow .ms-hero__content { max-width: calc(var(--container-max) + 2 * var(--container-pad)); }   /* 頁首自己有左右內距，寬度要加回來才會跟內容對齊 */

/* 資訊文字照原站：16px、行高 23px、#696969 */
.ms-page--detail .ms-work-info dt,
.ms-page--detail .ms-work-info dd { font-size: 16px; line-height: 23px; color: #696969; }

.ms-page--detail .ms-hero .ms-hero__content {
  padding-bottom: 16px;
}

.ms-page--detail main .ms-section { padding-top: 16px; }

.ms-page--detail .ms-post > .ms-caption { display: none; }   /* 完工年份已經在資訊表裡，不用再印一次 */

.ms-page--detail .ms-work-info {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

@media (max-width: 767px) {
  .ms-root .ms-feature-row { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Projects：原站深灰底（#3b3b3b）、沒有頁首色塊；一個分類一行，左欄 74%（684px 拼貼圖置中）、右欄分類名＋SEE MORE ---------- */
.ms-page--projects .ms-hero {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ms-page--projects main .ms-section {
  background: #3b3b3b;
  padding-top: 60px;
  padding-bottom: 80px;
}

.ms-root .ms-cat-rows { gap: 56px; }

.ms-root .ms-cat-rows .ms-feature-row__media { margin: 0; }

.ms-root .ms-cat-rows .ms-feature-row__media {
  aspect-ratio: auto;
  background: none;
  display: flex;
  justify-content: center;
}

.ms-root .ms-cat-rows .ms-feature-row__media img {
  width: 100%;
  max-width: 684px;
  height: auto;
}

/* ---------- Press：原站白底、沒有頁首色塊。內容改由後台「媒體報導」（media 模組）產生（2026-09-24 Rex）：
   每個分類一區，分類名置中（原站 32px 粗體 #2a2a2a、行高 54px），下面兩欄報導截圖、每張約 420px 在欄內置中、沒有框 ---------- */
.ms-page--press .ms-hero {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ms-page--press main .ms-section { padding-top: 56px; }

.ms-page--press .ms-photo-list-group .ms-list-group__title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 54px;
  color: var(--aw-heading);
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  margin: 0 0 40px;
  padding: 0;
}

.ms-page--press .ms-photo-list {
  gap: 40px 24px;
  align-items: center;
  justify-items: center;
}

.ms-page--press .ms-photo-list__item { width: 100%; max-width: 433px; }

.ms-page--press .ms-photo-list-group + .ms-photo-list-group { margin-top: 96px; }

/* ---------- Contact：原站沒有頁首色塊；左邊（約 58%）Contact Us＋說明＋表單，右邊（約 42%）小標題列聯絡資訊、最下面地圖 ---------- */
.ms-page--contact .ms-hero {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ms-page--contact main .ms-section { padding-top: 60px; }

.ms-page--contact .ms-contact {
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: 40px;
}

.ms-page--contact .ms-contact > .ms-info { order: 2; gap: 56px; }

/* 資訊：不要圖示，改成原站的小標題（襯線 13px 全大寫），順序 EMAIL → TEL/FAX → ADDRESS */
.ms-page--contact .ms-info__icon { display: none; }

.ms-page--contact .ms-info__item {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ms-page--contact .ms-info__item::before {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--aw-heading);
}

.ms-page--contact .ms-info__item--email { order: 1; }
.ms-page--contact .ms-info__item--email::before { content: "EMAIL ADDRESS"; }
.ms-page--contact .ms-info__item--phone { order: 2; }
.ms-page--contact .ms-info__item--phone::before { content: "TEL / FAX"; }
.ms-page--contact .ms-info__item--address { order: 3; }
.ms-page--contact .ms-info__item--address::before { content: "ADDRESS"; }
.ms-page--contact .ms-info__item--hours { order: 4; }
.ms-page--contact .ms-info__item--hours::before { content: "HOURS"; }
.ms-page--contact main .ms-section:has(.ms-contact) { padding-bottom: 0; }
.ms-page--contact main .ms-section--tight { padding-top: 10px; }   /* 原站地圖緊接在兩欄下方 10px */

.ms-page--contact .ms-map {   /* 原站地圖在兩欄下方單獨一整列、高 250px，沒有框 */
  aspect-ratio: auto;
  height: 250px;
  border: 0;
}

.ms-page--contact .ms-info__text {
  padding-top: 0;
  font-size: 16px;
  line-height: 23px;
  color: var(--aw-text);
}

.ms-page--contact .ms-info__text a,
.ms-page--contact a.ms-info__text { color: var(--aw-text); }
.ms-page--contact a.ms-info__text { text-decoration: underline; }

/* 表單：原站是平的（沒有卡片框），標題襯線 42px，欄位細灰框、方角，SUBMIT 是黑框透明底 */
.ms-page--contact .ms-form {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  gap: 18px;
}

.ms-page--contact .ms-form > .ms-h3 {
  order: -3;
  font-size: 42px;
  line-height: 54px;
  font-weight: 700;
  margin: 0;
}

.ms-page--contact .ms-form > .ms-body {
  order: -2;
  font-size: 16px;
  line-height: 23px;
  color: var(--aw-text);
  margin: 0 0 10px;
}

/* 「* 表示必填欄位」原站在表單最上面、SUBMIT 在最下面靠左 */
.ms-page--contact .ms-form .ms-row-between { display: contents; }
.ms-page--contact .ms-form .ms-row-between > .ms-caption { order: -1; font-size: 11px; color: #000; }
.ms-page--contact .ms-form .ms-row-between > .ms-btn { align-self: flex-start; }

.ms-page--contact .ms-field label {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  color: #000;
}

.ms-page--contact .ms-field input,
.ms-page--contact .ms-field textarea {
  max-width: 370px;
  border: 1px solid rgba(0, 0, 0, .4);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  padding: 10px 20px;
}

.ms-page--contact .ms-field input { height: 40px; }
.ms-page--contact .ms-field textarea { height: 100px; min-height: 100px; }

.ms-page--contact .ms-form .ms-btn {
  background: transparent;
  color: #000;
  border: 1px solid #000;
  border-radius: 0;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  padding: 14px 30px;
  min-height: 0;
}

.ms-page--contact .ms-form .ms-btn:hover { background: #000; color: #fff; }

@media (max-width: 1023px) {
  .ms-page--contact .ms-contact { grid-template-columns: 1fr; gap: 64px; }
  .ms-page--contact .ms-form > .ms-h3 { font-size: 32px; line-height: 42px; }
}