/* r17 shared top bar (website-r17-fix-publish-r1), linked last on every page by assemble_r17.py.
   Fault fixed (Alex 14:18 "the bar on the top is weird"): on phones the sticky bar was see-through (the phone
   stylesheet turns the blur off but keeps the 74-78% see-through colour, so page text showed behind the logo),
   the name wrapped to two lines at 360 px on the main pages, and the bar was 65 px on two pages and 73 px on the rest. */
html body .site-header{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line)}
html body .header-row{min-height:64px;flex-wrap:nowrap;align-items:center;gap:10px;padding-block:8px}
html body .site-header .brand{flex:0 1 auto;min-width:0;flex-wrap:nowrap;white-space:nowrap;gap:9px;font-size:1.05rem}
html body .site-header .brand>span{min-width:0;overflow-wrap:normal}
html body .site-header .brand small{display:none}
html body .header-actions{flex-wrap:nowrap;margin-inline-start:auto;gap:8px;flex:none}
html body .site-header .menu summary,html body .site-header .theme-btn{height:44px;min-height:44px}
/* Review fixes: tagline only where it fits; notch strip inside the bar; 320 px fit. */
html body .site-header{top:0;padding-top:env(safe-area-inset-top,0px)}
@media (min-width:700px){html body .site-header .brand small{display:block}}
@media (min-width:1000px){html body .header-row{min-height:72px}}
@media (min-width:1000px) and (max-width:1179px){html body .site-header .brand small{display:none}}
@media (max-width:359px){
 html body .site-header.band{padding-inline:max(12px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px))}
 html body .header-row{gap:6px}
 html body .site-header .brand{font-size:.9rem;gap:6px}
 html body .site-header .brand svg{width:24px;height:24px}
 html body .header-actions{gap:6px}
 html body .site-header .menu summary{padding-inline:10px;gap:6px}
}
/* Width checks at 320 and 1000-1024 px: the name must never be cut, nothing wider than the screen. */
html body audio{max-width:100%}
@media (min-width:1000px){html body .site-header .brand{flex:none}}
@media (min-width:1000px) and (max-width:1179px){html body .nav a{padding-inline:8px}}
@media (max-width:359px){html body .ba{font-size:.88rem}html body .ba th,html body .ba td{padding:5px 4px}html body .ba tbody th{min-width:5rem}}
