/* ============================================================
   niu.18 — 設計系統 v2
   風格：極簡精品 × 韓系成熟溫柔（Quiet Luxury / K-Everyday）
   配色：中性暖白軸，奶茶棕僅作 <10% 點綴
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,400;1,500;1,600&family=Inter:wght@300;400;500&display=swap');

:root{
  --bg:#faf8f5;          /* 暖白主背景 */
  --bg-soft:#f1ede7;     /* 霧米次區塊 */
  --stone:#cbcbcb;       /* Logo 暖灰 */
  --line:#e2dcd3;        /* 細描線 */
  --taupe:#8a8178;       /* 輔助文字 */
  --ink:#1c1a18;         /* 近黑主文字 */
  --accent:#a9785f;      /* 奶茶棕點綴 */
  --max:1240px;
  --display:"Cormorant Garamond","Noto Serif TC",serif;
  --serif-tc:"Noto Serif TC",serif;
  --sans:"Inter","Noto Sans TC",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);font-weight:300;line-height:1.8;
  -webkit-font-smoothing:antialiased;letter-spacing:.01em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:400;line-height:1.2}

/* 進場動效（捲動淡入） */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}

/* 小標 kicker */
.kicker{font-family:var(--sans);font-size:.72rem;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}

/* ---------- 公告列 ---------- */
.announce{background:var(--bg-soft);color:var(--taupe);text-align:center;font-size:.74rem;letter-spacing:.14em;padding:.6rem 1rem}

/* ---------- 導覽列 ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.5rem;
  padding:1.15rem clamp(1.1rem,4vw,2.8rem);
  background:rgba(250,248,245,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__logo{font-family:var(--display);font-style:italic;font-size:1.85rem;font-weight:600;letter-spacing:.01em;line-height:1}
.nav__logo span{color:var(--accent)}
.nav__links{display:flex;gap:1.8rem;margin-left:1.2rem;font-size:.86rem;letter-spacing:.06em;font-weight:400}
.nav__links a{position:relative;padding:.2rem 0;color:var(--taupe);transition:color .3s}
.nav__links a:hover{color:var(--ink)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--accent);transition:width .3s}
.nav__links a:hover::after{width:100%}
.nav__actions{margin-left:auto;display:flex;align-items:center;gap:1.3rem;font-size:.82rem;letter-spacing:.08em}
.nav__cart{color:var(--taupe);transition:color .3s}
.nav__cart:hover{color:var(--ink)}
.nav__shop{border:1px solid var(--ink);padding:.5rem 1.15rem;border-radius:2rem;font-size:.78rem;letter-spacing:.08em;transition:.3s}
.nav__shop:hover{background:var(--ink);color:var(--bg)}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer}
.nav__toggle span{width:22px;height:1px;background:var(--ink)}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:min(90vh,760px)}
.hero__text{display:flex;flex-direction:column;justify-content:center;gap:1.6rem;padding:clamp(2rem,7vw,6rem)}
.hero h1{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(3rem,7vw,5.2rem);letter-spacing:.01em}
.hero__sub{color:var(--taupe);font-size:1rem;max-width:30ch;letter-spacing:.04em}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.hero__img{position:relative;overflow:hidden;background:var(--stone)}
.hero__img span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:var(--display);font-style:italic;font-size:1.1rem;letter-spacing:.05em;text-align:center;opacity:.85}
.hero__img::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(203,203,203,.2),rgba(138,129,120,.25))}
.hero__img--anim{animation:slowZoom 1.6s cubic-bezier(.2,.6,.2,1) both}
@keyframes slowZoom{from{transform:scale(1.04)}to{transform:scale(1)}}

/* ---------- 按鈕 ---------- */
.btn{display:inline-block;padding:.85rem 2rem;border-radius:2rem;font-size:.82rem;font-weight:400;letter-spacing:.08em;
  font-family:var(--sans);transition:.3s;border:1px solid transparent;cursor:pointer}
.btn--solid{background:var(--ink);color:var(--bg)}
.btn--solid:hover{background:var(--accent)}
.btn--ghost{border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bg)}

/* ---------- 區塊通用 ---------- */
.section{max-width:var(--max);margin:0 auto;padding:clamp(4rem,8vw,7rem) clamp(1.1rem,4vw,2.4rem)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2.6rem}
.section__head h2{font-family:var(--serif-tc);font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:500;letter-spacing:.02em}
.section__head .en{font-family:var(--display);font-style:italic;color:var(--accent);font-size:1.05rem;display:block;margin-bottom:.3rem;letter-spacing:.03em}
.section__more{color:var(--taupe);font-size:.84rem;letter-spacing:.06em;white-space:nowrap;transition:color .3s}
.section__more:hover{color:var(--accent)}

