/* ============================================================
   豊漁 和風 — 視覺語言覆寫
   暖黑 × 燙金 × 和紙白，明體標題、細金線、留白為主。
   只覆寫 token 與關鍵元件，不重寫母主題的版面結構。
   ============================================================ */

:root{
  /* ---- 色票：炭黑 → 和紙 → 燙金 ---- */
  --ink:#14100D;
  --ink-2:#1B1611;
  --graphite:#221C16;
  --graphite-2:#2C251D;
  --steel:#8A8073;
  --steel-2:#A79C8C;
  --alu:#D6CDBE;
  --alu-2:#EAE3D7;
  --paper:#F5F1E9;
  --paper-2:#FBF8F2;

  --ember:#B8985A;          /* 燙金 —— 唯一強調色 */
  --ember-dk:#8E7440;
  --ember-lt:#D9C08B;
  --ember-wash:rgba(184,152,90,.12);

  --fg-mute:#5B5245;
  --rule:rgba(20,16,13,.14);
  --rule-strong:rgba(184,152,90,.42);

  --d-bg:var(--ink);
  --d-fg:#F2ECE1;
  --d-fg-mute:#B3A896;
  --d-rule:rgba(217,192,139,.22);

  
  /* 全站字型統一比照 Google 翻譯：拉丁 Roboto ＋ 中文思源黑體。
     標題與內文同一套，只用字重與字距拉開層次。 */
  --f-cjk:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC";
  --f-display:Roboto,var(--f-cjk),-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --f-body:Roboto,var(--f-cjk),-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Roboto Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 和風偏好更寬的呼吸 */
  --s-sect:clamp(4.5rem,3rem + 6vw,10rem);
}

.is-dark{--rule-strong:rgba(217,192,139,.38)}

/* ---- 標題：明體、細一點、字距鬆一點 ---- */
.display,h1,h2,h3,.phero__title,.hero__title,.ctile__t,.pcard__name,.ncard__t,.stat__n{
  font-family:var(--f-display);
  font-weight:500;
  letter-spacing:.02em;
}
.display,h1,h2{font-weight:400}
.display em,.hero__title em{font-style:normal;color:var(--ember)}
.lede,.body-lg{font-family:var(--f-body);font-weight:400;line-height:1.85}
body{font-family:var(--f-body);letter-spacing:.01em;line-height:1.8}

/* 小標籤：金色、極寬字距，取代原本的粗黑工業標籤 */
.tag,.eyebrow{
  font-family:var(--f-body);
  font-weight:500;
  letter-spacing:.28em;
  text-transform:none;
  color:var(--ember-dk);
}
.is-dark .tag,.is-dark .eyebrow{color:var(--ember-lt)}
.tag::before{background:var(--ember)}

/* ---- 金色細線 ---- */
.rule,hr{border-color:var(--rule-strong)}

/* ---- 按鈕：改成細框＋金線，不用大色塊 ---- */
.btn{
  border-radius:0;
  font-family:var(--f-body);
  font-weight:500;
  letter-spacing:.16em;
  transition:background-color var(--dur-2) var(--e-out),color var(--dur-2) var(--e-out),border-color var(--dur-2) var(--e-out);
}
.btn--accent{
  background:transparent;
  color:var(--ember-dk);
  border:1px solid var(--ember);
}
.btn--accent:hover,.btn--accent:focus-visible{
  background:var(--ember);
  color:#14100D;
  border-color:var(--ember);
}
.is-dark .btn--accent,.hero .btn--accent{color:var(--ember-lt);border-color:var(--ember-lt)}
.is-dark .btn--accent:hover,.hero .btn--accent:hover{background:var(--ember-lt);color:#14100D}
.btn--ghost{border-radius:0;border-color:var(--rule-strong)}
.btn--lg{padding-inline:2.4rem}

.chip,.fchip{border-radius:0;letter-spacing:.12em;border-color:var(--rule)}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}

/* ---- 品牌卡：去陰影、加金線、名稱明體 ---- */
.pcard{
  border:1px solid var(--rule);
  border-radius:0;
  box-shadow:none;
  background:var(--paper-2);
  transition:border-color var(--dur-2) var(--e-out),transform var(--dur-2) var(--e-out);
}
.pcard:hover{border-color:var(--rule-strong);transform:translateY(-2px)}
.pcard__media{background:var(--ink);border-bottom:1px solid var(--rule)}
.pcard__name{font-size:var(--t-xl);letter-spacing:.04em;line-height:1.4}
/* 層級標籤：疊在深色品牌主視覺左上角。
   母主題原本是貼齊 0,0 的實心色塊，去掉底色與外框之後文字會直接
   頂到圖片邊緣、看起來像被裁掉，所以改成有內縮的浮貼標籤；
   顏色也從深金改成淺金，深色圖面上才讀得到。 */
