/* A compact phone header, three destinations, and one deduplicated navigation list. */
.mobile-nav,.mobile-explore-fallback { display:none; }
html.ww-modal-open,html.ww-modal-open body { overflow:hidden; }
.mobile-menu-dialog { width:min(520px,calc(100% - 32px)); }
.mobile-menu-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 24px 16px; }
.mobile-menu-heading>div { min-width:0; }
.mobile-menu-heading p { margin:4px 0 0; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobile-menu-heading h2 { margin:0; color:var(--ink); font-size:20px; font-weight:650; line-height:1.5; }
.mobile-menu-heading .icon-button { flex:0 0 44px; width:44px; height:44px; border-radius:50%; background:var(--soft); }
.mobile-menu-body { padding:0 20px 24px; overflow:auto; overscroll-behavior:contain; }
.mobile-menu-body>.ww-menu { margin:0; }
.mobile-menu-body .ww-menu-list { gap:0; }
.mobile-menu-body .ww-menu-level-1>.ww-menu-item + .ww-menu-item { border-top:1px solid var(--border); }
.mobile-menu-body .ww-menu-link { min-height:56px; padding:12px 10px; gap:14px; border-radius:10px; font-size:15px; }
.mobile-menu-body .ww-menu-link>.icon,.mobile-menu-body .ww-menu-custom-icon { width:21px; height:21px; flex:0 0 21px; color:var(--accent); }
.mobile-menu-body .ww-menu-symbol { font-size:19px; }
.mobile-menu-body .ww-menu-symbol-wide { font-size:12px; }
.mobile-menu-body a.ww-menu-link::after { content:""; flex:0 0 6px; width:6px; height:6px; margin:0 5px 0 auto; border-top:1.5px solid var(--muted); border-right:1.5px solid var(--muted); transform:rotate(45deg); }
.mobile-menu-body summary>a.ww-menu-link::after { display:none; }
.mobile-menu-body .ww-menu summary { min-height:56px; border-radius:10px; }
.mobile-menu-body .ww-menu-caret { width:36px; min-height:44px; }
.mobile-menu-body .ww-menu-caret .icon { width:16px; height:16px; transform:rotate(90deg); }
.mobile-menu-body details[open]>summary>.ww-menu-caret .icon { transform:rotate(-90deg); }
.mobile-menu-body .ww-menu-list .ww-menu-list { margin:0 0 10px 20px; padding:0 0 0 12px; border-left:1px solid var(--site-border); }
.mobile-menu-body .ww-menu-level-2 .ww-menu-link,.mobile-menu-body .ww-menu-level-3 .ww-menu-link { min-height:48px; font-size:14px; }
.mobile-menu-body .ww-menu-link.active { box-shadow:none; }
.mobile-menu-dialog[open] { display:flex; flex-direction:column; }
.mobile-menu-dialog::backdrop { background:rgb(27 37 51 / 38%); backdrop-filter:blur(4px); }

@media (max-width:680px) {
  :root { --mobile-nav-height:68px; --mobile-nav-space:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom,0px)); --muted:#78859a; }
  html[data-theme="dark"] { --muted:#9aa8bc; }
  html[data-theme="dark"] .feed-card { border-color:var(--border); }
  html[data-theme="dark"] .feed-card .article-feed-footer>.read-post { background:var(--accent-bg); }
  html { scroll-padding-top:84px; scroll-padding-bottom:calc(var(--mobile-nav-space) + 20px); }
  body { padding-bottom:calc(var(--mobile-nav-space) + 16px); }
  .mobile-header { position:sticky; top:0; z-index:30; padding-top:env(safe-area-inset-top,0px); background:var(--card); border-bottom:1px solid var(--border); }
  .mobile-top { height:64px; gap:12px; padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px)); }
  .mobile-top .brand { min-width:0; flex:1; gap:10px; }
  .mobile-top .brand-symbol { flex:0 0 30px; width:30px; height:30px; border-radius:9px; font-size:18px; }
  .mobile-top .brand-name { min-width:0; max-width:none; font-size:17px; font-weight:650; letter-spacing:.2px; }
  .mobile-tools { flex-shrink:0; gap:2px; }
  .mobile-tools .icon-button { width:44px; height:44px; border-radius:50%; }
  .mobile-tools .icon { width:19px; height:19px; }
  .layout { margin:0; padding:16px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px)); }
  .home-filter-bar { margin:0 0 16px; border:0; scroll-margin-top:84px; }
  .home-filter-bar .filters { gap:8px; padding:2px 0; }
  .home-filter-bar .filter { display:flex; align-items:center; justify-content:center; min-height:42px; padding:8px 15px; border-radius:12px; color:var(--text); font-size:13px; }
  .home-filter-bar .filter.active { background:var(--ink); color:var(--card); font-weight:600; }
  .home-filter-bar .filter.active:after { display:none; }
  .article-list { gap:16px; }
  .feed-card { padding:20px 18px 14px; border-radius:18px; box-shadow:0 3px 14px rgb(35 48 67 / 2%); }
  .feed-head { margin-bottom:17px; }
  .feed-head .avatar { width:36px; height:36px; border-radius:12px; font-size:18px; }
  .author-info strong { font-size:13px; }
  .author-info .post-time { font-size:11px; line-height:1.6; flex-wrap:wrap; gap:2px 6px; }
  .feed-card .article-title { font-size:20px; font-weight:650; line-height:1.55; letter-spacing:0; margin-bottom:10px; }
  .feed-card .article-summary { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; overflow-wrap:anywhere; font-size:14px; line-height:1.85; }
  .feed-card .feed-photo { margin-top:16px; aspect-ratio:1.85; max-height:230px; border-radius:12px; }
  .feed-card .feed-photo img { height:100%; aspect-ratio:auto; }
  .feed-card .article-feed-footer { margin-top:16px; padding-top:10px; gap:4px 10px; }
  .feed-card .article-feed-footer>.read-post { min-height:40px; padding:6px 13px; border-radius:10px; font-size:12px; }
  .feed-card .article-like { min-width:40px; min-height:40px; }
  .content-panel.article-page { border-radius:18px; padding:24px 20px; }
  .mobile-nav { position:fixed; inset:auto 0 0; z-index:40; display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:8px; height:var(--mobile-nav-space); padding:6px max(20px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px)); background:var(--card); border-top:1px solid var(--border); box-shadow:0 -4px 24px rgb(35 48 67 / 3%); }
  .mobile-nav>a { position:relative; display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; min-height:0; padding:5px 4px; border-radius:13px; color:var(--text); font-size:11px; font-weight:500; line-height:1.4; }
  .mobile-nav>a>.icon { width:21px; height:21px; stroke-width:1.7; }
  .mobile-nav>a.active,.mobile-nav>a[aria-expanded="true"] { background:var(--accent-bg); color:var(--accent); font-weight:600; }
  .mobile-nav>a.active:after { display:none; }
  .mobile-nav>a:focus-visible { outline-offset:-2px; }
  .mobile-menu-dialog { inset:auto 0 0; width:100%; max-width:540px; max-height:76vh; max-height:76dvh; margin:0 auto; border:1px solid var(--border); border-bottom:0; border-radius:24px 24px 0 0; padding:0; box-shadow:0 -16px 60px rgb(0 0 0 / 10%); }
  .mobile-menu-dialog[open] { animation:ww-sheet-in .2s ease-out; }
  .mobile-menu-heading { flex-shrink:0; padding:22px 24px 16px; }
  .mobile-menu-body { padding:0 20px calc(20px + env(safe-area-inset-bottom,0px)); }
  .mobile-menu-body [tabindex="-1"]:focus { outline:none; }
  .mobile-explore-fallback { display:block; margin:20px 16px; padding:20px; border:1px solid var(--border); border-radius:18px; background:var(--card); }
  .mobile-explore-fallback>h2 { margin-bottom:20px; font-size:20px; }
  #search-dialog { margin-top:max(24px,env(safe-area-inset-top,0px)); border-radius:20px; max-height:calc(100dvh - 48px); }
  #search-dialog .icon-button { width:44px; height:44px; }
  .toast { bottom:calc(var(--mobile-nav-space) + 16px); }
}
@media (max-width:360px) {
  .mobile-top { gap:6px; padding-left:16px; padding-right:10px; }
  .mobile-top .brand { gap:8px; }
  .mobile-top .brand-name { font-size:16px; }
  .layout { padding-left:max(12px,env(safe-area-inset-left,0px)); padding-right:max(12px,env(safe-area-inset-right,0px)); }
  .feed-card { padding-left:16px; padding-right:16px; }
  .mobile-menu-body { padding-left:16px; padding-right:16px; }
}
@keyframes ww-sheet-in { from { transform:translateY(24px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .mobile-menu-dialog[open] { animation:none; } }