/* ============================================================
   Lumi Nail Atelier — 共用樣式
   ============================================================ */

/* ---------- 自託管字型 ----------
   原本走 fonts.googleapis.com + fonts.gstatic.com，等於每次載入要多花
   兩次 DNS + TLS，而且字型檔要等 Google 的 CSS 回來才開始下載。改為
   自託管後少掉那兩個第三方連線，CSP 也能收緊成 default-src 'self'。

   只取 latin subset：站上是英文內容，中文由系統字型渲染（這兩套字型
   本來就不含中文字），latin-ext 的東歐字母用不到。
   unicode-range 沿用 Google 原本的宣告，含常用標點與貨幣符號。

   三個檔案共 87KB。Jost 的 300/400/500 與 Playfair 的 400/500 在
   Google 那邊本來就指向同一個檔案，所以這裡的 @font-face 雖然分開
   宣告，實際只會下載三個檔案，渲染結果與改動前一致。
   ---------------------------------- */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/jost-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jost-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jost-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/playfair-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/playfair-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/playfair-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */
:root {
  --cream:      #f6f0e7;
  --cream-lift: #fbf7f0;
  --sand:       #ece3d6;
  --sand-deep:  #ded2c1;
  --ink:        #2a1e18;
  --ink-soft:   #574940;
  --ink-mute:   #8a7a6e;
  --clay:       #b0785c;
  --clay-deep:  #96604a;
  --line:       #ded1c0;
  --line-soft:  #e8ddcd;

  --serif: "Playfair Display", "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(20px, 4.4vw, 68px);
  --maxw: 1420px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul  { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0;
}

::selection { background: var(--clay); color: var(--cream); }

/* ---------- Shared atoms ---------- */
.shell { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 400;
  margin: 0;
}

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* 深色實心藥丸按鈕 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 38px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream-lift);
  font-size: 14px;
  letter-spacing: 0.08em;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { background: #3d2c23; transform: translateY(-2px); }

.btn--wide { width: 100%; }

.btn--caps { letter-spacing: 0.18em; text-transform: uppercase; font-size: 13px; }

/* 線框藥丸按鈕 */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 40px;
  border: 1px solid var(--clay);
  border-radius: 999px;
  color: var(--clay-deep);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.btn-ghost:hover { background: var(--clay); color: var(--cream-lift); }

/* 帶底線的文字連結 */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.link-arrow:hover { color: var(--clay); border-color: var(--clay); }
.link-arrow svg { flex: none; }

/* ============================================================
   Header
   ============================================================ */
.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}

/* 首頁 hero 上的透明 header */
.site-head--over {
  position: absolute;
  inset: 0 0 auto 0;
  background: transparent;
  border-bottom: 0;
}
.site-head--over .head-inner::after {
  content: "";
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--line) 42%, rgba(255, 246, 236, .5));
}

.head-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--pad);
  display: flex;
  align-items: center;
  gap: 28px;
}

.wordmark { display: block; }
.wordmark b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 2vw, 27px);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.wordmark span {
  display: block;
  margin-top: 5px;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.6vw, 44px);
}
.nav a {
  position: relative;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 4px;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--clay);
  transition: right .4s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--ink); }

/* 首頁：nav 疊在深色照片上，各狀態都維持淺色（含 hover），
   靠底線動畫表達 hover。需寫在 .nav a:hover 之後才蓋得過。 */
.site-head--over .nav a,
.site-head--over .nav a:hover,
.site-head--over .nav a[aria-current="page"] {
  color: #fff;
  text-shadow: 0 1px 10px rgba(38, 26, 20, .55), 0 0 2px rgba(38, 26, 20, .35);
}
.site-head--over .nav a::after { background: rgba(255, 255, 255, .9); }

/* 漢堡鈕 */
.burger {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 30px;
  padding: 0;
  position: relative;
}
.burger i {
  position: absolute;
  left: 4px; right: 4px;
  height: 1.5px;
  background: var(--clay-deep);
  transition: transform .35s var(--ease), opacity .25s;
}
.burger i:nth-child(1) { top: 7px; }
.burger i:nth-child(2) { top: 14px; }
.burger i:nth-child(3) { top: 21px; }

