:root{--c-header:#818E73;--c-bg-1:#DACCC1;--c-bg-2:#C5A387;--c-bg-3:#70412F;--c-footer:#3F5160;--c-text:#1f2328;--c-text-inv:#fff;--radius:16px;--shadow:0 8px 24px rgba(0,0,0,.12)}
*{box-sizing:border-box}
html,body{height:100%}
html,body{overflow-x:hidden;}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--c-text);background:#fff}
.container{max-width:1080px;margin-inline:auto;padding:0 20px}
 
/* 修正：避免背景斷層 */
.section-full{width:100%;margin:0;transform:none}
.section-full .inner{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:860px}
h1{font-size:clamp(28px,4vw,40px);margin:0 0 12px}
h2{font-size:clamp(22px,3vw,28px)}
h3{font-size:clamp(18px,2.4vw,22px)}
p{line-height:1.75;margin:0 0 12px}

/* 全站背景：單一色 */
.bg-layer{background-color:#DACCC1;background-image:none;background-attachment:scroll}

/* ===== Header（修復：補上背景色，確保各頁一致） ===== */
.site-header{position:sticky;top:0;z-index:30;background:rgba(129,142,115,0.85);backdrop-filter:saturate(1.5) blur(8px);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.site-header.scrolled{background:rgba(129,142,115,0.95);}
.logo-wrap{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo-img{width:28px;height:28px;object-fit:contain;display:inline-block}
.logo-text{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.3px}
.nav-toggle{margin-left:auto;display:none;border:0;background:transparent;color:#fff;font-size:24px;cursor:pointer}
.site-nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.site-nav a{display:inline-block;padding:10px 12px;border-radius:10px;color:#fff;text-decoration:none;opacity:.95;transition:.2s}
.site-nav a:hover{opacity:1;background:rgba(255,255,255,.14)}
.site-nav a.is-active{background:#fff;color:var(--c-header);font-weight:700}
.site-header+*{margin-top:0!important;padding-top:0!important}

/* ===== Hero 共用 ===== */
.hero{padding:0;margin:0}
.hero.media-center{position:relative;background:none}
.hero.media-center .hero-media{position:relative;isolation:isolate}
.hero.media-center img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#fff}
.hero.media-center .hero-overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px}
.hero.media-center .hero-overlay .hero-title{max-width:820px;margin:0 auto;background:rgba(255,255,255,.8);color:#1f2328;padding:18px 22px;border-radius:14px;backdrop-filter:saturate(1.1) blur(4px);font-size:clamp(22px,3.2vw,30px);line-height:1.5}

/* === 三張互動圖片 === */
.trio-wrap{margin:0;padding:0;overflow:hidden;background:linear-gradient(180deg,#FFF5EE 0%,rgba(255,245,238,.86) 100%)}
.trio-surface{background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.06);box-shadow:0 18px 40px rgba(0,0,0,.12);border-radius:28px;backdrop-filter:saturate(1.2) blur(8px);padding:18px;margin:24px 0 88px}
.trio{--ratio:2/3;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.trio .tile{position:relative;overflow:hidden;border-radius:20px;transform:translateZ(0);transition:transform .28s ease,filter .28s ease,box-shadow .28s ease,outline-color .28s ease;box-shadow:0 10px 26px rgba(0,0,0,.14);outline:2px solid transparent;text-decoration:none;color:inherit;cursor:pointer;display:block}
.trio .tile .media{width:100%;aspect-ratio:var(--ratio);margin:0}
.trio .tile img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center;transition:transform .28s ease;backface-visibility:hidden}
.trio:hover .tile{transform:scale(.96);filter:saturate(.9) brightness(.95) contrast(.98)}
.trio .tile:hover{transform:scale(1.06);z-index:2;filter:none;box-shadow:0 18px 40px rgba(0,0,0,.22);outline-color:color-mix(in srgb,var(--c-header) 55%,transparent)}
.trio .tile:hover img{transform:scale(1.05)}
.tile .cap{position:absolute;left:0;bottom:12px;max-width:min(72%,560px);color:#111;font-weight:800;line-height:1.35;padding:14px 18px 14px 16px;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}
.trio .tile:hover .cap{opacity:1;transform:translateY(0)}
.tile .cap::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.92) 25%,rgba(255,255,255,.65) 60%,rgba(255,255,255,.25) 85%,rgba(255,255,255,0) 100%);border-radius:0 14px 14px 0;clip-path:polygon(0 0,86% 0,94% 50%,86% 100%,0 100%);filter:blur(.8px);box-shadow:0 10px 28px rgba(0,0,0,.25);z-index:-1}
.tile .cap small{display:block;font-weight:700;opacity:.85}

/* === 12 張圖 === */
.section-heading{margin:0 0 14px;padding-top:0;text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:#3b3b3b;display:inline-block;position:relative}
.section-heading span{position:relative;z-index:1}
.section-heading::after{content:"";display:block;height:6px;width:110px;margin-top:8px;background:linear-gradient(90deg,var(--c-header) 0%,color-mix(in srgb,var(--c-header) 60%,#fff) 100%);border-radius:999px}
.gallery-band{background:transparent;padding:0;margin:0}
.gallery-band .inner{padding:12px 20px 0}
.gallery{column-count:3;column-gap:8px}
.card-vert{display:inline-block;width:100%;margin:0 0 8px;break-inside:avoid}
.card-vert figure{margin:0}
.card-vert img{display:block;width:100%;height:auto;object-fit:cover;background:transparent;border-radius:6px}
.card-vert video{display:block;width:100%;height:auto;object-fit:cover;background:#000;border-radius:6px}
.card-vert figcaption{text-align:center;font-weight:700;padding:6px 4px;background:transparent}
.card-vert a{display:block;text-decoration:none;color:inherit}

/* 重點介紹 */
.party-section{padding:80px 0 100px;text-align:center;position:relative;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(250,247,243,.9))}
.party{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;max-width:880px;margin:0 auto}
.oct-wrap{position:relative;display:inline-block;isolation:isolate}
.oct{width:min(520px,80vw);aspect-ratio:1/1;object-fit:cover;display:block;clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%);box-shadow:0 12px 32px rgba(0,0,0,.15);background:#eee;margin-bottom:20px}
.party h3{font-size:clamp(22px,2.6vw,28px);font-weight:800;margin-bottom:12px;color:#3b3b3b}
.party p{font-size:16px;line-height:1.9;color:#333;max-width:620px;margin:0 auto 24px;text-align:justify;background:rgba(255,255,255,.7);padding:12px 18px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.pill-btn{display:inline-block;min-width:180px;padding:12px 28px;border-radius:999px;background:#fff;color:#3f3f3f;text-decoration:none;font-weight:700;letter-spacing:.4px;border:1px solid rgba(0,0,0,.15);box-shadow:0 6px 18px rgba(0,0,0,.08);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background .18s ease}
.pill-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.15);background:#fafafa}
.pill-btn:active{transform:translateY(0) scale(.98);filter:saturate(.96)}

/* ===== Footer ===== */
.site-footer{margin-top:0;background:var(--c-footer);color:#fff}
.site-footer .container{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;padding:18px 20px}
.footer-nav a{color:#fff;text-decoration:none;opacity:.9;margin-right:12px}
.footer-nav a:hover{opacity:1;text-decoration:underline}
.social-icons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.icon-btn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:50%;text-decoration:none;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
.icon-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.35)}
.icon-btn svg{width:20px;height:20px;display:block}

/* =========================
   assets/portfolio.css｜scope: .portfolio-page
   ========================= */
:root{--port-accent:#C57C2A}
.portfolio-page .pf-hero{margin:0;padding:42px 0 28px;background:transparent}
.portfolio-page .pf-hero .inner{max-width:1080px;margin:0 auto;padding:0 20px;display:grid;place-items:center;text-align:center}
.portfolio-page .pf-hero h1{font-size:clamp(34px,6vw,64px);letter-spacing:.06em;font-weight:800;color:#2a2a2a;margin:0}
.portfolio-page .cat-bar{padding:14px 0 10px}
.portfolio-page .cat-nav{display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:center;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.portfolio-page .cat-nav a{position:relative;color:var(--port-accent);text-decoration:none;padding:2px 0}
.portfolio-page .cat-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:currentColor;opacity:.6;transform:scaleX(1);transform-origin:left;transition:opacity .18s ease,transform .18s ease}
.portfolio-page .cat-nav a:hover::after{opacity:1;transform:scaleX(1.04)}
.portfolio-page .cat-nav .sep{color:#000;opacity:.6;font-weight:900}
.portfolio-page .cat-nav .is-active{color:color-mix(in srgb,var(--port-accent) 86%,#000 14%)}
.portfolio-page .gallery-band{padding:6px 0 40px}
.portfolio-page .gallery-band .inner{max-width:1080px;margin:0 auto;padding:0 20px}
.portfolio-page .gallery{column-count:3;column-gap:10px}
.portfolio-page .card-vert{margin:0 0 10px}
.portfolio-page .card-vert figcaption{font-size:14px;opacity:.9}
.portfolio-page .tight-top{margin-top:0;padding-top:0;overflow:hidden}
@media(max-width:980px){.portfolio-page .gallery{column-count:2}}
@media(max-width:640px){
  .portfolio-page .pf-hero{padding:28px 0 18px}
  .portfolio-page .cat-nav{gap:18px}
  .portfolio-page .gallery{column-count:1}
}

/* ===== About page styles ===== */
.about-page .about-hero{margin:0;padding:28px 0 18px;background:transparent}
.about-page .about-hero .inner{max-width:1080px;margin:0 auto;padding:0 20px;display:grid;place-items:center}
.ticket-photo{width:min(720px,90vw);aspect-ratio:1/1;margin:0;display:block;overflow:hidden;background:#eee;box-shadow:0 16px 40px rgba(0,0,0,.14)}
.ticket-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ticket-photo{--cut:46px;-webkit-mask:radial-gradient(var(--cut) at 0 0,#0000 98%,#000 101%) top left,radial-gradient(var(--cut) at 100% 0,#0000 98%,#000 101%) top right,radial-gradient(var(--cut) at 100% 100%,#0000 98%,#000 101%) bottom right,radial-gradient(var(--cut) at 0 100%,#0000 98%,#000 101%) bottom left;-webkit-mask-size:51% 51%;-webkit-mask-repeat:no-repeat;mask:radial-gradient(var(--cut) at 0 0,#0000 98%,#000 101%) top left,radial-gradient(var(--cut) at 100% 0,#0000 98%,#000 101%) top right,radial-gradient(var(--cut) at 100% 100%,#0000 98%,#000 101%) bottom right,radial-gradient(var(--cut) at 0 100%,#0000 98%,#000 101%) bottom left;mask-size:51% 51%;mask-repeat:no-repeat}
.about-page .about-intros{padding:10px 0 60px}
.about-page .about-intros .inner{max-width:860px;margin:0 auto;padding:0 20px}
.about-page .about-block{display:grid;gap:10px;text-align:center;margin:0 0 24px}
.about-page .about-block h2{margin:0;font-size:clamp(22px,3.2vw,28px);font-weight:900;letter-spacing:.02em}
.about-page .about-block p{margin:0;line-height:1.8;opacity:.92}
.about-page .about-extra{padding:56px 0 80px}
.about-page .about-extra .inner{max-width:880px;margin:0 auto;padding:0 20px;display:grid;gap:56px}
.about-page .about-subblock{}
.about-page .about-heading{font-size:clamp(22px,2.6vw,28px);font-weight:800;margin:0 0 14px;letter-spacing:.04em;color:color-mix(in srgb,var(--c-header) 85%, #000 10%)}
.about-page .about-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.about-page .about-list li{background:rgba(255,245,238,.75);border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:12px 16px;box-shadow:0 6px 16px rgba(0,0,0,.06);font-size:15px;line-height:1.7}
.about-page .about-list b{font-weight:700;color:#2e2e2e}
.about-page .about-year{display:inline-block;margin-left:8px;font-weight:600;color:rgba(63,81,96,.9);font-size:13.5px}
@media(max-width:640px){.about-page .about-extra .inner{gap:40px}.about-page .about-heading{font-size:21px}}

/* ===== Merch final (with click-anywhere Lightbox) ===== */
.merch-page .merch-hero{margin:0;padding:0;background:none}
.merch-page .merch-hero.media-center{position:relative}
.merch-page .merch-hero .hero-media{position:relative;isolation:isolate}
/* 修復：避免 100vw 造成右側空白，改為 100% */
.merch-page .merch-hero .hero-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#fff}
.merch-page .merch-hero .hero-overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px}
.merch-page .merch-hero .hero-inner{max-width:980px;margin:0 auto;padding:0 20px}
.merch-page .merch-title{margin:0 0 10px;font-size:clamp(34px,6vw,64px);letter-spacing:.06em;font-weight:800;color:#1f2328}
.merch-page .merch-sub{margin:0 auto;max-width:760px;opacity:.9;background:rgba(255,255,255,.82);padding:12px 16px;border-radius:14px;backdrop-filter:saturate(1.1) blur(4px)}
.merch-page .merch-cta{display:flex;gap:12px;justify-content:center;margin-top:12px}
.merch-page .icon-cart{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;text-decoration:none;color:#fff;background:linear-gradient(135deg,#8EA382,#6E7C60);box-shadow:0 10px 20px rgba(0,0,0,.18),inset 0 0 12px rgba(255,255,255,.25);transition:transform .18s ease}
.merch-page .icon-cart svg{width:28px;height:28px}
.merch-page .icon-cart:hover{transform:translateY(-1px)}
.merch-page .btn-cute{display:inline-block;min-width:180px;padding:12px 20px;border-radius:999px;font-weight:900;letter-spacing:.02em;text-decoration:none;color:#fff;box-shadow:0 10px 20px rgba(0,0,0,.15),inset 0 0 12px rgba(255,255,255,.3);transition:transform .18s ease,box-shadow .18s ease}
.merch-page .btn-cute:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(0,0,0,.2),inset 0 0 16px rgba(255,255,255,.38)}
.merch-page .btn-cute.line{background:linear-gradient(135deg,#00c300,#2ecc71)}
.merch-page .btn-cute.ship{background:linear-gradient(135deg,#ff8a00,#ffb84d)}
.merch-page .merch-list{padding:16px 0 46px}
.merch-page .merch-list .inner{max-width:1080px;margin:0 auto;padding:0 20px}
.merch-page .merch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.merch-page .merch-card{background:rgba(255,255,255,.78);border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.08);padding:12px;display:grid;gap:8px;align-content:start;overflow:hidden}
.merch-page .merch-card .zoom{display:block;border-radius:10px;overflow:hidden}
.merch-page .merch-card img{width:100%;height:auto;object-fit:cover;display:block;transition:transform .25s ease}
.merch-page .merch-card .zoom:hover img{transform:scale(1.04)}
.merch-page .merch-card .name{margin:2px 0 0;font-size:16px}
.merch-page .merch-card .desc{margin:0;opacity:.85}
.merch-page .cute-cta{display:flex;gap:12px;justify-content:center;margin:18px 0 2px}


@media(max-width:980px){.merch-page .merch-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .merch-page .merch-hero .hero-media img{aspect-ratio:4/3}
  .merch-page .merch-cta{flex-direction:column}
  .merch-page .cute-cta{flex-direction:column}
  .merch-page .merch-grid{grid-template-columns:1fr}
}

/* ===== Contact page styles ===== */
.contact-page .contact-hero{padding:38px 0 20px;background:transparent}
.contact-page .contact-hero h1{margin:0 0 6px;font-size:clamp(32px,5.8vw,56px);font-weight:900;letter-spacing:.04em;text-align:center}
.contact-page .contact-hero .hero-sub{text-align:center;opacity:.9}

.contact-page .contact-main{padding:0 0 60px;background:transparent}
.contact-page .contact-main .inner{max-width:1080px;margin:0 auto;padding:0 20px}
.contact-layout{display:grid;grid-template-columns:1.4fr .9fr;gap:20px}

/* 卡片化 */
.contact-form,.contact-aside{background:rgba(255,255,255,.88);border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.08);padding:16px}

/* 表單欄位 */
.contact-form .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-form .field{display:grid;gap:6px}
.contact-form label{font-weight:800;letter-spacing:.02em}

/* 黑字白底（含 placeholder & option） */
.contact-form input,.contact-form select,.contact-form textarea{color:#111;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:12px 12px;font:inherit;outline:none;transition:border-color .15s ease, box-shadow .15s ease}
.contact-form textarea{resize:vertical}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#6b7280}
.contact-form select option{color:#111;background:#fff}
.contact-form select:invalid{color:#6b7280}

/* 聚焦 */
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:color-mix(in srgb,var(--c-header) 70%, #000 5%);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-header) 26%, transparent)}

/* 其他 */
.contact-form .hp{position:absolute !important;left:-9999px !important;top:-9999px !important;height:0 !important;width:0 !important;opacity:0 !important}
.contact-form .agree{margin:6px 0 2px}
.contact-form .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.contact-form .btn-primary{display:inline-block;padding:12px 20px;border-radius:999px;background:linear-gradient(135deg,#8EA382,#6E7C60);color:#fff;font-weight:900;letter-spacing:.02em;border:0;cursor:pointer;box-shadow:0 10px 20px rgba(0,0,0,.15), inset 0 0 12px rgba(255,255,255,.3);transition:transform .18s ease, box-shadow .18s ease}
.contact-form .btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(0,0,0,.2), inset 0 0 16px rgba(255,255,255,.38)}
.contact-form .btn-secondary{display:inline-block;padding:12px 18px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.12);color:#333;font-weight:800;text-decoration:none}
.contact-form .form-note{margin:8px 0 0;font-weight:700}

.contact-aside h3{margin:0 0 10px;font-size:clamp(18px,2.6vw,22px);font-weight:900}
.contact-ways{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.contact-ways li{background:rgba(255,245,238,.72);border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:10px 12px}
.contact-aside b{font-weight:900}
.contact-aside a{text-decoration:none}
.contact-aside a:hover{text-decoration:underline}
.contact-aside .small{opacity:.85;margin-top:4px}
/* PATCH — Contact: 統一欄位高度 + 隱藏提示小字 */
.contact-form input,.contact-form select,.contact-form textarea{min-height:48px;line-height:1.2}
.contact-form select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23666' d='M5.6 7.4a1 1 0 0 1 1.4 0L10 10.4l3-3a1 1 0 1 1 1.4 1.4l-3.7 3.7a1 1 0 0 1-1.4 0L5.6 8.8a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.contact-form .field small,.contact-form .field .hint,.contact-form .field .help{display:none!important}

/* RWD */
@media(max-width:980px){
  .contact-layout{grid-template-columns:1fr}
  .contact-form .grid{grid-template-columns:1fr}
}

/* 超小螢幕保護（≤360px）：字距縮放、間距再收斂 */
@media (max-width:360px){
  .hero.media-center .hero-title{font-size:16px}
  .portfolio-page .pf-hero h1{font-size:24px}
  .party p{font-size:14.5px}
  .icon-btn{width:42px;height:42px}
}
/* APPEND END — Mobile hardening */

/* REPLACE START — Personal page advanced v2 */
/* ✅ 讓 Hero 不再緊貼 header（上方留距離） */
.personal-page .personal-hero{margin-top:60px;padding:24px 0 16px;background:transparent}

/* ✅ Hero 區塊（縮小票券框比例） */
.personal-page .personal-hero .inner{max-width:1080px;margin:0 auto;padding:0 20px;display:grid;place-items:center;text-align:center}
.personal-photo{width:min(460px,78vw);aspect-ratio:1/1;margin:0 auto 18px;display:block;overflow:hidden;background:#ffa500;position:relative;box-shadow:0 12px 28px rgba(0,0,0,.12)}
.personal-photo{--cut:38px;-webkit-mask:radial-gradient(var(--cut) at 0 0,#0000 98%,#000 101%) top left,radial-gradient(var(--cut) at 100% 0,#0000 98%,#000 101%) top right,radial-gradient(var(--cut) at 100% 100%,#0000 98%,#000 101%) bottom right,radial-gradient(var(--cut) at 0 100%,#0000 98%,#000 101%) bottom left;-webkit-mask-size:51% 51%;-webkit-mask-repeat:no-repeat;mask:radial-gradient(var(--cut) at 0 0,#0000 98%,#000 101%) top left,radial-gradient(var(--cut) at 100% 0,#0000 98%,#000 101%) top right,radial-gradient(var(--cut) at 100% 100%,#0000 98%,#000 101%) bottom right,radial-gradient(var(--cut) at 0 100%,#0000 98%,#000 101%) bottom left;mask-size:51% 51%;mask-repeat:no-repeat}
.personal-photo img{width:100%;height:100%;object-fit:cover;display:block}
.personal-title{font-size:clamp(28px,4.6vw,50px);font-weight:900;margin:6px 0;color:#3b3b3b}
.personal-desc{max-width:680px;margin:0 auto 36px;line-height:1.85;font-size:16px;opacity:.9;background:rgba(255,255,255,.6);padding:10px 18px;border-radius:12px;box-shadow:0 6px 14px rgba(0,0,0,.05)}

/* ✅ Project 區塊維持原背景，但新增浮動資訊與動畫 */
.personal-projects{padding:60px 0 80px}
.personal-projects .inner{max-width:1080px;margin:0 auto;padding:0 20px}
.project-heading{text-align:center;font-size:clamp(24px,3vw,32px);font-weight:900;margin:0 0 28px;color:#3b3b3b;position:relative}
.project-heading::after{content:"";display:block;width:80px;height:6px;margin:10px auto 0;background:linear-gradient(90deg,var(--c-header,#444),#c9b5a0);border-radius:999px;opacity:.8}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* 卡片設計 */
.project-card{position:relative;overflow:hidden;border-radius:16px;background:rgba(255,255,255,.9);box-shadow:0 8px 20px rgba(0,0,0,.08);transition:transform .35s ease,box-shadow .35s ease,filter .35s ease}
.project-card img{width:100%;height:auto;display:block;transition:transform .45s ease;object-fit:cover}
.project-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.55) 100%);opacity:0;transition:opacity .4s ease}
.project-info{position:absolute;bottom:-60px;left:0;right:0;padding:20px;text-align:center;color:#fff;transition:bottom .35s ease,opacity .35s ease;opacity:0}
.project-info h3{font-size:18px;font-weight:700;margin:0 0 6px}
.project-info p{font-size:14px;opacity:.85;margin:0}

/* Hover 動畫 */
.project-card:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 14px 40px rgba(0,0,0,.16);filter:saturate(1.1)}
.project-card:hover img{transform:scale(1.08)}
.project-card:hover .project-overlay{opacity:1}
.project-card:hover .project-info{bottom:12px;opacity:1}

@media(max-width:980px){.project-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.personal-photo{width:min(380px,90vw)}.project-grid{grid-template-columns:1fr}}
/* REPLACE END — Personal page advanced v2 */

/* REPLACE START — Fatism 專用最終覆寫(放在 styles.css 最底) */
/* 1) Hero 與 personal 一致且與 header 拉開 */
.fatism-page .fatism-hero{padding:48px 0 24px;background:transparent}
.fatism-page .fatism-hero .inner{max-width:1080px;margin:0 auto;padding:0 20px;display:grid;place-items:center;text-align:center}
.fatism-page .ticket-photo{width:min(520px,78vw);aspect-ratio:1/1;margin:8px 0 0;display:block;overflow:hidden;background:#eee;box-shadow:0 16px 40px rgba(0,0,0,.14)}
.fatism-page .ticket-photo img{width:100%;height:100%;object-fit:cover;display:block}
.fatism-page .ticket-photo{--cut:42px;-webkit-mask:radial-gradient(var(--cut) at 0 0,#0000 98%,#000 101%) top left,radial-gradient(var(--cut) at 100% 0,#0000 98%,#000 101%) top right,radial-gradient(var(--cut) at 100% 100%,#0000 98%,#000 101%) bottom right,radial-gradient(var(--cut) at 0 100%,#0000 98%,#000 101%) bottom left;-webkit-mask-size:51% 51%;-webkit-mask-repeat:no-repeat;mask:radial-gradient(var(--cut) at 0 0,#0000 98%,#000 101%) top left,radial-gradient(var(--cut) at 100% 0,#0000 98%,#000 101%) top right,radial-gradient(var(--cut) at 100% 100%,#0000 98%,#000 101%) bottom right,radial-gradient(var(--cut) at 0 100%,#0000 98%,#000 101%) bottom left;mask-size:51% 51%;mask-repeat:no-repeat}
.fatism-page .fatism-title{margin:20px 0 8px;font-size:clamp(26px,4vw,34px);font-weight:900;letter-spacing:.05em}
.fatism-page .fatism-desc{max-width:680px;line-height:1.8;opacity:.9}

/* 2) 插畫/影片卡網格與 hover */
.fatism-page .project-section{padding:28px 0}
.fatism-page .project-section .inner{max-width:1080px;margin:0 auto;padding:0 20px}
.fatism-page .project-head{text-align:center;margin-bottom:18px}
.fatism-page .project-heading{font-size:clamp(22px,3.2vw,28px);font-weight:900;letter-spacing:.02em;margin:0}
.fatism-page .project-sub{margin:4px 0 0;opacity:.75}
.fatism-page .project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fatism-page .video-grid{grid-template-columns:repeat(3,1fr)}
.fatism-page .project-card{position:relative;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.8);box-shadow:0 10px 20px rgba(0,0,0,.1)}
.fatism-page .project-card img,.fatism-page .project-card video{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.fatism-page .project-card:hover img,.fatism-page .project-card:hover video{transform:scale(1.05)}
.fatism-page .project-info{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:rgba(0,0,0,.45);color:#fff;text-align:center;font-size:.9rem;opacity:0;transition:opacity .25s ease}
.fatism-page .project-card:hover .project-info{opacity:1}

/* 3) 影片 CTA 三顆按鈕：置中且與 footer 保持固定距離 */
.fatism-page .video-cta{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0}
.fatism-page .video-cta .pill-btn{display:inline-block;min-width:200px;padding:12px 22px;border-radius:999px;font-weight:900;letter-spacing:.02em;text-decoration:none;color:#fff;box-shadow:0 10px 20px rgba(0,0,0,.15),inset 0 0 12px rgba(255,255,255,.28);transition:transform .18s ease,box-shadow .18s ease}
.fatism-page .video-cta .pill-btn:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(0,0,0,.2),inset 0 0 16px rgba(255,255,255,.36)}
.fatism-page .video-cta .btn-line{background:linear-gradient(135deg,#00c300,#22cc88)}
.fatism-page .video-cta .btn-ship{background:linear-gradient(135deg,#ff8a00,#ffb84d)}
.fatism-page .video-cta .btn-merch{background:linear-gradient(135deg,var(--c-header),color-mix(in srgb,var(--c-header) 65%,#fff 25%))}

/* 4) CTA 與 footer 的距離（不會太近也不會太遠） */
.fatism-page #video .inner{padding-bottom:26px}

/* 5) Footer 滿版貼齊，移除底部多餘空白 */
.site-footer{position:relative;margin:0;background:var(--c-footer);color:#fff}
.site-footer::before{content:"";position:absolute;inset:0;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background:inherit;z-index:-1}
.site-footer .container{max-width:1080px;margin-inline:auto;padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between}
html,body{margin:0;padding:0;overflow-x:hidden}

/* 6) RWD 與 Hero 間距（手機縮小 hero、保留與 header 的距離） */
@media(max-width:1080px){.fatism-page .project-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){.fatism-page .project-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .fatism-page .fatism-hero{padding:28px 0 18px}
  .fatism-page .ticket-photo{width:min(440px,90vw);--cut:34px}
  .fatism-page .project-grid,.fatism-page .video-grid{grid-template-columns:1fr}
  .fatism-page .video-cta{gap:10px}
  .fatism-page .video-cta .pill-btn{min-width:unset;width:100%;text-align:center}
}
/* REPLACE END — Fatism 專用最終覆寫 */

/* PATCH — 讓 business 頁也吃到與 fatism 相同的 hero 規格 */
.business-page .fatism-hero{padding:60px 0 24px;background:transparent}
.business-page .fatism-hero .inner{max-width:1080px;margin:0 auto;padding:0 20px;display:grid;place-items:center;text-align:center}
.business-page .ticket-photo{width:min(520px,78vw);aspect-ratio:1/1;margin:8px 0 0;display:block;overflow:hidden;background:#eee;box-shadow:0 16px 40px rgba(0,0,0,.14)}
.business-page .ticket-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* 票券內凹角 */
.business-page .ticket-photo{--cut:42px;-webkit-mask:radial-gradient(var(--cut) at 0 0,#0000 98%,#000 101%) top left,radial-gradient(var(--cut) at 100% 0,#0000 98%,#000 101%) top right,radial-gradient(var(--cut) at 100% 100%,#0000 98%,#000 101%) bottom right,radial-gradient(var(--cut) at 0 100%,#0000 98%,#000 101%) bottom left;-webkit-mask-size:51% 51%;-webkit-mask-repeat:no-repeat;mask:radial-gradient(var(--cut) at 0 0,#0000 98%,#000 101%) top left,radial-gradient(var(--cut) at 100% 0,#0000 98%,#000 101%) top right,radial-gradient(var(--cut) at 100% 100%,#0000 98%,#000 101%) bottom right,radial-gradient(var(--cut) at 0 100%,#0000 98%,#000 101%) bottom left;mask-size:51% 51%;mask-repeat:no-repeat}
/* PATCH — Business 圖卡 hover 動效，對齊 fatism 風格 */
.business-page .gallery{column-gap:10px}
.business-page .card-vert{position:relative;overflow:hidden;border-radius:14px;background:rgba(255,255,255,.78);box-shadow:0 10px 20px rgba(0,0,0,.1);transition:transform .25s ease, box-shadow .25s ease;break-inside:avoid-column;margin:0 0 10px}
.business-page .card-vert:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.16)}

/* 圖片微放大 */
.business-page .card-vert img{display:block;width:100%;height:auto;object-fit:contain;transition:transform .28s ease}
.business-page .card-vert:hover img{transform:scale(1.04)}

/* 暗罩（不擋點擊） */
.business-page .card-vert::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .25s ease;pointer-events:none}
.business-page .card-vert:hover::after{opacity:1}

/* 浮現標題（沿用你 <figcaption> 當資訊條） */
.business-page .card-vert figcaption{position:absolute;left:0;right:0;bottom:8px;z-index:2;text-align:center;color:#fff;font-weight:800;font-size:.95rem;line-height:1.3;padding:8px 10px;opacity:0;transform:translateY(6px);transition:opacity .25s ease, transform .25s ease;pointer-events:none}
.business-page .card-vert:hover figcaption{opacity:1;transform:translateY(0)}

/* 如果有 <a> 包住圖片，確保可點進 lightbox */
.business-page .card-vert a{display:block;position:relative;z-index:1;text-decoration:none;color:inherit}

/* INDEX｜卡片 hover：微凸起＋底部黑影＋文字浮現 */
.home-page .gallery .card-vert{position:relative;overflow:hidden;border-radius:14px;transition:transform .25s ease,box-shadow .25s ease}
.home-page .gallery .card-vert:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.16)}
.home-page .gallery .card-vert img{display:block;width:100%;height:auto}

/* 底部黑影 */
.home-page .gallery .card-vert::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.home-page .gallery .card-vert:hover::before{opacity:1}

/* 文字浮現（用 figcaption） */
.home-page .gallery .card-vert figcaption{position:absolute;left:0;right:0;bottom:8px;z-index:2;text-align:center;color:#fff;font-weight:800;font-size:.95rem;line-height:1.3;padding:8px 10px;opacity:0;transform:translateY(6px);text-shadow:0 2px 10px rgba(0,0,0,.55);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.home-page .gallery .card-vert:hover figcaption{opacity:1;transform:translateY(0)}

/* 若沒有 figcaption，可用 data-cap 當備援文字 */
.home-page .gallery .card-vert[data-cap]::after{content:attr(data-cap);position:absolute;left:0;right:0;bottom:8px;z-index:2;text-align:center;color:#fff;font-weight:800;font-size:.95rem;line-height:1.3;padding:8px 10px;opacity:0;transform:translateY(6px);text-shadow:0 2px 10px rgba(0,0,0,.55);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.home-page .gallery .card-vert:hover[data-cap]::after{opacity:1;transform:translateY(0)}

/* === Portfolio gallery hover + lightbox (same as index) === */
.portfolio-page .gallery .card-vert{position:relative;display:block;overflow:hidden;border-radius:12px;transform:translateZ(0);transition:transform .25s ease,box-shadow .25s ease}
.portfolio-page .gallery .card-vert figure{position:relative;margin:0}
.portfolio-page .gallery .card-vert img{display:block;width:100%;height:auto;transform-origin:center;transition:transform .28s ease}
.portfolio-page .gallery .card-vert figure::before{content:"";position:absolute;left:0;right:0;bottom:0;top:40%;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 100%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.portfolio-page .gallery .card-vert figcaption{position:absolute;left:0;right:0;bottom:10px;z-index:2;text-align:center;color:#fff;font-weight:800;font-size:.95rem;line-height:1.3;padding:8px 10px;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.portfolio-page .gallery .card-vert:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.16)}
.portfolio-page .gallery .card-vert:hover img{transform:scale(1.04)}
.portfolio-page .gallery .card-vert:hover figure::before{opacity:1}
.portfolio-page .gallery .card-vert:hover figcaption{opacity:1;transform:translateY(0)}

/* REPLACE START — Global Lightbox unifier (site-wide click-to-zoom) */
.lightbox{display:none!important;position:fixed;inset:0;z-index:10002;background:rgba(0,0,0,.86);align-items:center;justify-content:center;cursor:zoom-out}
.lightbox:target{display:flex!important}
.lightbox img{max-width:min(92vw,1400px);max-height:90vh;width:auto;height:auto;border-radius:10px;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.lightbox .close{position:absolute;inset:0;display:block;text-decoration:none}
.lightbox .close::after{content:"✕";position:absolute;top:14px;right:18px;color:#fff;font-size:24px;opacity:.9}
.merch-page .lightbox:target{display:flex!important}
/* REPLACE END — Global Lightbox unifier */

/* PATCH START — Lightbox 點擊穿透（personal / fatism） */
.personal-page .project-overlay,.personal-page .project-info{pointer-events:none}
.fatism-page .project-overlay,.fatism-page .project-info{pointer-events:none}
/* 讓整張卡片的圖片區可點（保險） */
.personal-page .project-card .zoom,.fatism-page .project-card .zoom{display:block}
/* PATCH END — Lightbox 點擊穿透 */

/* PATCH START — Business figcaption 深層黑影（同 personal 風格） */
.business-page .card-vert figcaption{
  text-shadow:
    0 2px 6px rgba(0,0,0,.65),
    0 4px 12px rgba(0,0,0,.55),
    0 8px 18px rgba(0,0,0,.4);
  font-weight:800;
  letter-spacing:.02em;
}
/* PATCH END — Business figcaption 深層黑影 */

/* REPLACE START — Fatism：插畫用 Masonry，影片用 3 欄 Grid */
.fatism-page #illustration .project-grid{display:block;column-count:4;column-gap:14px}
.fatism-page #illustration .project-card{display:inline-block;width:100%;margin:0 0 14px;break-inside:avoid;contain:layout paint}

/* 影片區固定 3 欄等寬網格 */
.fatism-page .video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* RWD */
@media(max-width:1080px){.fatism-page #illustration .project-grid{column-count:3}}
@media(max-width:980px){.fatism-page #illustration .project-grid{column-count:2}}
@media(max-width:640px){
  .fatism-page #illustration .project-grid{column-count:1}
  .fatism-page .video-grid{grid-template-columns:1fr}
}
/* REPLACE END */

/* REPLACE START — Lightbox video sizing & z-index fix */
.lightbox .close{position:absolute;inset:0;display:block;z-index:1;text-decoration:none}
.lightbox video{position:relative;z-index:2;max-width:min(92vw,1400px);max-height:90vh;width:auto;height:auto;border-radius:10px;box-shadow:0 20px 40px rgba(0,0,0,.5);background:#000;cursor:auto}
/* REPLACE END */

/* REPLACE START — 只限制影片縮圖比例，圖片不受影響 */
.fatism-page .video-grid .project-card .zoom{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#000}
.fatism-page .video-grid .project-card video{width:100%;height:100%;object-fit:cover;display:block}
/* REPLACE END */
/* APPEND START — front-only safe styles */
:root{--wm:"© 趙憶憫 Min";} /* 你可改成 IG 或品牌字樣 */
img,video{user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.nosave{pointer-events:none} /* 需要時可加在單張圖/影片上，讓右鍵完全失效 */
.protect img,.protect video{filter:brightness(1) contrast(1);transition:filter .2s;}
.protect img:active,.protect video:active{filter:brightness(.98)} /* 降低連拍截圖品質微幅 */
.lightbox::before{content:var(--wm);position:fixed;inset:0;pointer-events:none;opacity:.16;font:700 32px/1.2 ui-sans-serif,system-ui;letter-spacing:.05em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);background:repeating-linear-gradient(45deg,transparent 0 120px,rgba(0,0,0,.15) 120px 121px);display:block;mix-blend-mode:overlay;transform:rotate(-18deg);}
@media(max-width:640px){.lightbox::before{font-size:20px;opacity:.18}}
/* 不影響你原本的 lightbox 圖/影片尺寸與操作 */
/* APPEND END */

/* REPLACE START — FINAL Mobile Drawer (Aurevo 版) */
:root{--header-h:64px}
@media(max-width:640px){:root{--header-h:60px}}

@media(max-width:980px){
  /* 漢堡鍵 */
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:24px;border:0;background:transparent;color:#fff}

  /* Header 固定與色系（不做模糊，避免透到底） */
  .site-header{position:sticky;top:0;z-index:10002;background:var(--c-header);box-shadow:0 6px 18px rgba(0,0,0,.12)}

  /* 右側抽屜（純實色、位於 overlay 之上、可點擊） */
  .site-nav{position:fixed;top:var(--header-h);right:0;bottom:0;left:auto;width:33.333vw;min-width:260px;max-width:420px;
    background:var(--c-header); /* 實心 */
    color:#fff; z-index:10003;
    transform:translateX(100%); transition:transform .25s ease;
    border-radius:12px 0 0 0; box-shadow:-12px 0 32px rgba(0,0,0,.28);
    padding:10px 6px; display:block; will-change:transform;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important; /* 禁止任何霧化 */
  }
  body.nav-open .site-nav{transform:translateX(0)}

  .site-nav ul{list-style:none;margin:0;padding:12px;display:flex;flex-direction:column;gap:6px}
  .site-nav a{display:block;padding:14px 16px;border-radius:10px;text-decoration:none;color:#fff;opacity:1}
  .site-nav a:hover,.site-nav a:focus{background:rgba(255,255,255,.16);color:#fff}
 .site-nav a.is-active{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 2px 4px rgba(255,255,255,.15),inset 0 -2px 4px rgba(0,0,0,.25);transform:translateY(-1px);transition:all .2s ease}

  /* 遮罩層（位於 nav 下方，確保不遮擋點擊） */
  .menu-overlay{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:rgba(0,0,0,.45);
    backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:10000}
  .menu-overlay.show{opacity:1; pointer-events:auto}

  /* 開啟抽屜時，鎖捲動 */
  body.nav-open{overflow:hidden}
}
@media(min-width:981px){.nav-toggle{display:none}.menu-overlay{display:none}}
/* REPLACE END — FINAL Mobile Drawer (Aurevo 版) */

/* APPEND START — 修正 mobile 抽屜顏色與可讀性 */
@media(max-width:980px){
  body.nav-open .site-nav{
    background:#818E73!important; /* header 同色 */
    color:#fff!important;
    right:0; /* 從右側展開 */
    width:33.333vw; /* 螢幕 1/3 寬 */
    max-width:300px;
    box-shadow:-8px 0 24px rgba(0,0,0,.35);
  }
  .site-nav a{
    color:#fff!important;
    font-weight:600;
    display:block;
    padding:14px 20px;
  }
  .site-nav a:hover,.site-nav a:focus{
    background:rgba(255,255,255,.15);
  }
  .menu-overlay{
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(2px);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
  }
  .menu-overlay.show{
    opacity:1;
    pointer-events:auto;
  }
}
/* APPEND END — 修正 mobile 抽屜顏色與可讀性 */
/* FIX — 強制抽屜實色、提升層級、關閉 header 的濾鏡干擾 */
@media(max-width:980px){
  .site-header{backdrop-filter:none !important;} /* 不讓 header 濾鏡影響子層 */
  .site-header .container{isolation:isolate;}    /* 建立新堆疊上下文，避免被外層混合 */

  .site-header .site-nav{                         /* 抽屜本體：實色+最高層級 */
    background:var(--c-header,#818E73) !important;
    z-index:10002 !important;
  }
  .site-header .site-nav ul{                      /* 有些瀏覽器會看 UL 的底色 */
    background:var(--c-header,#818E73) !important;
  }

  /* 安全：hover 高可讀 */
  .site-header .site-nav a{color:#fff!important}
  .site-header .site-nav a:hover,
  .site-header .site-nav a:focus{background:rgba(255,255,255,.16)!important}
}