/* ============================================================
   Going 公仔 — Brand stylesheet
   Distilled from MUZI GOING's AI LAB design system
   (Apple-style minimalism × forest green). Self-hosted fonts only.
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Noto Sans TC';
  src: url('fonts/NotoSansTC-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Serif TC';
  src: url('fonts/NotoSerifTC-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/Cinzel-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Dela Gothic One';
  src: url('fonts/DelaGothicOne-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Yusei Magic';
  src: url('fonts/YuseiMagic-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --green:#2D5F3F; --green-deep:#1F4530; --green-soft:#E8EFE9;
  --green-glow:rgba(45,95,63,0.12); --moss:#7A9B76; --sand:#D9D3C3;
  --bg:#FAFAF7; --bg-soft:#F2F2EC; --surface:#FFFFFF;
  --ink:#1A1D1A; --ink-soft:#4A4F4A; --ink-dim:#8A8F8A;
  --line:rgba(26,29,26,0.08); --line-strong:rgba(26,29,26,0.14);
  --danger:#DC2626; --success:#15803D;

  --font-display:'Fraunces','Noto Serif TC',Georgia,serif;
  --font-body:'Noto Sans TC',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-roman:'Cinzel',Georgia,serif;
  --font-heavy:'Dela Gothic One',sans-serif;
  --font-marker:'Yusei Magic',sans-serif;

  --fs-hero:clamp(2.6rem,7vw,5.4rem);
  --fs-display:clamp(2.2rem,5vw,3.6rem);
  --fs-h2:clamp(1.6rem,2.8vw,2.3rem);
  --fs-h3:clamp(1.35rem,2.2vw,1.85rem);
  --fs-lead:clamp(1.05rem,1.6vw,1.25rem);
  --fs-body:1rem; --fs-sm:0.92rem; --fs-meta:0.82rem; --fs-eyebrow:0.78rem;

  --lh-tight:1.05; --lh-snug:1.15; --lh-body:1.6; --lh-relaxed:1.8;
  --ls-display:-0.025em; --ls-tight:-0.015em; --ls-eyebrow:0.18em; --ls-tag:0.14em;
  --w-light:300; --w-regular:400; --w-medium:500; --w-semibold:600;

  --radius-card:24px; --radius-md:16px; --radius-sm:12px; --radius-pill:999px;
  --shadow-card-hover:0 30px 60px -20px rgba(45,95,63,0.18),0 12px 24px -12px rgba(0,0,0,0.08);
  --shadow-feature:0 30px 60px -20px rgba(31,69,48,0.5);
  --shadow-soft:0 1px 2px rgba(0,0,0,0.04),0 8px 24px rgba(0,0,0,0.04);
  --shadow-pop:0 25px 60px -12px rgba(0,0,0,0.18);
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-smooth:cubic-bezier(0.4,0,0.2,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --max:1280px; --gutter:clamp(1.25rem,4vw,3rem);
}

*{box-sizing:border-box;margin:0;padding:0}
/* 字級基準對齊全站 18px（site-chrome.css 同值）；本頁字級多為 rem，會等比例對齊 */
html{font-size:18px; scroll-behavior:smooth}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--ink);
  font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--w-regular);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}

.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gutter)}

/* ---------- Type helpers ---------- */
.eyebrow{
  font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--green); font-weight:var(--w-medium);
}
.display{
  font-family:var(--font-display); font-weight:var(--w-regular);
  line-height:1.08; letter-spacing:var(--ls-display); color:var(--ink);
  font-variation-settings:'opsz' 144;
}
.display em, .em-green{
  font-style:italic; color:var(--green);
  font-variation-settings:'opsz' 144,'SOFT' 50;
}
.lead{font-size:var(--fs-lead); line-height:var(--lh-relaxed); color:var(--ink-soft); font-weight:var(--w-light)}
.meta{font-size:var(--fs-meta); letter-spacing:0.04em; color:var(--ink-dim)}

/* ---------- Pills / tags ---------- */
.tag{
  display:inline-flex; align-items:center; gap:.4em;
  background:var(--green-soft); color:var(--green-deep);
  font-size:var(--fs-eyebrow); font-weight:var(--w-medium); letter-spacing:var(--ls-tag);
  padding:.5em 1em; border-radius:var(--radius-pill);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-body); font-size:var(--fs-sm); font-weight:var(--w-medium);
  padding:.85em 1.5em; border-radius:var(--radius-pill); cursor:pointer;
  border:1px solid var(--ink); background:var(--ink); color:var(--bg);
  transition:background var(--dur-base,.3s) var(--ease-smooth), transform var(--dur-base,.3s) var(--ease-out-expo), border-color .3s;
}
.btn:hover{background:var(--green-deep); border-color:var(--green-deep); transform:translateY(-2px)}
.btn .arrow{transition:transform .4s var(--ease-out-expo)}
.btn:hover .arrow{transform:translateX(4px)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--surface); color:var(--green); border-color:var(--green)}

/* ---------- Card ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-card); transition:transform var(--dur-hover,.5s) var(--ease-out-expo), box-shadow var(--dur-hover,.5s) var(--ease-out-expo), border-color .4s;
}

/* ---------- Logo orb ---------- */
.logo-mark{
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#7A9B76,#1F4530 70%);
  box-shadow:inset -2px -3px 4px rgba(0,0,0,.18),0 1px 2px rgba(45,95,63,.25);
  flex:none;
}

/* ---------- Entrance ---------- */
@keyframes fadeUp{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
.reveal{opacity:0}
.reveal.in{animation:fadeUp .9s var(--ease-out-expo) forwards}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important; animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Carousel ---------- */
.carousel{position:relative; width:100%}
.carousel__track{position:relative; width:100%; aspect-ratio:3/4}
.carousel__img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity .9s var(--ease-out-expo); pointer-events:none}
.carousel__img.is-on{opacity:1; pointer-events:auto}
.carousel--hero .carousel__img{filter:drop-shadow(0 40px 50px rgba(45,95,63,.22))}
.carousel__dots{position:absolute; left:0; right:0; bottom:8px; display:flex; gap:.45rem;
  justify-content:center; z-index:3}
.cdot{width:7px; height:7px; border-radius:999px; background:var(--line-strong); cursor:pointer;
  transition:all .35s var(--ease-out-expo); border:0; padding:0}
.cdot.is-on{background:var(--green); width:22px}
.carousel__nav{position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px;
  border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--ink-soft); cursor:pointer;
  display:grid; place-items:center; font-size:1.2rem; line-height:1; opacity:0; transition:opacity .3s; z-index:3}
.carousel:hover .carousel__nav{opacity:1}
.carousel__nav--prev{left:-6px} .carousel__nav--next{right:-6px}