.pcard__media{position:relative}
.pcard__cat{
  position:absolute;top:.85rem;left:.95rem;right:auto;
  padding:0;border:0;background:transparent;
  font-family:var(--f-body);
  font-size:.72rem;line-height:1.5;font-weight:500;
  letter-spacing:.16em;
  color:var(--ember-lt);
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  max-width:calc(100% - 1.9rem);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:32rem){
  .pcard__cat{top:.65rem;left:.75rem;font-size:.68rem;letter-spacing:.12em}
}
.pcard__ref,.pcard__spec{font-family:var(--f-mono);letter-spacing:.04em}

/* ---- 分類圖磚：更深的壓黑、明體標題 ---- */
.ctile{border-radius:0;border:1px solid transparent}
.ctile__bg::after{background:linear-gradient(180deg,rgba(20,16,13,.25) 0%,rgba(20,16,13,.86) 100%)}
.ctile__t{font-size:var(--t-2xl);letter-spacing:.06em}
.ctile__bar{background:var(--ember)}
.ctile__n{font-family:var(--f-mono);color:var(--ember-lt)}

/* ---- 新聞卡 ---- */
.ncard{border-radius:0}
.ncard__m{border-radius:0}
.ncard__t{letter-spacing:.03em;line-height:1.6}

/* ---- 數字區：明體大字、金色單位 ---- */
.stat__n{font-family:var(--f-display);font-weight:400;letter-spacing:0}
.stat__suf{color:var(--ember)}
.stat{border-top:1px solid var(--rule-strong)}

/* ---- 頁首：透明疊在影像上，捲動後轉暖黑 ---- */
.hdr{backdrop-filter:saturate(120%) blur(6px)}
.brand__mark{font-family:var(--f-display);font-weight:500;letter-spacing:.24em}
.brand__name,.brand__sub{font-family:var(--f-body);letter-spacing:.14em}
.nav__link,.drawer__link,.mega__link{font-family:var(--f-body);letter-spacing:.12em}
.nav__link::after{background:var(--ember)}

/* 訂位按鈕（原詢價清單） */
.inq-btn{border-radius:0;border:1px solid var(--rule-strong);letter-spacing:.16em}
.inq-btn:hover{border-color:var(--ember);color:var(--ember-dk)}

/* ---- 頁尾 ---- */
.ftr{background:var(--ink)}
.ftr__bot{border-top:1px solid var(--d-rule)}

/* ---- 表單：方角、細線、聚焦金框 ---- */
.field input,.field select,.field textarea{
  border-radius:0;
  border:1px solid var(--rule);
  background:var(--paper-2);
  font-family:var(--f-body);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--ember);
  box-shadow:0 0 0 1px var(--ember-wash);
}
.field label{letter-spacing:.14em;color:var(--fg-mute)}

/* ---- 規格表 ---- */
.spec-tb th{font-family:var(--f-body);letter-spacing:.14em;color:var(--fg-mute);font-weight:500}
.spec-tb td{font-family:var(--f-mono)}
.spec-tb tr+tr{border-top:1px solid var(--rule)}

/* ============================================================
   首頁全屏影像開場（子主題 hero）
   ============================================================ */
