/* ============================================================
   流浪地球宇宙 · mobile.css — 移动端共享层(方案 B)
   内容 = mobile-preview/mobile/mobile-base.css,整体包进 @media。
   宽屏(>768px)完全不命中 → PC 样式(style.css)零影响。
   ============================================================ */

/* 宽屏:所有"仅移动端"专属块一律隐藏,PC 只渲染原有结构 */
@media (min-width: 769px) {
  .v-only { display: none !important; }
}

@media (max-width: 768px) {
  /* 窄屏:PC 原结构隐藏;移动端三支默认隐藏,由各 variant 点亮其一 */
  .pc-only { display: none !important; }
  .v-only { display: none; }
  [data-variant="a"] .v-a { display: block; }
  [data-variant="b"] .v-b { display: block; }
  [data-variant="c"] .v-c { display: block; }
  /* 无 JS / 未设 data-variant 兜底:默认显示 A,避免空白页 */
  html:not([data-variant]) .v-a { display: block; }

  /* ---- 以下为 mobile-base.css 原样内容 ---- */
  /* ============================================================
     流浪地球宇宙 · Mobile base — shared refinements on top of
     ../assets/style.css. Tuned for a 402px-wide iPhone frame.
     ============================================================ */

  :root{
    --safe-top:50px;          /* status bar / dynamic island */
    --safe-bottom:34px;       /* home indicator */
    --pad-x:22px;
  }

  html,body{width:100%;overflow-x:hidden;}
  body{font-size:15px;}

  /* hide scrollbars (these pages live inside an iPhone frame) */
  html{scrollbar-width:none;}
  html::-webkit-scrollbar{display:none;}

  /* ---- broken-image placeholder: clean light-gray block (images are
     intentionally absent in this demo) ---- */
  .grid-item-img,
  .merch-img,
  .hero-slide,
  .rail-card-img,
  .lead-img,
  .ed-img{background:#ededed;}
  img{color:transparent;}            /* hide the little broken-img glyph */

  /* ============ NAV (mobile) ============ */
  .nav{
    top:0;height:auto;
    padding-top:calc(var(--safe-top) + 12px);
    padding-bottom:14px;
    grid-template-columns:auto 1fr auto;
    column-gap:14px;
  }
  .nav-logo{font-size:15px;text-align:left;}
  .nav-logo .en{font-size:8px;letter-spacing:0.24em;}
  .nav-hamburger{width:28px;height:28px;gap:6px;}
  .nav-hamburger span{width:26px;}
  .nav-right{gap:14px;}
  .nav-search-icon{width:15px;height:15px;}

  /* center the logo regardless of side widths */
  .nav-left,.nav-right{min-width:0;}
  .nav-logo{justify-self:center;}

  /* ============ SLIDE MENU (full-screen on mobile) ============ */
  .menu-panel{
    width:100%;
    padding:calc(var(--safe-top) + 22px) var(--pad-x) calc(var(--safe-bottom) + 24px);
  }
  .menu-head{margin-bottom:48px;}
  .menu-link{font-size:38px;}
  .menu-link .zh{font-size:0.5em;}

  /* ============ HERO (mobile page-hero base) ============ */
  .hero-title-overlay{
    left:var(--pad-x);right:var(--pad-x);
    bottom:64px;
  }
  .hero-title-overlay .eyebrow{margin-bottom:14px;letter-spacing:0.26em;font-size:10px;}
  .hero-title-overlay h1{font-size:clamp(46px,15vw,64px);line-height:0.96;}
  .hero-title-overlay h1 .en{font-size:0.3em;margin-top:14px;}
  .hero-caption{left:var(--pad-x);bottom:24px;}

  /* ============ SECTION (mobile) ============ */
  .section{padding:52px var(--pad-x) 8px;}
  .section--first{padding-top:40px;}
  .section-title{
    font-size:38px;
    margin-bottom:32px;
    flex-direction:row;align-items:baseline;
    gap:16px;
  }
  .section-title .section-title-right{font-size:10px;gap:12px;}

  /* ============ FOOTER (mobile) ============ */
  .footer{
    flex-direction:column;align-items:flex-start;gap:24px;
    padding:48px var(--pad-x) calc(var(--safe-bottom) + 32px);
  }
  .footer-right{text-align:left;}

  /* ============ BACK TO TOP (mobile) ============ */
  .to-top{right:var(--pad-x);bottom:calc(var(--safe-bottom) + 16px);width:44px;height:44px;}

  /* ============================================================
     SHARED ARCHIVE MODULES (used by all three directions; each
     direction's own .css may override the body layout)
     ============================================================ */

  /* page intro + stats strip */
  .m-intro{padding:38px var(--pad-x) 4px;}
  .m-intro .lead-p{
    font-family:var(--font-zh);font-size:16px;line-height:1.66;
    color:var(--fg);margin:0 0 28px;text-wrap:pretty;
  }
  .m-intro .lead-p .muted{color:var(--muted);}
  .m-stats{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;}
  .m-stats .stat{display:flex;flex-direction:column;gap:5px;}
  .m-stats .num{font-family:var(--font-sans);font-size:30px;font-weight:700;letter-spacing:-0.02em;line-height:1;}
  .m-stats .label{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);}

  /* era timeline — default: stacked rows (direction A). B/C override. */
  .m-eras{display:flex;flex-direction:column;}
  .m-era{padding:22px 0;border-top:1px solid var(--fg);}
  .m-era .eid{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
  .m-era .eyears{font-family:var(--font-sans);font-size:24px;font-weight:700;letter-spacing:-0.02em;margin-bottom:8px;}
  .m-era .ename{font-family:var(--font-zh);font-size:20px;font-weight:600;margin:0 0 2px;}
  .m-era .een{font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--muted);margin-bottom:10px;}
  .m-era .edesc{font-family:var(--font-zh);font-size:13px;line-height:1.62;color:var(--fg);margin:0;text-wrap:pretty;}

  /* category head — small subhead used above each category body */
  .m-cat{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding-bottom:14px;border-bottom:1px solid var(--fg);margin-bottom:28px;
  }
  .m-cat .l{display:flex;align-items:baseline;gap:12px;min-width:0;}
  .m-cat .num{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
  .m-cat h2{font-family:var(--font-zh);font-size:30px;font-weight:700;letter-spacing:-0.01em;margin:0;}
  .m-cat .r{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
  .m-cat .r a{color:var(--muted);transition:color .2s var(--ease);}
  .m-cat .r a:hover{color:var(--fg);}

  /* plan: text-only list */
  .m-textlist{border-top:1px solid var(--fg);}
  .m-textlist a.row{display:block;padding:22px 2px 20px;border-bottom:1px solid var(--border);transition:padding-left .3s var(--ease),background .2s var(--ease);}
  .m-textlist a.row:hover{padding-left:14px;background:#fafafa;}
  .m-textlist .arc-id{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px;}
  .m-textlist .name{font-family:var(--font-zh);font-size:23px;font-weight:600;letter-spacing:-0.01em;line-height:1.15;}
  .m-textlist .name .en{display:block;font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--muted);margin-top:5px;}

  /* breadcrumb eyebrow links inside hero overlay */
  .hero-title-overlay .eyebrow a{color:rgba(255,255,255,.72);transition:color .2s var(--ease);}
  .hero-title-overlay .eyebrow a:hover{color:#fff;}

  /* ============================================================
     SHARED STORIES MODULES (featured video, media filter, stamps,
     media meta) — used by all three directions.
     ============================================================ */

  /* featured video block */
  .m-featured{padding:34px var(--pad-x) 6px;}
  .m-featured .fhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--fg);margin-bottom:20px;}
  .m-fvideo{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a0a0a;}
  .m-fvideo img{width:100%;height:100%;object-fit:cover;}
  .m-fvideo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(0,0,0,.62) 100%);z-index:1;}
  .m-fvideo .runtime{position:absolute;right:12px;top:12px;z-index:2;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:0.14em;color:#fff;background:rgba(0,0,0,.55);padding:4px 8px;}
  .m-fvideo .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border:1px solid rgba(255,255,255,.9);border-radius:50%;z-index:2;display:flex;align-items:center;justify-content:center;}
  .m-fvideo .play::after{content:"";width:0;height:0;border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:5px;}
  .m-fvideo .cap{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;color:#fff;}
  .m-fvideo .cap .tag{font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,.85);display:block;margin-bottom:8px;}
  .m-fvideo .cap h2{font-family:var(--font-zh);font-size:21px;font-weight:600;line-height:1.26;margin:0 0 8px;text-wrap:pretty;}
  .m-fvideo .cap .meta{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.1em;color:rgba(255,255,255,.72);}

  /* media-type filter / chips (horizontal scroll, not sticky) */
  .m-filter{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:18px var(--pad-x);border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:8px;}
  .m-filter::-webkit-scrollbar{display:none;}
  .m-fchip{flex:0 0 auto;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid var(--border);border-radius:100px;padding:8px 14px;cursor:pointer;transition:all .18s var(--ease);white-space:nowrap;display:inline-flex;gap:6px;align-items:center;}
  .m-fchip .count{font-size:10px;font-weight:500;color:var(--muted);}
  .m-fchip.is-active{background:var(--fg);color:var(--bg);border-color:var(--fg);}
  .m-fchip.is-active .count{color:rgba(255,255,255,.7);}

  /* corner stamp on media images */
  .grid-item-img,.rail-card-img,.ed-img{position:relative;}
  .stamp{position:absolute;bottom:10px;left:10px;z-index:3;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:5px 8px;}

  /* media item meta + type tag */
  .grid-item-meta,.m-meta{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.06em;color:var(--muted);margin-top:9px;}
  .grid-item-meta .author,.m-meta .author{color:var(--fg);font-weight:600;}
  .grid-item-meta .sep,.m-meta .sep{margin:0 7px;opacity:.5;}
  .grid-item-tag .type,.rail-tag .type,.ed-tag .type{color:var(--fg);font-weight:700;letter-spacing:0.2em;}
  .grid-item-tag .sep,.rail-tag .sep,.ed-tag .sep{opacity:.45;margin:0 4px;}

  /* play overlay for video items (feed) */
  .grid-item[data-type="video"] .grid-item-img::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border:1px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(0,0,0,.25);pointer-events:none;z-index:2;}
  .grid-item[data-type="video"] .grid-item-img::before{content:"";position:absolute;z-index:3;top:50%;left:50%;width:0;height:0;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;transform:translate(-30%,-50%);pointer-events:none;}
  .ar-9-16 .grid-item-img{aspect-ratio:9/16;}

  /* stories section head */
  .m-gridhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--fg);margin-bottom:28px;}
  .m-gridhead h2{font-family:var(--font-zh);font-size:30px;font-weight:700;letter-spacing:-0.01em;margin:0;}
  .m-gridhead .right{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}

  /* A-feed filter: hide non-matching items */
  .feed[data-filter="video"]   .grid-item:not([data-type="video"]){display:none;}
  .feed[data-filter="article"] .grid-item:not([data-type="article"]){display:none;}
  .feed[data-filter="visual"]  .grid-item:not([data-type="visual"]){display:none;}
  .feed[data-filter="audio"]   .grid-item:not([data-type="audio"]){display:none;}

  /* ============================================================
     SHARED PLAZA MODULES (post list, widgets, CTA) — all directions
     ============================================================ */

  /* post list */
  .m-postlist{border-top:1px solid var(--border);}
  .m-post{display:grid;grid-template-columns:1fr auto;align-items:start;gap:18px;padding:22px 2px 20px;border-bottom:1px solid var(--border);transition:padding-left .3s var(--ease),background .2s var(--ease);}
  .m-post:hover{padding-left:12px;background:#fafafa;}
  .m-post .pmain{display:flex;flex-direction:column;gap:9px;min-width:0;}
  .m-post .ptag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg);padding:3px 7px;border:1px solid var(--fg);}
  .m-post.pinned .ptag{background:var(--fg);color:#fff;}
  .m-post .ptitle{font-family:var(--font-zh);font-size:18px;font-weight:600;line-height:1.32;letter-spacing:-0.005em;margin:0;color:var(--fg);text-wrap:pretty;}
  .m-post .pmeta{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.06em;color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
  .m-post .pmeta .author{color:var(--fg);font-weight:600;}
  .m-post .pmeta .channel{letter-spacing:0.14em;text-transform:uppercase;}
  .m-post .pmeta .sep{opacity:.5;}
  .m-post .preplies{text-align:right;display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap;}
  .m-post .preplies .num{font-family:var(--font-sans);font-size:22px;font-weight:700;letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums;}
  .m-post .preplies .label{font-family:var(--font-mono);font-size:8px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-top:3px;}

  /* channel filter rules */
  .m-postlist[data-filter="earth"]       .m-post:not([data-channel="earth"]){display:none;}
  .m-postlist[data-filter="orbit"]       .m-post:not([data-channel="orbit"]){display:none;}
  .m-postlist[data-filter="signal"]      .m-post:not([data-channel="signal"]){display:none;}
  .m-postlist[data-filter="engineering"] .m-post:not([data-channel="engineering"]){display:none;}
  .m-postlist[data-filter="memorial"]    .m-post:not([data-channel="memorial"]){display:none;}

  /* widgets (本周热议 / 活跃创作者) */
  .m-widget{padding:0 var(--pad-x);}
  .m-widget + .m-widget{margin-top:44px;}
  .m-whead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--fg);margin-bottom:2px;}
  .m-whead h3{font-family:var(--font-zh);font-size:20px;font-weight:700;margin:0;}
  .m-whead .en{font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);}
  .m-witem{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:18px;padding:15px 0;border-bottom:1px solid var(--border);transition:padding-left .3s var(--ease);}
  .m-witem:hover{padding-left:10px;}
  .m-witem .wt{font-family:var(--font-zh);font-size:15px;font-weight:600;line-height:1.35;margin:0;text-wrap:pretty;}
  .m-witem .ws{display:block;font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-top:4px;}
  .m-witem .wn{font-family:var(--font-sans);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .m-witem .wn small{font-family:var(--font-mono);font-size:8px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-left:3px;}

  /* big CTA */
  .m-cta{padding:56px var(--pad-x) 24px;border-top:1px solid var(--fg);margin-top:44px;}
  .m-cta h2{font-family:var(--font-sans);font-size:clamp(40px,12vw,56px);font-weight:800;letter-spacing:-0.025em;line-height:0.98;margin:0 0 24px;}
  .m-cta h2 .zh{font-family:var(--font-zh);font-weight:700;}
  .m-cta .btn{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:#fff;background:var(--fg);padding:16px 24px;display:inline-flex;align-items:center;gap:10px;transition:gap .25s var(--ease),background .2s var(--ease);}
  .m-cta .btn:hover{gap:16px;background:#222;}

  /* ============================================================
     SHARED MERCH MODULES (product card, filter, notice)
     ============================================================ */
  .m-merchgrid{display:grid;grid-template-columns:1fr 1fr;gap:30px 16px;}
  .m-merch{display:flex;flex-direction:column;}
  .m-merch .mimg{position:relative;aspect-ratio:1/1;overflow:hidden;background:#ededed;margin-bottom:13px;}
  .m-merch .mimg img{width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease),transform 1.2s var(--ease);}
  .m-merch:active .mimg img{opacity:.85;transform:scale(1.03);}
  .m-merch .overlay{position:absolute;top:10px;left:10px;font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;background:rgba(255,255,255,0.94);color:var(--fg);padding:5px 8px;}
  .m-merch .overlay.dark{background:var(--fg);color:#fff;}
  .m-merch .mtag{font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
  .m-merch .mtag .sep{margin:0 5px;opacity:.5;}
  .m-merch .mname{font-family:var(--font-zh);font-size:15px;font-weight:600;line-height:1.35;letter-spacing:-0.005em;margin:0 0 12px;text-wrap:pretty;color:var(--fg);}
  .m-merch .mprice-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:auto;padding-top:8px;border-top:1px solid var(--border);}
  .m-merch .mprice{font-family:var(--font-sans);font-size:17px;font-weight:700;letter-spacing:-0.01em;color:var(--fg);font-variant-numeric:tabular-nums;}
  .m-merch .mprice .cur{font-family:var(--font-mono);font-size:10px;font-weight:600;margin-right:2px;}
  .m-merch .mbuy{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--fg);white-space:nowrap;}

  /* merch category filter rules */
  .m-merchgrid[data-filter="model"]       .m-merch:not([data-cat~="model"]){display:none;}
  .m-merchgrid[data-filter="apparel"]     .m-merch:not([data-cat~="apparel"]){display:none;}
  .m-merchgrid[data-filter="publication"] .m-merch:not([data-cat~="publication"]){display:none;}
  .m-merchgrid[data-filter="digital"]     .m-merch:not([data-cat~="digital"]){display:none;}
  .m-merchgrid[data-filter="limited"]     .m-merch:not([data-cat~="limited"]){display:none;}

  /* external-purchase notice */
  .m-notice{padding:52px var(--pad-x) 24px;border-top:1px solid var(--fg);margin-top:44px;}
  .m-notice h2{font-family:var(--font-sans);font-size:clamp(30px,9vw,44px);font-weight:800;letter-spacing:-0.025em;line-height:1.04;margin:0 0 20px;}
  .m-notice h2 .zh{font-family:var(--font-zh);font-weight:700;}
  .m-notice .meta{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);line-height:2;}
  .m-notice .meta strong{color:var(--fg);font-weight:600;}

}