/* ==========================================================
   JCL HOME PAGE
   themes/jcl-theme/assets/css/home.css
   ----------------------------------------------------------
   Generated from the mockup's css/site.css (jcl-mockup.vercel.app):
   only the rules for the home page's sections, scoped to
   .jcl-demo-page. Loaded on the front page instead of pages.css.
   ========================================================== */
@keyframes rise { from { opacity: 0; transform: translate3d(0, 32px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); } }
html .jcl-demo-page { --navy: #052460;
    --navy-dark: #041a4a;
    --red: #da2c38;
    --orange: #ff6b35;
    --lilac: #c8b8db;
    --ink: #0a0a0a;
    --ink-muted: #4d4d4d;
    --ink-soft: #6e6e73;
    --line: rgba(0,0,0,0.08);
    --line-strong: rgba(0,0,0,0.14);
    --surface: #ffffff;
    --surface-alt: #f5f5f7;    
    --surface-warm: #fafafa;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    --shadow-lg: 0 30px 60px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
    --shadow-hover: 0 20px 50px rgba(5,36,96,0.18), 0 6px 16px rgba(0,0,0,0.08);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);       
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 220ms;
    --dur: 420ms;
    --dur-slow: 700ms;
    --font-display: 'Arimo', system-ui, -apple-system, sans-serif;
    --font-brand: 'Comfortaa', 'Arimo', system-ui, sans-serif; }
:where(.jcl-demo-page) *,
:where(.jcl-demo-page) *::before,
:where(.jcl-demo-page) *::after { box-sizing: border-box; margin: 0; padding: 0; }
html .jcl-demo-page { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.jcl-demo-page { font-family: var(--font-display);
    color: var(--ink);
    background: var(--surface);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.01em; }
:where(.jcl-demo-page) img,
:where(.jcl-demo-page) svg { display: block; max-width: 100%; }
:where(.jcl-demo-page) a { color: inherit; text-decoration: none; }
:where(.jcl-demo-page) button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
:where(.jcl-demo-page) ::selection { background: var(--navy); color: #fff; }
:where(.jcl-demo-page) .reveal { opacity: 0; animation: rise 900ms var(--ease) forwards; }
:where(.jcl-demo-page) .reveal.d1 { animation-delay: 100ms; }
:where(.jcl-demo-page) .reveal.d2 { animation-delay: 200ms; }
:where(.jcl-demo-page) .reveal.d3 { animation-delay: 320ms; }
:where(.jcl-demo-page) .reveal.d4 { animation-delay: 440ms; }
:where(.jcl-demo-page) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 24px; height: 44px;
    font-size: 14px; font-weight: 600;
    border-radius: 0;
    transition: transform var(--dur-fast) var(--ease-smooth),
                background var(--dur-fast) var(--ease-smooth),
                box-shadow var(--dur-fast) var(--ease-smooth),
                color var(--dur-fast) var(--ease-smooth);
    letter-spacing: -0.01em;
    white-space: nowrap; }
:where(.jcl-demo-page) .btn-primary { background: var(--navy); color: #fff; }
:where(.jcl-demo-page) .btn-primary:hover { background: var(--navy-dark); transform: translateY(-1px); box-shadow: var(--shadow-hover); }
:where(.jcl-demo-page) .btn-outline { border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface); }
:where(.jcl-demo-page) .btn-outline:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
:where(.jcl-demo-page) .btn-lg { padding: 0 32px; height: 56px; font-size: 16px; }
:where(.jcl-demo-page) .hero { padding: 56px 40px 40px;
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 44px - 110px - 60px - 116px); 
    display: flex;
    align-items: center; }
