:root{--red:#d71920;--red-d:#a80f16;--teal:#2eb3ab;--ink:#3d3642;--muted:#6b6470;--line:#ece6e2;--paper:#fbf8f5;--gold:#c9a227;--font:'Heebo',system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
/* the catalogue is one fixed screen: nothing on the page moves while flipping */
body{font-family:var(--font);color:var(--ink);background:radial-gradient(1000px 600px at 50% 0,#fff 0,var(--paper) 70%);display:flex;flex-direction:column;height:100dvh;overflow:hidden;overscroll-behavior:none}
button{font:inherit;cursor:pointer}
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:#fff;color:var(--red);padding:8px 12px;z-index:99}
.skip:focus{inset-inline-start:8px}

/* top bar */
.cbar{display:flex;align-items:center;gap:14px;padding:10px 18px;background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:5}
.cbar-logo img{height:40px;display:block}
.cbar-title{flex:1;display:flex;align-items:baseline;gap:12px;min-width:0}
.cbar-title b{color:var(--red);font-size:1.3rem;font-weight:800;white-space:nowrap}
.cbar-title span{color:var(--muted);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbar-act{display:flex;gap:8px}
.cbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--red);padding:8px 14px;font-weight:600;font-size:.95rem;text-decoration:none;transition:border-color .2s,background .2s}
.cbtn:hover{border-color:var(--red)}
.cbtn-red{background:var(--red);color:#fff;border-color:var(--red)}
.cbtn-red:hover{background:var(--red-d)}

/* stage + book */
.stage{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 8px 2px;position:relative;min-height:0;overflow:hidden;contain:layout}
.book{position:relative;aspect-ratio:3/2;height:min(calc(100dvh - 128px),calc((100vw - 120px) / 1.5));perspective:2600px;outline:none;filter:drop-shadow(0 22px 34px rgba(90,20,30,.16))}
.book.single{aspect-ratio:3/4;height:min(calc(100dvh - 120px),calc((100vw - 12px) * 4 / 3))}
.half{position:absolute;top:0;bottom:0;width:50%;background:#fff;overflow:hidden}
.half-r{right:0;box-shadow:inset 18px 0 24px -18px rgba(0,0,0,.18)}
.half-l{left:0;box-shadow:inset -18px 0 24px -18px rgba(0,0,0,.18)}
.book.single .half-r{width:100%;box-shadow:none}
.book.single .half-l,.book.single .spine{display:none}
.spine{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.16),rgba(0,0,0,.05))}
.nav{width:46px;height:46px;flex:none;border:1px solid var(--line);background:#fff;color:var(--red);font-size:2rem;line-height:1;display:grid;place-items:center;transition:transform .2s,border-color .2s;z-index:3}
.nav:hover:not(:disabled){border-color:var(--red);transform:scale(1.08)}
.nav:disabled{opacity:.3;cursor:default}
.nav-next{animation:nudge 2.4s ease-in-out 3s 3}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateX(-6px)}}
.hint{position:absolute;bottom:-4px;left:0;right:0;text-align:center;font-size:.85rem;color:var(--muted);margin:0;transition:opacity .8s}
.hint.fade{opacity:0}

/* turning leaf */
.leaf{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;z-index:4;will-change:transform}
.leaf-l{left:0;transform-origin:100% 50%}
.leaf-r{right:0;transform-origin:0 50%}
.book.single .leaf{width:100%;right:0;left:auto;transform-origin:100% 50%}
.lf{position:absolute;inset:0;background:#fff;backface-visibility:hidden;overflow:hidden}
.lf-back{transform:rotateY(180deg)}
.lf-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 40%,rgba(255,255,255,.25) 70%,rgba(0,0,0,.12));opacity:0;animation:shade .9s ease-in-out}
.go-fwd{animation:fwd .9s cubic-bezier(.45,.05,.3,1) forwards}
.go-back{animation:back .9s cubic-bezier(.45,.05,.3,1) forwards}
.go-out{animation:out .75s cubic-bezier(.45,.05,.4,1) forwards}
.go-in{animation:in .75s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes fwd{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
@keyframes back{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
@keyframes out{0%{transform:rotateY(0)}100%{transform:rotateY(-115deg);opacity:0}}
@keyframes in{0%{transform:rotateY(-115deg);opacity:0}100%{transform:rotateY(0);opacity:1}}
@keyframes shade{0%,100%{opacity:0}50%{opacity:1}}

/* pages (sizes follow the page width: cqw) */
.pg{position:absolute;inset:0;container-type:size;background:#fff;display:flex;flex-direction:column}
.pg-foot{position:absolute;bottom:2.4cqh;left:5cqw;right:5cqw;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:2.6cqw}
.pg-foot img{height:4.2cqw;opacity:.85}
/* cover */
.pg-cover{background:#fff;align-items:center;padding:7cqw 6cqw 5cqw}
.cv-top{text-align:center}
.cv-logo{width:62cqw;display:block;margin:0 auto}
.cv-lic{display:inline-block;margin-top:2cqw;color:var(--gold);font-weight:600;font-size:2.8cqw;letter-spacing:.06em}
.cv-mosaic{flex:1;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1fr 1fr;gap:1.4cqw;width:100%;margin:5cqw 0;min-height:0}
.cv-mosaic img{width:100%;height:100%;object-fit:cover;min-height:0}
.cv-mosaic img:nth-child(1){grid-column:span 4;grid-row:span 2}
.cv-mosaic img:nth-child(2),.cv-mosaic img:nth-child(3){grid-column:span 2}
.cv-mosaic img:nth-child(4),.cv-mosaic img:nth-child(5){display:none}
.cv-title{text-align:center;line-height:1.1}
.cv-title b{display:block;color:var(--red);font-size:13cqw;font-weight:800}
.cv-title span{display:block;color:var(--red);font-size:6cqw;font-weight:300;margin-top:1cqw}
.cv-title em{font-style:normal;font-weight:700}
.cv-title i{display:inline-block;margin-top:2.4cqw;font-style:normal;background:var(--red);color:#fff;font-weight:600;font-size:3.4cqw;padding:1.2cqw 4cqw}
/* table of contents */
.pg-toc{padding:9cqw 8cqw 10cqw}
.pg-toc h2{color:var(--red);font-size:7cqw;margin:0 0 4cqw;font-weight:700}
.pg-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.6cqh}
.pg-toc li button{display:flex;align-items:baseline;width:100%;gap:2cqw;border:0;background:none;padding:1.1cqh 0;font-size:3.7cqw;color:var(--ink);text-align:start}
.pg-toc li button i{flex:1;border-bottom:1px dotted #cdbfb8;transform:translateY(-.4em)}
.pg-toc li button b{color:var(--red)}
.pg-toc li button:hover span{color:var(--red)}
.toc-note{margin-top:auto;font-size:2.8cqw;color:var(--muted);border-top:1px solid var(--line);padding-top:2.4cqw}
/* chapter opener: generated art + a clean white card */
.pg-open{background:#fff}
.op-art{position:absolute;inset:0 0 34%;background:var(--art) center/cover,linear-gradient(135deg,#fde8e8,#fff);}
.op-art::after{content:'';position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,#fff)}
.op-card{position:absolute;left:7cqw;right:7cqw;bottom:13cqh;background:#fff;padding:6cqw 6cqw 5cqw;text-align:center;box-shadow:0 2cqw 6cqw rgba(120,20,30,.12);border-top:1.2cqw solid var(--red)}
.op-lic{display:inline-block;color:var(--gold);font-weight:600;font-size:3cqw;letter-spacing:.05em}
.op-card h2{color:var(--red);font-size:9cqw;line-height:1.1;margin:1.6cqw 0;font-weight:800}
.op-card p{margin:0 0 2.4cqw;font-size:3.8cqw;color:var(--muted)}
.op-card small{font-size:3cqw;color:var(--ink)}
/* product pages */
.pg-items{padding:4cqw 3.5cqw 7.5cqw}
.pg-head{display:flex;align-items:center;gap:2cqw;color:var(--red);font-weight:700;font-size:4.4cqw;margin-bottom:2cqw}
.pg-head::after{content:'';flex:1;height:1px;background:var(--line)}
.grid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:2cqw;min-height:0}
.it{position:relative;border:1px solid var(--line);background:#fff;padding:0 0 1.6cqw;display:flex;flex-direction:column;min-height:0;transition:border-color .2s,box-shadow .2s}
.it:hover{border-color:var(--red);box-shadow:0 1.5cqw 4cqw rgba(215,25,32,.12)}
.it-img{flex:1;min-height:0;display:block}
/* portrait photos: the whole costume, as tall as the cell */
.it-img{overflow:hidden}
.it-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:1% 0 0}
.it-num{position:absolute;top:1.6cqw;right:1.6cqw;min-width:8cqw;height:8cqw;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:700;font-size:3.8cqw;padding:0 1.2cqw;z-index:1}
.it-name{font-size:4.6cqw;color:var(--red);font-weight:700;line-height:1.2;padding:0 2cqw;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* note + back cover */
.pg-note{align-items:center;justify-content:center;text-align:center;padding:10cqw;background:var(--paper)}
.pg-note img{width:44cqw}
.pg-note p{color:var(--red);font-size:4.4cqw;font-weight:300;line-height:1.5}
.pg-back{align-items:center;justify-content:center;text-align:center;padding:10cqw;gap:3cqw;background:#fff;border:2cqw solid var(--red)}
.pg-back h2{color:var(--red);font-size:9cqw;margin:0;font-weight:800}
.pg-back p{font-size:4cqw;color:var(--muted);margin:0;line-height:1.5}
.bk-links{display:flex;flex-direction:column;gap:2cqw;width:80%}
.bk-links .cbtn{justify-content:center;font-size:3.6cqw;padding:2.4cqw}
.bk-site{color:var(--red);font-weight:600;font-size:3.4cqw;letter-spacing:.08em;direction:ltr}
.pg-empty{background:transparent}

/* chapters strip */
.chapters{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:8px 12px 10px;justify-content:safe center;scrollbar-width:none;flex:none}
.chapters::-webkit-scrollbar{display:none}
.chapters button{flex:none;border:1px solid var(--line);background:#fff;color:var(--muted);padding:7px 12px;font-size:.88rem;font-weight:600}
.chapters button.on{background:var(--red);color:#fff;border-color:var(--red)}

/* dialogs */
.toc,.zoom{position:fixed;inset:0;z-index:50;background:rgba(30,20,25,.55);display:grid;place-items:center;padding:16px}
.toc[hidden],.zoom[hidden]{display:none}
.toc-card,.zoom-card{position:relative;background:#fff;max-width:880px;width:100%;max-height:calc(100dvh - 32px);overflow:auto;padding:26px}
.toc-card h2{color:var(--red);margin:0 0 16px}
.toc-x{position:absolute;top:10px;left:10px;width:36px;height:36px;border:1px solid var(--line);background:#fff;color:var(--muted)}
.toc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.toc-list button{border:1px solid var(--line);background:#fff;padding:0 0 10px;text-align:center;display:flex;flex-direction:column;gap:4px;transition:border-color .2s}
.toc-list button:hover{border-color:var(--red)}
.toc-list img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--paper)}
.toc-list span{color:var(--red);font-weight:700}
.toc-list small{color:var(--muted)}
.zoom-card{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center}
.zoom-img{aspect-ratio:3/4;background:#fff}
.zoom-img img{width:100%;height:100%;object-fit:contain}
.zoom-num{display:inline-grid;place-items:center;min-width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;font-weight:700}
.zoom-info h3{color:var(--red);font-size:1.7rem;margin:12px 0 6px;line-height:1.2}
.zoom-info p{color:var(--muted);margin:0 0 18px}
.zoom-info .cbtn{margin:0 0 8px 6px}

@media (max-width:819px){
  .cbar{padding:8px 10px;gap:8px}.cbar-logo img{height:32px}.cbar-title b{font-size:1.05rem}.cbar-title span{display:none}
  .cbtn span{display:none}.cbtn{padding:7px 10px}
  .stage{padding:10px 6px 4px;gap:0}
  .hint{display:none}
  .nav{position:absolute;bottom:50%;width:38px;height:38px;font-size:1.6rem;background:rgba(255,255,255,.92)}
  .nav-prev{right:2px}.nav-next{left:2px}
  .zoom-card{grid-template-columns:1fr;padding:18px}.zoom-img{max-height:52vh}
}
@media (prefers-reduced-motion:reduce){.nav-next{animation:none}}
html.a11y-still .leaf,html.a11y-still .lf-shade{animation:none!important}