button{font:inherit;color:inherit}

/* HERO / LIBRARY */
.hero{background:var(--grape);color:#fff;padding:48px 0 0;position:relative;overflow:hidden}
.crumbs{font-weight:700;font-size:.9rem;opacity:.9}
.hero h1{font-size:clamp(2.8rem,7vw,5rem);font-weight:800;margin:10px 0 10px}
.hero h1 em{font-style:normal;background:var(--sun);color:var(--ink);padding:0 .2em;border-radius:.3em;display:inline-block;transform:rotate(-3deg)}
.hero p.lead{font-size:1.1rem;max-width:36em;color:#ece6ff}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:end;margin-top:34px}

/* shelf */
.shelf-wrap{min-width:0}
.hint{font-weight:800;font-size:.85rem;color:var(--sun);margin-bottom:6px;letter-spacing:.04em}
.shelf{display:flex;align-items:flex-end;gap:6px;overflow-x:auto;padding:30px 6px 0;scroll-snap-type:x proximity;scrollbar-width:none}
.shelf::-webkit-scrollbar{display:none}
.spine{flex:0 0 auto;width:54px;border:3px solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 0;transition:transform .25s cubic-bezier(.2,.9,.3,1.4);scroll-snap-align:center;position:relative;color:var(--ink)}
.spine:hover{transform:translateY(-12px)}
.spine.on{transform:translateY(-26px) rotate(-2deg);box-shadow:0 0 0 4px var(--sun)}
.spine b{font-family:var(--font-display);font-size:1.35rem;line-height:1}
.spine span{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:800;font-size:.78rem;white-space:nowrap}
.spine.now::after{content:"★";position:absolute;top:-24px;left:50%;transform:translateX(-50%);color:var(--sun);font-size:1.2rem}
.plank{height:22px;background:var(--ink);border-radius:0 0 14px 14px;position:relative}
.plank:not(:last-child){margin-bottom:6px}   /* the top shelf's plank, with the lower shelf's books under it */
#shelves .shelf:last-of-type{padding-top:34px}
#shelves .spine{flex:1 1 0;min-width:42px;max-width:54px;width:auto}   /* a full shelf of ten fits beside the card; still scrolls if not */
.plank::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:#4a418a}

/* detail card */
.cover{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:28px 28px 0 0;padding:26px 24px 28px;position:relative;min-height:300px}
.cover .tag{display:inline-block;background:var(--mint);border:2px solid var(--ink);border-radius:999px;font-weight:800;font-size:.78rem;padding:3px 12px}
.cover .num{font-family:var(--font-display);font-weight:800;font-size:5.5rem;line-height:.9;margin:10px 0 4px;display:flex;align-items:flex-end;gap:10px}
.cover .num small{font-size:.9rem;letter-spacing:.14em;padding-bottom:12px}
.cover h2{font-size:1.25rem;font-weight:800}
.cover .meta{color:var(--muted);font-weight:700;font-size:.9rem;margin-top:2px}
.bar{height:12px;border-radius:99px;border:2px solid var(--ink);margin-top:14px;overflow:hidden;background:#f1ecff}
.bar span{display:block;height:100%;background:var(--coral);width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.cta{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:12px 22px;border-radius:999px;font-weight:800;border:2px solid var(--ink);background:var(--sun);box-shadow:0 5px 0 var(--ink);transition:.15s;cursor:pointer}
.btn:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.btn.sm{padding:9px 14px;background:#fff;box-shadow:0 4px 0 var(--ink)}
.btn[disabled]{opacity:.4;pointer-events:none}
.cover .info{display:flex;flex-direction:column;align-items:flex-start}
.cover .swap{align-self:stretch}
.cover .swap>*,.cover .fslot>*{animation:pop .4s cubic-bezier(.2,.9,.3,1.3)}   /* only the changing part pops in */
.bar{align-self:stretch}
.bar.off{visibility:hidden}
@keyframes pop{from{opacity:0;transform:translateY(12px)}}

/* ARCHIVE */
.archive{padding:64px 0 90px}
.tools{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:10px}
.tools h2{font-size:2.2rem;font-weight:800}
.year{margin-top:34px}
.year h3{display:inline-block;font-size:1.8rem;font-weight:800;background:var(--sun);border:3px solid var(--ink);border-radius:16px;padding:2px 18px;transform:rotate(-2deg);box-shadow:0 4px 0 var(--ink);margin-bottom:18px}
.rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));gap:14px}
.row{display:flex;align-items:center;gap:14px;background:#fff;border:2px solid var(--ink);border-radius:20px;padding:12px 16px;box-shadow:0 5px 0 var(--ink);transition:.15s}
.row:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--ink);background:#fff6dc}
.row .n{flex:0 0 auto;width:52px;height:52px;border-radius:16px;border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.3rem}
.row .t{flex:1;min-width:0;font-weight:800;line-height:1.25}
.row .t small{display:block;color:var(--muted);font-weight:700;font-size:.82rem}
.row .go{flex:0 0 auto;display:inline-flex;gap:6px;align-items:center;font-weight:800;font-size:.85rem;padding:7px 14px;border-radius:999px;background:var(--sun);border:2px solid var(--ink);white-space:nowrap}   /* like the lesson cards' "PDF ↗" */
.row:hover .go{background:var(--mint)}

/* the booklet's front page, as the editor draws it: large screens only */
@font-face{font-family:'Booklet Script';src:url(../admin/booklet/CormorantUpright-Bold.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Booklet Sans';font-weight:400;src:url(../admin/booklet/Carlito-Regular.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Booklet Sans';font-weight:700;src:url(../admin/booklet/Carlito-Bold.ttf) format('truetype');font-display:swap}
.front{display:none}
@media(min-width:1200px){
  .stage{grid-template-columns:minmax(0,1fr) 540px}
  .cover .lay{display:grid;grid-template-columns:184px minmax(0,1fr);gap:20px;align-items:start}
  .cover .num{font-size:4.6rem}
  .cover .cta{flex-wrap:nowrap;gap:8px}   /* Open PDF and both arrows on one line beside the front page */
  .cover .cta .btn:not(.sm){padding:12px 18px}
  .front{container-type:inline-size;position:relative;display:block;aspect-ratio:272/420;background:#fff;color:#15122e;border:2px solid var(--ink);border-radius:10px;box-shadow:0 5px 0 var(--ink);overflow:hidden;transform:rotate(-2deg);transition:transform .15s,box-shadow .15s}
  .front:hover,.front:focus-visible{transform:translateY(-4px) rotate(-3deg);box-shadow:0 9px 0 var(--ink)}
  .front:focus-visible{outline:3px solid var(--grape);outline-offset:3px}
  .front::before{content:"";position:absolute;inset:0 auto 0 0;width:5cqw;background:var(--acc);border-right:1px solid rgba(39,33,77,.25)}   /* the edge keeps a white colour visible */
  .front .pg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:20cqw 7cqw 6cqw 12cqw;font-family:'Booklet Sans','Carlito','Calibri',sans-serif;line-height:1.5}
  .front .bt{font:700 9.4cqw/1 'Booklet Script','Cormorant Upright',Georgia,serif;font-style:normal;letter-spacing:-.01em;white-space:nowrap}
  .front .bs{font-size:6.6cqw;line-height:1.28;font-weight:700;margin-top:3.5cqw}
  .front .bk{width:36cqw;height:auto;margin-top:9cqw}
  .front .bd{font-size:4.1cqw;font-weight:700;line-height:1.25;margin-top:11cqw}
  .front .bn{display:flex;align-items:flex-end;gap:2cqw;width:100%;margin-top:8cqw;font-size:3.6cqw}
  .front .bn em{font-style:italic;font-weight:400}
  .front .bn u{flex:1;height:0;border-bottom:.35cqw solid currentColor;margin-bottom:.8cqw}
  .front .bf{margin-top:auto;font-size:3.5cqw;line-height:1.35}
}
/* large screens: the archive as a grid of front pages, like the editor's booklet cards */
@media(min-width:1200px){
  .rows{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:30px 22px}
  .row{flex-direction:column;align-items:stretch;gap:10px;padding:0;background:none;border:0;border-radius:12px;box-shadow:none}
  .row:hover{transform:none;box-shadow:none;background:none}
  .row .front{transform:none}
  .row:hover .front,.row:focus-visible .front{transform:translateY(-4px) rotate(-1deg);box-shadow:0 9px 0 var(--ink)}
  .row:focus-visible{outline:none}
  .row:focus-visible .front{outline:3px solid var(--grape);outline-offset:3px}
  .row .n{display:none}
  .row .go{align-self:flex-start}
  .row .t{font-size:1.05rem}
}
@media(min-width:1200px) and (prefers-reduced-motion:reduce){.front,.front:hover,.row:hover .front{transition:none;transform:none}}

footer{background:var(--ink);color:#d9d4ff;padding:36px 0;text-align:center;font-size:.9rem}

@media(max-width:860px){
  .stage{grid-template-columns:1fr;gap:0}
  .cover{order:-1;border-radius:28px;margin-bottom:26px;min-height:0}
  .back span{display:none}
}
/* "Save offline" (css/site.css): under the cover's buttons, and as a tab on each archive row */
#saveslot{margin-top:14px}
#saveslot button.offl{font-size:.9rem;padding:8px 16px}
.rows:has(.has-offl){row-gap:30px}
@media(max-width:1199px){.has-offl>.row{padding-bottom:28px}}   /* room inside the card for the tab, so it never covers the dates when they wrap */
/* wide screens: "PDF ↗" (a fixed width) and "Save offline" side by side under the front page */
@media(min-width:1200px){
  .has-offl .row .go{width:70px;justify-content:center;line-height:1.2}
  .has-offl button.offl.badge{bottom:0;left:76px;right:auto;font-size:.85rem;padding:7px 12px}
}