/* aftertaste HK — 品牌故事文章頁（CMS template）。樣式限定喺 .at-st 同 .st-rich 入面。 */
.at-st{
  --plum:#57233D; --plum-700:#461B31; --plum-soft:#EFE3E8; --apricot:#D9884A; --apricot-text:#B16225;
  --bg:#F9F4EF; --surface:#FFFFFF; --surface-2:#FBF7F3; --line:#E7DDD3; --line-soft:#F1E9E1;
  --body:#2B2422; --muted:#6E605A; --faint:#A0928A;
  --font:'Noto Sans HK',-apple-system,'PingFang HK','Microsoft JhengHei',sans-serif;
  max-width:760px; margin:0 auto; padding:24px 20px 0;
  color:var(--body); font-family:var(--font); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
.at-st *,.at-st *::before,.at-st *::after{ box-sizing:border-box; }
.at-st h1,.at-st p,.at-st figure{ margin:0; font-family:inherit; letter-spacing:normal; }
.at-st a{ color:inherit; text-decoration:none; }
.at-st img{ display:block; max-width:100%; }

.st-back{ display:inline-block; font-size:14px; color:var(--muted); }
.st-back:hover{ color:var(--plum); }
.st-head{ margin-top:14px; }
.st-cat{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--apricot-text);
  background:#FBEBDD; border-radius:999px; padding:5px 12px; }
.st-title{ font-size:clamp(28px,4.4vw,40px); font-weight:600; color:var(--plum); line-height:1.35; margin-top:12px!important; text-wrap:balance; }
.st-excerpt{ font-size:17px; color:var(--muted); line-height:1.8; margin-top:12px!important; }
.st-meta{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:13.5px; color:var(--faint); }
.st-cover{ margin-top:22px!important; border-radius:20px; overflow:hidden; background:var(--surface-2); }
.st-cover img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }

/* ── 內文（Webflow Rich text）── */
.st-rich{ max-width:760px; margin:26px auto 0; padding:0 20px;
  font-family:'Noto Sans HK',-apple-system,'PingFang HK',sans-serif; font-size:17px; line-height:1.95; color:#2B2422; }
.st-rich p{ margin:0 0 20px; }
.st-rich h2,.st-rich h3{ font-weight:600; color:#57233D; line-height:1.4; margin:36px 0 12px; }
.st-rich h2{ font-size:24px; }
.st-rich h3{ font-size:20px; }
.st-rich ul,.st-rich ol{ margin:0 0 20px; padding-left:1.4em; }
.st-rich li{ margin-bottom:8px; }
.st-rich img{ width:100%; height:auto; border-radius:16px; margin:26px 0; }
.st-rich figcaption{ font-size:13px; color:#A0928A; text-align:center; margin-top:-14px; margin-bottom:26px; }
.st-rich a{ color:#57233D; text-decoration:underline; text-underline-offset:3px; }
.st-rich strong{ font-weight:600; }

.st-quote{ margin:30px 0; padding:22px 24px; background:#FBF7F3; border-left:3px solid #D9884A; border-radius:0 16px 16px 0;
  font-size:20px; line-height:1.75; font-weight:500; color:#57233D; }
.st-video{ margin:28px 0; border-radius:16px; overflow:hidden; background:#2E1220; aspect-ratio:16/9; }
.st-video iframe{ width:100%; height:100%; border:0; display:block; }

/* ── 相關餐廳 ── */
.st-cta-wrap{ padding-top:0; padding-bottom:60px; }
.st-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:34px;
  background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:20px 22px; }
.st-cta-logo{ width:56px; height:56px; flex:0 0 56px; border-radius:16px; overflow:hidden; background:var(--plum-soft);
  color:var(--plum); font-size:22px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.st-cta-logo img{ width:100%; height:100%; object-fit:cover; background:#fff; }
.st-cta-main{ min-width:0; flex:1; }
.st-cta-main b{ display:block; font-size:17px; font-weight:600; color:var(--plum); }
.st-cta-main span{ display:block; font-size:13.5px; color:var(--muted); margin-top:3px; line-height:1.7; }
.st-cta-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.st-btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:13px;
  border:1px solid var(--line); background:#fff; font-size:15px; font-weight:600; white-space:nowrap; }
.st-btn:hover{ border-color:#D5C6B9; }
.st-btn.primary{ background:var(--plum); border-color:var(--plum); color:#fff; }
.st-btn.primary:hover{ background:var(--plum-700); }

@media (max-width:640px){
  .at-st{ padding:18px 16px 0; }
  .st-rich{ padding:0 16px; font-size:16.5px; }
  .st-quote{ font-size:18px; padding:18px 18px; }
  .st-cta{ padding:18px 16px; }
  .st-cta-btns{ width:100%; }
  .st-cta-btns .st-btn{ flex:1; }
}