/* Brand books (js/flipbook.js). Each book is designed in its own brand:
   .fb--gics  Goethe International Charter School, the 2026 look: navy, gold,
              bright blue, Oswald + Roboto, the logo's rainbow ring as a stripe.
   .fb--cas   CAS Building Specialists: black, charcoal and yellow, Jost,
              hazard stripes and the "///" mark.
   Everything inside a page is sized in cqi (a percent of the page width)
   so the same page works as a small shelf cover and as a full-size page. */

.fb--gics {
  --fb-dark: #051B4B; --fb-ink: #2a3350; --fb-head: #051B4B; --fb-muted: #8a90a3;
  --fb-accent: #0A9BE6; --fb-accent-dark: #FEC20C;
  --fb-pill: #FEC20C; --fb-pill-ink: #051B4B; --fb-num: #051B4B; --fb-num-ink: #fff;
  --fb-tag-before: #e7e9ef; --fb-red: #C8102E;
  --fb-font-head: Oswald, "Arial Narrow", sans-serif; --fb-font-body: Roboto, Arial, sans-serif;
  --fb-head-weight: 700;
}
.fb--cas {
  --fb-dark: #111111; --fb-ink: #333333; --fb-head: #1b1b1b; --fb-muted: #8c8c8c;
  --fb-accent: #1b1b1b; --fb-accent-dark: #FFC20E;
  --fb-pill: #FFC20E; --fb-pill-ink: #111; --fb-num: transparent; --fb-num-ink: #1b1b1b;
  --fb-tag-before: #e6e6e6; --fb-red: #111;
  /* the same fonts as gocasgo.com: Jost headlines, Nunito Sans subtitles and body */
  --fb-font-head: Jost, "Century Gothic", sans-serif; --fb-font-body: "Nunito Sans", Arial, sans-serif;
  --fb-head-weight: 500;
}

/* ── Shelf: the closed covers on the home page ── */
.brand-books .services-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.fb-shelf { display: flex; justify-content: center; gap: clamp(1rem, 5vw, 4.5rem); max-width: 980px; margin: 0 auto; }
.fb-shelf-item { width: min(300px, calc(50% - 0.5rem)); text-align: center; }
.fb-shelf-book {
  all: unset; box-sizing: border-box; display: block; position: relative; width: 100%; aspect-ratio: 3 / 4;
  cursor: pointer; border-radius: 3px 8px 8px 3px; overflow: hidden;
  box-shadow: 6px 6px 0 -2px #fff, 7px 7px 0 -2px #d9d4cc, 14px 20px 34px rgba(0, 0, 0, .18);
  transition: transform .35s ease, box-shadow .35s ease;
}
.fb-shelf-book .fb-face { position: absolute; inset: 0; container-type: inline-size; overflow: hidden; }
.fb-shelf-book::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.08) 3%, rgba(0,0,0,0) 7%); }
.fb-shelf-book:hover, .fb-shelf-book:focus-visible { transform: translateY(-6px) rotate(-1.2deg); }
.fb-shelf-book:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 6px; }
.fb-shelf-client { margin: 1.4rem 0 0.3rem; font-family: var(--font-title); font-weight: 600; font-size: clamp(0.95rem, 2vw, 1.1rem); line-height: 1.3; }
.fb-shelf-caption { margin: 0; color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.5; }
.fb-shelf-open { all: unset; cursor: pointer; margin-top: 0.7rem; font-size: 0.85rem; font-weight: 600; color: var(--color-accent-text, var(--color-accent));
  border-bottom: 1px solid currentColor; padding-bottom: 1px; }
@media (max-width: 520px) { .fb-shelf-caption { font-size: 0.82rem; } }

