/* shared.css — one-site front end (Outback Servo Tales + Outback Critters). Mobile-first, no build step. */
:root{--sand:#f5ecdc;--dirt:#c8622a;--ochre:#d9962b;--ink:#46281a;--sky:#bcd6e6;--card:#fffaf1;--muted:#7a5a48;--radius:20px;--max:1100px;
 --font:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--sand);color:var(--ink);line-height:1.5}
a{color:var(--dirt)}
.os-wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.os-hidden{display:none!important}

/* (a) series switcher — canonical series-bar block, copied verbatim from banjo-books site/range */
/* series-bar: canonical style (owner: banjo-books site/range). Copy verbatim; current site = aria-current="page" (class="current" also works). */
.series-bar{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:8px 12px;background:#46281a;line-height:1.2}
.series-bar a{font:700 .9rem/1.2 ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,sans-serif;color:#f5ecdc;text-decoration:none;border:2px solid #f5ecdc66;border-radius:999px;padding:5px 14px;white-space:nowrap}
.series-bar a:hover,.series-bar a:focus-visible{border-color:#f5ecdc;outline:none}
.series-bar a[aria-current=page],.series-bar a.current{background:#c8622a;border-color:#c8622a;color:#fff}
@media(max-width:520px){.series-bar{gap:6px;padding:7px 10px}.series-bar a{font-size:.82rem;padding:4px 12px}}

/* (d) slim order bar (top of every page, under the series bar) */
.os-orderbar{display:flex;justify-content:center;align-items:center;gap:10px;padding:6px 12px;background:var(--card);border-bottom:1px solid #46281a1a;font-size:.88rem}
.os-orderbar a{font-weight:700;text-decoration:none;color:var(--dirt);border:2px solid var(--dirt);border-radius:999px;padding:3px 14px;white-space:nowrap}
.os-orderbar a:hover,.os-orderbar a:focus-visible{background:var(--dirt);color:#fff;outline:none}
.os-btn{display:inline-block;font:700 1rem/1.2 var(--font);text-decoration:none;background:var(--dirt);color:#fff;border:0;border-radius:999px;padding:11px 22px;cursor:pointer}
.os-btn.alt{background:var(--card);color:var(--dirt);box-shadow:inset 0 0 0 3px var(--dirt)}
.os-btn:hover,.os-btn:focus-visible{filter:brightness(1.07);outline:3px solid var(--sky);outline-offset:2px}

/* (c) header: sky hero with an 8px orange line at the bottom, no orange band */
.os-hero{background:linear-gradient(var(--sky),#e8eef0);border-bottom:8px solid var(--dirt);padding:28px 16px 26px;text-align:center}
.os-hero small{display:block;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--dirt);font-size:.78rem}
.os-hero h1{margin:.2em 0 .15em;font-size:clamp(1.8rem,7vw,3.2rem);line-height:1.1}
.os-hero p{margin:.3em auto 0;max-width:640px}
.os-hero .os-credit{font-weight:700;font-size:.95rem}
@media(min-width:720px){.os-hero{padding:40px 20px 36px}}

/* (b) edition switcher — same pill look as the range site's edtabs; scrolls sideways on phones */
.os-editions{max-width:var(--max);margin:0 auto;padding:16px 16px 2px}
.os-editions small{display:block;font-weight:700;opacity:.75;margin:0 0 6px 2px}
.os-editions nav{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 2px 8px;scrollbar-width:thin}
.os-editions a,.os-editions span.os-soon{flex:0 0 auto;scroll-snap-align:start;font:700 .95rem/1.2 var(--font);border:3px solid var(--dirt);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 16px;white-space:nowrap;text-decoration:none}
.os-editions a[aria-current=page]{background:var(--dirt);color:#fff}
.os-editions a:hover,.os-editions a:focus-visible{background:var(--sand);outline:none}
.os-editions a[aria-current=page]:hover{background:var(--dirt)}
.os-editions span.os-soon{opacity:.45;border-style:dashed;cursor:default}
@media(min-width:720px){.os-editions nav{flex-wrap:wrap;overflow:visible}}

/* chooser: two big series buttons */
.os-series-pick{display:grid;gap:12px;max-width:var(--max);margin:18px auto 0;padding:0 16px}
.os-series-pick a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);background:var(--card);border-radius:var(--radius);padding:18px 20px;box-shadow:0 6px 20px #0001;border-top:6px solid var(--dirt)}
.os-series-pick a:nth-child(2){border-top-color:var(--ochre)}
.os-series-pick b{font-size:1.35rem}
.os-series-pick span{color:var(--muted);font-weight:700}
.os-series-pick a:hover,.os-series-pick a:focus-visible{transform:translateY(-2px);outline:3px solid var(--sky)}
@media(min-width:720px){.os-series-pick{grid-template-columns:1fr 1fr}}

/* 2. shelf: cover grid */
.os-shelf{max-width:var(--max);margin:0 auto;padding:18px 16px 30px}
.os-shelf h2{margin:.2em 0 0}
.os-count{margin:0 0 12px;color:var(--muted);font-weight:700}
.os-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:620px){.os-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.os-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.os-book{margin:0;background:var(--card);border-radius:16px;overflow:hidden;box-shadow:0 4px 14px #0001;cursor:pointer;display:flex;flex-direction:column}
.os-book img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#e8dcc6}
.os-book figcaption{padding:8px 10px 12px;font-weight:700;font-size:.92rem;line-height:1.3}
.os-book:hover,.os-book:focus-visible{outline:3px solid var(--dirt);outline-offset:2px}
.os-book.os-locked{cursor:default}
.os-book.os-locked img{filter:grayscale(.5) brightness(.95)}
.os-book.os-locked:hover{outline:none}
.os-book .os-tag{display:inline-block;margin-top:6px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;background:var(--sand);color:var(--muted);border-radius:999px;padding:2px 10px}

/* 3. cover strip (chooser home) */
.os-strips{max-width:var(--max);margin:0 auto;padding:10px 16px 24px}
.os-strip{margin:18px 0 0}
.os-strip-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 2px 6px}
.os-strip-head h3{margin:0;font-size:1.05rem}
.os-strip-head a{font-weight:700;font-size:.9rem;white-space:nowrap}
.os-strip-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:2px 2px 10px;scrollbar-width:thin}
.os-strip-row a{flex:0 0 auto;width:150px;scroll-snap-align:start;border-radius:12px;overflow:hidden;box-shadow:0 3px 10px #0001;background:var(--card)}
.os-strip-row img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media(min-width:720px){.os-strip-row a{width:190px}}

.os-cta{text-align:center;padding:8px 16px 30px}

/* (e) footer */
.os-footer{background:var(--ink);color:var(--sand);text-align:center;padding:22px 16px 28px;font-size:.9rem}
.os-footer a{color:#f5ecdc}
.os-footer .os-orderbar{background:transparent;border:0;padding:0 0 10px}
.os-footer .os-orderbar a{color:#fff;border-color:var(--ochre)}
.os-footer p{margin:.4em 0}

/* reader (from the range site) */
#reader{position:fixed;inset:0;z-index:50;background:rgba(30,18,10,.985);backdrop-filter:blur(6px);display:none;flex-direction:column;align-items:center;justify-content:center}
#reader.open{display:flex}
#rtop{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;color:#f5ecdc}
#rtop b{font-size:1.05rem}
#rclose{background:none;border:2px solid #f5ecdc66;color:#f5ecdc;border-radius:99px;width:42px;height:42px;font-size:1.4rem;cursor:pointer}
#rstage{width:min(96vw,calc((100vh - 130px)*2.667));height:calc(100vh - 130px);display:flex;align-items:center;justify-content:center}
#book{margin:auto}
.pg{background:#fbf6ec;overflow:hidden}
.pg img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;pointer-events:none}
.pg.end{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink);padding:20px}
#rbar{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:18px;align-items:center;padding:12px;color:#f5ecdc}
#rbar button{background:var(--dirt);color:#fff;border:0;border-radius:99px;width:48px;height:48px;font-size:1.5rem;cursor:pointer}
#rcount{min-width:110px;text-align:center;font-variant-numeric:tabular-nums}
@media(max-width:720px){#rstage{width:94vw;height:calc(100vh - 130px)}}
#applb{position:fixed;inset:0;z-index:9999;background:rgba(20,14,10,.94);display:none;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
#applb.open{display:flex}
#applb img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
#applb.long{align-items:flex-start;overflow:auto}
#applb.long img{max-height:none;width:min(100%,900px)}
#applbx{position:fixed;top:12px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.4);color:#fff;font-size:22px;cursor:pointer}
.appzoom{display:none;margin-left:10px;padding:9px 16px;border-radius:999px;border:0;background:#2f4a39;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.appzoom.show{display:inline-block}
#rbar .appzoom{width:auto;height:44px;padding:0 18px;border-radius:99px;background:#2f4a39;font-size:1rem}
@media(max-width:700px){#rbar .appzoom.show{position:absolute;bottom:72px;left:50%;transform:translateX(-50%)}}
.os-series-pick a.os-dim{opacity:.55;pointer-events:none}
.os-count-inline{display:block;font-size:.85rem;color:var(--muted)}
@media(min-width:720px){.os-count-inline{display:inline;margin-left:8px}}