/* Phone layer (<=760px). Linked last on every page, after the page's own <style>,
   so these rules win. Pattern from JP blog themes: paper to the screen edge (no frames),
   filled section headings, compact cards, big buttons, bottom tab bar. */
@media (max-width:760px){
  html,body{background:var(--paper)}
  body{font-size:16px;line-height:1.8;padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .sheet,.sheet.guide{margin:0!important;max-width:none!important;border:none!important;box-shadow:none!important;padding:14px 16px 28px!important}
  .gwrap{display:block!important}
  .side,.side-toc,.side-more{display:none!important}

  /* top bar: logo only, links move to the tab bar */
  .gnav{padding:10px 16px!important;border-bottom:1px solid var(--rule);overflow:visible!important}
  .gnav a.nl{display:none!important}
  .gnav .home{font-size:16px}

  /* headings */
  h1,.guide h1{font-size:23px!important;line-height:1.45}
  .sheet h2{font-size:19px;line-height:1.45;margin:40px -16px 14px;padding:10px 16px 10px 13px;background:#efeee8;border-left:5px solid var(--red);border-bottom:none}
  .sheet h2 .num{color:var(--red)}
  .now h2{background:none;border:none;margin:0 0 8px;padding:0}

  /* text */
  .sheet p,.sheet li{font-size:16px}
  .key{font-size:18px!important;line-height:1.6}
  .note{font-size:14px!important}
  .backtoc{display:none}

  /* work cards: image full width, title 2 lines, big button */
  .sheet .work{display:block!important;border:1px solid var(--rule)!important;padding:12px!important;margin:18px 0!important;background:#fff}
  .sheet .work img{width:100%;border:none}
  .sheet .work .wb b{font-size:17px;line-height:1.45;margin:10px 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .sheet .work .go{display:block;text-align:center;padding:12px 10px;margin-top:10px;font-size:16px}

  /* compact cards stay side by side on phones */
  .sheet .work.mini{display:grid!important;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:8px!important;margin:10px 0!important}
  .sheet .work.mini img{aspect-ratio:1/1}
  .sheet .work.mini .wb b{font-size:15px;margin:0 0 2px;-webkit-line-clamp:3}
  .sheet .work.mini .wb span{font-size:12px;margin-bottom:0}
  .sheet .work.mini .wb .pr{font-size:15px}
  .sheet .work.mini .go{display:inline-block;padding:2px 0;margin:2px 0 0;border:none;background:none;text-decoration:underline;font-size:14px}

  /* lists on hub pages: date above title */
  .list li{grid-template-columns:1fr!important;gap:0!important;padding:10px 0!important}
  .list li>.k:last-child:empty{display:none}
  .list li .k{font-size:12px}
  .list a{font-size:16px;line-height:1.5}

  /* top page feature: small picture beside the text */
  .feature{grid-template-columns:96px minmax(0,1fr)!important;gap:12px!important;padding:10px!important;border-width:1px!important}
  .feature img{width:96px!important;height:96px!important}
  .feature b{font-size:17px!important;margin-bottom:4px!important}
  .feature span{font-size:14px}
  .list a{text-decoration:none;font-weight:600}

  /* footer */
  .fnav{padding:12px 16px 4px!important;flex-wrap:wrap;gap:10px 16px}
  footer{padding:0 16px 16px!important;font-size:12px}

  /* bottom tab bar */
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;color:var(--sub);text-decoration:none;font-size:11px;letter-spacing:.04em}
  .tabbar a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
  .tabbar a.on{color:var(--red);font-weight:700}
}