/* Andy 工作室作品集 — 色票沿用剪輯網站 lux 層 */
:root{
  --paper:#F4EEE2;--paper-2:#ECE3D1;--card:#FCF8EF;--ink:#1E1810;--muted:#4A4136;--rule:#DCCDB0;
  --red:#9B2A27;--red-soft:#F4E2D6;--gold-ink:#6E5212;--emerald:#0F4D38;--go:#077F3B;
  --gold-line:linear-gradient(90deg,transparent,#B8923A 20%,#E6CB7E 50%,#B8923A 80%,transparent);
  --serif:"Noto Serif TC",serif;--sans:"Noto Sans TC",system-ui,sans-serif;
  --shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 28px -14px rgba(60,40,10,.35),0 2px 6px -2px rgba(60,40,10,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);font-size:18px;line-height:1.75;color:var(--ink);background:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}

/* 頁首 */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;background:rgba(245,241,234,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:900;font-size:19px;line-height:1.1}
.brand small{display:block;font-family:var(--sans);font-weight:500;font-size:13px;color:var(--muted);letter-spacing:.1em}
.seal{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:var(--red);color:#fff;font-size:19px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.btn-go{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 24px;border-radius:12px;
  background:var(--go);color:#fff;font-weight:700;font-size:18px;box-shadow:0 8px 20px -8px rgba(7,127,59,.6),inset 0 -2px 0 rgba(0,0,0,.18)}
.btn-go:active{transform:translateY(1px)}
.btn-go.sm{min-height:42px;padding:0 16px;font-size:16px;border-radius:10px;white-space:nowrap}

/* 主視覺 */
.hero{padding:44px 0 26px}
.hero.sm{padding:30px 0 18px}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--red)}
.hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(36px,9.6vw,62px);line-height:1.22;margin:8px 0 14px;letter-spacing:.01em}
.hero.sm h1{font-size:clamp(32px,8.4vw,52px)}
.lead{font-size:19px;color:var(--muted);max-width:40em}
.gold-line{height:2px;background:var(--gold-line);margin-top:24px;max-width:420px}

/* 分類列 */
.chips{position:sticky;top:61px;z-index:20;background:rgba(244,238,226,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.chipin{display:flex;gap:8px;overflow-x:auto;padding:10px 16px;max-width:1200px;margin:0 auto;scrollbar-width:none}
.chipin::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:99px;background:var(--card);
  border:1px solid var(--rule);font-size:16px;font-weight:500;white-space:nowrap}
.chip i{font-style:normal;font-size:13px;color:var(--gold-ink);font-weight:700}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}.chip.on i{color:#E6CB7E}

/* 分類區 */
.cat{padding:34px 0 10px;scroll-margin-top:120px}
.cathead{margin-bottom:18px;border-left:4px solid var(--red);padding-left:14px}
.cathead h2{font-family:var(--serif);font-weight:900;font-size:clamp(26px,6.4vw,36px);line-height:1.3}
.cathead p{color:var(--muted);font-size:17px}
.more{display:inline-block;margin:16px 0 8px;font-weight:700;color:var(--red);border-bottom:2px solid var(--red-soft)}

/* 卡片 */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;width:100%}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 36px -18px rgba(60,40,10,.45)}
.phone{margin:12px 12px 0;border-radius:18px;overflow:hidden;border:5px solid #1E1810;background:#1E1810;aspect-ratio:9/15;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.poster{position:relative;margin:12px 12px 0;border-radius:12px;overflow:hidden;background:#1E1810;aspect-ratio:16/10}
.vert .poster{aspect-ratio:9/15}
.poster.tall{aspect-ratio:4/5}
.poster img{width:100%;height:100%;object-fit:cover;object-position:top}
.play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(155,42,39,.92);
  box-shadow:0 6px 18px rgba(0,0,0,.4)}
.play::after{content:"";position:absolute;left:23px;top:18px;border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.72);color:#fff;font-size:13px;padding:1px 7px;border-radius:6px}
.cbody{padding:12px 14px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.cbody h3{font-family:var(--serif);font-weight:900;font-size:18px;line-height:1.4}
.cbody p{font-size:16px;line-height:1.6;color:var(--muted)}
.who{font-size:15px!important;color:var(--ink)!important}
.who b{display:inline-block;margin-right:6px;padding:0 6px;border-radius:4px;background:var(--red-soft);color:var(--red);font-size:13px}
.go{margin-top:auto;padding-top:8px;font-weight:700;color:var(--emerald);font-size:16px}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.tile{border-radius:10px;overflow:hidden;border:1px solid var(--rule);box-shadow:var(--shadow);aspect-ratio:4/5;background:#1E1810}
.tile img{width:100%;height:100%;object-fit:cover;object-position:top}

@media (max-width:420px){
  .cbody{padding:10px 11px 14px}
  .cbody h3{font-size:17px}
  .cbody p{font-size:16px}
  .phone{margin:9px 9px 0;border-width:4px;border-radius:14px}
  .poster{margin:9px 9px 0}
  .grid{gap:10px}
  .wrap{padding:0 14px}
}
@media (min-width:760px){
  .grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .hero{padding:72px 0 36px}
}
@media (min-width:1100px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .tiles{grid-template-columns:repeat(6,1fr)}
}

/* 收尾 CTA */
.cta{margin-top:40px;padding:48px 0;background:var(--ink);color:#F4EEE2;text-align:center}
.cta h2{font-family:var(--serif);font-weight:900;font-size:clamp(28px,7vw,40px)}
.cta p{max-width:34em;margin:10px auto 22px;color:#E7DCC6}
.cta b{color:#E6CB7E}
.foot{padding:22px 0 40px;text-align:center;font-size:15px;color:var(--muted)}

/* 彈窗 */
.modal{position:fixed;inset:0;z-index:50;background:rgba(15,11,6,.88);display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.mbox{position:relative;width:100%;max-width:960px;max-height:100%;display:flex;flex-direction:column;align-items:center}
.mbody{width:100%;display:flex;justify-content:center}
.mbody video,.mbody img{max-width:100%;max-height:82vh;border-radius:10px;background:#000}
.mt{color:#F4EEE2;margin-top:10px;font-family:var(--serif);font-weight:700;text-align:center}
.mx{position:absolute;top:-6px;right:-4px;z-index:2;width:44px;height:44px;border-radius:50%;background:#F4EEE2;color:var(--ink);
  font-size:28px;line-height:44px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.reviews{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0 0 22px}
.rv{background:#FCF8EF;border:1px solid #DCCDB0;border-radius:14px;padding:14px 16px;box-shadow:0 8px 20px -14px rgba(60,40,10,.4)}
.rv .stars{color:#B8862B;letter-spacing:2px}.rv b{font-size:18px}.rq{font:900 20px/1.5 "Noto Serif TC",serif;margin:6px 0 4px}.rn{color:#4A4136;font-size:15px;margin:4px 0 0}