:root {
  --ink:#272822;
  --muted:#71746d;
  --line:#e6e4dd;
  --cream:#faf9f6;
  --orange:#ed7450;
  --primary:#eb714e;
  --mint:#dff1e7;
  --blue:#ddebfa;
  --yellow:#fff1c9;
  --pink:#f5dce5;
  --shadow:0 22px 58px #35321b13;
  --header-height:83px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-height) + 12px); }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif; }
body, button, input, select, textarea { font-weight:400; }
button, input, select, textarea { font-family:inherit; font-size:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #ae4a2c; outline-offset:4px; }
.sr-only, .honeypot { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; top:8px; left:8px; z-index:110; transform:translateY(-150%); background:#fff; padding:12px; border-radius:10px; }
.skip-link:focus { transform:none; }
.container { width:min(100%,1210px); padding-inline:30px; margin-inline:auto; }
.eyebrow { font-size:.75rem; letter-spacing:.18em; font-weight:700; color:#835334; text-transform:uppercase; }
.section { padding-block:105px; }
.section-title { font-size:clamp(1.875rem,3.7vw,3rem); letter-spacing:-.045em; line-height:1.28; margin:14px 0 18px; font-weight:900; }
.section-sub { color:#5e6259; line-height:1.95; max-width:670px; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:40px; }
.pill { display:inline-block; border:1px solid #dfded7; border-radius:100px; padding:8px 16px; font-size:.8125rem; background:#fff; white-space:nowrap; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:100px; padding:13px 23px;
  min-height:44px; font-weight:700; line-height:1.4;
  transition:transform 200ms, box-shadow 200ms, background 200ms;
}
.btn:hover { transform:translateY(-3px) scale(1.025); box-shadow:0 10px 24px #c7744a30; }
.btn.primary { color:#272019; background:var(--primary); }
.btn.outline { color:var(--ink); background:white; border-color:#dad9d3; }
.btn.dark { background:#262821; color:white; }
.btn.line { background:#d9f4e3; color:#15562f; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:26px; }
.text-link { color:#984427; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.site-header {
  height:var(--header-height); position:sticky; top:0; z-index:90;
  background:#faf9f6f2; backdrop-filter:blur(18px); border-bottom:1px solid #e9e7e0;
}
.site-nav { display:flex; align-items:center; justify-content:space-between; gap:16px; height:100%; }
.brand-link { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.lockup { display:inline-flex; align-items:center; gap:9px; font-weight:900; white-space:nowrap; color:#000; }
.lockup img { width:46px; height:auto; }
.lockup b { font-size:.9375rem; font-weight:900; }
.site-name { font-size:.625rem; letter-spacing:.08em; font-weight:900; }
.navlinks { display:flex; gap:clamp(9px,1.1vw,18px); align-items:center; font-size:.8125rem; font-weight:700; }
.navlinks > a:not(.btn), .news summary { display:flex; align-items:center; min-height:44px; white-space:nowrap; }
.navlinks a:hover, .navlinks a[aria-current="page"], .news summary:hover { color:#a0472b; }
.navlinks .btn { padding-inline:15px; white-space:nowrap; }
.navlinks .btn:hover { color:#272019; }
.menu-btn { display:none; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:12px; width:44px; height:44px; font-size:1.25rem; }
.news { position:relative; }
.news summary { cursor:pointer; list-style:none; gap:5px; }
.news summary::after { content:"▾"; }
.news div { position:absolute; top:100%; right:0; min-width:144px; padding:8px; background:white; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.news div a { display:block; padding:10px; white-space:nowrap; }
.foot { background:#272a25; color:#fff; padding:56px 0 30px; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.footer-lockup { display:inline-block; background:white; padding:11px 14px; border-radius:12px; }
.foot p { color:#e0e2de; line-height:1.95; font-size:.875rem; }
.contact-list { display:grid; grid-template-columns:1fr 1fr; gap:8px 22px; margin:0; color:#eee; font-size:.875rem; line-height:1.7; }
.contact-list div { display:flex; flex-wrap:wrap; gap:0 10px; }
.contact-list dd { margin:0; }
.contact-list dt { color:#c2c9bd; }
.foot address { font-style:normal; }
.foot a:not(.footer-lockup) { text-decoration:underline; text-underline-offset:4px; }
.foot a:focus-visible, .flip-back a:focus-visible { outline-color:#ffd4b8; }
.footer-links { display:flex; gap:20px; }
.foot-bottom { border-top:1px solid #ffffff28; margin-top:36px; padding-top:20px; color:#d2d5cf; font-size:.8125rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }
.foot-bottom button { padding:0; background:none; border:0; color:inherit; text-decoration:underline; }
.line-float {
  position:fixed; right:21px; bottom:max(20px,env(safe-area-inset-bottom)); background:#17c65b; color:#102f1c;
  border-radius:100px; padding:13px 17px; font-size:.8125rem; font-weight:900; z-index:80;
  box-shadow:0 9px 25px #10a64f55; transition:transform 200ms;
}
.line-float:hover { transform:translateY(-4px); }
.line-float.form-in-view { visibility:hidden; }
.subpage { padding-block:60px 96px; min-height:54vh; }
.page-heading { margin:0 0 25px; max-width:850px; }
.page-heading h1 { font-weight:900; font-size:clamp(2rem,4.4vw,3.5rem); line-height:1.25; letter-spacing:-.04em; margin:0 0 16px; overflow-wrap:anywhere; }
.page-heading p, .detail-description { color:#5e6259; line-height:1.95; font-size:1rem; }
.back-link { display:inline-flex; min-height:44px; align-items:center; color:#984427; font-weight:700; margin-bottom:18px; }
.detail-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(25px,5vw,66px); align-items:center; }
.detail-grid > * { min-width:0; }
.gallery { background:#f1ebe4; border:1px solid var(--line); border-radius:25px; overflow:hidden; }
.gallery-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.gallery-slide { flex:0 0 100%; aspect-ratio:5/4; display:grid; place-items:center; scroll-snap-align:start; }
.gallery-slide img { width:100%; height:100%; object-fit:contain; }
.gallery-controls { display:flex; align-items:center; justify-content:center; gap:18px; min-height:48px; font-weight:700; font-size:.875rem; }
.gallery-controls button { border:1px solid #d7cabc; border-radius:100px; background:white; color:var(--ink); width:44px; height:44px; }
.related { margin-top:65px; }
.related h2 { font-size:clamp(1.5rem,3vw,2.125rem); font-weight:900; }
.small-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.small-card { border:1px solid var(--line); border-radius:19px; background:white; transition:transform 260ms, box-shadow 260ms; }
.small-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.small-card a { display:block; height:100%; border-radius:inherit; }
.small-card img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:18px 18px 0 0; }
.small-card div { padding:15px; }
.small-card h2, .small-card h3 { font-size:1rem; margin:0; }
.small-card p { color:#5e6259; font-size:.875rem; line-height:1.7; margin-bottom:0; }
.dieline-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.dieline-grid a { display:grid; place-items:center; aspect-ratio:4/3; padding:9px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.dieline-grid img { max-height:100%; width:100%; height:100%; object-fit:contain; }
.faq-list { max-width:860px; }
.faq-list details { border:1px solid var(--line); border-radius:16px; background:white; margin-bottom:12px; }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; padding:17px 19px; gap:10px; }
.faq-list summary h2 { margin:0; font-size:1rem; }
.faq-list summary::after { content:"+"; color:#984427; font-size:1.25rem; }
.faq-list details[open] summary::after { content:"−"; }
.faq-answer { border-top:1px solid var(--line); padding:4px 19px 16px; }
.post-list { display:grid; gap:18px; }
.post-card { display:grid; grid-template-columns:minmax(150px,28%) 1fr; align-items:center; gap:22px; padding:15px; background:white; border:1px solid var(--line); border-radius:20px; }
.post-card img { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:12px; }
.post-card h2 { margin:5px 0; font-size:clamp(1.125rem,2vw,1.5rem); }
.post-card p { color:#5e6259; line-height:1.8; }
time { color:#5e6259; font-size:.875rem; }
.article { max-width:800px; }
.article-cover { margin:24px 0 36px; }
.article-cover img { border-radius:20px; width:100%; max-height:460px; object-fit:cover; }
.prose { line-height:1.95; overflow-wrap:anywhere; }
.prose h2 { line-height:1.45; margin-top:1.65em; font-size:1.375rem; }
.prose a { color:#984427; text-decoration:underline; text-underline-offset:3px; }
.post-nav, .post-share { display:flex; flex-wrap:wrap; gap:16px; margin-top:26px; color:#984427; }
.post-nav { justify-content:space-between; padding-top:22px; border-top:1px solid var(--line); }
.cookie-consent { position:fixed; z-index:100; inset:auto 16px 16px; margin-left:auto; max-width:420px; border:1px solid var(--line); border-radius:20px; padding:18px; background:white; box-shadow:var(--shadow); }
.cookie-consent p { margin:0; }
.cookie-consent .actions { margin-top:12px; }

@media (max-width:1040px) {
  .menu-btn { display:grid; place-items:center; }
  .navlinks { display:none; position:absolute; inset:100% 0 auto; background:var(--cream); padding:16px max(24px,calc((100% - 680px)/2)); max-height:calc(100dvh - var(--header-height)); overflow:auto; box-shadow:var(--shadow); }
  .navlinks.show { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:6px 16px; }
  .news div { position:static; box-shadow:none; }
}
@media (max-width:650px) {
  :root { --header-height:72px; }
  .container { padding-inline:20px; }
  .section { padding-block:68px; }
  .section-title { font-size:1.9375rem; }
  .section-head { display:block; margin-bottom:28px; }
  .section-head .pill { margin-top:4px; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .contact-list { grid-template-columns:1fr; }
  .foot { padding-bottom:72px; }
  .line-float { right:13px; bottom:max(14px,env(safe-area-inset-bottom)); }
  .subpage { padding-block:40px 64px; }
  .detail-grid { grid-template-columns:1fr; }
  .related { margin-top:44px; }
  .small-grid, .dieline-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .post-card { grid-template-columns:1fr; gap:12px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}