:where(.jcl-demo-page) .hero-inner { max-width: 1360px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center; }
:where(.jcl-demo-page) .eyebrow { display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 24px; }
:where(.jcl-demo-page) .hero h1,
:where(.jcl-demo-page) .hero .hs-title { font-family: var(--font-brand);
    text-wrap: balance;
    font-weight: 400;
    font-size: clamp(44px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 24px; }
:where(.jcl-demo-page) .hero p.lede { font-size: 18px;
    color: var(--ink-muted);
    max-width: 500px;
    margin-bottom: 32px;
    line-height: 1.5; }
:where(.jcl-demo-page) .hero-cta-row { display: flex; gap: 12px; align-items: center; }
:where(.jcl-demo-page) .explore-strip { padding: 20px 40px;
    background: var(--surface); }
:where(.jcl-demo-page) .explore-inner { max-width: 1360px; margin: 0 auto;
    display: grid;
    grid-template-columns: 200px 1fr 1fr 1fr;
    gap: 0;
    align-items: stretch; }
:where(.jcl-demo-page) .explore-label { display: flex; align-items: center;
    font-size: 14px; font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: 0.08em;
    text-transform: uppercase; }
:where(.jcl-demo-page) .explore-tile { display: flex; align-items: center; justify-content: space-between;
    padding: 22px 24px;
    color: #fff;
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    min-height: 76px; text-decoration: none; }
:where(.jcl-demo-page) .explore-tile::after { content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 900ms var(--ease); }
:where(.jcl-demo-page) .explore-tile:hover { filter: brightness(1.06); }
:where(.jcl-demo-page) .explore-tile:hover::after { transform: translateX(120%); }
:where(.jcl-demo-page) .explore-tile.adults { background: linear-gradient(135deg, #da2c38 0%, #b91c26 100%); }
:where(.jcl-demo-page) .explore-tile.kids { background: linear-gradient(135deg, #c8b8db 0%, #8f77b0 100%); }
:where(.jcl-demo-page) .explore-tile.teens { background: linear-gradient(135deg, #ff6b35 0%, #d94816 100%); }
:where(.jcl-demo-page) .explore-tile .arr { width: 40px; height: 40px;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
:where(.jcl-demo-page) .explore-tile .arr img { width: 22px; height: 22px; }
:where(.jcl-demo-page) .explore-tile:hover .arr { transform: translateX(4px); background: rgba(255,255,255,0.32); }
:where(.jcl-demo-page) .section { padding: 72px 40px; }
:where(.jcl-demo-page) .section-inner { max-width: 1360px; margin: 0 auto; }
:where(.jcl-demo-page) .section-head { text-align: left;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px; }
:where(.jcl-demo-page) .section-head .section-eyebrow { display: none; }
:where(.jcl-demo-page) .section h2 { font-family: var(--font-brand);
    font-weight: 700;
    font-size: clamp(20px, 1.9vw, 24px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--navy); }
:where(.jcl-demo-page) .section-sub { font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    max-width: none;
    margin: 0;
    line-height: 1.4; }
:where(.jcl-demo-page) .books-section { background: var(--surface); }
:where(.jcl-demo-page) .book-grid { display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px; }
:where(.jcl-demo-page) .book-card { background: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    cursor: pointer; }
:where(.jcl-demo-page) .book-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }
:where(.jcl-demo-page) .book-cover { aspect-ratio: 2/3;
    background-size: cover;
    background-position: center;
    background-color: #eee;
    transition: transform var(--dur-slow) var(--ease); }
:where(.jcl-demo-page) .book-card:hover .book-cover { transform: scale(1.05); }
:where(.jcl-demo-page) .book-info { padding: 20px; text-align: left; }
:where(.jcl-demo-page) .book-info .title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
:where(.jcl-demo-page) .book-info .author { font-size: 14px; color: var(--ink-soft); }
:where(.jcl-demo-page) .section-head-with-nav { flex-direction: row;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap; }
:where(.jcl-demo-page) .section-head-with-nav .section-head-text { flex: 1; min-width: 0; }
:where(.jcl-demo-page) .edge-section { padding-left: 0; padding-right: 0; }
:where(.jcl-demo-page) .section-inner-wide { max-width: none; margin: 0; width: 100%; }
:where(.jcl-demo-page) .section-inner-wide .section-head { padding: 0 40px; }
:where(.jcl-demo-page) .branch-grid { display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    text-align: left; }
:where(.jcl-demo-page) .branch-card { position: relative;
    overflow: hidden;
    background: var(--surface);
    transition: transform var(--dur) var(--ease), z-index 0s var(--dur);
    cursor: pointer; }
:where(.jcl-demo-page) .branch-card:hover { z-index: 2; }
:where(.jcl-demo-page) .branch-photo { position: relative;
    height: 380px;
    overflow: hidden; }
:where(.jcl-demo-page) .branch-photo-bg { position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform var(--dur-slow) var(--ease);
    z-index: 0; }
:where(.jcl-demo-page) .branch-card:hover .branch-photo-bg { transform: scale(1.06); }
:where(.jcl-demo-page) .branch-photo::after { content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78) 100%);
    pointer-events: none;
    z-index: 1; }
:where(.jcl-demo-page) .branch-status { position: absolute; top: 18px; left: 18px;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 12px; font-weight: 600; color: var(--ink);
    z-index: 2; }
:where(.jcl-demo-page) .branch-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
:where(.jcl-demo-page) .branch-chips-overlay { position: absolute;
    right: 18px; top: 18px;
    display: flex; gap: 6px;
    z-index: 2; }
:where(.jcl-demo-page) .branch-chips-overlay .chip { padding: 5px 10px;
    background: rgba(255,255,255,0.92);
    color: var(--ink);
    font-size: 12px; font-weight: 600;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); }
:where(.jcl-demo-page) .chip { padding: 4px 10px;
    background: var(--surface-alt);
    font-size: 12px; font-weight: 500;
    color: var(--ink-muted); }
:where(.jcl-demo-page) .branch-overlay { position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 18px 22px 18px;
    color: #fff;
    z-index: 2; }
:where(.jcl-demo-page) .branch-overlay .branch-name { font-family: var(--font-brand);
    font-size: 20px; font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
    line-height: 1.15; }
:where(.jcl-demo-page) .branch-overlay .branch-addr { font-size: 13px;
    color: rgba(255,255,255,0.85);
    line-height: 1.4;
    margin-bottom: 12px; }
:where(.jcl-demo-page) .branch-overlay .branch-cta { padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.32);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.01em; }
:where(.jcl-demo-page) .branch-cta .angle-icon { width: 24px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--dur-fast) var(--ease-smooth); }
:where(.jcl-demo-page) .branch-cta .angle-icon img { width: 100%; height: 100%; filter: brightness(0) invert(1); }
:where(.jcl-demo-page) .branch-card:hover .branch-cta .angle-icon { transform: translateX(4px) translateY(-2px); }
:where(.jcl-demo-page) .services-section { background: var(--surface); }
:where(.jcl-demo-page) .svc-tile-grid { display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    gap: 10px;
    min-height: 300px; }
:where(.jcl-demo-page) .svc-tile { background: var(--surface);
    border: 1px solid var(--line);
    padding: 16px 18px;
    display: flex; flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 140px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-smooth),
                border-color var(--dur-fast) var(--ease-smooth),
                transform var(--dur-fast) var(--ease-smooth); }
:where(.jcl-demo-page) .svc-tile:hover { background: var(--navy);
    border-color: var(--navy);
    transform: translateY(-2px); }
:where(.jcl-demo-page) .svc-tile > img { width: 30px; height: 30px;
    align-self: flex-start;
    transition: filter var(--dur-fast) var(--ease-smooth); }
:where(.jcl-demo-page) .svc-tile:hover > img { filter: brightness(0) invert(1); }
:where(.jcl-demo-page) .svc-tile-title { font-size: 14px; font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--navy);
    transition: color var(--dur-fast) var(--ease-smooth); }
