/* ============================ TOKENS（只用五色） ============================ */
:root{--brown:#70412F;--sand:#C5A387;--porcelain:#DACCC1;--sage:#818E73;--slate:#3F5160;--bg:rgba(218,204,193,0.08);--ink:rgba(63,81,96,0.95);--muted:rgba(63,81,96,0.70);--card:rgba(218,204,193,0.22);--line:rgba(63,81,96,0.28);--radius:22px;--radius-sm:12px;--maxw:1180px;--pad:24px;--gap-2:12px;--gap-3:18px;--gap-4:24px;--gap-6:32px;--gap-8:44px;--gap-10:56px;--h1:clamp(38px,4.8vw,64px);--h2:clamp(24px,3.1vw,38px);--h3:clamp(18px,2.2vw,24px);--lead:clamp(16px,1.6vw,20px);--ease:cubic-bezier(.22,1,.36,1);--shadow-xs:0 1px 2px rgba(63,81,96,.10);--shadow-sm:0 6px 18px rgba(63,81,96,.18);--shadow:0 16px 44px rgba(63,81,96,.24);--shadow-lg:0 26px 72px rgba(63,81,96,.30)}
/* 深色模式（仍只用五色：以 slate 為底、brown/sand 提升高亮、porcelain 作中和） */
.theme-dark{--bg:rgba(63,81,96,0.22);--ink:rgba(218,204,193,0.96);--muted:rgba(218,204,193,0.72);--card:rgba(63,81,96,0.35);--line:rgba(218,204,193,0.38);--shadow-xs:0 1px 2px rgba(63,81,96,.35);--shadow-sm:0 6px 18px rgba(63,81,96,.45);--shadow:0 18px 48px rgba(63,81,96,.55);--shadow-lg:0 26px 72px rgba(63,81,96,.60)}
/* ============================ RESET / BASE ============================ */
*{box-sizing:border-box}html,body{margin:0;padding:0}html{color-scheme:light dark;scroll-behavior:smooth}body{font:400 16px/1.75 ui-sans-serif,system-ui,"PingFang TC","Noto Sans TC","Segoe UI",Arial;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%;height:auto}a{color:var(--slate);text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid rgba(197,163,135,.55);outline-offset:2px;border-radius:10px}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}.section{padding:80px 0}.section-sm{padding:52px 0}
.stack>*+*{margin-top:var(--gap-6)}.stack-sm>*+*{margin-top:var(--gap-3)}.stack-lg>*+*{margin-top:var(--gap-10)}
h1{font-size:var(--h1);line-height:1.1;margin:0;color:var(--brown)}h2{font-size:var(--h2);line-height:1.16;margin:0;color:var(--slate)}h3{font-size:var(--h3);line-height:1.2;margin:0;color:var(--brown)}.lead{font-size:var(--lead);color:var(--muted)}.muted{color:var(--muted)}p{margin:0 0 1em}
/* ============================ 紙紋背景（純五色）＋顆粒＋暗角 ============================ */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:repeating-linear-gradient(0deg,rgba(218,204,193,.15) 0 1px,transparent 1px 2px),repeating-linear-gradient(90deg,rgba(218,204,193,.12) 0 1px,transparent 1px 2px),radial-gradient(circle at 30% 30%,rgba(197,163,135,.12) 0%,transparent 90%),radial-gradient(circle at 70% 70%,rgba(129,142,115,.12) 0%,transparent 90%);background-blend-mode:multiply;box-shadow:inset 0 0 180px rgba(63,81,96,.18),inset 0 0 280px rgba(63,81,96,.10)}
.theme-dark body::before{background:repeating-linear-gradient(0deg,rgba(63,81,96,.22) 0 1px,transparent 1px 2px),repeating-linear-gradient(90deg,rgba(63,81,96,.22) 0 1px,transparent 1px 2px),radial-gradient(circle at 25% 40%,rgba(129,142,115,.20) 0%,transparent 80%),radial-gradient(circle at 80% 70%,rgba(112,65,47,.20) 0%,transparent 80%);box-shadow:inset 0 0 180px rgba(63,81,96,.45),inset 0 0 280px rgba(63,81,96,.35)}
body::after{content:"";position:fixed;inset:0;z-index:-1;background-image:radial-gradient(rgba(63,81,96,.08) 1px,transparent 1px);background-size:2px 2px;mix-blend-mode:multiply;opacity:.55;pointer-events:none}
.theme-dark body::after{background-image:radial-gradient(rgba(218,204,193,.12) 1px,transparent 1px);opacity:.28}
/* ============================ UTILITIES & GRID ============================ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-6)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-6)}.center{margin-inline:auto}.text-center{text-align:center}.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ============================ BUTTONS ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(218,204,193,.35);box-shadow:var(--shadow-sm);transition:transform .12s var(--ease),box-shadow .22s var(--ease),background .18s var(--ease);color:var(--slate)}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);background:rgba(197,163,135,.35)}
.btn.primary{background:linear-gradient(135deg,var(--brown),var(--sand));color:rgba(218,204,193,0.98);border-color:rgba(197,163,135,.55)}.btn.ghost{background:transparent}
/* ============================ HEADER（桌面＋行動） ============================ */
.lm-header{position:sticky;top:0;z-index:60;background:rgba(218,204,193,0.40);backdrop-filter:saturate(130%) blur(8px)}
.lm-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);border-bottom:1px solid var(--line)}
.lm-brand{display:flex;align-items:center;gap:10px;color:var(--brown);font-weight:800;letter-spacing:.2px}
.lm-logo-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(90deg,var(--brown),var(--sand));box-shadow:0 0 0 4px rgba(218,204,193,.55)}
.lm-nav{display:flex;gap:18px;align-items:center}
.lm-nav a{padding:6px 10px;border-radius:999px;color:var(--slate);border:1px solid transparent;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.lm-nav a:hover{border-color:rgba(63,81,96,.28);background:rgba(218,204,193,.28)}
.lm-menu{display:none;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(218,204,193,.35);color:var(--slate)}
.lm-header::after{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--brown),var(--sand),var(--porcelain),var(--sage),var(--slate))}
.is-scrolled .lm-header{box-shadow:var(--shadow-sm)}
/* ============================ MOBILE DRAWER ============================ */
.mobile-drawer{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);translate:100% 0;transition:translate .26s var(--ease);z-index:80;background:rgba(218,204,193,.75);border-left:1px solid var(--line);box-shadow:var(--shadow);padding:24px}
.mobile-drawer.open{translate:0 0}
.mobile-drawer nav a{display:block;padding:12px 10px;border-radius:12px;color:var(--slate)}
.mobile-drawer nav a:hover{background:rgba(218,204,193,.40)}
.mobile-mask{position:fixed;inset:0;background:rgba(63,81,96,.35);opacity:0;pointer-events:none;transition:opacity .2s var(--ease);z-index:70}
.mobile-mask.show{opacity:1;pointer-events:auto}
@media (max-width:980px){.lm-nav{display:none}.lm-menu{display:inline-flex}}
/* ============================ HERO ============================ */
.lm-hero{padding:72px 0;background:linear-gradient(180deg,rgba(218,204,193,.55),rgba(218,204,193,0))}.theme-dark .lm-hero{background:linear-gradient(180deg,rgba(197,163,135,.25),rgba(197,163,135,0))}
.lm-hero .wrap{padding:0 var(--pad)}
.lm-hero h1{margin:0 0 14px;font-size:clamp(36px,4.6vw,60px);line-height:1.1;color:var(--brown)}
.lm-hero-lead{max-width:860px;margin:0;color:var(--muted)}
/* ============================ SELECTED PROJECTS（Gallery 12+ cards） ============================ */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-6)}
.item{background:rgba(218,204,193,.30);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s var(--ease),box-shadow .28s var(--ease),border-color .18s var(--ease)}
.item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(197,163,135,.55)}
.media-link{display:block}
.thumb{aspect-ratio:4/3;background:linear-gradient(135deg,rgba(129,142,115,.85),rgba(218,204,193,.95));display:flex;align-items:flex-end;justify-content:flex-end;padding:10px;color:rgba(218,204,193,.98);font-size:12px;font-weight:700;text-shadow:0 1px 2px rgba(63,81,96,.35)}
.item .body{padding:18px}
.title{font-weight:800;color:var(--slate)}
.meta{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:13px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--gap-4)}
/* ============================ SERVICES（兩段） ============================ */
.section-accent{background:linear-gradient(180deg,rgba(218,204,193,.45),rgba(218,204,193,0));border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:68px 0}
.card{background:rgba(218,204,193,.30);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .22s var(--ease),transform .16s var(--ease),border-color .18s var(--ease)}
.card .body{padding:22px}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:rgba(112,65,47,.45)}
/* ============================ SHOP / PRODUCTS（首頁導流） ============================ */
.resources{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-6)}
.resource{background:rgba(218,204,193,.30);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);transition:box-shadow .22s,transform .16s,border-color .18s}
.resource:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:rgba(112,65,47,.45)}
.resource .title{font-weight:800;color:var(--slate)}
/* ============================ LATEST UPDATES ============================ */
.updates{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap-6)}
.update{grid-column:span 6;background:rgba(218,204,193,.30);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
.update .date{font:600 12px/1 ui-sans-serif;color:var(--brown);letter-spacing:.6px}
.update h3{margin:8px 0 10px;color:var(--slate)}
/* ============================ NEWSLETTER（表單） ============================ */
input[type="email"]{appearance:none;border:1px solid var(--line);background:rgba(218,204,193,.25);color:var(--ink);padding:12px 14px;border-radius:14px;transition:border-color .2s,box-shadow .2s}
input[type="email"]::placeholder{color:rgba(63,81,96,.55)}
input[type="email"]:focus{border-color:var(--brown);box-shadow:0 0 0 3px rgba(112,65,47,.20)}
/* ============================ FOOTER（資訊完整） ============================ */
.footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted)}
.footer .grid-3{align-items:flex-start}
.footer h3{font-size:18px;color:var(--slate)}
/* ============================ 滾動進度條 ＆ 進場動畫 ============================ */
.scrollbar{position:fixed;inset:0 auto auto 0;height:3px;width:0;background:linear-gradient(90deg,var(--brown),var(--sand));z-index:90}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.show{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
/* ============================ RWD ============================ */
@media(max-width:1180px){.wrap{padding:0 20px}.container{padding-inline:20px}}
@media(max-width:980px){.section{padding:64px 0}.gallery,.resources{grid-template-columns:repeat(2,1fr)}.updates .update{grid-column:1/-1}}
@media(max-width:640px){.container{padding-inline:16px}.section{padding:52px 0}.btn{padding:9px 14px}.gallery,.resources{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}.wrap{padding:0 16px}}
/* ============================ PRINT ============================ */
@media print{.lm-header,.mobile-mask,.mobile-drawer,.scrollbar{display:none !important}.section,.section-accent{padding:0}.btn{border:1px solid rgba(63,81,96,.55);box-shadow:none}.card{box-shadow:none}}