/* ============================================================
   行動版全屏選單（參考 11-mobile-menu）
   ============================================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  padding: 22px var(--pad) 30px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  /* visibility 關閉時延到動畫結束、開啟時立即生效，
     否則過渡期間元素仍不可聚焦，focus() 會落空 */
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s;
}

.mm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
/* 品牌名兼作回首頁的入口（選單五項不含首頁） */
.mm-top .mm-home {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.mm-top .mm-home:hover,
.mm-top .mm-home:focus-visible { border-color: var(--clay); }
.mm-close { font-size: 30px; line-height: 1; color: var(--ink); }

.mm-list li { border-bottom: 1px solid var(--line); }
.mm-list a {
  display: flex;
  align-items: baseline;
  gap: 26px;
  padding: 22px 0;
}
.mm-list em {
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--clay);
}
.mm-list span {
  font-family: var(--serif);
  font-size: clamp(34px, 9vw, 46px);
  line-height: 1;
}

.mm-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 26px 0 22px;
}
.mm-shots img { width: 100%; height: 150px; object-fit: cover; }

.mm-contact { font-size: 15px; line-height: 1.8; }
.mm-contact .eyebrow { margin-bottom: 6px; }
.mobile-menu .btn { margin-top: 22px; }

/* ============================================================
   Footer
   ============================================================ */
.site-foot {
  margin-top: clamp(70px, 9vw, 130px);
  border-top: 1px solid var(--line);
  background: var(--cream);
}
.foot-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(46px, 6vw, 78px) var(--pad);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(30px, 5vw, 70px);
}
.foot-grid h3 {
  font-size: clamp(26px, 2.6vw, 34px);
  margin-bottom: 14px;
}
.foot-grid p:not(.eyebrow) { margin: 0; color: var(--ink-soft); font-size: 15px; max-width: 34ch; }
.foot-col .eyebrow { margin-bottom: 16px; }
.foot-col li { margin-bottom: 11px; font-size: 15px; color: var(--ink-soft); }
.foot-col a:hover { color: var(--clay); }

.foot-base {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--pad) 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ============================================================
   Logo mark（SVG 用）
   ============================================================ */
.logomark { display: block; margin: 0 auto; }
.logomark-wrap { text-align: center; }
.logomark-wrap b {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clay);
}
.logomark-wrap span {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ============================================================
   1 — 首頁 Hero（參考 01 / 09）
   ============================================================ */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  min-height: min(100vh, 940px);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  /* 左內距對齊 .shell 的左緣（header 與內頁內容共用同一基準），
     右側留白刻意收窄，讓標題貼近照片邊緣（同參考稿）。 */
  padding: 150px clamp(14px, 1.8vw, 28px) 90px
           max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
}
.hero-copy .eyebrow { letter-spacing: 0.32em; }
.hero h1 {
  margin: 24px 0 30px;
  font-size: clamp(56px, 7.6vw, 118px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.hero-lede {
  margin: 0 0 42px;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 31ch;
}
.hero-shot { position: relative; overflow: hidden; }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
/* 讓照片左緣柔和融入米色 */
.hero-shot::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 22%;
  background: linear-gradient(90deg, var(--cream), rgba(246, 240, 231, 0));
  z-index: 2;
  pointer-events: none;
}

/* ============================================================
   2 — Signature Highlights（參考 02）
   ============================================================ */
.section { padding-block: clamp(58px, 7.5vw, 104px); }
.section--top-rule { border-top: 1px solid var(--line); }

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.sec-head h2 { font-size: clamp(32px, 3.9vw, 52px); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3.3vw, 48px);
}
.feature figure { margin: 0; overflow: hidden; }
.feature img {
  width: 100%;
  aspect-ratio: 43 / 61;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.feature:hover img { transform: scale(1.04); }
.feature figcaption { text-align: center; padding-top: 26px; }
.feature h3 { font-size: clamp(23px, 2.1vw, 29px); }
.feature p {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clay);
}

.center-cta { text-align: center; margin-top: clamp(40px, 5vw, 66px); }

/* ============================================================
   3 — Gallery（參考 03 / 10）
   ============================================================ */
.gallery-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(26px, 4vw, 60px);
  align-items: start;
  padding-top: clamp(34px, 4vw, 52px);
}
.gallery-head h1 {
  margin: 14px 0 18px;
  font-size: clamp(52px, 7vw, 96px);
  line-height: 0.92;
}
.gallery-head .lede {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.15vw, 17px);
}
.gallery-shot img { width: 100%; height: clamp(240px, 24vw, 336px); object-fit: cover; }