:where(.jcl-demo-page) .svc-tile:hover .svc-tile-title { color: #fff; }
:where(.jcl-demo-page) .svc-tile-sub { font-size: 12px; font-weight: 500;
    line-height: 1.4;
    color: var(--ink-soft);
    margin-top: 3px;
    transition: color var(--dur-fast) var(--ease-smooth); }
:where(.jcl-demo-page) .svc-tile:hover .svc-tile-sub { color: rgba(255,255,255,0.75); }
:where(.jcl-demo-page) .svc-tile-tall { grid-row: span 2; padding: 22px 22px; }
:where(.jcl-demo-page) .svc-tile-tall > img { width: 52px; height: 52px; }
:where(.jcl-demo-page) .svc-tile-wide { grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 20px 22px; }
:where(.jcl-demo-page) .svc-tile-wide > img { width: 48px; height: 48px; align-self: center; }
:where(.jcl-demo-page) .spotlights-section { background: var(--surface); }
:where(.jcl-demo-page) .spot-grid { display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    min-height: 620px; }
:where(.jcl-demo-page) .spot-card { padding: 40px;
    display: flex; flex-direction: column;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: transform var(--dur) var(--ease); }
:where(.jcl-demo-page) .spot-card::before { content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 900ms var(--ease);
    z-index: 0; }
:where(.jcl-demo-page) .spot-card:hover::before { transform: translateX(120%); }
:where(.jcl-demo-page) .spot-card > * { position: relative; z-index: 1; }
:where(.jcl-demo-page) .spot-sunset { background: linear-gradient(135deg, #041a4a 0%, #0a3391 60%, #ff6b35 130%); }
:where(.jcl-demo-page) .spot-orange { background: linear-gradient(135deg, #ff6b35 0%, #d94816 100%); }
:where(.jcl-demo-page) .spot-lilac { background: linear-gradient(135deg, #c8b8db 0%, #8f77b0 100%); }
:where(.jcl-demo-page) .spot-navy { background: linear-gradient(135deg, #052460 0%, #041a4a 100%); }
/* A photo instead of a colour (inc/spotlights.php sets --spot-img): a navy shade, deepest behind the text at the
   bottom, keeps the white text readable on any photo */
:where(.jcl-demo-page) .spot-image { background: linear-gradient(180deg, rgba(4, 26, 74, 0.45) 0%, rgba(4, 26, 74, 0.88) 100%), var(--spot-img) center / cover no-repeat, #041a4a; }
:where(.jcl-demo-page) .spot-image .spot-tag { background: rgba(4, 26, 74, 0.55); }
/* Each card's colour is chosen in wp-admin; its place comes from its Order: 1st tall on the left, 2nd and 3rd
   top right, 4th along the bottom right. With fewer cards the others share the right-hand side */
:where(.jcl-demo-page) .spot-grid > .spot-card:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
:where(.jcl-demo-page) .spot-grid > .spot-card:nth-child(2) { grid-column: 2; grid-row: 1; }
:where(.jcl-demo-page) .spot-grid > .spot-card:nth-child(3) { grid-column: 3; grid-row: 1; }
:where(.jcl-demo-page) .spot-grid > .spot-card:nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }
:where(.jcl-demo-page) .spot-grid.spot-count-1 > .spot-card:nth-child(1) { grid-column: 1 / -1; }
:where(.jcl-demo-page) .spot-grid.spot-count-2 > .spot-card:nth-child(2) { grid-column: 2 / span 2; grid-row: 1 / span 2; }
:where(.jcl-demo-page) .spot-grid.spot-count-3 > .spot-card:nth-child(n+2) { grid-column: 2 / span 2; }
:where(.jcl-demo-page) .spot-grid.spot-count-3 > .spot-card:nth-child(3) { grid-row: 2; }
:where(.jcl-demo-page) .spot-tag { display: inline-block; align-self: flex-start;
    padding: 6px 12px;
    background: rgba(255,255,255,0.16);
    font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 24px; }
:where(.jcl-demo-page) .spot-card h3 { font-family: var(--font-brand);
    font-weight: 500;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 14px; }
:where(.jcl-demo-page) .spot-grid > .spot-card:first-child h3 { font-size: clamp(36px, 3.6vw, 52px); }
:where(.jcl-demo-page) .spot-card p { font-size: 15px;
    color: rgba(255,255,255,0.85);
    line-height: 1.55;
    margin-bottom: auto;
    max-width: 420px; }
:where(.jcl-demo-page) .spot-link { display: inline-flex; align-items: center; gap: 12px;
    margin-top: 28px;
    font-size: 14px; font-weight: 600;
    color: #fff;
    transition: gap var(--dur-fast) var(--ease-smooth); }
:where(.jcl-demo-page) .spot-link img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
:where(.jcl-demo-page) .spot-card:hover .spot-link { gap: 16px; }
:where(.jcl-demo-page) .impact-strip { background: var(--navy);
    color: #fff;
    padding: 0; }
:where(.jcl-demo-page) .impact-inner { display: grid;
    grid-template-columns: repeat(4, 1fr); }
:where(.jcl-demo-page) .impact-item { padding: 56px 40px;
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: background var(--dur) var(--ease);
    cursor: default; }
:where(.jcl-demo-page) .impact-item:last-child { border-right: none; }
:where(.jcl-demo-page) .impact-item:hover { background: var(--navy-dark); }
:where(.jcl-demo-page) .impact-num { font-family: var(--font-brand);
    font-weight: 700;
    font-size: clamp(40px, 4.4vw, 56px);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 12px; }
:where(.jcl-demo-page) .impact-label { font-size: 14px;
    color: rgba(255,255,255,0.72);
    letter-spacing: 0.01em; }
@media (max-width: 1100px) {
  :where(.jcl-demo-page) .hero-inner { grid-template-columns: 1fr; gap: 60px; }
  :where(.jcl-demo-page) .book-grid { grid-template-columns: repeat(3, 1fr); }
  :where(.jcl-demo-page) .branch-grid { grid-template-columns: repeat(2, 1fr); }
  :where(.jcl-demo-page) .svc-tile-grid { grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; }
  :where(.jcl-demo-page) .svc-tile-tall { grid-row: auto; }
  :where(.jcl-demo-page) .svc-tile-wide { grid-column: span 2; }
  :where(.jcl-demo-page) .explore-inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :where(.jcl-demo-page) .section { padding: 80px 20px; }
  :where(.jcl-demo-page) .hero { padding: 80px 20px 60px; }
  :where(.jcl-demo-page) .book-grid { grid-template-columns: repeat(2, 1fr); }
  :where(.jcl-demo-page) .branch-grid { grid-template-columns: 1fr; }
  :where(.jcl-demo-page) .svc-tile-grid { grid-template-columns: repeat(2, 1fr); }
  :where(.jcl-demo-page) .svc-tile { min-height: 110px; padding: 12px 14px; }
  :where(.jcl-demo-page) .svc-tile-wide { grid-column: span 2; flex-direction: row; }
}
@media (max-width: 720px) {
  .jcl-demo-page { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.jcl-demo-page) *,
  :where(.jcl-demo-page) *::before,
  :where(.jcl-demo-page) *::after { animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important; }
}
html[data-theme="dark"] .jcl-demo-page { --ink: #E4E6EB;
    --ink-muted: #B0B3B8;
    --ink-soft: #8A8D91;
    --surface: #18191A;
    --surface-alt: #242526;
    --surface-warm: #1E1F20;
    --line: rgba(255,255,255,0.10);
    --line-strong: rgba(255,255,255,0.16);
    --navy-dark: #0a3a8e;
    color-scheme: dark; }
html[data-theme="dark"] .jcl-demo-page { background: var(--surface);
    color: var(--ink); }
html[data-theme="dark"] :where(.jcl-demo-page) .services-section,
html[data-theme="dark"] :where(.jcl-demo-page) .books-section,
html[data-theme="dark"] :where(.jcl-demo-page) .impact-strip,
html[data-theme="dark"] :where(.jcl-demo-page) .hero { background: var(--surface);
    color: var(--ink); }
html[data-theme="dark"] :where(.jcl-demo-page) .svc-tile,
html[data-theme="dark"] :where(.jcl-demo-page) .book-card,
html[data-theme="dark"] :where(.jcl-demo-page) .branch-card { background: var(--surface-alt);
    border-color: var(--line);
    color: var(--ink); }
html[data-theme="dark"] :where(.jcl-demo-page) .svc-tile:hover,
html[data-theme="dark"] :where(.jcl-demo-page) .svc-tile:hover .svc-tile-title,
html[data-theme="dark"] :where(.jcl-demo-page) .svc-tile:hover .svc-tile-sub { color: #fff; }
html[data-theme="dark"] :where(.jcl-demo-page) .svc-tile-title { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-demo-page) .svc-tile-sub { color: var(--ink-muted); }
html[data-theme="dark"] :where(.jcl-demo-page) .btn-outline { background: transparent; color: var(--ink); border-color: rgba(255,255,255,0.24); }
html[data-theme="dark"] :where(.jcl-demo-page) .btn-outline:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.4); }
html[data-theme="dark"] :where(.jcl-demo-page) .section-eyebrow { color: var(--orange); }
html[data-theme="dark"] :where(.jcl-demo-page) h1,
html[data-theme="dark"] :where(.jcl-demo-page) h2,
html[data-theme="dark"] :where(.jcl-demo-page) h3,
html[data-theme="dark"] :where(.jcl-demo-page) h4 { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-demo-page) .lede,
html[data-theme="dark"] :where(.jcl-demo-page) .section-sub,
html[data-theme="dark"] :where(.jcl-demo-page) p { color: var(--ink-muted); }
html[data-theme="dark"] :where(.jcl-demo-page) a { color: inherit; }
html[data-theme="dark"] :where(.jcl-demo-page) .svc-tile img,
html[data-theme="dark"] :where(.jcl-demo-page) .angle-icon img,
html[data-theme="dark"] :where(.jcl-demo-page) .arr img,
html[data-theme="dark"] :where(.jcl-demo-page) img[src*="vector-arrow"],
html[data-theme="dark"] :where(.jcl-demo-page) img[src*="service-"] { filter: brightness(0) invert(0.88); }
html[data-theme="dark"] :where(.jcl-demo-page) .svc-tile:hover img { filter: brightness(0) invert(1); }
html[data-theme="dark"] :where(.jcl-demo-page) .svc-tile-title,
html[data-theme="dark"] :where(.jcl-demo-page) .svc-tile-sub,
html[data-theme="dark"] :where(.jcl-demo-page) a { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-demo-page) .svc-tile-sub,
html[data-theme="dark"] :where(.jcl-demo-page) p { color: var(--ink-muted); }
html[data-theme="dark"] :where(.jcl-demo-page) .hero h1,
html[data-theme="dark"] :where(.jcl-demo-page) .hero h2,
html[data-theme="dark"] :where(.jcl-demo-page) .section-eyebrow,
html[data-theme="dark"] :where(.jcl-demo-page) .eyebrow { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-demo-page) input[type="text"],
html[data-theme="dark"] :where(.jcl-demo-page) input[type="email"],
html[data-theme="dark"] :where(.jcl-demo-page) input[type="search"] { background: var(--surface-alt); color: var(--ink); border-color: var(--line-strong); }
html[data-theme="dark"] :where(.jcl-demo-page) input::placeholder { color: var(--ink-soft); }
html[data-theme="dark"] :where(.jcl-demo-page) [style*="color: var(--navy)"] { color: var(--ink) !important; }
html[data-theme="dark"] :where(.jcl-demo-page) [style*="color:#052460"] { color: var(--ink) !important; }
html[data-theme="dark"] :where(.jcl-demo-page) [style*="color: #052460"] { color: var(--ink) !important; }
html[data-theme="dark"] :where(.jcl-demo-page) img[src*="search.svg"],
html[data-theme="dark"] :where(.jcl-demo-page) img[src*="vector-arrow"],
html[data-theme="dark"] :where(.jcl-demo-page) img[src*="service-"],
html[data-theme="dark"] :where(.jcl-demo-page) img[src*="facebook.svg"],
html[data-theme="dark"] :where(.jcl-demo-page) img[src*="instagram.svg"],
html[data-theme="dark"] :where(.jcl-demo-page) img[src*="youtube.svg"],
html[data-theme="dark"] :where(.jcl-demo-page) img[src*="link.svg"] { filter: brightness(0) invert(0.88); }
html[data-theme="dark"] :where(.jcl-demo-page) .explore-strip { background: var(--surface); }
html[data-theme="dark"] :where(.jcl-demo-page) .explore-tile { color: #fff; }
html[data-theme="dark"] :where(.jcl-demo-page) .impact-strip { background: var(--surface-alt); border-top-color: var(--line); border-bottom-color: var(--line); }
html[data-theme="dark"] :where(.jcl-demo-page) .btn-primary { background: var(--navy); color: #fff; }
html[data-theme="dark"] :where(.jcl-demo-page) .branch-name,
html[data-theme="dark"] :where(.jcl-demo-page) .book-info .title,
html[data-theme="dark"] :where(.jcl-demo-page) .book-info .author,
html[data-theme="dark"] :where(.jcl-demo-page) .spot-card h3,
html[data-theme="dark"] :where(.jcl-demo-page) .spot-tag { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-demo-page) .branch-chips-overlay .chip { background: rgba(0,0,0,0.72);
    color: #fff; }
html[data-theme="dark"] :where(.jcl-demo-page) .branch-status { background: rgba(0,0,0,0.72);
    color: #fff; }
html[data-theme="dark"] :where(.jcl-demo-page) .chip { background: var(--surface-alt); color: var(--ink); }
:where(.jcl-demo-page) :focus-visible { outline: 3px solid #f5a623; outline-offset: 2px; }
:where(.jcl-demo-page) .hero { min-height: 0; padding-top: 48px; padding-bottom: 48px; }
:where(.jcl-demo-page) .hero-cta-row { flex-wrap: wrap; }
:where(.jcl-demo-page) .mc-dow { font-size: 12px; font-weight: 700; color: var(--ink-muted); text-align: center; text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 2px; align-self: end; }
:where(.jcl-demo-page) .mc-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: var(--surface-alt); min-height: 42px;
    font-size: 14px; font-weight: 600; color: var(--ink);
    transition: background var(--dur-fast) var(--ease-smooth); }
:where(.jcl-demo-page) a.mc-day:hover { background: #e7ebf3; }
:where(.jcl-demo-page) .mc-day.mc-mute { background: transparent; color: var(--ink-soft); font-weight: 400; }
:where(.jcl-demo-page) .mc-day.mc-today { background: var(--navy); color: #fff; }
:where(.jcl-demo-page) .mc-dots { display: flex; gap: 3px; min-height: 6px; }
:where(.jcl-demo-page) .mc-dots i { width: 6px; height: 6px; border-radius: 50%; display: block; }
:where(.jcl-demo-page) .mc-day.mc-today .mc-dots i { box-shadow: 0 0 0 1.5px #fff; }
:where(.jcl-demo-page) .book-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
:where(.jcl-demo-page) .book-card { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center;
    padding: 12px; border: 1px solid var(--line); box-shadow: none; color: inherit; }
:where(.jcl-demo-page) .book-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
:where(.jcl-demo-page) .book-cover { width: 88px; aspect-ratio: 2/3; box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
:where(.jcl-demo-page) .book-card:hover .book-cover { transform: none; }
:where(.jcl-demo-page) .book-info { padding: 0; min-width: 0; }
:where(.jcl-demo-page) .book-info .title { font-size: 16px; line-height: 1.25; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:where(.jcl-demo-page) .book-info .author { font-size: 14px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.jcl-demo-page) .book-cta { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--navy); }
:where(.jcl-demo-page) .book-card:hover .book-cta { color: var(--red); }
@media (max-width: 1240px) {
  :where(.jcl-demo-page) .book-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) and (min-width: 721px) {
  :where(.jcl-demo-page) .book-grid { grid-template-columns: repeat(2, 1fr); }
}
:where(.jcl-demo-page) a.branch-card { display: block; color: inherit; }
:where(.jcl-demo-page) .branch-status { font-size: 13px; }
:where(.jcl-demo-page) .branch-chips-overlay { left: 18px; right: auto; top: 58px; }
:where(.jcl-demo-page) .chip.chip-special { background: var(--orange) !important; color: #fff !important; font-weight: 700; font-size: 13px; }
:where(.jcl-demo-page) .branch-overlay .branch-addr { font-size: 14px; color: rgba(255,255,255,0.92); }
:where(.jcl-demo-page) .branch-overlay .branch-cta { font-size: 14px; }
:where(.jcl-demo-page) .carousel-dots { display: none; }
html[data-a11yw-contrast="light"] .jcl-demo-page { --ink: #000; --ink-muted: #000; --ink-soft: #1a1a1a;
    --line: rgba(0,0,0,0.55); --line-strong: #000;
    --surface: #fff; --surface-alt: #fff; --surface-warm: #fff;
    --navy: #00175a; --red: #b00012; }
html[data-a11yw-contrast="light"][data-theme="dark"] .jcl-demo-page { --ink: #fff; --ink-muted: #fff; --ink-soft: #f0f0f0;
    --line: rgba(255,255,255,0.6); --line-strong: #fff;
    --surface: #000; --surface-alt: #000; --surface-warm: #000; }
html[data-a11yw-contrast="light"] :where(.jcl-demo-page) .hero,
html[data-a11yw-contrast="light"] :where(.jcl-demo-page) .section { background: var(--surface) !important; }
html[data-a11yw-contrast="light"] :where(.jcl-demo-page) .book-card,
html[data-a11yw-contrast="light"] :where(.jcl-demo-page) .svc-tile { border: 2px solid var(--ink) !important; box-shadow: none !important; }
html[data-a11yw-contrast="light"] :where(.jcl-demo-page) .mc-day { border: 1px solid var(--ink); }
html[data-a11yw-contrast="light"] :where(.jcl-demo-page) .branch-photo::after { background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.92) 100%); }
html[data-a11yw-contrast="light"] :where(.jcl-demo-page) .branch-status,
html[data-a11yw-contrast="light"] :where(.jcl-demo-page) .branch-chips-overlay .chip { background: #000 !important; color: #fff !important; border: 1px solid #fff; }
html[data-a11yw-contrast="light"] :where(.jcl-demo-page) .btn-outline { border: 2px solid var(--ink); }
@media (max-width: 720px) {
  :where(.jcl-demo-page) .hero { padding: 40px 20px 40px; }
  :where(.jcl-demo-page) .hero-cta-row .btn { flex: 1 1 100%; }
  :where(.jcl-demo-page) .mc-day { min-height: 38px; font-size: 13px; }
  :where(.jcl-demo-page) .book-grid,
  :where(.jcl-demo-page) .branch-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
        gap: 12px; scrollbar-width: none; -ms-overflow-style: none; }
  :where(.jcl-demo-page) .book-grid::-webkit-scrollbar,
  :where(.jcl-demo-page) .branch-grid::-webkit-scrollbar { display: none; }
  :where(.jcl-demo-page) .book-card { flex: 0 0 86%; scroll-snap-align: center; }
  :where(.jcl-demo-page) .branch-grid { padding: 0 20px; scroll-padding: 0 20px; }
  :where(.jcl-demo-page) .branch-card { flex: 0 0 88%; scroll-snap-align: center; }
  :where(.jcl-demo-page) .branch-photo { height: 300px; }
  :where(.jcl-demo-page) .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
  :where(.jcl-demo-page) .carousel-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: width var(--dur) var(--ease), background var(--dur) var(--ease); }
  :where(.jcl-demo-page) .carousel-dots span.is-active { width: 24px; border-radius: 4px; background: var(--navy); }
}
html[data-theme="dark"] :where(.jcl-demo-page) a.mc-day:hover { background: #303233; }
html[data-theme="dark"] :where(.jcl-demo-page) .book-cta { color: #9db5ef; }
@media (max-width: 720px) {
  :where(.jcl-demo-page) .section-inner-wide .section-head { padding: 0 20px; }
}
@media (max-width: 720px) {
  :where(.jcl-demo-page) .impact-inner { grid-template-columns: repeat(2, 1fr); }
  :where(.jcl-demo-page) .impact-item { padding: 28px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
  :where(.jcl-demo-page) .spot-grid { grid-template-columns: 1fr !important; grid-template-rows: none !important; }
  :where(.jcl-demo-page) .spot-grid > * { grid-column: auto !important; grid-row: auto !important; min-height: 0 !important; }
}
:where(.jcl-demo-page) a.explore-tile,
:where(.jcl-demo-page) a.spot-card { text-decoration: none; }
:where(.jcl-demo-page) .hero-art { position: relative; height: 440px; }
:where(.jcl-demo-page) .hero-art .ha-shape { position: absolute; }
:where(.jcl-demo-page) .ha-circle { right: 4%; top: 0; width: 300px; height: 300px; border-radius: 50%; background: linear-gradient(145deg, #ffb08f 0%, #ff6b35 60%, #d94816 100%); }
:where(.jcl-demo-page) .ha-block { left: 0; bottom: 0; width: 46%; height: 52%; background: linear-gradient(135deg, #c8b8db 0%, #8f77b0 100%); }
:where(.jcl-demo-page) .ha-photo { position: absolute; background: linear-gradient(135deg, #0a3391, #041a4a) center/cover no-repeat; box-shadow: var(--shadow-lg); }
/* One photo per slide, framed by the orange circle (top right) and the lilac block (bottom left) */
:where(.jcl-demo-page) .ha-main { left: 7%; right: 9%; top: 40px; bottom: 32px; }
:where(.jcl-demo-page) .ha-block { width: 34%; height: 46%; }
:where(.jcl-demo-page) .ha-chip { position: absolute; left: 14%; top: 18px; display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--surface); box-shadow: var(--shadow-md); z-index: 2; }
:where(.jcl-demo-page) .ha-chip b { font-family: var(--font-brand); font-size: 34px; line-height: 1; color: var(--orange); }
:where(.jcl-demo-page) .ha-chip span { font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--navy); }
html[data-theme="dark"] :where(.jcl-demo-page) .ha-chip span { color: var(--ink); }
@media (max-width: 1100px) {
  :where(.jcl-demo-page) .hero-art { height: 380px; max-width: 640px; }
}
@media (max-width: 720px) {
  :where(.jcl-demo-page) .hero-art { height: 270px; }
  :where(.jcl-demo-page) .ha-circle { width: 170px; height: 170px; }
  :where(.jcl-demo-page) .ha-main { top: 28px; bottom: 20px; left: 5%; right: 6%; }
  :where(.jcl-demo-page) .ha-chip { padding: 8px 12px; left: 4%; top: 8px; }
  :where(.jcl-demo-page) .ha-chip b { font-size: 24px; }
  :where(.jcl-demo-page) .ha-chip span { font-size: 12px; }
}
/* Hero slider (inc/hero-slider.php, home.js): the slides share one grid cell, so the hero is as tall as its tallest
   slide and never jumps; the current one fades in. Dots at the bottom centre, no arrows. */
:where(.jcl-demo-page) .hero-slider { flex-direction: column; justify-content: center; }
:where(.jcl-demo-page) .hs-track { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
:where(.jcl-demo-page) .hs-slide > * { min-width: 0; }
:where(.jcl-demo-page) .hs-slide { grid-area: 1 / 1; visibility: hidden; opacity: 0;
    transition: opacity 600ms var(--ease-smooth), visibility 0s linear 600ms; }
:where(.jcl-demo-page) .hs-slide.is-active { visibility: visible; opacity: 1; z-index: 1;
    transition: opacity 600ms var(--ease-smooth), visibility 0s; }
:where(.jcl-demo-page) .hs-slide .hero-art { transform: translateX(16px); transition: transform 800ms var(--ease-smooth); }
:where(.jcl-demo-page) .hs-slide.is-active .hero-art { transform: none; }
:where(.jcl-demo-page) .hs-dots { display: flex; justify-content: center; gap: 4px; margin-top: 28px; position: relative; z-index: 2; }
:where(.jcl-demo-page) .hs-dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center; }
:where(.jcl-demo-page) .hs-dot::before { content: ''; width: 10px; height: 10px; border-radius: 5px; background: var(--line-strong);
    transition: width var(--dur) var(--ease), background var(--dur) var(--ease); }
:where(.jcl-demo-page) .hs-dot:hover::before { background: var(--ink-soft); }
:where(.jcl-demo-page) .hs-dot[aria-current="true"]::before { width: 28px; background: var(--navy); }
:where(.jcl-demo-page) .hs-dot[aria-current="true"] { width: 40px; }
html[data-theme="dark"] :where(.jcl-demo-page) .hs-dot::before { background: rgba(255,255,255,0.3); }
html[data-theme="dark"] :where(.jcl-demo-page) .hs-dot[aria-current="true"]::before { background: #8fb3ff; }
html[data-a11yw-contrast="light"] :where(.jcl-demo-page) .hs-dot::before { border: 1px solid var(--ink); }
html[data-a11yw-motion] :where(.jcl-demo-page) .hs-slide,
html[data-a11yw-motion] :where(.jcl-demo-page) .hs-slide .hero-art { transition: none; transform: none; }
@media (max-width: 720px) {
  :where(.jcl-demo-page) .hs-dots { margin-top: 20px; }
}
:where(.jcl-demo-page) .book-row + .book-row { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
:where(.jcl-demo-page) .book-row-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
:where(.jcl-demo-page) .book-row-hd h3 { font-family: var(--font-brand); font-size: 17px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 10px; }
:where(.jcl-demo-page) .book-row-hd h3::before { content: ''; width: 14px; height: 3px; background: var(--orange); }
:where(.jcl-demo-page) .book-row:nth-child(4n+3) .book-row-hd h3::before { background: var(--red); }
:where(.jcl-demo-page) .book-row:nth-child(4n) .book-row-hd h3::before { background: #8f77b0; }
:where(.jcl-demo-page) .book-row:nth-child(4n+1) .book-row-hd h3::before { background: var(--navy); }
:where(.jcl-demo-page) .book-row-hd a,
:where(.jcl-demo-page) .books-section .link-arrow { font-family: var(--font-brand); font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }
:where(.jcl-demo-page) .book-row-hd a:hover { color: var(--red); }
html[data-theme="dark"] :where(.jcl-demo-page) .book-row-hd h3,
html[data-theme="dark"] :where(.jcl-demo-page) .book-row-hd a { color: var(--ink); }
@media (max-width: 1240px) and (min-width: 721px) {
  :where(.jcl-demo-page) .book-row .book-card:nth-child(n+5) { display: none; }
  :where(.jcl-demo-page) .book-row .book-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) and (min-width: 721px) {
  :where(.jcl-demo-page) .book-row .book-card:nth-child(n+4) { display: none; }
  :where(.jcl-demo-page) .book-row .book-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  :where(.jcl-demo-page) .book-row .carousel-dots { margin-top: 10px; }
  :where(.jcl-demo-page) .book-row + .book-row { margin-top: 20px; padding-top: 18px; }
}
:where(.jcl-demo-page) .link-arrow { font-family: var(--font-brand); font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }
:where(.jcl-demo-page) .link-arrow:hover { color: var(--red); }
html[data-theme="dark"] :where(.jcl-demo-page) .link-arrow { color: var(--ink) !important; }
/* Branch cards: live status, filled in by chrome.js; a red dot while the branch is closed */
:where(.jcl-demo-page) .branch-status:empty { display: none; }
:where(.jcl-demo-page) .branch-status.is-closed::before { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.22); }
/* Readability (WCAG AA): text on the coloured spotlight cards stays light in dark mode, the featured
   agenda row's small text is a step lighter, and the calendar's "Today" tag is a light peach on navy */
html[data-theme="dark"] :where(.jcl-demo-page) .spot-card p { color: rgba(255,255,255,0.85); }
/* Brand colours where text sits on them (WCAG AA, both themes; same shades as pages.css): deeper orange
   behind white text, dark purple text on lilac, slightly darker red text on the pale red pills */
:where(.jcl-demo-page) .explore-tile.teens,
:where(.jcl-demo-page) .spot-orange { background: linear-gradient(135deg, #d93a00 0%, #b5300a 100%); }
:where(.jcl-demo-page) .chip.chip-special { background: #d93a00 !important; }
:where(.jcl-demo-page) .spot-lilac :is(h3, p, .spot-tag, .spot-link, .spot-link span),
:where(.jcl-demo-page) .explore-tile.kids span,
html[data-theme="dark"] :where(.jcl-demo-page) .spot-lilac :is(h3, p, .spot-tag, .spot-link, .spot-link span),
html[data-theme="dark"] :where(.jcl-demo-page) .explore-tile.kids span { color: #1d0f38; }
:where(.jcl-demo-page) .spot-lilac .spot-link img,
:where(.jcl-demo-page) .explore-tile.kids .arr img { filter: brightness(0); opacity: 0.85; }
/* Text on the orange spotlight card and Teens tile is solid white in both themes (pale tints fall below 4.5:1) */
:where(.jcl-demo-page) .spot-orange :is(h3, p, .spot-tag, .spot-link span),
html[data-theme="dark"] :where(.jcl-demo-page) .spot-orange :is(h3, p, .spot-tag, .spot-link span),
html[data-theme="dark"] :where(.jcl-demo-page) .explore-tile.teens span { color: #fff; }
:where(.jcl-demo-page) .spot-orange .spot-tag { background: rgba(0, 0, 0, 0.16); }
/* Newest Reads: a shelf holds all its catalog books; five show at a time (three, then two on smaller
   screens) and the rest scroll sideways, with ‹ › arrows next to "See all" (home.js). Phones keep the swipe carousel. */
:where(.jcl-demo-page) .book-row-tools { display: flex; align-items: center; gap: 12px; }
:where(.jcl-demo-page) .book-nav { width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth); }
:where(.jcl-demo-page) .book-nav:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
:where(.jcl-demo-page) .book-nav:disabled { opacity: 0.4; cursor: default; }
:where(.jcl-demo-page) .book-nav:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
html[data-theme="dark"] :where(.jcl-demo-page) .book-nav:focus-visible { outline-color: #8fb3ff; }
@media (min-width: 721px) {
  :where(.jcl-demo-page) .book-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5);
      overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
      padding: 6px 2px 10px; margin: -6px -2px -10px; }
  :where(.jcl-demo-page) .book-grid::-webkit-scrollbar { display: none; }
  :where(.jcl-demo-page) .book-card { scroll-snap-align: start; }
}
@media (min-width: 721px) and (max-width: 1240px) {
  :where(.jcl-demo-page) .book-grid { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
}
@media (min-width: 721px) and (max-width: 1100px) {
  :where(.jcl-demo-page) .book-grid { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 720px) {
  :where(.jcl-demo-page) .book-nav { display: none; }
}
html[data-theme="dark"] :where(.jcl-demo-page) .svc-tile:hover { background: #2a4f9e; border-color: #2a4f9e; }
html[data-theme="dark"] :where(.jcl-demo-page) .svc-tile:hover .svc-tile-title { color: #fff; }
html[data-theme="dark"] :where(.jcl-demo-page) .btn-primary:hover { background: #1d4ea8; border-color: #1d4ea8; color: #fff; }
/* Library Stats strip (inc/library-stats.php): fewer than 4 stats share the width */
@media (min-width: 721px) {
  :where(.jcl-demo-page) .impact-inner.stat-count-1 { grid-template-columns: 1fr; }
  :where(.jcl-demo-page) .impact-inner.stat-count-2 { grid-template-columns: repeat(2, 1fr); }
  :where(.jcl-demo-page) .impact-inner.stat-count-3 { grid-template-columns: repeat(3, 1fr); }
}