/* Noël d'Altitude — booklet (page-turn) presentation layer */
.booklet{ overflow:hidden; }
.booklet #zoom{ display:none; }

#bookstage{ position:fixed; left:0; right:0; top:60px; bottom:0; display:flex; align-items:center; justify-content:center; z-index:5; }
#book{ width:2160px; height:1080px; flex:none; display:flex; perspective:3200px; position:relative; }
#book .ph{ width:1080px; height:1080px; position:relative; }
#book .ph .page{ position:absolute; inset:0; box-shadow:0 30px 90px rgba(0,0,0,.55); backface-visibility:hidden; }
.ph-right .page{ transform-origin:left center; }
.ph-left .page{ transform-origin:right center; }
/* spine shading */
.ph-left .page::after, .ph-right .page::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:8; }
.ph-left .page::after{ background:linear-gradient(to right, transparent 80%, rgba(0,0,0,.20)); }
.ph-right .page::after{ background:linear-gradient(to left, transparent 80%, rgba(0,0,0,.20)); }
/* colourway bar hugs the spine: mirror it on left-hand pages */
.ph-left .cwbar{ left:auto; right:0; }

.bk-arrow{ position:fixed; top:50%; transform:translateY(-50%); z-index:60; width:54px; height:54px; border-radius:50%; border:1px solid rgba(242,233,216,.5); background:rgba(22,18,16,.72); color:#F2E9D8; font-size:26px; line-height:1; cursor:pointer; transition:background .25s, opacity .25s; }
.bk-arrow:hover:not(:disabled){ background:rgba(242,233,216,.92); color:#26221F; }
.bk-arrow:disabled{ opacity:.22; cursor:default; }
.bk-prev{ left:22px; }
.bk-next{ right:22px; }
.bk-ind{ position:fixed; bottom:52px; left:50%; transform:translateX(-50%); color:rgba(242,233,216,.8); font:500 11px 'Montserrat', system-ui, sans-serif; letter-spacing:.3em; text-transform:uppercase; z-index:60; }
.bk-scrub{ position:fixed; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:7px; z-index:60; padding:9px 12px; background:rgba(22,18,16,.72); border:1px solid rgba(242,233,216,.18); border-radius:999px; touch-action:none; }
.bk-tick{ width:24px; height:14px; border:1px solid rgba(242,233,216,.45); background:transparent; cursor:pointer; padding:0; border-radius:2px; transition:background .2s, border-color .2s; }
.bk-tick:hover{ border-color:#C2A269; background:rgba(194,162,105,.35); }
.bk-tick.on{ background:#C2A269; border-color:#C2A269; }

@media print{
  .booklet{ overflow:visible; }
  #bookstage, .bk-arrow, .bk-ind, .bk-scrub{ display:none !important; }
  .booklet #zoom{ display:block; }
}