/* Site menu (2026-10-29): the two site links sit left, next to the logo; on narrow screens they move into a
   drawer that opens from a menu button left of the logo. Shared by the homepage and Ocean Stories. */
.site-left{display:flex;align-items:center;gap:22px;pointer-events:auto;}
.site-nav{display:flex;align-items:center;gap:18px;}
.menu-toggle{display:none;width:36px;height:36px;margin-left:-8px;border:0;background:transparent;color:#fff;cursor:pointer;align-items:center;justify-content:center;border-radius:10px;pointer-events:auto;}
.menu-toggle:active{opacity:.7;}
.menu-toggle svg{display:block;}

.site-menu{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,0);transition:background .25s ease;pointer-events:none;}
.site-menu.is-open{background:rgba(0,0,0,.55);pointer-events:auto;}
/* Hidden once slid out, so its edge never shows at the screen's left. */
.site-menu-panel{position:absolute;top:0;bottom:0;left:0;width:min(300px,82vw);background:#071221;border-right:1px solid rgba(47,164,199,.2);padding:18px 22px;transform:translateX(-100%);visibility:hidden;transition:transform .28s ease,visibility 0s .28s;display:flex;flex-direction:column;gap:6px;}
.site-menu.is-open .site-menu-panel{transform:none;visibility:visible;transition:transform .28s ease,visibility 0s;}
.site-menu-close{align-self:flex-start;width:36px;height:36px;margin:0 0 14px -8px;border:0;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer;}
.site-menu-panel a{display:block;color:#fff;text-decoration:none;font-family:'Inter','PingFang TC','Noto Sans TC',sans-serif;font-weight:600;font-size:17px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.site-menu-panel a[aria-current]{color:#2FA4C7;}

@media (max-width:760px){
  .site-left .site-nav{display:none;}
  .menu-toggle{display:inline-flex;}
  .site-left{gap:6px;}
}