/* ---------- 分類 ---------- */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.cat{position:relative;display:block}
.cat__img{aspect-ratio:4/5;background:var(--bg-soft);border-radius:2px;display:flex;align-items:center;justify-content:center;
  color:var(--stone);font-family:var(--display);font-style:italic;font-size:2rem;transition:.5s;overflow:hidden}
.cat:hover .cat__img{background:#e9e1d5}
.cat__label{display:flex;align-items:baseline;gap:.6rem;margin-top:1rem}
.cat__label .zh{font-family:var(--serif-tc);font-size:1.15rem}
.cat__label .en{font-family:var(--display);font-style:italic;color:var(--taupe);font-size:.95rem}

/* ---------- 商品格 ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem 1.4rem}
.card{display:block}
.card__img{aspect-ratio:3/4;background:var(--bg-soft);border-radius:2px;display:flex;align-items:center;justify-content:center;
  color:var(--stone);font-family:var(--display);font-style:italic;position:relative;overflow:hidden;transition:.5s}
.card:hover .card__img{background:#e9e1d5}
.card__stock{position:absolute;top:.7rem;left:.7rem;background:rgba(250,248,245,.92);color:var(--taupe);
  font-size:.68rem;letter-spacing:.08em;padding:.22rem .7rem;border:1px solid var(--line);border-radius:2rem}
.card__stock--pre{color:var(--accent);border-color:var(--accent)}
.card__name{margin-top:.9rem;font-size:.95rem;letter-spacing:.02em}
.card__meta{margin-top:.3rem;display:flex;align-items:baseline;gap:.6rem;color:var(--taupe);font-size:.8rem;letter-spacing:.04em}
.card__price{color:var(--ink);font-size:.95rem}
.card__price del{color:var(--taupe);margin-left:.4rem;font-size:.8rem}
.card__ship{font-size:.74rem;color:var(--taupe);margin-top:.25rem;letter-spacing:.03em}

/* ---------- 品牌故事 ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--bg-soft);margin-top:1rem}
.story__img{background:var(--stone);min-height:440px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--display);font-style:italic;opacity:.92}
.story__text{display:flex;flex-direction:column;justify-content:center;gap:1.3rem;padding:clamp(2.4rem,7vw,5.5rem)}
.story__text h2{font-family:var(--serif-tc);font-size:clamp(1.6rem,3.6vw,2.3rem);font-weight:500}
.story__text .en{font-family:var(--display);font-style:italic;font-size:1.6rem;color:var(--accent)}
.story__text p{color:var(--taupe);max-width:42ch;font-size:.96rem}

/* ---------- IG ---------- */
.ig{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem}
.ig__cell{aspect-ratio:1;background:var(--bg-soft);border-radius:2px;display:flex;align-items:center;justify-content:center;
  color:var(--stone);font-family:var(--display);font-style:italic;font-size:.85rem;transition:.5s}
.ig__cell:hover{background:#e9e1d5}

/* ---------- 頁尾 ---------- */
.foot{background:var(--bg-soft);margin-top:1rem}
.foot__in{max-width:var(--max);margin:0 auto;padding:clamp(3rem,6vw,5rem) clamp(1.1rem,4vw,2.4rem) 2.4rem;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.4rem}
.foot__brand .nav__logo{font-size:1.7rem}
.foot__brand p{color:var(--taupe);font-size:.88rem;margin-top:.9rem;max-width:26ch}
.foot__brand .slogan{font-family:var(--display);font-style:italic;color:var(--accent);font-size:1.05rem;margin-top:.6rem}
.foot__col h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:1.1rem;font-weight:500}
.foot__col a{display:block;color:var(--taupe);font-size:.88rem;padding:.28rem 0;transition:color .3s}
.foot__col a:hover{color:var(--accent)}
.foot__copy{grid-column:1/-1;border-top:1px solid var(--line);margin-top:1.5rem;padding-top:1.6rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;color:var(--taupe);font-size:.76rem;letter-spacing:.04em}

/* ---------- 響應式 ---------- */
@media(max-width:880px){
  .hero,.story{grid-template-columns:1fr}
  .hero__img{min-height:340px;order:-1}
  .story__img{min-height:300px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .ig{grid-template-columns:repeat(3,1fr)}
  .foot__in{grid-template-columns:1fr 1fr}
  .nav__links{position:fixed;inset:0 0 0 auto;width:74%;max-width:320px;flex-direction:column;background:var(--bg);
    padding:5.5rem 2rem;gap:1.6rem;margin-left:0;transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.6,.2,1);
    box-shadow:-10px 0 40px rgba(28,26,24,.06)}
  .nav__links a{font-size:1rem}
  body.menu-open .nav__links{transform:translateX(0)}
  .nav__toggle{display:flex;order:-1}
}
@media(max-width:460px){
  .cats{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}