/* ==========================================================
   gaolex.net v3 · 手机端样式
   必须在 article.css / pages.css 之后加载：
   @import 进来的规则排在前面，媒体查询不加权重，
   放在前面会被后面的桌面规则直接压掉。
   ========================================================== */

/* ==========================================================
   窄屏手机 —— 单栏，界行收起，版框收窄
   直排仍只用在题签那四个字上，正文一概横排
   ========================================================== */
@media (max-width: 760px) {
  :root { --shell: calc(100vw - 22px); }

  .frame-outer { margin: 12px auto 20px; padding: 4px; }
  .frame-outer::after { display: none; }          /* 订孔在窄屏太挤，收 */
  .frame-inner { padding: 16px 15px 18px; }
  .corner { width: 22px; height: 22px; }
  .seal-qifeng { display: none; }

  /* 报头：题签与报眼上下排 */
  .masthead-top { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 12px; }
  .brand-block { gap: 13px; }
  .v-char b { font-size: 23px; }
  .v-char i { font-size: 7.5px; }
  .head-copy { border-left: 1px solid var(--rule-2); padding-left: 12px; }
  .head-copy .motto { font-size: 13.5px; letter-spacing: 0.24em; }
  .head-copy .sub { font-size: 10px; letter-spacing: 0.12em; }
  .juanshou { font-size: 12.5px; letter-spacing: 0.1em; padding-top: 8px; }
  .seal-on-da { width: 19px; height: 19px; right: -2px; bottom: -5px; }
  .motto-wrap { padding-right: 15px; }
  .ear { align-self: stretch; min-width: 0; }
  .ear-in { padding: 7px 12px; }
  .ear .l1 { font-size: 14px; }
  .ear .l2 { font-size: 10.5px; }

  /* 导航：横向可滑，不用汉堡 */
  .nav {
    gap: 20px; padding-top: 10px; font-size: 14px; letter-spacing: 0.1em;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    flex: 0 0 auto; min-height: 44px; padding: 8px 0;
    display: inline-flex; align-items: center;
  }

  /* 主体：单栏 */
  .grid, .article-grid, .about-grid { grid-template-columns: 1fr; }
  .jiehang { display: none; }
  .col-l, .col-r, .art-main, .art-side, .about-main, .about-side {
    padding-left: 0; padding-right: 0;
  }
  .col-r, .art-side, .about-side {
    margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--rule);
  }

  /* 头条 */
  .lead { grid-template-columns: 1fr; gap: 18px; padding: 20px 0 22px; }
  .lead h1 { font-size: 26px; line-height: 1.42; }
  .lead-head { gap: 12px; }
  .seal-toutiao { width: 26px; height: 52px; }
  .lead p { font-size: 15px; }

  /* 印样：手机两列 */
  .frames { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; padding: 9px 9px 11px; }
  .sheet-full .frames { grid-template-columns: repeat(2, 1fr) !important; }
  .frame .cap { font-size: 11.5px; }
  .edge-txt { font-size: 6.5px; letter-spacing: 0.14em; }

  /* 日志 */
  .log-row { grid-template-columns: 40px 1fr; row-gap: 2px; padding: 9px 0; }
  .log-row .d { grid-column: 2; }

  /* 正文：手机放大到 17px */
  .prose { font-size: 17px; line-height: 1.92; }
  .prose > p, .prose blockquote, .prose ol, .prose ul { max-width: none; }
  .prose > p { text-align: left; }
  .prose h2 { font-size: 19px; padding-left: 11px; }
  .prose table { font-size: 13.5px; min-width: 420px; }
  .art-title { font-size: 25px; line-height: 1.45; }
  .art-deck { font-size: 14.5px; max-width: none; }
  .about-body { font-size: 17px; max-width: none; }
  .about-body p.big { font-size: 18px; }

  /* 上下篇改上下排 */
  .prevnext { grid-template-columns: 1fr; }
  .prevnext .sep { height: 1px; }
  .prevnext > a.pv, .prevnext > a.nx { padding: 13px 0; text-align: left; }

  /* 栏目页 */
  .cat-head { flex-wrap: wrap; gap: 10px; padding: 18px 0 10px; }
  .cat-head h1 { font-size: 24px; letter-spacing: 0.2em; }
  .cat-head .seal-cat { width: 34px; height: 34px; }
  .cat-list { grid-template-columns: 1fr; }
  .filters { flex-wrap: wrap; gap: 16px; font-size: 13.5px; }
  .filters > a { min-height: 44px; display: inline-flex; align-items: center; }
  .filters form { margin-left: 0; width: 100%; }
  .filters input { width: 100%; min-height: 44px; }
  .more { min-height: 44px; display: inline-flex; align-items: center; }

  /* 牌记 */
  .colophon-in { flex-direction: column; align-items: flex-start; gap: 14px; padding: 13px 15px; }
  .imprint { text-align: left; }
  .imprint-group { flex-direction: row; align-items: flex-start; gap: 13px; }
  .seal-foot { width: 38px; height: 38px; margin-top: 2px; }

  .note-box, .card { }
  .proto-tag { font-size: 9.5px; padding: 4px 8px; }
}

