:root{--shelf-ink:#173e35;--shelf-paper:#faf7ee;--shelf-gold:#d9b66f;--shelf-muted:#626e64}
.brand-mark{display:inline-flex!important;width:48px!important;height:48px!important;background:none!important;border:0!important;padding:0!important;flex-shrink:0}.brand-mark img{width:100%;height:100%}
.shelf-footer{background:var(--shelf-ink);color:var(--shelf-paper);padding:54px max(24px,6vw) 22px;margin-top:auto;flex-shrink:0}.footer-main{max-width:1280px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px}.footer-brand{display:flex;align-items:center;gap:14px;font:500 24px Fraunces,Georgia,serif;color:inherit;text-decoration:none}.footer-brand img{width:62px;height:62px}.footer-intro p{max-width:36ch;color:#e0e5d8;line-height:1.7}.shelf-footer nav h2{font-size:15px;font-weight:600;margin:8px 0 18px;color:var(--shelf-gold)}.shelf-footer nav a{display:block;width:fit-content;color:var(--shelf-paper);text-decoration:none;margin:12px 0;font-size:14px}.shelf-footer a:hover{text-decoration:underline}.footer-bottom{max-width:1280px;margin:32px auto 0;padding-top:20px;border-top:1px solid #ffffff30;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#e0e5d8}.footer-bottom a{color:inherit}
.info-page{max-width:840px;margin:0 auto;padding:64px 24px 0}.info-page h1{font:400 clamp(36px,6vw,60px)/1.1 Fraunces,Georgia,serif;margin:0 0 24px}.info-page h2{font:500 26px/1.25 Fraunces,Georgia,serif;margin:36px 0 12px}.info-page p,.info-page li{font-size:16px;line-height:1.8;max-width:72ch}.info-page a{color:#175d49;text-underline-offset:3px}.info-page .lede{font-size:20px;color:#526257}.info-page .updated{font-size:13px;color:#626e64}.info-page details{border-bottom:1px solid #ccc7b8;padding:20px 0}.info-page summary{cursor:pointer;font-weight:600;font-size:18px}.info-page details p{margin-bottom:0}.info-page button,.account-panel button{padding:12px 18px;background:#173e35;color:#fff;border:0;font:inherit;cursor:pointer}.info-page button:disabled{opacity:.55;cursor:wait}
.share-panel{max-width:640px;margin:20px auto;padding:20px;background:#f5f0df;border:1px solid #ccc2a7}.share-panel label{display:block;font-size:14px;margin-bottom:8px}.share-panel input{width:100%;box-sizing:border-box;padding:12px;background:white;border:1px solid #7b897d;font:inherit}.share-panel button{margin-top:12px;padding:8px 12px}.share-panel p{font-size:14px;line-height:1.5}.account-panel{max-width:460px}.account-panel label{display:block;margin:18px 0 6px}.account-panel input:not([type=checkbox]){width:100%;box-sizing:border-box;padding:13px;border:1px solid #87978c;background:white;font:inherit}.account-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.account-panel [role=status]{min-height:1.5em}.account-panel .secondary{color:#173e35;background:transparent;border:1px solid #87978c}.account-panel fieldset{border:0;padding:0;margin:0}.account-panel .consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.6}.account-panel .consent input{margin-top:6px}
:focus-visible{outline:3px solid #a87723;outline-offset:4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:650px){.footer-main{grid-template-columns:1fr 1fr;gap:24px}.footer-intro{grid-column:1/-1}.footer-bottom{flex-direction:column}.shelf-footer{margin-top:45px}.topbar{flex-wrap:wrap;gap:18px}.topbar .brand{font-size:20px}.brand-mark{width:40px!important;height:40px!important}.info-page{padding-top:38px}}

/* ==========================================================================
   Storybook Attic — Full-Width Hero & Faded Column Theme (Sticky Footer Fix)
   ========================================================================== */

body {
  background-color: var(--cream, #f5f1e8);
  background-image: url('/public/brand/attic-bg.jpg');
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.topbar {
  background: rgba(249, 246, 238, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(221, 215, 202, 0.6);
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Full-width Hero Banner */
.hero {
  width: 100%;
  max-width: none;
  height: min(715px, 75vw);
  min-height: 530px;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}

.hero-inner {
  margin-left: clamp(25px, 9.5vw, 160px);
  padding-top: clamp(85px, 9.5vw, 155px);
  max-width: 730px;
}

.hero h1 {
  font-size: clamp(52px, 6vw, 90px);
  margin: 31px 0 22px;
}

/* Faded Column applied across ALL pages (Home, Catalogue, Reader, Info, Login, Account) */
.library-section,
.reader-view,
.catalogue-page,
.info-page,
.account-panel,
.share-panel {
  max-width: 1250px;
  margin: auto;
  padding: 104px clamp(24px, 5.8vw, 90px) 70px;
  background: linear-gradient(90deg, transparent 0%, rgba(245,241,232,0.92) 12%, rgba(245,241,232,0.92) 88%, transparent 100%);
}

.shelf-footer {
  position: relative;
  z-index: 10;
  margin-top: auto;
}

/* Optional Animated Video Background Wrapper */
.attic-bg-video-wrap {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--cream, #f5f1e8);
}

.attic-bg-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 900px) {
  #home-view #book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body {
    background-attachment: scroll;
  }
  .hero {
    height: 650px;
  }
  .hero-inner {
    margin-left: 30px;
    margin-right: 20px;
    padding-top: 125px;
  }
  .hero h1 {
    font-size: clamp(48px, 10vw, 72px);
  }
  .library-section,
  .reader-view,
  .catalogue-page,
  .info-page,
  .account-panel,
  .share-panel {
    padding: 70px 23px;
    background: linear-gradient(90deg, transparent 0%, rgba(245,241,232,0.92) 12%, rgba(245,241,232,0.92) 88%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .attic-bg-video-wrap video {
    display: none;
  }
  .attic-bg-video-wrap {
    background-image: url('/public/brand/attic-bg.jpg');
    background-size: cover;
    background-position: top center;
  }
}
@media(max-width:650px){.topbar{height:auto;min-height:80px;padding-top:12px;padding-bottom:12px}.account-panel .consent span{flex:1;min-width:0}.account-panel .consent input{flex:0 0 auto}}
[hidden]{display:none!important}.share-options{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.share-options a,.share-options button{padding:10px 15px;background:#173f35;color:#fff;border:0;border-radius:4px;font:inherit;text-decoration:none;cursor:pointer}.share-panel{position:relative;z-index:20}.sponsor-slot:empty{display:none}.sponsor-slot{max-width:1000px;margin:35px auto;padding:0 25px;display:flex;gap:18px;flex-wrap:wrap}.sponsor-slot a{padding:22px;border:1px solid #b9ad96;background:#fffaf0;color:#254638;text-decoration:none;flex:1;min-width:200px}.sponsor-slot small{display:block;letter-spacing:1px;font-size:10px;text-transform:uppercase;margin-bottom:10px}.sponsor-slot strong{font-family:Georgia,serif;font-size:22px}.sponsor-slot p{margin:12px 0 0}.sponsor-slot a:focus-visible{outline:3px solid #b6883c}
/* Reader controls share one alignment baseline with link controls. */
.share-options a,.share-options button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;margin:0;line-height:1.25;vertical-align:middle}.share-options{align-items:stretch}.share-panel input{box-sizing:border-box;max-width:100%;width:100%}.page-frame{touch-action:pan-y pinch-zoom}.page-frame.zoomed{overflow:auto;touch-action:pan-x pan-y pinch-zoom}.page-frame.zoomed img{width:200%;height:auto;max-width:none;object-fit:initial}.page-frame:has(.text-page:not(.hidden)){aspect-ratio:auto;min-height:500px}.page-frame.zoomed .text-page{font-size:150%}.page-frame.zoomed #text-page-content{font-size:clamp(24px,4vw,38px)}.reader-control-actions button{min-height:44px}.reader-controls{scroll-margin-top:15px}
@media(max-width:1024px){body.reading-book>.topbar{display:none}body.reading-book .reader-view{padding:0 0 45px;max-width:100%;background:var(--cream,#f5f1e8)}.reading-book .reader-info{padding:22px 16px}.reading-book .reader-info h1{font-size:clamp(24px,4vw,36px)}.reading-book .reader-top{padding:0 16px;min-height:60px}.reading-book .reading-stage{display:block;width:100%}.reading-book .reading-stage>.page-arrow{display:none}.reading-book .page-frame{width:100%;max-width:850px;margin:auto;box-shadow:none}.reading-book .reader-controls{margin:16px auto;padding:0 16px;max-width:850px}.reading-book .reader-control-actions{gap:8px;flex-wrap:wrap}.reading-book .reader-control-actions button{padding:10px 14px;border:1px solid var(--line);border-radius:4px;font-size:13px}.reading-book .text-page{padding:10% 8%;border-width:6px;min-height:65dvh}.reading-book #text-page-content{font-size:clamp(20px,3.2vw,30px);line-height:1.65;white-space:pre-wrap}.reading-book .share-panel{margin:12px 16px}.reading-book .learning-area,.reading-book .review-area{padding-left:16px;padding-right:16px}.reading-book .reader-controls #page-label{font-size:13px}}
body{background-image:image-set(url('/public/brand/attic-bg.webp') type('image/webp'),url('/public/brand/attic-bg.jpg') type('image/jpeg'))!important}
.consent-banner{padding:20px max(18px,5vw);background:#173e35;color:#fffaf0;display:flex;gap:24px;align-items:center;flex-wrap:wrap}.consent-banner p{flex:1;min-width:220px;line-height:1.6;margin:0}.consent-banner a{color:inherit}.consent-banner button,.privacy-choices{font:inherit;cursor:pointer;padding:10px 14px;margin:4px;border:1px solid currentColor;background:transparent;color:inherit;border-radius:4px}.consent-banner>div{display:flex;flex-wrap:wrap}.privacy-choices{font-size:12px}.ad-creative{width:100%;margin:auto}.ad-creative>small{display:block;text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:1px;margin:0 0 7px}.ad-creative iframe{display:block;width:100%;height:auto;border:0;min-height:50px}.ad-creative>a{display:block;box-sizing:border-box;min-width:0}.ad-creative img{max-width:100%;height:auto;display:block}.ad-consent-note{font-size:12px;text-align:center;width:100%;color:#626e64}.ad-consent-note button{border:0;background:transparent;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
.audio-player{max-width:760px;margin:12px auto 32px;padding:22px;background:#f5f9fc;border-top:3px solid #6b9fc5;color:#23435c}.audio-player h2{font:500 26px Georgia,serif;margin:0 0 10px}.audio-player p{line-height:1.6;font-size:14px}.audio-player audio{display:block;width:100%;margin:20px 0;accent-color:#658fb1}.audio-player select{font:inherit;background:#fff;border:1px solid #a6b6c4;border-radius:4px;padding:10px;margin:8px;max-width:100%}.audio-settings{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.audio-player label{font-size:14px}

/* Keep download feedback on the same centerline as the reader and its buttons. */
#download-status:empty{margin:0;min-height:0}#download-status:not(:empty){box-sizing:border-box;width:calc(100% - 32px);max-width:670px;margin:20px auto 0;padding:20px 24px;border:2px solid #b88940;border-radius:8px;background:#fff8e8;color:#16342e;text-align:center;font-size:15px;font-weight:600;line-height:1.7;box-shadow:0 5px 18px #16342e12}#download-status a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;padding:8px 18px;border-radius:5px;background:#23493b;color:#fff8e8;text-decoration:none}#download-status a:hover{background:#16342e}#download-status a:focus-visible{outline:3px solid #b88940;outline-offset:3px}