/* ── SHARED CCHR STYLES — 燭火溫暖 / Candlelight Warmth ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* warm neutrals */
  --paper:    #F8F1E5;
  --paper-l:  #FAF4EA;
  --paper-d:  #EFE5D2;
  --linen:    #E8DCC4;

  /* warm darks */
  --ink:      #2A1F12;
  --ink-2:    #4A3826;
  --ink-3:    #7A6750;
  --bark:     #1A1208;

  /* accents */
  --amber:    #D89A4E;
  --amber-d:  #B57A2E;
  --amber-l:  #E8B570;
  --terra:    #B85C38;
  --terra-d:  #8B4513;
  --rust:     #A0492A;

  /* legacy compat */
  --navy:    var(--terra-d);
  --navy-d:  var(--ink);
  --navy-m:  var(--ink-2);
  --navy-l:  var(--terra);
  --cream:   var(--paper-l);
  --white:   var(--paper);
  --gray:    var(--ink-3);
  --gray-l:  var(--linen);
  --text:    var(--ink);

  --radius:    6px;
  --radius-lg: 14px;
  --sh:      0 4px 24px rgba(74,56,38,.08);
  --sh-lg:   0 18px 48px rgba(74,56,38,.14);
  --sh-warm: 0 12px 40px rgba(216,154,78,.18);

  --g-gold:  linear-gradient(125deg,#E8B570 0%,#D89A4E 45%,#B57A2E 100%);
  --g-amber: linear-gradient(125deg,#E8B570 0%,#D89A4E 45%,#B57A2E 100%);
  --g-navy:  radial-gradient(ellipse at 80% 20%,rgba(232,181,112,.12) 0%,transparent 55%), linear-gradient(160deg,#2A1F12 0%,#3D2C1A 100%);
  --g-navy2: linear-gradient(160deg,#F5DCC8 0%,#E8B898 100%);
  --g-bark:  linear-gradient(160deg,#2A1F12 0%,#3D2C1A 100%);

  --f-display: 'Fraunces','Noto Serif TC',serif;
  --f-body:    'Cormorant Garamond','Noto Serif TC',serif;
  --f-tc:      'Noto Serif TC',serif;
}
html { scroll-behavior:smooth; overflow-x:hidden; }
body { font-family:var(--f-tc); background:var(--paper); color:var(--ink); line-height:1.8; font-size:17px; overflow-x:hidden; }
img  { display:block; max-width:100%; }
a    { text-decoration:none; color:inherit; }

.gt { background:var(--g-amber); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── NAVBAR ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:80px; padding:0 5vw;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(250,244,234,.92);
  border-bottom:1px solid rgba(184,92,56,.08);
  box-shadow:0 1px 24px rgba(74,56,38,.06);
  backdrop-filter:blur(20px);
}
.nav-logo { display:flex; align-items:center; gap:12px; flex-shrink:0; text-decoration:none; }
.nav-logo img { height:52px; width:52px; object-fit:cover; border-radius:50%; border:1.5px solid rgba(216,154,78,.35); box-shadow:0 0 0 4px rgba(232,181,112,.12); }
.nav-logo-text { display:flex; flex-direction:column; line-height:1.2; }
.nav-logo-text .t1 { font-family:var(--f-display); font-size:18px; color:var(--ink); letter-spacing:.02em; font-weight:500; }
.nav-logo-text .t2 { font-family:var(--f-body); font-style:italic; font-size:13.5px; color:var(--terra); letter-spacing:.12em; }
.nav-menu { display:flex; align-items:center; gap:2px; list-style:none; }
.nav-menu > li { position:relative; }
.nav-menu > li > a {
  display:flex; align-items:center; gap:5px;
  padding:9px 14px; border-radius:4px;
  font-size:15.5px; font-weight:500; letter-spacing:.02em;
  color:var(--ink-2);
  transition:color .2s,background .2s;
  white-space:nowrap;
}
.nav-menu > li > a:hover,.nav-menu > li:hover > a { color:var(--terra-d); background:rgba(216,154,78,.12); }
.nav-menu > li > a.active { color:var(--terra-d); background:rgba(216,154,78,.12); }
.nav-menu > li > a .arr { width:11px; height:11px; opacity:.45; transition:transform .25s,opacity .2s; }
.nav-menu > li:hover > a .arr { transform:rotate(180deg); opacity:.85; }
.dropdown {
  position:absolute; top:100%; left:0;
  min-width:220px; background:rgba(250,244,234,.98);
  border:1px solid rgba(216,154,78,.18); border-radius:var(--radius);
  box-shadow:0 18px 48px rgba(74,56,38,.14);
  backdrop-filter:blur(20px);
  padding:8px 0; list-style:none;
  opacity:0; transform:translateY(-4px) scale(.97);
  pointer-events:none;
  transition:opacity .22s,transform .22s;
}
.dropdown::before { content:''; position:absolute; top:-8px; left:0; right:0; height:8px; }
.nav-menu > li:hover .dropdown { opacity:1; transform:none; pointer-events:auto; }
.dropdown li a { display:block; padding:11px 20px; font-size:15px; color:var(--ink-2); transition:color .15s,background .15s,padding-left .15s; border-left:2px solid transparent; }
.dropdown li a:hover { color:var(--terra-d); background:rgba(232,181,112,.14); border-left-color:var(--amber); padding-left:22px; }
.nav-cta {
  background:var(--g-amber) !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  padding:10px 22px !important; border-radius:999px;
  font-size:14.5px !important; font-weight:600 !important;
  letter-spacing:.04em; margin-left:8px;
  box-shadow:0 4px 16px rgba(216,154,78,.35);
  transition:opacity .2s,transform .15s,box-shadow .2s;
}
.nav-cta:hover { opacity:.94 !important; transform:translateY(-1px); box-shadow:0 6px 20px rgba(216,154,78,.45); }

/* ── PAGE HERO ── */
.page-hero {
  padding:150px 6vw 90px;
  background:radial-gradient(ellipse 60% 70% at 25% 60%,rgba(232,181,112,.35) 0%,rgba(216,154,78,.10) 40%,transparent 75%),var(--paper);
  position:relative; overflow:hidden;
}
.page-hero::after {
  content:''; position:absolute; top:-120px; right:-120px;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(184,92,56,.12) 0%,transparent 70%);
  pointer-events:none;
}
.page-hero-rule {
  position:absolute; left:calc(6vw - 22px); top:0; bottom:0;
  width:1.5px;
  background:linear-gradient(to bottom,transparent,var(--amber-l) 30%,var(--amber) 65%,var(--terra) 90%,transparent);
  opacity:.5;
}
.page-hero-rule::before {
  content:''; position:absolute; top:30%; left:-3px;
  width:8px; height:8px; border-radius:50%;
  background:var(--amber-l);
  box-shadow:0 0 16px 4px rgba(232,181,112,.6);
  animation:candleFlicker 3.2s ease-in-out infinite;
}
@keyframes candleFlicker {
  0%,100% { opacity:1; transform:scale(1); }
  30%      { opacity:.85; transform:scale(.96); }
  55%      { opacity:1; transform:scale(1.04); }
  75%      { opacity:.9; }
}
.page-hero-inner { position:relative; z-index:1; max-width:760px; }
.page-breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:24px; }
.page-breadcrumb a { font-family:var(--f-body); font-style:italic; font-size:14.5px; color:var(--terra); transition:color .2s; }
.page-breadcrumb a:hover { color:var(--terra-d); }
.page-breadcrumb span { font-size:14px; color:var(--ink-3); }
.page-hero h1 {
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(36px,5vw,64px);
  color:var(--ink); line-height:1.12;
  margin-bottom:20px; letter-spacing:-.01em;
}
.page-hero h1 em { font-style:italic; font-family:var(--f-body); font-weight:500; color:var(--terra); }
.page-hero p { font-family:var(--f-tc); font-size:18px; color:var(--ink-2); line-height:1.95; font-weight:300; max-width:560px; }

/* ── SECTION COMMONS ── */
section { padding:100px 6vw; position:relative; }
.s-tag {
  font-family:var(--f-body); font-style:italic;
  font-size:15.5px; letter-spacing:.04em; color:var(--terra);
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.s-tag::before { content:''; width:32px; height:1px; background:var(--g-amber); flex-shrink:0; }
.s-title {
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(30px,3.6vw,48px);
  color:var(--ink); line-height:1.2;
  margin-bottom:16px; letter-spacing:-.01em;
}
.s-title em { font-style:italic; font-family:var(--f-body); font-weight:500; color:var(--terra); }
.s-desc { font-family:var(--f-tc); font-size:17px; color:var(--ink-2); max-width:560px; line-height:1.95; font-weight:300; }

/* ── BUTTONS ── */
.btn-g {
  background:var(--g-amber); color:#fff; -webkit-text-fill-color:#fff;
  padding:14px 32px; border-radius:999px;
  font-size:14.5px; font-weight:600; letter-spacing:.05em;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 6px 20px rgba(216,154,78,.35);
  transition:opacity .2s,transform .15s,box-shadow .2s;
}
.btn-g:hover { opacity:.96; transform:translateY(-2px); box-shadow:0 10px 28px rgba(216,154,78,.45); }
.btn-ghost {
  border:1.5px solid rgba(184,92,56,.35); color:var(--terra-d);
  background:rgba(250,244,234,.6);
  padding:13px 30px; border-radius:999px;
  font-size:14.5px; font-weight:500; letter-spacing:.04em;
  transition:border-color .2s,background .2s,color .2s,transform .15s;
}
.btn-ghost:hover { border-color:var(--terra); background:rgba(232,181,112,.18); transform:translateY(-1px); }
.btn-dk {
  background:var(--bark); color:var(--paper-l);
  padding:14px 30px; border-radius:999px;
  font-size:14.5px; font-weight:600; letter-spacing:.04em; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px;
  box-shadow:0 6px 18px rgba(42,31,18,.25);
  transition:background .2s,transform .15s,box-shadow .2s;
}
.btn-dk:hover { background:var(--terra-d); transform:translateY(-2px); box-shadow:0 10px 24px rgba(42,31,18,.35); }
.lm {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-body); font-style:italic;
  font-size:15.5px; font-weight:500; color:var(--terra-d);
  transition:gap .2s,color .2s;
}
.lm svg { width:13px; height:13px; transition:transform .2s; }
.lm:hover { color:var(--rust); gap:10px; }
.lm:hover svg { transform:translateX(3px); }

/* ── REVEAL ── */
.rv   { opacity:0; transform:translateY(30px); transition:opacity .8s ease,transform .8s ease; }
.rv-l { opacity:0; transform:translateX(-40px); transition:opacity .8s ease,transform .8s ease; }
.rv-r { opacity:0; transform:translateX(40px); transition:opacity .8s ease,transform .8s ease; }
.rv-s { opacity:0; transform:scale(.94); transition:opacity .7s ease,transform .7s ease; }
.rv.on,.rv-l.on,.rv-r.on,.rv-s.on { opacity:1; transform:none; }

/* ── FOOTER ── */
footer {
  background:var(--g-bark);
  padding:80px 6vw 42px;
  position:relative; overflow:hidden;
}
footer::before { content:''; position:absolute; top:-1px; left:20%; right:20%; height:1px; background:linear-gradient(to right,transparent,var(--amber),transparent); }
footer::after { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%) translateY(-50%); width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(232,181,112,.18) 0%,transparent 70%); pointer-events:none; }
.ft-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; padding-bottom:52px; border-bottom:1px solid rgba(232,181,112,.14); position:relative; }
.ft-logo { display:flex; align-items:center; gap:12px; }
.ft-logo img { height:46px; width:46px; object-fit:cover; border-radius:50%; border:1.5px solid rgba(216,154,78,.35); }
.ft-logo .nav-logo-text .t1 { color:var(--paper-l); }
.ft-logo .nav-logo-text .t2 { color:var(--amber-l); }
.ft-desc { font-family:var(--f-tc); font-size:15px; color:rgba(250,240,220,.55); line-height:1.85; margin-top:18px; font-weight:300; max-width:290px; }
.ft-col h4 { font-family:var(--f-body); font-style:italic; font-size:15.5px; color:var(--amber-l); letter-spacing:.04em; margin-bottom:18px; }
.ft-col ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.ft-col ul li a { font-family:var(--f-tc); font-size:15px; color:rgba(250,240,220,.55); font-weight:300; transition:color .2s; }
.ft-col ul li a:hover { color:var(--amber-l); }
.ft-bot { display:flex; justify-content:space-between; align-items:center; padding-top:28px; gap:20px; flex-wrap:wrap; position:relative; }
.ft-copy { font-family:var(--f-body); font-style:italic; font-size:14px; color:rgba(250,240,220,.35); }
.ft-links { display:flex; gap:24px; }
.ft-links a { font-family:var(--f-body); font-style:italic; font-size:14px; color:rgba(250,240,220,.35); transition:color .2s; }
.ft-links a:hover { color:var(--amber-l); }
.dot { width:3px; height:3px; background:var(--amber); border-radius:50%; }

