/* The site's header and one-row footer around the comic (/play/slice/ and /play/slice/ep1; docs/decisions.md GC-13).
   Same look as the focused header and footer of /signup/ (panelab.css values, copied: the comic loads its own styles).
   The header stays on top while the page scrolls (sticky) and hides only in full screen; the reader keeps its own bar
   (SLICE!, the episode title, Full screen). Owner, 2026-10-21: sticky header; "Log in" next to "Become a member". */
@font-face{font-family:Lexend;src:url('/assets/fonts/lexend-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}

.site-bar{position:sticky;top:0;z-index:10;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));background:#fff;border-bottom:1px solid #d3d3cf;font:600 15px/1.2 Lexend,system-ui,sans-serif;color:#141414}
.site-bar__logo{display:inline-flex;align-items:center;min-height:44px;border-radius:6px}
.site-bar__logo img{display:block;width:auto;height:26px}
.site-bar__cta{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:10px;background:#141414;color:#fff;text-decoration:none;white-space:nowrap}
.site-bar__cta:hover{background:#2e2e2e}
.site-bar__end{display:flex;align-items:center;gap:12px}
.site-bar__login{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:#141414;text-decoration:none;white-space:nowrap}
.site-bar__login:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.site-bar__logo{flex-shrink:0}
/* "Become a member" on wide screens, "Join" below 1024 px: the same labels and breakpoint as the site header (panelab.css) */
.site-bar__short{display:none}
@media (max-width:1023px){.site-bar__long{display:none}.site-bar__short{display:inline}}
/* frames and the resume point scroll to just below the sticky header, not under it */
html{scroll-padding-top:calc(64px + env(safe-area-inset-top))}
html:has(body.expanded){scroll-padding-top:0}
.site-bar a:focus-visible,.site-foot a:focus-visible{outline:3px solid #2c4fd0;outline-offset:3px}

/* the reader fills the screen under the header (story-v2.css gives it 100dvh) */
body:not(.expanded) #comic-reader:not([data-mode=scroll]){height:calc(100vh - 56px - env(safe-area-inset-top));height:calc(100dvh - 56px - env(safe-area-inset-top))}
body:not(.expanded) #comic-reader .reader-bar{padding-top:12px}

.site-foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 20px;padding:20px max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border-top:1px solid #d3d3cf;background:#fff;color:#3f3f3c;font:400 14px/1.5 Lexend,system-ui,sans-serif}
.site-foot a{display:inline-flex;align-items:center;min-height:44px;color:#141414;text-underline-offset:3px}

body.expanded .site-bar,body.expanded .site-foot{display:none}