/* Step 1: desktop sidebar only — weathered old leather-bound book binding */
@media (min-width:751px){
  .topbar{
    background:
      radial-gradient(ellipse at 17% 10%,rgba(205,145,73,.13),transparent 17%),
      radial-gradient(ellipse at 72% 28%,rgba(0,0,0,.34),transparent 28%),
      radial-gradient(ellipse at 32% 67%,rgba(159,95,40,.12),transparent 23%),
      radial-gradient(ellipse at 88% 86%,rgba(0,0,0,.38),transparent 20%),
      repeating-radial-gradient(ellipse at 35% 45%,rgba(225,174,100,.035) 0 1px,rgba(22,9,3,.055) 1px 3px,transparent 3px 7px),
      repeating-linear-gradient(103deg,rgba(238,186,111,.025) 0 1px,transparent 1px 6px),
      linear-gradient(100deg,#120703 0%,#2b1308 12%,#180a04 28%,#32170a 51%,#160904 77%,#281006 100%);
    border:2px solid #6f491f;
    border-left:12px solid #100502;
    border-radius:11px 4px 4px 11px;
    box-shadow:
      inset 5px 0 0 #4a2610,
      inset 9px 0 0 #160803,
      inset 15px 0 15px rgba(0,0,0,.82),
      inset -8px 0 14px rgba(0,0,0,.7),
      inset 0 0 0 2px #100603,
      inset 0 0 0 4px #755024,
      inset 0 0 0 6px #211006,
      inset 0 0 34px rgba(0,0,0,.5),
      0 15px 42px #000;
    overflow:visible;
  }
  /* worn gilded inner cover frame */
  .topbar .tomeBrand,.topbar nav,.sidebarRune{position:relative;z-index:2}
  .topbar .tomeBrand:before{
    content:"";position:absolute;inset:-11px -7px -5px;pointer-events:none;
    border:1px solid rgba(176,126,51,.52);border-radius:2px;
    box-shadow:inset 0 0 0 2px rgba(31,14,5,.8),inset 0 0 0 3px rgba(131,88,34,.24);
    clip-path:polygon(0 0,38% 0,40% 2px,63% 0,100% 0,100% 100%,72% 100%,70% calc(100% - 2px),27% 100%,0 100%);
  }
  .topbar:before{
    content:"";position:absolute;left:-15px;top:2%;bottom:2%;width:26px;transform:none;border-radius:12px;
    background:
      repeating-linear-gradient(0deg,transparent 0 18px,rgba(218,151,72,.07) 19px,transparent 20px 38px),
      linear-gradient(90deg,#0b0301,#2d1408 20%,#5b3116 44%,#2b1107 69%,#0a0301);
    border:1px solid #68451f;
    box-shadow:inset 4px 0 7px #050201,inset -4px 0 7px #050201,3px 0 8px rgba(0,0,0,.85);
  }
  /* raised, battered spine bands */
  .topbar:after{
    content:"";position:absolute;left:-20px;top:0;bottom:0;width:36px;transform:none;pointer-events:none;
    background:
      linear-gradient(#120602 0%,#5b3217 17%,#2a1107 42%,#7a4520 52%,#291006 69%,#0c0402 100%) 0 8%/100% 58px no-repeat,
      linear-gradient(#120602 0%,#5b3217 17%,#2a1107 42%,#7a4520 52%,#291006 69%,#0c0402 100%) 0 29%/100% 58px no-repeat,
      linear-gradient(#120602 0%,#5b3217 17%,#2a1107 42%,#7a4520 52%,#291006 69%,#0c0402 100%) 0 50%/100% 58px no-repeat,
      linear-gradient(#120602 0%,#5b3217 17%,#2a1107 42%,#7a4520 52%,#291006 69%,#0c0402 100%) 0 71%/100% 58px no-repeat,
      linear-gradient(#120602 0%,#5b3217 17%,#2a1107 42%,#7a4520 52%,#291006 69%,#0c0402 100%) 0 92%/100% 58px no-repeat;
    filter:drop-shadow(3px 3px 3px #000);
    opacity:.96;
  }
  .tomeBrand{border-bottom:1px solid rgba(145,98,39,.72);box-shadow:0 1px #100603;padding-left:8px;padding-right:8px}
  .topbar nav{padding:10px 4px;border-top:1px solid rgba(205,153,69,.16);border-bottom:1px solid rgba(116,72,27,.52)}
  .nav{border-left:2px solid transparent;text-shadow:0 1px 1px #000}
  .nav:hover{background:linear-gradient(90deg,rgba(110,62,24,.3),rgba(13,6,3,.28));border-color:#69451f}
  .nav.active{background:linear-gradient(90deg,rgba(5,24,42,.94),rgba(13,12,10,.84));border-color:#2d8fff;border-left-color:#79c7ff;box-shadow:0 0 12px rgba(23,125,255,.58),inset 4px 0 10px rgba(23,125,255,.15)}
  .sidebarRune{color:#65baff;text-shadow:0 0 9px #177dff}
}