/* ---------- footer ---------- */
.foot{--foot-bg:#111111;--foot-text:#71d8f1;background:var(--foot-bg);color:var(--foot-text);padding-block:clamp(64px,9vw,110px) 36px;margin-top:40px;position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:-18px;height:20px;background:var(--foot-bg);
  clip-path:polygon(0 60%,4% 35%,9% 55%,14% 30%,20% 60%,26% 40%,31% 70%,37% 35%,43% 55%,49% 25%,55% 60%,61% 40%,67% 65%,72% 30%,78% 55%,84% 35%,90% 60%,95% 40%,100% 55%,100% 100%,0 100%)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end}
.foot .brand{font-family:var(--font-hand);font-size:clamp(48px,9.5vw,124px);line-height:.85;margin:0}
.foot .brand-sub{font-family:var(--font-note);font-size:17px;margin-top:14px}
.contact{display:grid;gap:14px;font-size:1rem}
.contact .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1.5px dashed color-mix(in srgb,var(--foot-text) 40%,transparent)}
.contact .row b{font-weight:600;letter-spacing:.14em;font-size:1rem;text-transform:uppercase;opacity:.7}
.contact .handle{font-family:var(--font-hand);font-size:18px;text-decoration:underline;text-underline-offset:4px}
.contact .handle:hover{opacity:.75}
.ext-link{display:inline-flex;vertical-align:middle;margin-left:10px;color:inherit;transition:transform .15s}
.ext-link:hover,.ext-link:focus-visible{transform:translate(2px,-2px)}
.fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:56px;font-size:1rem;opacity:.65}
@media (max-width:700px){
  .foot-grid{grid-template-columns:1fr}
}

/* 回到頂部：固定在螢幕右下角（js/menu.js 會把它搬到 <body> 最外層），點了平滑捲回頂部
   z-index 8900：在內容之上，但低於吸頂 header（9000）、側邊選單與彈出視窗，不會擋住它們 */
.to-top{position:fixed;z-index:8900;right:clamp(14px,3vw,32px);bottom:clamp(14px,3vw,32px);display:block;width:clamp(60px,6vw,80px);border-radius:50%;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));transform:rotate(-8deg);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.to-top img{display:block;width:100%;height:auto}
.to-top:hover,.to-top:focus-visible{transform:rotate(0) translateY(-6px) scale(1.06)}
.to-top:active{transform:rotate(0) translateY(-2px) scale(.96)}
.to-top:focus-visible{outline:3px dashed #154EFE;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}