/* Self-hosted font subsets — variable fonts (built by tools/subset-fonts.py; re-run when site text changes) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/cormorant-var.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 700;font-display:swap;src:url('/fonts/cormorant-var-i.woff2') format('woff2');}
@font-face{font-family:'Noto Serif TC';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/notoseriftc-var.woff2') format('woff2');}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:500 800;font-display:swap;src:url('/fonts/baloo2-var.woff2') format('woff2');}

/* Rabbit Hole Entertainment — 共用樣式（深色戲劇 art-deco）*/
:root{--ink:#14110e;--char:#1f1b16;--gold:#c9a25f;--goldL:#e6cf99;--cream:#f5efe3;--mut:#a89b84;--red:#9d2933;--line:rgba(201,162,95,.28);
  --disp:"Cormorant Garamond","Noto Serif TC",serif;--cjk:"Noto Serif TC",serif;--sans:"PingFang HK","Noto Sans TC",-apple-system,sans-serif;}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3,h4,.cjk{font-family:var(--cjk);font-weight:500;}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px;}
.gold{color:var(--gold);}
@keyframes up{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
.rev{opacity:0;animation:up .9s cubic-bezier(.2,.7,.2,1) forwards;}
.d1{animation-delay:.1s;}.d2{animation-delay:.25s;}.d3{animation-delay:.4s;}
/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px 26px;background:linear-gradient(to bottom,rgba(20,17,14,.94),rgba(20,17,14,.25));transition:.3s;}
nav.solid{background:rgba(20,17,14,.97);border-bottom:1px solid var(--line);box-shadow:0 2px 20px rgba(0,0,0,.3);}
nav .logo{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-size:19px;letter-spacing:2px;color:var(--cream);}
nav .logo img{height:34px;width:auto;filter:brightness(0) invert(1);}
nav .logo b{color:var(--gold);font-weight:600;}
nav .links{display:flex;gap:26px;font-size:14px;letter-spacing:1px;}
nav .links a{color:#d8cdb8;position:relative;padding:3px 0;}
nav .links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);transition:.3s;}
nav .links a:hover,nav .links a.on{color:var(--goldL);}nav .links a:hover::after,nav .links a.on::after{width:100%;}
nav .cta{border:1px solid var(--gold);color:var(--gold)!important;padding:8px 18px;border-radius:2px;font-size:13px;letter-spacing:2px;}
nav .cta:hover{background:var(--gold);color:var(--ink)!important;}
.navtoggle{display:none;background:none;border:0;cursor:pointer;width:30px;height:22px;position:relative;z-index:60;padding:0;}
.navtoggle span{position:absolute;left:0;width:100%;height:2px;background:var(--cream);transition:.3s;}
.navtoggle span:nth-child(1){top:0;}.navtoggle span:nth-child(2){top:10px;}.navtoggle span:nth-child(3){top:20px;}
nav.open .navtoggle span:nth-child(1){top:10px;transform:rotate(45deg);}
nav.open .navtoggle span:nth-child(2){opacity:0;}
nav.open .navtoggle span:nth-child(3){top:10px;transform:rotate(-45deg);}
@media(max-width:880px){
  .navtoggle{display:block;}
  nav .links{position:fixed;top:0;right:0;height:100vh;width:min(80vw,300px);background:rgba(18,15,12,.99);
    flex-direction:column;justify-content:center;align-items:center;gap:28px;font-size:19px;letter-spacing:2px;
    transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);border-left:1px solid var(--line);box-shadow:-20px 0 60px rgba(0,0,0,.5);}
  nav.open .links{transform:translateX(0);}
  nav .links a{color:var(--cream);}
  nav .cta{display:none;}
}
/* site footer */
.sitefoot{background:#0e0c0a;border-top:1px solid var(--line);padding:54px 0 0;}
.sitefoot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px;}
.sitefoot .flogo{height:150px;width:auto;filter:brightness(0) invert(1);opacity:.92;margin-bottom:6px;}
.sitefoot .desc{font-size:13px;color:var(--mut);line-height:1.9;margin-top:8px;}
.sitefoot h4{font-size:12px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-bottom:14px;font-family:var(--disp);}
.sitefoot a{display:block;font-size:14px;color:#bcb09a;padding:5px 0;transition:.2s;}
.sitefoot a:hover{color:var(--goldL);padding-left:4px;}
.sitefoot .bot{text-align:center;color:#6f6451;font-size:12px;padding:22px;border-top:1px solid var(--line);margin-top:40px;letter-spacing:1px;}
@media(max-width:680px){.sitefoot .cols{grid-template-columns:1fr;gap:24px;}.sitefoot .flogo{height:124px;}}
/* page hero (photo + dark overlay + light text) */
.phero{position:relative;min-height:58vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:130px 22px 74px;
  background-size:cover;background-position:center;color:var(--cream);}
.phero::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,17,14,.6),rgba(20,17,14,.84));}
.phero .frame{position:absolute;inset:22px;border:1px solid var(--line);pointer-events:none;}
.phero .frame::before,.phero .frame::after{content:"";position:absolute;width:30px;height:30px;border:2px solid var(--gold);}
.phero .frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.phero .frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.phero .inner{position:relative;max-width:820px;}
.phero .kick{font-family:var(--disp);letter-spacing:.5em;font-size:13px;color:var(--gold);text-transform:uppercase;}
.phero h1{font-size:clamp(34px,6vw,58px);letter-spacing:6px;line-height:1.2;margin:16px 0 10px;text-shadow:0 2px 24px rgba(0,0,0,.4);}
.phero p{color:#e3dac8;font-size:16px;max-width:600px;margin:0 auto 26px;line-height:1.9;}
.btn{display:inline-block;background:var(--gold);color:var(--ink);padding:13px 32px;border-radius:2px;font-size:15px;letter-spacing:2px;transition:.25s;border:1px solid var(--gold);}
.btn:hover{background:var(--goldL);border-color:var(--goldL);transform:translateY(-2px);}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid #6a5f4c;}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold);}
/* stats strip */
.strip{background:var(--char);border-bottom:1px solid var(--line);}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.strip .i{text-align:center;padding:26px 8px;border-right:1px solid var(--line);}
.strip .i:last-child{border:none;}
.strip .n{font-family:var(--disp);font-size:30px;color:var(--gold);}
.strip .l{font-size:12px;color:var(--mut);letter-spacing:1px;}
@media(max-width:560px){.strip .wrap{grid-template-columns:repeat(2,1fr);}.strip .i:nth-child(2){border-right:none;}}
/* sections */
section{padding:84px 0;}
.alt{background:var(--char);}
.eyebrow{font-family:var(--disp);letter-spacing:.5em;font-size:13px;color:var(--gold);text-transform:uppercase;text-align:center;}
.stitle{font-size:clamp(28px,5vw,40px);letter-spacing:4px;text-align:center;margin:10px 0 0;}
.rule{width:60px;height:1px;background:var(--gold);margin:16px auto 0;position:relative;}
.rule::before,.rule::after{content:"";position:absolute;top:-2px;width:5px;height:5px;background:var(--gold);transform:rotate(45deg);}
.rule::before{left:-9px;}.rule::after{right:-9px;}
.lead{max-width:740px;margin:22px auto 0;text-align:center;font-size:16px;color:#d8cdb8;line-height:1.9;}
/* item cards */
.items{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:50px;}
.item{background:var(--char);border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:3px;padding:22px 24px;transition:.25s;}
.item:hover{transform:translateY(-4px);border-top-color:var(--red);}
.item h3{font-size:19px;letter-spacing:1px;margin-bottom:6px;}
.item h3 small{font-family:var(--disp);font-weight:400;color:var(--gold);font-size:13px;letter-spacing:2px;margin-left:4px;}
.item p{font-size:14px;color:#bcb09a;line-height:1.8;}
/* image service cards */
.scards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:50px;}
.scard{position:relative;height:320px;border-radius:3px;overflow:hidden;display:flex;align-items:flex-end;border:1px solid var(--line);}
.scard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.6s;filter:brightness(.6);}
.scard:hover img{transform:scale(1.06);filter:brightness(.72);}
.scard .ov{position:relative;width:100%;padding:26px;background:linear-gradient(to top,rgba(20,17,14,.92),transparent);}
.scard h3{font-size:23px;letter-spacing:2px;margin-bottom:6px;}
.scard p{font-size:14px;color:#d8cdb8;}
/* prose */
.prose{max-width:780px;margin:0 auto;}
.prose p{font-size:16px;color:#ddd2bd;margin-bottom:16px;line-height:2;}
.prose h2{font-size:26px;letter-spacing:2px;margin:26px 0 12px;}
.prose .q{font-family:var(--disp);font-style:italic;color:var(--goldL);font-size:21px;border-left:2px solid var(--gold);padding-left:16px;margin:22px 0;}
.prose ul{list-style:none;margin:16px 0;}
.prose ul li{padding:9px 0 9px 24px;position:relative;font-size:15.5px;color:#ddd2bd;border-bottom:1px solid var(--line);}
.prose ul li::before{content:"◆";color:var(--gold);position:absolute;left:2px;font-size:11px;top:13px;}
/* why */
.why .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin-top:50px;}
.why .b{border-left:2px solid var(--gold);padding-left:16px;}
.why .b h3{font-size:18px;color:var(--goldL);margin-bottom:6px;letter-spacing:1px;}
.why .b p{font-size:14px;color:#bcb09a;line-height:1.8;}
/* faq */
.faq{max-width:820px;margin:50px auto 0;}
.faq details{background:var(--char);border:1px solid var(--line);border-radius:4px;padding:16px 20px;margin-bottom:10px;}
.faq summary{font-family:var(--cjk);font-size:17px;cursor:pointer;letter-spacing:1px;color:var(--cream);}
.faq summary::marker{color:var(--gold);}
.faq p{font-size:14.5px;color:#bcb09a;margin-top:10px;line-height:1.8;}
/* foot cta (photo + dark overlay) */
.foot{position:relative;text-align:center;background-size:cover;background-position:center;padding:90px 22px;color:var(--cream);}
.foot::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,17,14,.78),rgba(20,17,14,.92));}
.foot>*{position:relative;}
.foot h2{font-size:clamp(28px,5vw,42px);letter-spacing:4px;margin:10px 0 14px;}
.foot p{color:#ddd2bd;margin-bottom:24px;}
.foot .info{font-size:14px;color:var(--mut);margin-top:24px;letter-spacing:1px;}
.foot .info a{color:var(--gold);}
footer.copy{background:#0e0c0a;color:#6f6451;text-align:center;font-size:12px;padding:22px;letter-spacing:1px;}
/* 手機標題：收窄字距 + 收細，避免單字跳行 */
@media(max-width:600px){
  .phero h1{font-size:clamp(28px,8.4vw,34px);letter-spacing:1.5px;}
  .phero .kick{letter-spacing:.3em;}
  .stitle{letter-spacing:2px;}
  .foot h2{letter-spacing:2px;}
  .strip .n{font-size:26px;}
}

#lb{display:none;position:fixed;inset:0;background:rgba(8,6,5,.94);z-index:200;align-items:center;justify-content:center;cursor:zoom-out;padding:24px;}
#lb.on{display:flex;}
#lb img{max-width:94%;max-height:92vh;border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.6);}
#lb .x{position:absolute;top:22px;right:28px;color:#e3dac8;font-size:32px;font-family:var(--disp);}
/* vertical video (Reels/Shorts 9:16) */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;max-width:860px;margin-left:auto;margin-right:auto;}
.vids figure{margin:0;}
.vids .v{aspect-ratio:9/16;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#000;}
.vids .v iframe{width:100%;height:100%;border:0;display:block;}
.vids figcaption{margin-top:10px;font-size:13px;color:#bcb09a;text-align:center;line-height:1.5;}
@media(max-width:760px){.vids{grid-template-columns:1fr 1fr;gap:14px;}}
@media(max-width:460px){.vids{grid-template-columns:1fr;max-width:320px;}}
/* instagram grid */
.ig .iggrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:46px;}
.ig .iggrid a{aspect-ratio:1;overflow:hidden;border-radius:3px;border:1px solid var(--line);}
.ig .iggrid img{width:100%;height:100%;object-fit:cover;transition:.5s;}
.ig .iggrid a:hover img{transform:scale(1.08);}
.ig .handle{text-align:center;margin-top:32px;}
@media(max-width:760px){.ig .iggrid{grid-template-columns:repeat(3,1fr);}}

/* YouTube facade (click-to-load) */
.v .yt-facade{position:relative;display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:#000;cursor:pointer;overflow:hidden;}
.yt-facade img{width:100%;height:100%;object-fit:cover;display:block;}
.yt-facade .yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.15);transition:background .2s;}
.yt-facade:hover .yt-play,.yt-facade:focus-visible .yt-play{background:rgba(0,0,0,.35);}
.yt-facade:focus-visible{outline:2px solid #c9a25f;outline-offset:-2px;}