@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ── Hamburger button ── */
.nav-burger {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  cursor:pointer; padding:6px; background:none; border:none; margin-left:auto;
}
.nav-burger span {
  display:block; width:22px; height:2px;
  background:var(--ink-2); border-radius:2px;
  transition:transform .25s,opacity .2s;
}
nav.open .nav-burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
nav.open .nav-burger span:nth-child(2) { opacity:0; }
nav.open .nav-burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── Mobile menu ── */
@media(max-width:1024px) { .ft-top { grid-template-columns:1fr 1fr; } }
@media(max-width:768px) {
  .nav-burger { display:flex; }
  .nav-menu {
    display:none;
    position:absolute; top:100%; left:0; right:0;
    width:100%; box-sizing:border-box;
    flex-direction:column; gap:0;
    background:rgba(250,244,234,.98);
    border-top:1px solid rgba(216,154,78,.15);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    padding:8px 0 24px;
    z-index:199;
    max-height:calc(100vh - 80px); overflow-y:auto; overflow-x:hidden;
  }
  nav.open .nav-menu { display:flex !important; }
  .nav-menu > li { width:100%; }
  .nav-menu > li > a {
    padding:13px 24px !important; width:100%; border-radius:0;
    font-size:14px; justify-content:space-between;
    white-space:normal; box-sizing:border-box;
  }
  .nav-menu > li > a .arr { margin-left:auto; transition:transform .2s; }
  .nav-menu > li.mob-open > a .arr { transform:rotate(180deg); opacity:.85; }
  .dropdown {
    position:static; opacity:1 !important; transform:none !important;
    pointer-events:auto !important; display:none;
    background:rgba(232,181,112,.08); border:none; border-radius:0;
    box-shadow:none; backdrop-filter:none; padding:4px 0;
  }
  .nav-menu > li.mob-open .dropdown { display:block; }
  .dropdown::before { display:none; }
  .dropdown li a { padding:10px 24px 10px 36px !important; font-size:13px; border-left:none; }
  .dropdown li a:hover { padding-left:36px !important; }
  .nav-cta {
    display:flex !important;
    margin:12px 20px 4px !important;
    width:calc(100% - 40px) !important;
    box-sizing:border-box !important;
    border-radius:999px !important;
    justify-content:center !important;
  }
  .ft-top { grid-template-columns:1fr !important; }
}