/* Diamond Homes — gallery booklet (two-page flipbook).
   Markup is generated by tools/build-pages.py; behaviour lives in js/gallery.js. */
.booklet-page{padding:2.8rem 0 5rem;background:var(--sand);overflow:hidden}
.bk-chapters{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;max-width:1080px;margin:0 auto 2.2rem;padding:0 1.5rem}
.bk-chapters .gal-tab{padding:.45rem 1rem;font-size:.68rem}

/* --pw is one page's width; a page is 7:10, a spread is two pages */
.bk-stage{--pw:min(calc((100vw - 8rem) / 2), max(17rem, calc((100vh - 15rem) * .7)), 33rem);--ph:calc(var(--pw) / .7);display:flex;justify-content:center;padding:.5rem 0 1.8rem}
.bk-viewport{position:relative;width:calc(var(--pw) * 2);height:var(--ph);perspective:2800px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.bk-book{position:absolute;top:0;left:0;width:calc(var(--pw) * 2);height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.645,.045,.355,1);font-size:calc(var(--pw) / 24)}
.bk-book.no-anim,.bk-book.no-anim .bk-leaf{transition:none!important}
.bk-leaf.far{display:none}   /* js/gallery.js renders only the leaves near the open spread */
.bk-leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.645,.045,.355,1);cursor:pointer}

.bk-page{position:absolute;inset:0;display:flex;flex-direction:column;padding:6% 7% 4%;background:#FBF9F4;color:var(--ink);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.bk-back{transform:rotateY(180deg)}
/* Hide whichever face points away from the reader; js/gallery.js swaps them (.show-back) at the
   halfway point of a turn. backface-visibility alone is not enough in Safari: positioned or
   transformed children of the hidden face (caption badges, zoom buttons) paint through, mirrored. */
.bk-back,.bk-leaf.show-back .bk-front{visibility:hidden}
.bk-leaf.show-back .bk-back{visibility:visible}
/* only the open pages and any page mid-turn cast a shadow; 70 stacked shadows smear into a grey rim */
.bk-leaf.edge .bk-page,.bk-leaf.turning .bk-page{box-shadow:0 1.4rem 2.6rem -1.2rem rgba(46,42,37,.45),0 0 0 1px rgba(46,42,37,.06)}
.bk-page img{-webkit-user-drag:none}
/* spine shading, then the shadow that sweeps across a page while it turns */
.bk-page::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4}
.bk-front::after{background:linear-gradient(90deg,rgba(46,42,37,.2),rgba(46,42,37,.05) 5%,transparent 12%)}
.bk-back::after{background:linear-gradient(270deg,rgba(46,42,37,.2),rgba(46,42,37,.05) 5%,transparent 12%)}
.bk-page::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0}
.bk-leaf.turning .bk-front::before{background:linear-gradient(90deg,transparent 35%,rgba(46,42,37,.3));animation:bk-shade .9s ease-in-out}
.bk-leaf.turning .bk-back::before{background:linear-gradient(270deg,transparent 35%,rgba(46,42,37,.3));animation:bk-shade .9s ease-in-out}
@keyframes bk-shade{0%,100%{opacity:0}50%{opacity:1}}