.wf-hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--ink);
  color:#F5F1E9;
}
.wf-hero__media{position:absolute;inset:0;z-index:0}
.wf-hero__media img,.wf-hero__media video{
  width:100%;height:100%;object-fit:cover;display:block;border:0;
}
/* 海報圖墊在影片底下，影片載入前不會出現一片黑 */
.wf-hero__poster{position:absolute;inset:0}
/* YouTube／Vimeo 的 iframe 沒辦法用 object-fit，改用 16:9 等比放大裁切 */
.wf-hero__embed{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;          /* 100vw × 9/16 */
  min-height:100svh;min-width:177.78svh; /* 100svh × 16/9 */
  border:0;display:block;pointer-events:none;
}
@supports not (height: 100svh){
  .wf-hero__embed{min-height:100vh;min-width:177.78vh}
}
.wf-hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse at 50% 46%,rgba(20,16,13,.24) 0%,rgba(20,16,13,.52) 58%,rgba(20,16,13,.8) 100%),
    linear-gradient(180deg,rgba(20,16,13,.58) 0%,rgba(20,16,13,.08) 30%,rgba(20,16,13,.72) 100%);
}
.wf-hero__in{
  position:relative;z-index:2;
  width:100%;
  padding:clamp(6rem,12vh,10rem) var(--gutter) clamp(4rem,10vh,7rem);
  text-align:center;
}
.wf-hero__mark{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(3rem,1.2rem + 8vw,7.5rem);
  line-height:1.06;
  letter-spacing:.16em;
  text-indent:.16em;
  margin:0;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.wf-hero__latin{
  display:block;
  margin-top:1.5rem;
  font-family:var(--f-body);
  font-size:var(--t-sm);
  letter-spacing:.42em;
  text-indent:.42em;
  color:rgba(245,241,233,.72);
}
.wf-hero__rule{
  width:3.5rem;height:1px;margin:2.2rem auto;
  background:linear-gradient(90deg,transparent,var(--ember-lt),transparent);
}
.wf-hero__lede{
  max-width:34rem;margin:0 auto;
  font-size:var(--t-base);line-height:2;
  color:rgba(245,241,233,.82);
}
.wf-hero__langs{
  display:flex;gap:.9rem;justify-content:center;align-items:center;
  margin-top:2.4rem;
  font-size:var(--t-sm);letter-spacing:.2em;
}
.wf-hero__langs a{color:rgba(245,241,233,.7);text-decoration:none;padding:.2rem 0;border-bottom:1px solid transparent}
.wf-hero__langs a:hover{color:#F5F1E9;border-bottom-color:var(--ember-lt)}
.wf-hero__langs a[aria-current="true"]{color:var(--ember-lt);border-bottom-color:var(--ember-lt)}
.wf-hero__langs span{color:rgba(245,241,233,.3)}
.wf-hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.6rem}

.wf-hero__idx{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  border-top:1px solid rgba(217,192,139,.2);
  background:linear-gradient(180deg,rgba(20,16,13,0),rgba(20,16,13,.55));
}
.wf-hero__idxin{
  max-width:var(--wrap);margin:0 auto;
  padding:1rem var(--gutter);
  display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;justify-content:center;
  font-size:var(--t-xs);letter-spacing:.16em;
  color:rgba(245,241,233,.66);
}
.wf-hero__idx b{color:var(--ember-lt);font-weight:500;font-family:var(--f-mono);letter-spacing:.06em}
.wf-hero__cue{
  position:absolute;left:50%;bottom:5.2rem;z-index:2;transform:translateX(-50%);
  font-size:var(--t-2xs);letter-spacing:.34em;color:rgba(245,241,233,.55);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.wf-hero__cue i{display:block;width:1px;height:2.6rem;background:linear-gradient(180deg,var(--ember-lt),transparent);animation:wfcue 2.4s var(--e-in-out) infinite}
@keyframes wfcue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.wf-hero__cue i{animation:none}}
@media (max-width:48rem){
  .wf-hero__idxin{gap:.4rem 1.2rem}
  .wf-hero__cue{display:none}
}

/* 沒有指定主視覺照片時的素底：暖黑＋暈影＋四條細金線（呼應集團四個層級） */
.wf-hero--plain{
  background:
    radial-gradient(ellipse at 50% 38%,#221C16 0%,#14100D 62%,#0D0A08 100%);
}
.wf-hero--plain::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(217,192,139,.34),transparent) center calc(50% + 15rem)/min(52rem,72vw) 1px no-repeat,
    linear-gradient(90deg,transparent,rgba(217,192,139,.20),transparent) center calc(50% + 16.2rem)/min(46rem,64vw) 1px no-repeat,
    linear-gradient(90deg,transparent,rgba(217,192,139,.12),transparent) center calc(50% + 17.4rem)/min(40rem,56vw) 1px no-repeat,
    linear-gradient(90deg,transparent,rgba(217,192,139,.07),transparent) center calc(50% + 18.6rem)/min(34rem,48vw) 1px no-repeat;
}
@media (max-width:48rem){ .wf-hero--plain::before{display:none} }

/* 已改用訂位系統，頁首按鈕不再是購物車，不顯示數量徽章 */
.inq-btn__n{display:none}
/* 品牌卡上的按鈕（子主題 JS 已換成訂位連結） */
a.pcard__add{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}


/* 集團標誌：來源是橫式書法字，不能被塞進母主題的正方形框 */
img.brand__mark{
  width:auto;height:2.2rem;max-width:none;
  object-fit:contain;object-position:left center;
}
/* 頁首捲動後會轉成淺色底，白色標誌要翻成墨色才看得見 */
.hdr[data-mode="solid"] img.brand__mark{filter:invert(1)}
.drawer img.brand__mark,.ftr img.brand__mark{filter:none}

/* ============================================================
   首頁主標的書法體
   取自 LXGW 文楷 TC Bold（SIL Open Font License），只留下標題會用到的
   十餘個字，整支字型檔 5.7 KB。字形比原本的明體更接近品牌標誌的毛筆筆意；
   標誌本身是手寫字，沒有任何現成字型能完全複製。
   ============================================================ */