@media (max-width: 420px) {
  .frame-inner { padding: 14px 12px 16px; }
  .nav { gap: 17px; font-size: 13.5px; }
  .v-char b { font-size: 21px; }
  .lead h1 { font-size: 23px; }
  .art-title { font-size: 22px; }
  .not-found h1 { font-size: 40px; }
}

/* 平板宽度不再把正文压进 438px 小栏；目录前置，相关文章仍在文末。 */
@media (max-width: 1040px) {
  .article-grid, .about-grid { grid-template-columns: 1fr; }
  .article-grid > .jiehang, .about-grid > .jiehang { display: none; }
  .art-main, .about-main { padding-right: 0; }
  .art-side, .about-side {
    padding-left: 0; margin-top: 30px; padding-top: 24px;
    border-top: 1px solid var(--rule);
  }
  .art-side .sticky { position: static; }
  .art-side .side-toc { display: none; }
  .mobile-toc { display: block; }
}

@media (max-width: 760px) {
  /* 栏目头在窄屏换行，说明文字不再被切 */
  .room-head { flex-wrap: wrap; row-gap: 2px; }
  .room-head .room-tag { margin-left: 0; width: 100%; font-size: 11.5px; }
  .room-name { font-size: 18px; letter-spacing: 0.16em; }
  .room-seal { width: 23px; height: 23px; }
  .sheet-edge { overflow: hidden; }
}

@media (max-width: 760px) {
  /* 手机上缩略图更小，摘要收起，日期挪到标题下 */
  .entry a { grid-template-columns: 64px minmax(0,1fr); gap: 11px; }
  .entry .thumb { width: 64px; height: 44px; }
  .entry .x { display: none; }
  .entry .d { grid-column: 2; text-align: left; margin-top: 4px; }
  .cat-list .entry a { grid-template-columns: 74px minmax(0,1fr); gap: 12px; }
  .cat-list .entry .thumb { width: 74px; height: 50px; }
}

@media (max-width: 760px) {
  /* 齿孔带是定宽的一串小方块，挤不下也不肯缩，会把整栏顶出版心。
     让它可收缩并裁掉多余的孔，而不是撑破页面。 */
  .grid > *, .col-l, .col-r, .art-main, .art-side { min-width: 0; }
  .sheet-wrap, .sheet-full, .frames { min-width: 0; }
  .sheet-edge { min-width: 0; overflow: hidden; }
  .perf { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .edge-txt { flex: 0 0 auto; }
}

@media (max-width: 760px) {
  /* 手机：编号与缩略图并排，标题日期占第三列 */
  .log-row, .col-l .log-row, .logbook-full .log-row {
    grid-template-columns: 34px 64px minmax(0,1fr);
    row-gap: 2px; gap: 10px;
  }
  .log-row .thumb, .col-l .log-row .thumb, .logbook-full .log-row .thumb {
    width: 64px; height: 44px;
  }
  .log-row .no { font-size: 11.5px; }
  .log-row .d { grid-column: 3; text-align: left; margin-top: 3px; }
}

@media (max-width: 760px) {
  /* 文章页与栏目页用紧凑报头：题签、站名、导航都留着，只把报眼收小，
     免得连读几篇时每页都要先翻过半屏仪式。首页保留完整版。 */
  body:not(.home) .ear { min-width: 0; align-self: flex-start; padding: 2px; }
  body:not(.home) .ear-in { padding: 4px 10px; }
  body:not(.home) .ear .l1 { font-size: 12px; letter-spacing: .1em; }
  body:not(.home) .ear .hr { margin: 3px 0; }
  body:not(.home) .ear .l2 { font-size: 9.5px; line-height: 1.6; }
  body:not(.home) .masthead-top { gap: 9px; padding-bottom: 9px; }
  body:not(.home) .v-char b { font-size: 20px; }
  body:not(.home) .head-copy .sub { display: none; }

  /* 低端手机上固定纸纹 + 混合模式会拖累滚动，移动端减一档 */
  body { background-attachment: scroll; }
  body::before { opacity: .5; mix-blend-mode: normal; }
}

@media (max-width: 760px) {
  /* ==========================================================
     手机报头错位修正（2026-08-18）
     原来报眼在窄屏只占左边 104px，右边空一大片，像吊着的一个小盒子。
     改成占满整宽的一条横带，内容横排，高度也从 76px 压到约 36px。
     ========================================================== */
  .ear, body:not(.home) .ear {
    align-self: stretch; width: 100%; min-width: 0; padding: 2px;
  }
  .ear-in, body:not(.home) .ear-in {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; padding: 7px 12px;
  }
  .ear .l1, body:not(.home) .ear .l1 {
    font-size: 13.5px; letter-spacing: .14em; white-space: nowrap; line-height: 1.4;
  }
  .ear .hr, body:not(.home) .ear .hr {
    width: 1px; height: 22px; margin: 0; flex: 0 0 auto; background: var(--rule-2);
  }
  .ear .l2, body:not(.home) .ear .l2 {
    font-size: 10.5px; letter-spacing: .1em; line-height: 1.5; white-space: nowrap;
  }

  /* 题签斜 −6° 之后左角会探出版心边线，给一点余量对齐 */
  .brand-block { padding-left: 5px; }
}