/* Desktop stays with its existing navigation and right sidebar. */
.mobile-toolbar,.mobile-toolbar[hidden],.mobile-explorer:not([open]){display:none}

/* Shared banner: full available width, original proportions, no cropping. */
#header-wrapper{display:grid;grid-template-columns:68% 30%;column-gap:2%;row-gap:6px;align-items:stretch;height:auto;padding-bottom:6px}
#header{width:100%;max-width:680px;height:auto;margin:0}
#header-inner>a{display:block!important;overflow:hidden;margin-top:8px;padding:5px;background:rgba(5,23,35,.55);border:1px solid transparent;border-radius:7px}
#header img{display:block;width:100%;max-width:100%;height:auto;max-height:none;margin:0;border-radius:3px}

/* Navigation and player controls share the second header row. */
#header-wrapper>#page-menu{grid-column:1;grid-row:2;width:100%;min-width:0;min-height:30px;margin:0}
#header-wrapper>#page-menu ul#page-list{width:100%;min-width:0}
#header-wrapper>#page-menu ul#page-list li{min-width:0}
#header-wrapper>#page-menu ul#page-list li a{min-width:0}
#header-slideshow{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-rows:subgrid;min-width:0;min-height:0;position:relative;max-width:none;width:100%;margin:0;padding:0;background:none;border:0;overflow:visible}
#header-slideshow .slide-stage{position:relative;min-height:0;height:auto;aspect-ratio:auto;margin-top:8px;padding:5px;background:rgba(5,23,35,.702);border:1px solid transparent;border-radius:7px;overflow:hidden}
#header-slideshow .slide-stage a{position:absolute;inset:5px;width:auto;height:auto}
#header-slideshow .slide-stage img{object-fit:contain;border-radius:3px}
#header-slideshow figcaption{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
#header-slideshow .slide-controls{position:static;align-self:start;min-height:30px;align-items:flex-start;gap:5px;flex-wrap:nowrap;margin:0;padding:0}
#header-slideshow .slide-controls button{min-width:30px;min-height:30px;padding:3px 7px;font-size:12px;background:rgba(5,23,35,.85);border:1px solid #7da4bb80}
#header-slideshow [hidden]{display:none}

/* One rounded surface avoids seams between the legacy bitmap frame pieces. */
.post{background:rgba(5,23,35,.702);border-radius:7px;overflow:hidden}
.post-top,.post-bottom{display:none}
.post-body{background:none}
.post-title{padding-top:22px}
.post-body{padding-bottom:12px}

@media(max-width:760px){
  body{width:calc(100% - 16px)}
  #header-wrapper{display:block;height:auto;padding-bottom:6px}
  #header-slideshow{display:none}
  #header{width:100%;max-width:none;height:auto;margin:0}
  #header-inner>a{display:block!important;overflow:hidden;margin-top:8px;padding:5px;background:rgba(5,23,35,.55);border:1px solid transparent;border-radius:7px}
  #header picture{display:block;overflow:hidden;border-radius:3px}
  #header img{display:block;width:100%;max-width:100%;height:auto;max-height:none;margin:0}
  .mobile-toolbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:8px;background:#0b2533;border:1px solid #416172;border-radius:6px;box-shadow:0 3px 9px #0004}
  .mobile-toolbar button,.mobile-toolbar a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border:1px solid #6a8b9d;border-radius:5px;color:#fff;background:#173d50;font:inherit;font-size:16px;font-weight:bold;text-decoration:none;cursor:pointer}
  .mobile-toolbar a{background:transparent}
  body.mobile-navigation-ready>#page-menu{display:none}
  #post-area{width:100%;float:none;padding:0;min-width:0}
  .the-content{font-size:15px;line-height:1.55}
  .the-content table{display:block;max-width:100%;overflow-x:auto}
  .post-title h1{font-size:21px;line-height:1.3}
  .static-meta{font-size:13px}
  .pagination a,.post-navigation a{display:inline-block;padding:7px 3px}
  .fb-lightbox button{min-height:44px}
  body.mobile-explorer-open{overflow:hidden}
  .mobile-explorer{position:fixed;inset:0 0 0 auto;width:min(430px,100%);max-width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;margin:0;padding:0;border:0;border-left:1px solid #6a8b9d;background:#071d29;color:#fff;box-sizing:border-box;overflow:hidden}
  .mobile-explorer[open]{display:flex;flex-direction:column}
  .mobile-explorer::backdrop{background:rgba(0,0,0,.7)}
  .mobile-explorer-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;padding:12px 16px;background:#102f40;border-bottom:1px solid #416172}
  .mobile-explorer-header h2{margin:0;font-size:22px;color:#fff}
  .mobile-explorer-header button{min-height:44px;padding:8px 12px;border:1px solid #7fa1b4;border-radius:5px;background:#1b455b;color:white;font:inherit;cursor:pointer}
  .mobile-explorer-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px;padding-bottom:max(24px,env(safe-area-inset-bottom));flex:1 1 auto}
  .mobile-explorer #page-menu{display:block;width:100%;height:auto;min-height:0;margin:0 0 16px}
  .mobile-explorer ul#page-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;float:none}
  .mobile-explorer ul#page-list li{display:block;min-width:0}
  .mobile-explorer ul#page-list li a,.mobile-explorer ul#page-list li a:hover{display:flex;align-items:center;justify-content:center;float:none;width:100%;min-width:0;min-height:44px;height:auto;margin:0;padding:10px;background:#173d50;background-image:none;border:1px solid #456a80;border-radius:5px;font-size:15px;line-height:1.3;color:#fff}
  .mobile-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 0 16px;border-bottom:1px solid #416172}
  .mobile-shortcuts a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px;border:1px solid #456a80;border-radius:5px;color:#d8f4ff;text-align:center;text-decoration:none;font-size:15px;line-height:1.3}
  .mobile-explorer #sidebar-wrapper{display:block;float:none;width:100%;margin:0;overflow:visible}
  .mobile-explorer .sidebar .widget{background-image:none;background-color:#102c3b;margin-top:16px}
  .mobile-explorer .sidebar a{font-size:15px;color:#d8f4ff}
  .mobile-explorer .sidebar a:hover{color:#fff}
  .mobile-explorer .sidebar li{padding-top:8px;padding-bottom:8px}
  .mobile-explorer #keyword-links summary{min-height:40px;line-height:1.6;padding:6px 0}
  .mobile-explorer a:focus-visible,.mobile-explorer button:focus-visible,.mobile-toolbar a:focus-visible,.mobile-toolbar button:focus-visible{outline:3px solid #b8efff;outline-offset:2px}
}