.filters { margin-top: clamp(26px, 3.4vw, 40px); display: grid; gap: 12px; }
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip:hover { border-color: var(--clay); color: var(--clay-deep); }
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream-lift);
}

.result-bar {
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.works {
  margin-top: clamp(20px, 2.4vw, 30px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 1.8vw, 26px) clamp(14px, 1.6vw, 22px);
}
.work {
  text-align: left;
  padding: 0;
  display: block;
  width: 100%;
}
.work figure { margin: 0; overflow: hidden; background: var(--sand); }
.work img {
  width: 100%;
  aspect-ratio: 213 / 198;
  object-fit: cover;
  transition: transform 1s var(--ease), opacity .4s;
}
.work:hover img { transform: scale(1.05); }
.work h3 {
  margin-top: 15px;
  font-size: clamp(19px, 1.55vw, 23px);
}
.work p {
  margin: 7px 0 0;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.work[hidden] { display: none; }

.works-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--ink-mute);
  font-size: 15px;
}

/* ============================================================
   4 — Work detail modal（參考 04 / 12）
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(42, 30, 24, .42);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  /* 同 .mobile-menu：visibility 開啟時立即生效，否則彈窗開啟瞬間聚焦不上 */
  transition: opacity .35s var(--ease), visibility 0s .35s;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s var(--ease), visibility 0s;
}

.modal-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: min(1020px, 100%);
  max-height: min(700px, 92vh);
  background: var(--cream-lift);
  overflow: hidden;
  transform: translateY(14px) scale(.985);
  transition: transform .4s var(--ease);
}
.modal.is-open .modal-card { transform: none; }

.modal-shot { position: relative; background: var(--sand); overflow: hidden; }
.modal-shot img { width: 100%; height: 100%; object-fit: cover; }

.modal-body {
  padding: clamp(26px, 3.4vw, 48px);
  overflow-y: auto;
}
.modal-count {
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--clay);
}
.modal-body h2 {
  margin: 14px 0 8px;
  font-size: clamp(34px, 3.4vw, 50px);
}
.modal-kind {
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--clay);
}
.modal-desc { margin: 0 0 30px; color: var(--ink-soft); font-size: 15.5px; }

.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 26px;
  margin-bottom: 28px;
}
.spec dt {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay);
}
.spec dd {
  margin: 7px 0 0;
  font-family: var(--serif);
  font-size: 20px;
}

.meta-rows { border-top: 1px solid var(--line); margin-bottom: 28px; }
.meta-rows div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.meta-rows dt {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay);
}
.meta-rows dd { margin: 0; font-family: var(--serif); font-size: 21px; }

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cream-lift);
  display: grid;
  place-items: center;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.modal-close:hover { background: var(--sand); transform: rotate(90deg); }
.modal-close:focus { outline: none; }
.modal-close:focus-visible { outline: 1.5px solid var(--clay); outline-offset: 3px; }

/* 上下件切換：浮在照片左右緣 */
.modal-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
}
.modal-nav button {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(222, 209, 192, .9);
  background: rgba(251, 247, 240, .84);
  color: var(--ink);
  font-size: 17px;
  line-height: 1;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.modal-nav button:hover { background: var(--cream-lift); transform: scale(1.06); }

/* ============================================================
   5 — Services（參考 05 / 13）
   ============================================================ */
.svc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(30px, 4.6vw, 68px);
  padding-top: clamp(28px, 3.4vw, 44px);
}
.svc-layout h1 {
  font-size: clamp(56px, 8vw, 116px);
  line-height: 0.9;
}
.svc-lede {
  margin: 26px 0 clamp(30px, 4vw, 46px);
  color: var(--ink-soft);
  font-size: clamp(16px, 1.25vw, 18px);
}