@font-face{
  font-family:"Fengyu Kai";
  src:url("../fonts/fengyu-kai.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
.wf-hero__mark{
  /* 集團標準字沿用實際的豊漁書法字，不隨全站字型改動。 */
  font-family:"Fengyu Kai","Songti TC","PingFang TC",Georgia,serif;
  font-weight:700;
  letter-spacing:.1em;
  text-indent:.1em;
}

/* ---- 首頁「媒體報導」區塊：可放一到三則影片 ---- */
.wf-media__grid{margin-top:2.4rem;display:grid;gap:2.4rem}
.wf-media__item{margin:0;display:flex;flex-direction:column}
.wf-media__frame{
  position:relative;
  aspect-ratio:16/9;width:100%;
  border:1px solid var(--rule-strong);
  background:#000;overflow:hidden;
}
.wf-media__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.wf-media__cap{
  margin-top:.9rem;font-size:var(--t-sm);letter-spacing:.02em;
  color:var(--fg-mute);
}
.wf-media__t{
  display:block;font-weight:500;line-height:1.65;
  color:rgba(242,236,225,.94);letter-spacing:.01em;
  margin-bottom:.35rem;
}
.wf-media__meta{display:block;font-size:var(--t-2xs);letter-spacing:.06em;line-height:1.8}
.wf-media__cap a{color:var(--ember-lt);text-decoration:none;border-bottom:1px solid rgba(217,192,139,.4);margin-left:.6rem;white-space:nowrap}
.wf-media__cap a:hover{color:#F2ECE1}

/* 一則時置中不橫跨整個版面；兩則並排；三則在寬螢幕排成一列。 */
@media (min-width:64rem){
  .wf-media__grid--n1{max-width:64rem;margin-left:auto;margin-right:auto}
  .wf-media__grid--n2,
  .wf-media__grid--n3{grid-template-columns:repeat(2,1fr);gap:2rem 2.2rem}
}
@media (min-width:64rem){
  .wf-media__grid--n4,
  .wf-media__grid--n5,
  .wf-media__grid--n6{grid-template-columns:repeat(2,1fr);gap:2rem 2.2rem}
}
@media (min-width:78rem){
  .wf-media__grid--n3,
  .wf-media__grid--n5,
  .wf-media__grid--n6{grid-template-columns:repeat(3,1fr);gap:1.8rem 2rem}
  /* 四則維持 2×2，比 3＋1 的落單好看 */
  .wf-media__grid--n3 .wf-media__t,
  .wf-media__grid--n5 .wf-media__t,
  .wf-media__grid--n6 .wf-media__t{font-size:var(--t-sm);line-height:1.6}
}
@media (min-width:100rem){
  .wf-media__grid--n2{gap:2.4rem 2.6rem}
}

/* 集團優勢照片：依原圖比例呈現，不做 4:3 裁切 */
.wf-figure__media{aspect-ratio:auto;background:transparent}
.wf-figure__media>img{height:auto;object-fit:contain;display:block}

/* 各語系的中文備援字型：簡體站用思源黑體簡體，英文站用 Noto Sans。
   lang 屬性由母主題輸出（zh-Hant-TW / zh-Hans-CN / en）。 */
html[lang^="zh-Hans"]{
  --f-cjk:"Noto Sans SC","PingFang SC","Microsoft YaHei","Heiti SC";
}
html[lang^="en"]{
  --f-cjk:"Noto Sans","Noto Sans TC","PingFang TC","Microsoft JhengHei";
}

/* 換成黑體之後，標題原本靠襯線撐出來的份量要用字重與字距補回來。 */
.display,.display--lg,.display--md,.display--sm,
h1,h2,h3,.ctile__t,.pcard__t{
  font-weight:500;
  letter-spacing:.01em;
}
html[lang^="en"] .display,
html[lang^="en"] h1,
html[lang^="en"] h2,
html[lang^="en"] h3{
  letter-spacing:-.005em;
}
.stat__n{font-weight:400;letter-spacing:-.01em}

/* 圖說若是照片說明（非規格標籤），排成一般段落並與照片同寬 */
.figure__cap--photo{
  display:block;width:100%;max-width:none;
  margin-top:.9rem;
  line-height:1.85;letter-spacing:.01em;
  font-size:var(--t-sm);color:var(--fg-mute);
  text-transform:none;text-align:justify;text-justify:inter-ideograph;
  text-wrap:pretty;
}
@supports (hanging-punctuation: allow-end){ .figure__cap--photo{hanging-punctuation:allow-end} }
@media (max-width:47.99rem){ .figure__cap--photo{text-align:left} }