/* running header, folio */
.bk-run{display:flex;justify-content:space-between;gap:1em;font-family:var(--sans);font-size:.46em;letter-spacing:.24em;text-transform:uppercase;color:#9a8f82;padding-bottom:.9em;margin-bottom:1.6em;border-bottom:1px solid rgba(165,133,74,.35)}
.bk-folio{font-family:var(--serif);font-size:.62em;color:#9a8f82;text-align:center;padding-top:.8em;margin-top:auto}

/* photos */
.bk-figs{flex:1;min-height:0;display:flex;flex-direction:column;gap:.7em}
.bk-figs.one{justify-content:center}
.bk-fig{position:relative;flex:1 1 0;min-height:0;margin:0;overflow:hidden;background:#ECE5D8}
.bk-figs.one .bk-fig.land{flex:none;aspect-ratio:3/2}
.bk-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bk-fig.pano img{object-fit:contain}
.bk-fig figcaption{position:absolute;left:0;bottom:0;z-index:1;display:flex;align-items:center;gap:.7em;padding:.75em 1.1em .7em;background:rgba(251,249,244,.95);color:#4B3029;font-family:var(--sans);font-size:.46em;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.bk-fig figcaption::before{content:'';width:.6em;height:.6em;background:var(--gold);transform:rotate(45deg)}
.bk-zoom{position:absolute;top:.5em;right:.5em;z-index:1;width:1.6em;height:1.6em;min-width:30px;min-height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(46,42,37,.45);color:#fff;cursor:zoom-in;transition:background .2s}
.bk-zoom:hover,.bk-zoom:focus-visible{background:rgba(46,42,37,.8)}
.bk-zoom svg{width:55%;height:55%}

/* chapter opener */
.bk-open-txt{padding:.2em 0 1.1em}
.bk-num{font-family:var(--serif);font-size:2.3em;line-height:1;color:var(--gold);margin:0}
.bk-page h3{font-family:var(--serif);font-weight:400;font-size:2em;line-height:1.05;margin:.15em 0 .3em;color:var(--ink);letter-spacing:0;text-transform:none}
.bk-blurb{font-family:var(--serif);font-style:italic;font-size:.9em;color:#6b5f55;margin:0}
.bk-meta{margin:1em 0 0;font-size:.46em;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep)}
.bk-opener .bk-figs{justify-content:flex-end}
.bk-opener .bk-fig{flex:none;aspect-ratio:4/3}

/* covers */
.bk-cover,.bk-backcover{background:linear-gradient(160deg,#F8F4EB,#ECE3D1);padding:5%}
.bk-cover-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(165,133,74,.6);outline:1px solid rgba(165,133,74,.28);outline-offset:-.55em;padding:12% 9% 7%}
.bk-logo{width:56%;mix-blend-mode:multiply;margin:auto 0 9%}
.bk-script{font-family:var(--script);color:var(--gold-deep);font-size:1.7em;line-height:1.1;margin:0 0 .3em}
.bk-title{font-family:var(--serif);font-weight:400;font-size:1.6em;line-height:1.15;color:var(--ink);margin:0 0 .6em}
.bk-sub{font-size:.62em;color:#6b5f55;line-height:1.6;max-width:22em;margin:0}
.bk-place{margin:1.6em 0 0;font-size:.48em;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep)}
.bk-cta-hint{margin:auto 0 0;padding-top:1.5em;font-size:.48em;letter-spacing:.24em;text-transform:uppercase;color:#8a8078}

/* contents */
.bk-toc-in{flex:1;display:flex;flex-direction:column}
.bk-toc h3{margin-bottom:.7em}
.bk-toc-list{display:flex;flex-direction:column}
.bk-toc-item{display:flex;align-items:baseline;gap:.55em;width:100%;padding:.4em 0;background:none;border:0;cursor:pointer;font-family:var(--serif);font-size:.8em;color:var(--ink);text-align:left;transition:color .2s}
.bk-toc-item b{font-family:var(--sans);font-size:.62em;font-weight:400;letter-spacing:.1em;color:var(--gold-deep);min-width:1.9em}
.bk-toc-item i{flex:1;border-bottom:1px dotted rgba(91,84,75,.4);transform:translateY(-.25em)}
.bk-toc-item span{font-family:var(--sans);font-size:.62em;color:#8a8078}
.bk-toc-item:hover{color:var(--burgundy-light)}
.bk-restart{width:auto;justify-content:center;margin:auto 0 0;padding-top:2em;font-family:var(--sans);font-size:.48em;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}

/* closing page + end paper */
.bk-close-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.bk-closing h3{font-size:1.6em;line-height:1.15;margin:.1em 0 .5em}
.bk-closing .bk-close-in>p:not(.bk-script){font-size:.62em;color:#6b5f55;max-width:20em;line-height:1.6;margin:0 0 1.5em}
.bk-closing .btn{font-size:.46em;padding:1.1em 1.6em;margin:.35em 0;min-width:72%;text-align:center}
.bk-end{background:#F4EEE2}
.bk-end-mark{width:1.1em;height:1.1em;background:var(--gold);transform:rotate(45deg);opacity:.6}

/* controls under the book */
.bk-controls{display:flex;align-items:center;justify-content:center;gap:1.1rem;padding:0 1rem}
.bk-btn{width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(91,84,75,.35);background:var(--cream);color:var(--burgundy);font-size:1.6rem;line-height:1;padding:0 0 .2rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.bk-btn:hover:not(:disabled){background:var(--burgundy);color:var(--cream);border-color:var(--burgundy)}
.bk-btn:disabled{opacity:.35;cursor:default}
.bk-count{min-width:10rem;margin:0;text-align:center;font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#6b5b52}
.bk-hint{text-align:center;font-size:.8rem;color:#8a8078;margin:1rem auto 0;padding:0 1.5rem}

/* phones: one page at a time (js/gallery.js uses the same 760px breakpoint) */
@media (max-width:760px){
  .booklet-page{padding-top:1.8rem}
  /* vh first: a browser without svh would make --pw invalid and collapse the book to 0px */
  .bk-stage{--pw:min(calc(100vw - 2.4rem), max(15rem, calc((100vh - 13rem) * .7)))}
  .bk-viewport{width:var(--pw);overflow:hidden}
  .bk-chapters{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin-bottom:1.4rem;padding-bottom:.4rem;scrollbar-width:none}
  .bk-chapters .gal-tab{flex:none}
  .bk-controls{gap:.55rem}
  .bk-count{min-width:6.5rem;font-size:.66rem}
  .bk-btn{width:2.6rem;height:2.6rem}
}
@supports (height:100svh){
  @media (max-width:760px){.bk-stage{--pw:min(calc(100vw - 2.4rem), max(15rem, calc((100svh - 13rem) * .7)))}}
}
/* older iOS has no aspect-ratio: let those photos flex instead of collapsing to 0px */
@supports not (aspect-ratio:1/1){
  .bk-opener .bk-fig,.bk-figs.one .bk-fig.land{flex:1 1 0}
}
@media (prefers-reduced-motion:reduce){
  .bk-book,.bk-leaf{transition-duration:.01ms!important}
  .bk-leaf.turning .bk-page::before{animation:none}
}