.price-list { border-top: 1px solid var(--line); }
.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 200px);
  align-items: center;
  gap: 10px 18px;
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-bottom: 1px solid var(--line);
}
.price-row .main {
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 3.6vw, 58px);
}
.price-row .num {
  flex: none;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--clay);
}
.price-row h3 { font-size: clamp(25px, 2.3vw, 32px); }
.price-row .kind {
  margin: 5px 0 9px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
}
.price-row .desc { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.price-row .dur { font-size: 15px; color: var(--ink-soft); }
.price-row .amt {
  justify-self: end;
  font-family: var(--serif);
  font-size: clamp(32px, 3.2vw, 46px);
  white-space: nowrap;
}
.price-row .amt small {
  font-size: 0.44em;
  letter-spacing: 0.06em;
  margin-right: 2px;
  vertical-align: 0.42em;
}
.price-note {
  margin: 22px 0 0;
  text-align: right;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.svc-shots { display: grid; gap: 12px; align-content: start; }
.svc-shots > img:first-child { width: 100%; height: clamp(320px, 40vw, 562px); object-fit: cover; }
.svc-shots-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.svc-shots-pair img { width: 100%; height: clamp(170px, 20vw, 288px); object-fit: cover; }

/* ============================================================
   6 — About（參考 06 / 14）
   ============================================================ */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(34px, 6vw, 96px);
  align-items: center;
  padding-top: clamp(28px, 3.4vw, 46px);
}
.about-shot { display: block; }
.about-shot img { width: 100%; height: clamp(420px, 58vw, 866px); object-fit: cover; }

.about-copy .eyebrow { letter-spacing: 0.3em; }
.about-copy .eyebrow + .rule { width: 38px; margin: 16px 0 clamp(24px, 3vw, 40px); background: var(--clay); }
.about-copy h1 {
  font-size: clamp(54px, 7vw, 104px);
  letter-spacing: 0.01em;
}
.about-quote {
  margin: clamp(26px, 3vw, 40px) 0 clamp(30px, 4vw, 48px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1.45;
  color: var(--ink);
}
.fact-list { border-top: 1px solid var(--line); margin-bottom: clamp(30px, 4vw, 46px); }
.fact-list div {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.fact-list dt {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.fact-list dd { margin: 0; font-size: 16px; color: var(--ink-soft); }
.fact-list dd b { font-weight: 300; }
.fact-list .dot { color: var(--clay); margin: 0 6px; }

/* ============================================================
   7 — Testimonials（參考 07 / 16）
   ============================================================ */
.testi-intro { text-align: center; padding-top: clamp(26px, 3.2vw, 44px); }
.testi-intro h1 {
  margin: 20px auto 0;
  max-width: 30ch;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.18;
}
.testi-mark { margin: clamp(30px, 4vw, 50px) 0 clamp(28px, 3.6vw, 44px); }

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.testi {
  padding: 0 clamp(20px, 4.6vw, 82px);
  text-align: center;
  border-left: 1px solid var(--line);
}
.testi:first-child { border-left: 0; }
.testi .quote-mark {
  font-family: var(--serif);
  font-size: 62px;
  line-height: .6;
  color: var(--clay);
}
.testi blockquote {
  margin: 26px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.5;
}
.testi .sep { width: 68px; height: 1px; background: var(--line); margin: 26px auto; border: 0; }
.testi .who {
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.testi .when {
  margin: 8px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.testi img {
  width: 100%;
  height: clamp(240px, 24vw, 338px);
  object-fit: cover;
  margin-top: 26px;
}

/* 行動版單卡輪播（參考 16） */
.testi-slider { display: none; }
.testi-card {
  background: var(--cream-lift);
  padding: 34px clamp(18px, 5vw, 34px) 40px;
  text-align: center;
}
.testi-card .quote-mark { font-family: var(--serif); font-size: 60px; line-height: .6; color: var(--clay); }
.testi-card blockquote {
  margin: 26px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 5vw, 24px);
  line-height: 1.5;
}
.testi-card .sep { width: 130px; height: 1px; background: var(--clay); margin: 26px auto; border: 0; }
.testi-card .who { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; }
.testi-card img { width: 100%; max-width: 380px; margin: 28px auto 0; height: 400px; object-fit: cover; }

.dots { display: flex; justify-content: center; gap: 16px; margin-top: 28px; }
.dots button {
  width: 11px; height: 11px;
  border: 1px solid var(--clay);
  border-radius: 50%;
  padding: 0;
}
.dots button.is-active { background: var(--clay); }

/* ============================================================
   8 — Booking（參考 08 / 15）
   ============================================================ */
.booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .48fr) minmax(0, 1.22fr);
  gap: clamp(26px, 3.4vw, 52px);
  align-items: start;
  padding-top: clamp(28px, 3.4vw, 44px);
}
.booking-intro h1 {
  margin: 18px 0 30px;
  font-size: clamp(38px, 3.7vw, 52px);
  line-height: 1.08;
}
.booking-intro > p:not(.eyebrow) {
  margin: 0 0 30px;
  font-size: clamp(15px, 1.2vw, 17.5px);
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 46ch;
}
.notes li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 13px;
  font-size: 15px;
  color: var(--ink-soft);
}
.notes li::before {
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--clay);
}

.contact-list { margin-top: clamp(28px, 3.4vw, 40px); border-top: 1px solid var(--line); }
.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.contact-list svg { flex: none; margin-top: 3px; color: var(--clay); }
.contact-list .eyebrow { margin-bottom: 5px; }
/* :not(.eyebrow) —— 否則元素選擇器 (0,1,1) 會蓋掉 .eyebrow (0,1,0) 的字級與顏色 */
.contact-list p:not(.eyebrow) { margin: 0; font-size: 17px; color: var(--ink-soft); line-height: 1.55; }

.booking-shots { display: grid; gap: 14px; }
.booking-shots img { width: 100%; object-fit: cover; }
.booking-shots img:first-child { height: clamp(280px, 30vw, 448px); }
.booking-shots img:last-child  { height: clamp(240px, 25vw, 368px); }

.selection {
  background: var(--cream-lift);
  padding: clamp(26px, 3vw, 44px);
}
.selection > .eyebrow { letter-spacing: 0.28em; }
.sel-head {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin: 24px 0 26px;
}
.sel-head img { width: 100%; height: 152px; object-fit: cover; }
.sel-head h2 { font-size: clamp(25px, 2.2vw, 33px); line-height: 1.12; }
.sel-head p {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  line-height: 1.9;
}
.sel-rows { border-top: 1px solid var(--line); margin-bottom: 26px; }
.sel-rows div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.sel-rows dt {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.sel-rows dd { margin: 0; font-size: 16px; color: var(--ink-soft); text-align: right; }
.sel-rows .total dd {
  font-family: var(--serif);
  font-size: clamp(34px, 3.4vw, 50px);
  color: var(--clay-deep);
}
.sel-adjust {
  display: block;
  margin: 18px auto 0;
  width: fit-content;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--clay);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay-deep);
}