/* ── Reader: the open book, full screen ── */
html.fb-open { overflow: hidden; }
.fb-reader { position: fixed; inset: 0; z-index: 1000; background: #0e0e0e; display: flex; overflow: hidden; }
.fb-reader[hidden] { display: none; }
.fb-close { position: absolute; top: 14px; right: 16px; z-index: 5; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #d6d2cb; background: #fff; font-size: 26px; line-height: 1; cursor: pointer; color: #111; }
.fb-close:hover { background: var(--color-accent, #ff5c39); border-color: var(--color-accent, #ff5c39); color: #111; }
.fb-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: safe center; padding: 56px 16px 20px; min-width: 0; overflow-y: auto; }
.fb-stage > * { flex: none; }
.fb-book { position: relative; width: calc(var(--pw) * 2); height: var(--ph); perspective: 2800px;
  transition: transform .9s cubic-bezier(.645, .045, .355, 1); }
.fb-book.is-mobile { width: var(--pw); }
.fb-sheet { position: absolute; top: 0; left: 50%; width: var(--pw); height: var(--ph); transform-origin: left center;
  transform-style: preserve-3d; cursor: pointer; transition: transform .9s cubic-bezier(.645, .045, .355, 1); }
.fb-book.is-mobile .fb-sheet { left: 0; transition: transform .8s cubic-bezier(.645, .045, .355, 1), opacity .15s; }
.fb-sheet.is-flipped { transform: rotateY(-180deg); }
.fb-book.is-mobile .fb-sheet.is-flipped { opacity: 0; transition: transform .8s cubic-bezier(.645, .045, .355, 1), opacity .25s .55s; }
.fb-sheet .fb-face { position: absolute; inset: 0; container-type: inline-size; overflow: hidden; background: #fff;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 14px 30px rgba(0, 0, 0, .14); }
.fb-sheet .fb-back-face { transform: rotateY(180deg); }
.fb-sheet .fb-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.fb-book:not(.is-mobile) .fb-front::after { background: linear-gradient(90deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px); } /* a thin line at the center fold, no shadow */
.fb-book:not(.is-mobile) .fb-back-face::after { background: linear-gradient(270deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px); }
.fb-controls { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.fb-controls button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #d6d2cb; background: #fff; color: #111;
  font-size: 20px; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.fb-controls button:hover:not(:disabled) { background: var(--color-accent, #ff5c39); border-color: var(--color-accent, #ff5c39); color: #111; }
.fb-controls button:disabled { opacity: .3; cursor: default; }
.fb-where { min-width: 130px; text-align: center; font: 600 .78rem/1 var(--font-body, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.fb-hint { margin: 10px 0 0; font-size: .8rem; color: rgba(255, 255, 255, .5); text-align: center; }
.fb-lightbox { position: fixed; inset: 0; z-index: 10; background: rgba(8, 12, 24, .88); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.fb-lightbox[hidden] { display: none; }
.fb-lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
@media (prefers-reduced-motion: reduce) { .fb-book, .fb-sheet { transition: none !important; } }

/* ── Pages ── */
.fb-page { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 9cqi 7cqi 4cqi;
  font-family: var(--fb-font-body); color: var(--fb-ink); background: #fff; text-align: left; }
.fb-stripe { position: absolute; left: 0; right: 0; top: 0; height: 1.6cqi; display: flex; }
.fb-stripe i { flex: 1; }
.fb--gics .fb-stripe i:nth-child(1) { background: #4B0E8C; } .fb--gics .fb-stripe i:nth-child(2) { background: #C8102E; }
.fb--gics .fb-stripe i:nth-child(3) { background: #F26A0F; } .fb--gics .fb-stripe i:nth-child(4) { background: #FDC20C; }
.fb--gics .fb-stripe i:nth-child(5) { background: #0B7A2A; } .fb--gics .fb-stripe i:nth-child(6) { background: #08A7F0; }
.fb--cas .fb-stripe { height: 2.2cqi; background: repeating-linear-gradient(-45deg, #FFC20E 0 2.2cqi, #111 2.2cqi 4.4cqi); }
.fb-head { flex: none; }
.fb-pill { display: inline-block; background: var(--fb-pill); color: var(--fb-pill-ink); font: 600 2.5cqi/1 var(--fb-font-head);
  letter-spacing: .14em; text-transform: uppercase; padding: 1.1cqi 2.6cqi; border-radius: 99px; margin-bottom: 2.6cqi; }
.fb-pill--red { background: var(--fb-red); color: #fff; }
.fb--cas .fb-pill { border-radius: 0; }
.fb-title-row { display: flex; align-items: center; gap: 2.6cqi; }
.fb-num { flex: none; width: 8cqi; height: 8cqi; border-radius: 50%; background: var(--fb-num); color: var(--fb-num-ink);
  display: grid; place-items: center; font: 700 3.8cqi/1 var(--fb-font-head); }
.fb--cas .fb-num { width: auto; height: auto; border-radius: 0; font-size: 4.2cqi; display: flex; align-items: baseline; white-space: nowrap; }
.fb--cas .fb-num::before { content: "///"; color: #FFC20E; margin-right: 1.2cqi; letter-spacing: -.1em; }
.fb-h { margin: 0; font: var(--fb-head-weight) 8cqi/1.04 var(--fb-font-head); text-transform: uppercase; color: var(--fb-head); letter-spacing: .01em; }
.fb--cas .fb-h { font-size: 7.6cqi; letter-spacing: 0; }
.fb-accent { color: var(--fb-accent); }
.fb--cas .fb-page:not(.is-dark) .fb-accent { box-shadow: inset 0 -.32em 0 #FFC20E; }
.fb-text { margin: 2.4cqi 0 0; font-size: 3.5cqi; line-height: 1.45; }
.fb-folio { flex: none; display: flex; justify-content: space-between; margin-top: 3.5cqi;
  font: 500 2.2cqi/1 var(--fb-font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--fb-muted); }
.fb-back-face .fb-folio { flex-direction: row-reverse; }

/* images */
.fb-media { flex: 1; min-height: 0; display: grid; gap: 3cqi; margin-top: 4.5cqi; }
.fb-shot { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqi; }
.fb-shot img { display: block; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; border-radius: 1.4cqi;
  box-shadow: 0 1cqi 3cqi rgba(0, 0, 0, .18); cursor: zoom-in; background: #fff; }
.fb-shot.is-tagged img { max-height: calc(100% - 5.5cqi); }
.fb-shot.is-photo img { border: 1cqi solid #fff; border-radius: .6cqi; box-shadow: 0 1.4cqi 3.4cqi rgba(0, 0, 0, .26); }
/* photos sit straight (her call): white border, no tilt */
.fb--cas .fb-shot img { border-radius: 0; }
.fb-tag { flex: none; font: 600 2.3cqi/1 var(--fb-font-head); letter-spacing: .14em; text-transform: uppercase; padding: .9cqi 2.2cqi; border-radius: 99px; text-decoration: none; }
.fb-tag--before { background: var(--fb-tag-before); color: var(--fb-head); }
.fb-tag--after, .fb-tag--link { background: var(--fb-pill); color: var(--fb-pill-ink); }
.fb--cas .fb-tag { border-radius: 0; }
/* a row of same-size photos, lined up straight with their labels underneath */
.fb-media--fan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqi; align-items: start; align-content: center; }
.fb-media--fan .fb-shot { justify-content: flex-start; }
.fb-media--fan .fb-shot img, .fb-media--fan .fb-shot.is-tagged img { width: 100%; max-height: none; aspect-ratio: 3 / 4; object-fit: cover; }

/* list pages (my role, the legwork) */
.fb-list { list-style: none; margin: 5cqi 0 0; padding: 0; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqi; align-content: start; }
.fb-list li { background: #fff; border-radius: 1.6cqi; padding: 2.6cqi 3cqi; border-left: 1.3cqi solid var(--fb-pill);
  box-shadow: 0 .8cqi 2.6cqi rgba(0, 0, 0, .1); display: flex; gap: 2.4cqi; align-items: flex-start; }
.fb-list li:nth-child(3n+2) { border-left-color: var(--fb-accent); }
.fb-list li:nth-child(3n) { border-left-color: var(--fb-red); }
.fb-list b { display: block; font: 600 3.4cqi/1.15 var(--fb-font-head); text-transform: uppercase; color: var(--fb-head); letter-spacing: .02em; }
.fb-list div > span { display: block; margin-top: .9cqi; font-size: 2.9cqi; line-height: 1.35; }
.fb-list.is-numbered { grid-template-columns: 1fr; gap: 3.4cqi; margin-top: 6cqi; }
.fb-list.is-numbered li { padding: 3.4cqi 3.6cqi; }
.fb-list.is-numbered b { font-size: 3.6cqi; }
.fb-list.is-numbered div > span { font-size: 3.3cqi; }
.fb-list .fb-num { width: 9cqi; height: 9cqi; font-size: 4.4cqi; }
.fb--cas .fb-list li { border-radius: 0; border-left-color: #FFC20E; }
/* CAS list numbers: just the number, no box and no "///" (her call: too much here) */
.fb--cas .fb-list .fb-num { width: auto; height: auto; background: none; color: #1b1b1b; font-size: 3.9cqi; font-weight: 500; line-height: 1.1; }
.fb--cas .fb-list .fb-num::before { content: none; }

/* audit page: a checklist card */
.fb-audit { flex: none; margin-top: 4cqi; background: #fff; border-radius: 2cqi; padding: 3.4cqi 4cqi 1.6cqi;
  box-shadow: 0 1cqi 3.4cqi rgba(0, 0, 0, .12); display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.4cqi; align-content: start; }
.fb-audit-stage { grid-column: 1 / -1; margin: 0 0 1.6cqi; font: 600 2.5cqi/1 var(--fb-font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--fb-muted); }
.fb-audit-row { display: flex; align-items: flex-start; gap: 2.2cqi; padding: 2.4cqi 0; border-top: 1px solid #eceef2; }
.fb-audit-tick { flex: none; width: 5.6cqi; height: 5.6cqi; border-radius: 50%; background: var(--fb-pill); color: var(--fb-pill-ink); display: grid; place-items: center; }
.fb-audit-tick svg { width: 3.4cqi; height: 3.4cqi; }
.fb-audit-row b { display: block; font: 600 3.1cqi/1.15 var(--fb-font-head); text-transform: uppercase; letter-spacing: .02em; color: var(--fb-head); }
.fb-audit-row div > span { display: block; margin-top: .7cqi; font-size: 2.7cqi; line-height: 1.3; }
.fb--cas .fb-audit { border-radius: 0; }

/* dark pages */
.fb-page.is-dark { background: var(--fb-dark); color: #dfe3ec; }
.fb--gics .fb-page.is-dark { background: #051B4B url(../assets/brand-books/world-map.png) center 58% / 150% auto no-repeat; color: #dfe6f5; }
.fb--cas .fb-page.is-dark { background: #111 repeating-linear-gradient(-45deg, rgba(255,194,14,.05) 0 3cqi, transparent 3cqi 6cqi); }
.fb-page.is-dark .fb-h { color: #fff; }
.fb-page.is-dark .fb-accent { color: var(--fb-accent-dark); }
.fb-page.is-dark .fb-folio { color: rgba(255, 255, 255, .45); }
.fb-page.is-dark .fb-num { background: var(--fb-accent-dark); color: var(--fb-dark); }
.fb--cas .fb-page.is-dark .fb-num { background: none; color: #fff; }

/* system page (logos, colors, type) */
.fb-system { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4cqi; margin-top: 5cqi; }
.fb-system h4 { margin: 0 0 2cqi; font: 600 2.4cqi/1 var(--fb-font-head); letter-spacing: .16em; color: var(--fb-accent-dark); text-transform: uppercase; }
.fb-logos { display: flex; gap: 4cqi; align-items: center; }
.fb-logos img { height: 19cqi; width: 19cqi; display: block; cursor: zoom-in; }
.fb-logos img.on-white { background: #fff; border-radius: 50%; padding: 1cqi; }
.fb-logos img.is-wide { width: 60cqi; height: auto; }
.fb-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4cqi; }
.fb-sw { border-radius: 1.6cqi; overflow: hidden; background: #fff; box-shadow: 0 1cqi 3cqi rgba(0, 0, 0, .25); }
.fb-sw i { display: block; height: 11cqi; border-bottom: 1px solid rgba(0,0,0,.08); }
.fb-sw b { display: block; padding: 1.4cqi 1.6cqi; font: 500 2.2cqi/1.2 var(--fb-font-body); color: #222; }
.fb-sw .ring { background: conic-gradient(#C8102E 0 60deg, #F26A0F 0 120deg, #FDC20C 0 180deg, #0B7A2A 0 240deg, #08A7F0 0 300deg, #4B0E8C 0); }
.fb--cas .fb-sw { border-radius: 0; }
.fb-type { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqi; }
.fb-type > div { background: #fff; border-radius: 1.6cqi; padding: 2.6cqi 3cqi; color: var(--fb-head); border-left: 1.4cqi solid var(--fb-accent-dark); }
.fb-type > div + div { border-left-color: var(--fb-accent); }
.fb-type-big { font: 700 7cqi/1 var(--fb-font-head); text-transform: uppercase; }
.fb-type-note { font: 400 3cqi/1.3 var(--fb-font-body); margin-top: 1cqi; color: var(--fb-ink); }

/* results page */
.fb-results { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqi; margin-top: 5cqi; align-content: start; }
.fb-stat { background: #fff; border-radius: 1.8cqi; padding: 3cqi 3.2cqi; border-left: 1.4cqi solid var(--fb-accent-dark); color: var(--fb-ink); }
.fb-stat:nth-child(2) { border-left-color: #0A9BE6; } .fb-stat:nth-child(3) { border-left-color: #C8102E; } .fb-stat:nth-child(4) { border-left-color: #0B7A2A; }
.fb-stat b { display: block; font: 700 7.4cqi/1 var(--fb-font-head); color: var(--fb-head); }
.fb-stat span { display: block; margin-top: 1.4cqi; font-size: 2.9cqi; line-height: 1.35; }

/* ── Covers ── */
.fb-cover { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 11cqi 8cqi 9cqi; color: #fff;
  font-family: var(--fb-font-body); text-align: left; background: var(--fb-dark); }
.fb--gics .fb-cover { background: #051B4B url(../assets/brand-books/world-map.png) center 62% / 165% auto no-repeat; }
.fb-cover .fb-stripe { top: auto; bottom: 0; height: 2.4cqi; }
.fb-cover-logo { width: 21cqi; height: 21cqi; border-radius: 50%; background: #fff; padding: 1.2cqi; margin-bottom: auto; box-shadow: 0 1cqi 4cqi rgba(0, 0, 0, .3); }
.fb-cover-logo img { width: 100%; height: 100%; display: block; }
.fb-cover-kicker { margin: 0 0 3cqi; font: 700 3.6cqi/1.25 var(--fb-font-head); letter-spacing: .06em; color: #0A9BE6; text-transform: uppercase; }
.fb-cover-title { margin: 0; font: 700 15cqi/.95 var(--fb-font-head); text-transform: uppercase; color: #fff; }
.fb-cover-title span { display: block; color: var(--fb-accent-dark); font-size: 18.5cqi; }
.fb-cover-tagline { margin: 5cqi 0 0; font: 500 2.9cqi/1.3 var(--fb-font-body); letter-spacing: .24em; color: #0A9BE6; text-transform: uppercase; }
.fb-cover-by { margin: 7cqi 0 0; font: 400 3.2cqi/1.4 var(--fb-font-body); color: rgba(255, 255, 255, .72); }
.fb-cover-by b { color: #fff; font-weight: 500; }
/* CAS cover: black, with the brochure's offset yellow block */
.fb--cas .fb-cover { background: #111; overflow: hidden; }
.fb--cas .fb-cover::before { content: ""; position: absolute; right: -6cqi; top: 0; width: 36cqi; height: 62cqi; background: #FFC20E; }
.fb--cas .fb-cover > * { position: relative; }
.fb--cas .fb-cover .fb-stripe { position: absolute; height: 3.2cqi; }
.fb--cas .fb-cover-logo { width: 52cqi; height: auto; border-radius: 0; background: none; padding: 0; box-shadow: none; }
.fb--cas .fb-cover-logo img { height: auto; }
.fb--cas .fb-cover-kicker { color: #FFC20E; letter-spacing: .1em; font-weight: 600; }
.fb--cas .fb-cover-title { font-weight: 500; font-size: 14cqi; line-height: 1; }
.fb--cas .fb-cover-title span { font-size: 15.5cqi; }
.fb--cas .fb-cover-tagline { color: rgba(255, 255, 255, .8); letter-spacing: .16em; font-weight: 300; }
.fb--cas .fb-type-big { font-size: 5.8cqi; font-weight: 500; }
/* back covers */
.fb-back { align-items: center; justify-content: center; text-align: center; }
.fb-back .fb-cover-logo { margin: 0 0 7cqi; width: 26cqi; height: 26cqi; }
.fb--cas .fb-back .fb-cover-logo { width: 56cqi; height: auto; }
.fb-back-title { margin: 0; font: 700 9cqi/1.04 var(--fb-font-head); text-transform: uppercase; color: #fff; }
.fb-back-title .fb-accent { color: var(--fb-accent-dark); }
.fb-back-sub { margin: 4cqi 0 0; font-size: 3.4cqi; color: rgba(255, 255, 255, .72); }
.fb-back-cta { margin-top: 7cqi; display: inline-block; background: var(--fb-pill); color: var(--fb-pill-ink); text-decoration: none;
  font: 600 3cqi/1 var(--fb-font-head); letter-spacing: .14em; text-transform: uppercase; padding: 2.6cqi 5cqi; border-radius: 99px; }
.fb--cas .fb-back-cta { border-radius: 0; }

/* Open book, wide screens: the pages use almost the whole window. The arrows
   sit on the left and right edges and the page label is small at the bottom. */
@media (min-width: 760px) {
  .fb-stage { padding: 22px 68px 36px; }
  .fb-controls { position: absolute; inset: 0; margin: 0; pointer-events: none; }
  .fb-controls button { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; pointer-events: auto; z-index: 3; box-shadow: 0 6px 18px rgba(0, 0, 0, .1); }
  .fb-controls .fb-prev { left: 10px; }
  .fb-controls .fb-next { right: 10px; }
  .fb-where { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); min-width: 0; }
  .fb-hint { display: none; }
}

/* ── Modern reader (2026-10-21): smoother turn, a soft shadow that sweeps
   across the turning page, rounded outer corners, glass buttons, and a thin
   progress bar. The CAS book opens on its brand yellow. ── */
.fb-sheet { transition: transform .85s cubic-bezier(.65, .05, .25, 1); }
.fb-book.is-mobile .fb-sheet { transition: transform .75s cubic-bezier(.65, .05, .25, 1), opacity .15s; }
.fb-book:not(.is-mobile) .fb-front { border-radius: 0 8px 8px 0; }
.fb-book:not(.is-mobile) .fb-back-face { border-radius: 8px 0 0 8px; }
.fb-book.is-mobile .fb-face { border-radius: 8px; }
.fb-sheet .fb-face { box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.fb-sheet .fb-face::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .06) 45%, rgba(255, 255, 255, .12) 70%, rgba(0, 0, 0, 0)); }
.fb-sheet .fb-back-face::before { background: linear-gradient(270deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .06) 45%, rgba(255, 255, 255, .12) 70%, rgba(0, 0, 0, 0)); }
.fb-sheet.is-turning .fb-face::before { animation: none; } /* no sweeping shadow (her call: looked weird) */
@keyframes fb-shade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

/* glass buttons */
.fb-controls button, .fb-close {
  background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: none; font-size: 18px;
}
.fb-controls button:hover:not(:disabled), .fb-close:hover { background: var(--color-accent, #ff5c39); border-color: var(--color-accent, #ff5c39); color: #111; }

/* progress bar */
.fb-progress { width: 180px; height: 3px; margin: 14px auto 0; border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.fb-progress i { display: block; height: 100%; width: 0; background: var(--color-accent, #ff5c39); border-radius: inherit; transition: width .6s ease; }
@media (min-width: 760px) {
  .fb-progress { position: absolute; left: 50%; bottom: 14px; margin: 0; transform: translateX(-50%); }
  .fb-where { bottom: 26px; }
  .fb-stage { padding: 30px 110px 64px; }
  .fb-controls .fb-prev { left: 28px; }
  .fb-controls .fb-next { right: 28px; }
}

/* CAS opens on its brand yellow, with dark controls */
.fb-reader.fb--cas { background: #FFC20E; }
.fb--cas .fb-controls button, .fb--cas .fb-close { background: rgba(17, 17, 17, .9); color: #fff; border-color: #111; }
.fb--cas .fb-controls button:hover:not(:disabled), .fb--cas .fb-close:hover { background: #fff; border-color: #fff; color: #111; }
.fb--cas .fb-where { color: rgba(0, 0, 0, .7); }
.fb--cas .fb-hint { color: rgba(0, 0, 0, .55); }
.fb--cas .fb-progress { background: rgba(0, 0, 0, .15); }
.fb--cas .fb-progress i { background: #111; }
.fb--cas .fb-sheet .fb-face { box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }

/* No shadow on the pages themselves (a turning page's shadow fell across the
   middle of the book). One steady shadow sits behind the open spread instead. */
.fb-sheet .fb-face, .fb--cas .fb-sheet .fb-face { box-shadow: none; }
.fb-sheet .fb-face::before { content: none; }
.fb-book::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35); pointer-events: none; transition: left .85s cubic-bezier(.65, .05, .25, 1), right .85s cubic-bezier(.65, .05, .25, 1); }
.fb--cas .fb-book::before { box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.fb-book.at-front::before { left: 50%; }   /* closed: only the cover shows */
.fb-book.at-back::before { right: 50%; }   /* back cover only */
.fb-book.is-mobile::before { left: 0; right: 0; }