/* ============================================================================
   禮品品牌頁（2026-10-11）｜cold-drip／kehking-coffee／from-the-orchard
   版面照翰品頁（chateau.css）：滿版首屏 → 錨點列 → 品牌概念（文＋圖）→ 三張卡
   → 圖庫 → 深色禮品帶 → 位置與聯絡 → 另外兩個品牌。
   三頁共用這一份；每頁只換下面 body[data-page] 的幾個顏色。主題沿用日版 daylight。
   ============================================================================ */

body[data-page='icedrip'] {
  --brand-deep: #1d140e;      /* 深咖啡：首屏陰影、禮品帶底色 */
  --brand-ink: #3a2a1d;
  --brand-paper: #f6efe3;
  --brand-line: #dccbb2;
  --brand-glow: #d9a25c;      /* 深底上的按鈕與小標 */
  --text-accent: #8f5a23;     /* 淺底上的小標與連結（對比 5.2:1） */
  --border-accent: #b7783a;
  --accent: #b7783a;
}
body[data-page='kehking'] {
  --brand-deep: #1c1c1e;      /* 炭黑 */
  --brand-ink: #2a2a2c;
  --brand-paper: #f2f0eb;     /* 水泥灰白 */
  --brand-line: #d6d2c9;
  --brand-glow: #ef6a5c;      /* 店家紅（深底用） */
  --text-accent: #b0302a;     /* 店家紅（淺底用，對比 5.75:1） */
  --border-accent: #c23a31;
  --accent: #c23a31;
  --shade-a: 97%;             /* 首屏照片是淺灰海報牆，陰影要比另外兩頁深，字才讀得清楚 */
  --shade-b: 88%;
}
body[data-page='orchard'] {
  --brand-deep: #1f3a27;      /* 果園綠 */
  --brand-ink: #24402c;
  --brand-paper: #eef2e6;
  --brand-line: #cbd6bf;
  --brand-glow: #f0a3a9;      /* 芭樂粉（深底用） */
  --text-accent: #2f6b3e;     /* 果園綠（淺底用，對比 5.77:1） */
  --border-accent: #3f7d4e;
  --accent: #3f7d4e;
}

/* ------------------------------------------------------------------ 首屏 --- */
.brand-hero {
  position: relative;
  min-height: clamp(600px, 82vh, 880px);
  overflow: hidden;
  isolation: isolate;
  background: var(--brand-deep);
  color: #fff;
}
.brand-hero__image,
.brand-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand-hero__image { object-fit: cover; object-position: var(--hero-x, 62%) center; z-index: -2; }
.brand-hero__shade {
  z-index: -1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand-deep) var(--shade-a, 94%), transparent) 0%,
                           color-mix(in srgb, var(--brand-deep) var(--shade-b, 76%), transparent) 40%,
                           color-mix(in srgb, var(--brand-deep) 12%, transparent) 78%),
    linear-gradient(0deg, color-mix(in srgb, var(--brand-deep) 55%, transparent) 0%, transparent 40%);
}
.brand-hero__inner {
  min-height: inherit;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: var(--s5);
  padding-block: calc(clamp(64px, 9vh, 104px) * var(--ui-scale)) var(--s7);
}
.brand-hero__copy { max-width: 40em; }
.brand-hero__eyebrow {
  margin: 0 0 var(--s4);
  color: rgba(255,255,255,.72);
  font-family: var(--font-mono); font-size: var(--size-label); letter-spacing: .14em;
}
.brand-kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-bottom: var(--s4);
  color: var(--brand-glow);
  font-size: var(--size-small); font-weight: 700; letter-spacing: .1em;
}
.brand-kicker::before { content: ''; width: 38px; height: 1px; background: currentColor; }
/* 中文標題不准從詞中間斷（「隔／了」「一滴一／滴」）：keep-all 只在標點與空白處換行；
   真的放不下（窄手機）才由 overflow-wrap 任意斷，不會撐出橫向捲動。 */