/* ---------- 未選擇時的服務挑選 ---------- */
.sel-choose-title {
  margin: 22px 0 10px;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.12;
}
.sel-choose-lede {
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--ink-soft);
}

.sel-options { border-top: 1px solid var(--line); }
.sel-options li { border-bottom: 1px solid var(--line); }
.sel-options button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 16px;
  width: 100%;
  padding: 17px 4px;
  text-align: left;
  transition: padding-inline .3s var(--ease), background .3s var(--ease);
}
.sel-options button:hover,
.sel-options button:focus-visible {
  background: rgba(222, 209, 192, .28);
  padding-inline: 12px 10px;
}
.so-name {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.2;
}
.so-kind {
  grid-column: 1;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
}
.so-meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 12.5px;
  color: var(--ink-mute);
  white-space: nowrap;
}
.so-meta em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
}

.sel-hint {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.sel-hint a {
  border-bottom: 1px solid var(--clay);
  color: var(--clay-deep);
}
.sel-hint a:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- 送出後的確認狀態 ---------- */
.sel-done { text-align: center; padding: 12px 0 4px; }
.sel-done-mark { display: block; margin: 22px auto 24px; }
.sel-done h2 {
  font-size: clamp(27px, 2.4vw, 35px);
  outline: none;
}
.sel-done-lede {
  margin: 14px auto 26px;
  max-width: 30ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.sel-done-rows { border-top: 1px solid var(--line); text-align: left; }
.sel-done-rows div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.sel-done-rows dt {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.sel-done-rows dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  text-align: right;
}
.sel-done-note {
  margin: 20px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.sel-done .sel-adjust { margin-top: 18px; }

/* services 價目列的選擇入口 */
.price-select {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay-deep);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.price-select:hover { border-color: var(--clay); }
.price-row:hover .price-select { color: var(--clay); }

/* 行動版預約寬圖 */
.booking-wide { display: none; }

/* ============================================================
   404
   ============================================================ */
.notfound {
  text-align: center;
  padding-block: clamp(56px, 9vw, 124px) clamp(36px, 5vw, 72px);
}
.notfound h1 {
  margin: 22px 0 26px;
  font-size: clamp(46px, 6.6vw, 92px);
  line-height: 0.98;
}
.nf-lede {
  margin: 0 auto clamp(32px, 4.2vw, 50px);
  max-width: 40ch;
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--ink-soft);
}
.nf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.nf-strip {
  margin-top: clamp(52px, 7.5vw, 92px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
}
.nf-strip img {
  width: 100%;
  aspect-ratio: 213 / 198;
  object-fit: cover;
}

/* ============================================================
   進場動畫
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
  .works { grid-template-columns: repeat(4, 1fr); }
  .booking-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .booking-shots { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .selection { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .nav { display: none; }
  .burger { display: block; }

  /* 行動版首頁改用實心列，照片移到列下方（同參考稿 09） */
  .site-head--over {
    position: sticky;
    inset: auto;
    top: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line-soft);
  }
  .site-head--over .head-inner::after { display: none; }

  .hero { grid-template-columns: 1fr; }
  .hero-copy { order: 2; padding: 44px var(--pad) 60px; max-width: none; }
  .hero-shot { order: 1; height: 62vh; min-height: 380px; }
  .hero-shot::before { inset: auto 0 0 0; width: auto; height: 26%;
    background: linear-gradient(0deg, var(--cream), rgba(246,240,231,0)); }

  .svc-layout { grid-template-columns: 1fr; }
  .about-layout { grid-template-columns: 1fr; }
  /* 行動版人像出血至螢幕兩側（同參考稿 14） */
  .about-shot { margin-inline: calc(var(--pad) * -1); }
  .about-shot img { height: clamp(380px, 78vw, 620px); object-position: 50% 22%; }
  .gallery-head { grid-template-columns: 1fr; }
  .gallery-shot { order: -1; }
  .modal-card { grid-template-columns: 1fr; grid-template-rows: minmax(0, 250px) minmax(0, 1fr); }
}

@media (max-width: 880px) {
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature img { aspect-ratio: 4 / 3; }
  .works { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr; }

  /* Services 改為縮圖 + 文字列（參考 13） */
  .svc-shots { order: -1; }
  .svc-shots-pair { display: none; }
  .svc-shots > img:first-child { height: clamp(230px, 42vw, 300px); object-position: 50% 22%; }

  .price-row {
    grid-template-columns: minmax(96px, 118px) minmax(0, 1fr);
    grid-template-areas:
      "shot main"
      "shot foot";
    row-gap: 0;
    column-gap: 20px;
    align-items: start;
  }
  .price-row .shot {
    grid-area: shot;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  .price-row .main { grid-area: main; display: block; }
  .price-row .num { display: block; margin-bottom: 4px; font-size: 22px; }
  .price-row .foot {
    grid-area: foot;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
  }
  .price-row .amt { justify-self: auto; font-size: clamp(26px, 6vw, 34px); }
  .price-note { text-align: left; }

  /* Testimonials 改為單卡輪播（參考 16） */
  .testi-grid { display: none; }
  .testi-slider { display: block; }

  .booking-layout { grid-template-columns: 1fr; }
  .booking-shots { display: none; }
  .booking-wide { display: block; width: 100%; height: 250px; object-fit: cover; margin-top: 26px; }
  .selection { order: -1; }
}

@media (max-width: 620px) {
  .sec-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .spec-grid { gap: 18px; }
  .sel-head { grid-template-columns: 100px minmax(0, 1fr); gap: 16px; }
  .sel-head img { height: 132px; }
  .fact-list div { grid-template-columns: 1fr; gap: 5px; }
  .contact-list li { padding: 16px 0; }
  .mm-shots img { height: 118px; }
  .nf-strip { grid-template-columns: repeat(3, 1fr); }
  .nf-strip img:nth-child(n+4) { display: none; }
  .testi-card img { height: 300px; }
  .modal-card { max-height: 94vh; }
  .modal-nav button { width: 38px; height: 38px; font-size: 15px; }
}

/* ---------- Services 桌機版隱藏行動版縮圖 ---------- */
@media (min-width: 881px) {
  .price-row .shot { display: none; }
  .price-row .foot { display: contents; }
}