.brand-hero h1,
.brand-hero__copy > p,
.brand-quote p,
main .brand-prose h2,
main .section-head h2,
.brand-gift h2,
.brand-step h3,
.brand-sibling h3 { word-break: keep-all; overflow-wrap: anywhere; }
.brand-hero h1 {
  max-width: 14em;
  margin-bottom: var(--s5);
  color: #fffaf2;
  font-size: var(--size-display); line-height: 1.25; letter-spacing: var(--tracking-display);
}
.brand-hero__copy > p:not(.brand-hero__eyebrow) {
  max-width: 30em; color: rgba(255,255,255,.84); font-size: var(--size-lead);
}
.brand-hero__actions { margin-top: var(--s6); }
.brand-hero .btn--primary { background: var(--brand-glow); border-color: var(--brand-glow); color: var(--brand-deep); }
.brand-hero .btn--primary:hover { filter: brightness(1.08); color: var(--brand-deep); }
.brand-btn--light {
  border: 1px solid rgba(255,255,255,.65); color: #fff;
  background: rgba(0,0,0,.18); text-decoration: none;
}
.brand-btn--light:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.1); }
.brand-hero__caption {
  margin: auto 0 0 auto; padding-left: var(--s4);
  border-left: 1px solid rgba(255,255,255,.4);
  color: rgba(255,255,255,.68); font-size: var(--size-label);
}

/* 果源創生的首屏（2026-10-11 依指示改成跟隔間同一種：深色滿版、字在左）。
   這張合照四個人站滿整張，照片若從最左邊開始，左邊的漸層會把前兩個人蓋暗。
   所以桌機（>=1100px）照片從左邊 30% 才開始，左邊是純色底放字；
   較窄的螢幕照片照常滿版，漸層改成由下往上（同手機），字壓在下半部。 */
@media (min-width: 1100px) {
  /* 2026-10-11 首屏換成自拍合照：最前面那張臉在照片左側，漸層要短、照片要再往右，臉才不會被蓋暗 */
  .brand-hero--offset .brand-hero__image { left: auto; right: 0; width: 66%; }
  .brand-hero--offset .brand-hero__shade {
    background:
      linear-gradient(90deg, var(--brand-deep) 0%, var(--brand-deep) 34%,
                             color-mix(in srgb, var(--brand-deep) 0%, transparent) 43%),
      linear-gradient(0deg, color-mix(in srgb, var(--brand-deep) 55%, transparent) 0%, transparent 34%);
  }
  .brand-hero--offset .brand-hero__copy > p:not(.brand-hero__eyebrow) { max-width: 22em; }
}
@media (max-width: 1099px) {
  .brand-hero--offset .brand-hero__shade {
    background: linear-gradient(0deg, color-mix(in srgb, var(--brand-deep) 96%, transparent) 0%,
                                      color-mix(in srgb, var(--brand-deep) 74%, transparent) 58%,
                                      color-mix(in srgb, var(--brand-deep) 18%, transparent) 100%);
  }
}

/* ------------------------------------------------------------ 共用元素 --- */
.brand-prose,
.brand-prose > p,
.brand-prose > p.lead { max-width: 34em; }
.brand-prose > p:not(.lead) { color: var(--text-muted); }
.brand-prose > p + p { margin-top: var(--s5); }
.brand-figure { position: relative; margin: 0; }
.brand-figure img { width: 100%; height: 100%; object-fit: cover; }
.brand-figure figcaption,
.brand-gallery figcaption,
.brand-gift__media figcaption {
  margin-top: var(--s3); color: var(--text-muted); font-size: var(--size-label);
}
.brand-quote {
  margin: var(--s7) 0 0;
  padding: var(--s5) 0 var(--s1) var(--s5);
  border-left: 2px solid var(--border-accent);
  color: var(--brand-ink);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.75;
}
.brand-quote p { margin: 0; }
.brand-quote footer {
  margin-top: var(--s3); color: var(--text-muted);
  font-family: var(--font-body); font-size: var(--size-label);
}
.brand-quote footer:not(:empty)::before { content: '—— '; }
body[data-page='icedrip'] .section-head,
body[data-page='kehking'] .section-head,
body[data-page='orchard'] .section-head { max-width: 34em; }

/* ----------------------------------------------------------- 品牌概念 --- */
.brand-intro__grid { display: grid; gap: var(--s8); align-items: center; }
.brand-figure--tall { min-height: 360px; }

/* ---------------------------------------------------------- 三張卡 --- */
.brand-ideas {
  overflow: hidden;
  background: var(--brand-paper);
  border-color: var(--brand-line) !important;
}
.brand-steps { display: grid; gap: var(--s6); counter-reset: step; }
.brand-step {
  background: rgba(255,255,255,.72);
  border: 1px solid var(--brand-line);
  box-shadow: 0 14px 36px rgba(40,32,24,.06);
}
.brand-step__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--brand-line); }
.brand-step__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease);
}
.brand-step:hover .brand-step__media img { transform: scale(1.02); }
.brand-step__copy { padding: var(--s5); }
.brand-step__no {
  display: block; margin-bottom: var(--s3);
  color: var(--text-accent);
  font-family: var(--font-mono); font-size: var(--size-label); letter-spacing: .1em;
}
.brand-step__copy p { color: #4e5356; }
.brand-ideas__note { margin: var(--s7) 0 0; color: var(--text-muted); font-size: var(--size-small); }

/* ----------------------------- 滿版靜音影像＋一句原話（果源創生頁，2026-10-11）--- */
.brand-interlude {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  min-height: clamp(380px, 44vw, 620px);
  background: var(--brand-deep); color: #fff;
}
.brand-interlude__video,
.brand-interlude__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand-interlude__video { object-fit: cover; z-index: -2; }
.brand-interlude__shade {
  z-index: -1;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--brand-deep) 86%, transparent) 0%,
                          color-mix(in srgb, var(--brand-deep) 40%, transparent) 55%,
                          color-mix(in srgb, var(--brand-deep) 8%, transparent) 100%);
}
.brand-interlude__inner { padding-block: var(--s9) var(--s8); }
.brand-interlude__quote { margin: 0; }
/* 寬度用引文自己的字級量（em 跟著大字走），標點才不會被擠到下一行獨立成行 */
.brand-interlude__quote p {
  margin: 0; max-width: 24em; color: #fffaf2;
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.65;
  word-break: keep-all; overflow-wrap: anywhere;
  text-shadow: 0 1px 18px rgba(0,0,0,.35);
}
.brand-interlude__quote footer { margin-top: var(--s4); color: var(--brand-glow); font-size: var(--size-small); }
.brand-interlude__quote footer:not(:empty)::before { content: '—— '; }
.brand-interlude__credit {
  position: absolute; right: var(--s5); bottom: var(--s3); margin: 0;
  color: rgba(255,255,255,.62); font-size: var(--size-label);
}

/* ---------------------------------------------- 影片（果源創生頁）--- */
.brand-film__grid { display: grid; gap: var(--s7); align-items: center; }
.brand-film__media { margin: 0; }
.brand-film__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.brand-film__credit { margin-top: var(--s3); color: var(--text-muted); font-size: var(--size-label); }

/* ------------------------------------------------------------ 圖庫 --- */
.brand-space__opening { display: grid; gap: var(--s6); margin-bottom: var(--s8); }
.brand-space__opening .section-head { margin-bottom: 0; }
.brand-gallery { display: grid; gap: var(--s4); }
.brand-gallery figure { min-width: 0; margin: 0; }
.brand-gallery img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }

/* ------------------------------------------------- 深色禮品帶 --- */
.brand-gift { background: var(--brand-deep); color: rgba(255,255,255,.8); border-top: 0 !important; }
.brand-gift h2 { color: #fffaf2; }
.brand-gift .eyebrow { color: var(--brand-glow); }
.brand-gift__grid { display: grid; gap: var(--s7); align-items: center; }
.brand-gift__copy > p { color: rgba(255,255,255,.76); max-width: 34em; }
.brand-facts { margin: var(--s6) 0 0; border-top: 1px solid rgba(255,255,255,.2); }
.brand-facts > div { display: grid; gap: var(--s2); padding-block: var(--s4); border-bottom: 1px solid rgba(255,255,255,.14); }
.brand-facts dt { color: rgba(255,255,255,.6); font-size: var(--size-small); }
.brand-facts dd { margin: 0; color: #fffaf2; font-weight: 700; }
.brand-gift__how { margin-top: var(--s5); font-size: var(--size-small); }
.brand-gift__actions { margin-top: var(--s6); }
.brand-gift .btn--primary { background: var(--brand-glow); border-color: var(--brand-glow); color: var(--brand-deep); }
.brand-gift .btn--primary:hover { filter: brightness(1.08); color: var(--brand-deep); }
.brand-gift__media { margin: 0; }
.brand-gift__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.brand-gift__media figcaption { color: rgba(255,255,255,.6); }

/* ------------------------------------------------- 位置與聯絡 --- */
.brand-access__grid { display: grid; gap: var(--s7); align-items: start; }
.brand-contact { margin: 0; border-top: 1px solid var(--border-strong); }
.brand-contact > div { display: grid; gap: var(--s2); padding-block: var(--s4); border-bottom: 1px solid var(--border-default); }
.brand-contact dt { color: var(--text-muted); font-size: var(--size-small); }
.brand-contact dd { margin: 0; overflow-wrap: anywhere; }
.brand-access__links {
  display: flex; flex-wrap: wrap; gap: var(--s6);
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--border-default);
}
.brand-access__links a,
.brand-contact dd a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.brand-access__links a { font-weight: 700; }
.brand-access__links a::after { content: ' ↗'; white-space: pre; }

/* --------------------------------------------- 另外兩個品牌 --- */
.brand-siblings { background: var(--surface-raised); }
.brand-siblings__grid { display: grid; gap: var(--s5); }
.brand-sibling {
  display: grid; color: inherit; text-decoration: none;
  background: var(--surface-card); border: 1px solid var(--border-default);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.brand-sibling:hover { border-color: var(--border-accent); transform: translateY(-2px); color: inherit; }
.brand-sibling figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.brand-sibling img { width: 100%; height: 100%; object-fit: cover; }
.brand-sibling__body { padding: var(--s5); }
.brand-sibling__gift {
  display: inline-block; margin-bottom: var(--s3);
  color: var(--text-accent); font-family: var(--font-mono); font-size: var(--size-label); letter-spacing: .08em;
}
.brand-sibling h3 { margin-bottom: var(--s3); }
.brand-sibling p { color: var(--text-muted); }
.brand-sibling__more { display: inline-flex; align-items: center; gap: .4em; margin-top: var(--s4); font-weight: 700; color: var(--text-accent); }

/* ------------------------------------------------------------- 斷點 --- */
@media (min-width: 700px) {
  .brand-facts > div,
  .brand-contact > div { grid-template-columns: 8rem 1fr; gap: var(--s5); }
  .brand-siblings__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .brand-hero__inner { padding-bottom: var(--s8); }
  .brand-intro__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(4rem, 7vw, 7rem); }
  /* 直式照片：跟左欄文字一樣高（stretch），比例接近 3:4，照片上下才不會被切掉一大截 */
  .brand-figure--tall { min-height: 560px; align-self: stretch; }
  .brand-figure--tall img { position: absolute; inset: 0; height: calc(100% - 2rem); }
  .brand-figure--tall figcaption { position: absolute; left: 0; bottom: 0; margin: 0; }
  .brand-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-space__opening { grid-template-columns: .8fr 1.2fr; gap: var(--s9); align-items: end; }
  .brand-space__opening .lead { margin: 0; }
  .brand-gallery { grid-template-columns: 1fr 1.3fr; grid-template-rows: repeat(2, minmax(220px, 26vw)); max-height: 760px; }
  .brand-gallery__art { grid-row: 1 / span 2; }
  .brand-gallery__art img,
  .brand-gallery__lounge img,
  .brand-gallery__detail img { min-height: 0; height: calc(100% - 2rem); }
  .brand-gift__grid { grid-template-columns: 1fr 1fr; gap: var(--s9); }
  .brand-film__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--s8); }
  .brand-access__grid { grid-template-columns: .85fr 1.15fr; gap: var(--s9); }
}

@media (max-width: 699px) {
  .brand-hero .brand-hero__shade {
    background: linear-gradient(0deg, color-mix(in srgb, var(--brand-deep) 96%, transparent) 0%,
                                      color-mix(in srgb, var(--brand-deep) 74%, transparent) 58%,
                                      color-mix(in srgb, var(--brand-deep) 18%, transparent) 100%);
  }
  .brand-hero__caption { margin-left: 0; }
  .brand-hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .brand-interlude__credit { left: var(--s5); right: auto; }
  .brand-gift__actions .btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-step__media img,
  .brand-sibling { transition: none; }
  .brand-sibling:hover { transform: none; }
}