/* /covers/: every cover, as a pile. Computer: the page scrolls through the pile. Phone: swipe left and right. (build-pages.php, covers/covers.js) */
.cvp{--ink:#21282e;--soft:#5d6268;--faint:#8b9096;--gold:#8a6d3b;--line:#e7e3dc;color:var(--ink);background:#f6f3ee;font-family:Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.cvp *{box-sizing:border-box}
.cvp a{color:inherit;text-decoration:none}
.cvp .kick{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.cvp .intro{text-align:center;padding:34px 16px 0;margin:0;font-weight:400}
.cvp .room{position:relative}
.cvp .stage{position:sticky;top:var(--st,0px);height:calc(100vh - var(--st,0px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:72px;max-width:1080px;margin:0 auto;padding:26px 32px 0}
.cvp .pile{position:relative;justify-self:end;width:min(390px,38vw,calc((100vh - var(--st,0px) - 80px) * .6667));aspect-ratio:2/3}      /* never taller than the window leaves room for */
.cvp .cv{position:absolute;top:0;left:0;right:0;aspect-ratio:2/3;border-radius:3px;overflow:hidden;box-shadow:0 2px 3px rgba(20,22,25,.12),0 18px 40px rgba(20,22,25,.18);background:#ddd;will-change:transform,opacity}
.cvp .cv img,.cvp .cv video{display:block;width:100%;height:100%;object-fit:cover}
.cvp .cv video{position:absolute;inset:0}
.cvp .cv.front{box-shadow:0 3px 6px rgba(20,22,25,.14),0 30px 70px rgba(20,22,25,.28)}
.cvp .info{max-width:440px}
.cvp .swap{transition:opacity .35s ease,transform .35s ease}
.cvp .swap.out{opacity:0;transform:translateY(8px)}
.cvp .info h2{font:400 46px/1.08 "Playfair Display",Georgia,serif;margin:12px 0 12px;letter-spacing:-.01em}
.cvp .info .sub{font:italic 500 22px/1.35 "Cormorant Garamond",Georgia,serif;color:var(--soft);margin:0 0 24px}
.cvp .para{font-size:16px;line-height:1.6;color:var(--soft);margin:0 0 6px;max-width:440px}
.cvp .para:empty,.cvp .sub:empty{display:none}
.cvp .inside{border-top:1px solid var(--line);padding-top:16px}
.cvp .inside .k{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.cvp .inside b{display:block;font:400 21px/1.3 "Playfair Display",Georgia,serif;margin-bottom:14px}
.cvp .go{font-size:13px;letter-spacing:.06em;color:var(--gold);border-bottom:1px solid rgba(138,109,59,.45);padding-bottom:3px}
.cvp .bar{position:relative;height:2px;background:var(--line);margin-top:34px;max-width:260px}
.cvp .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:0}
.cvp .hint{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:12px}
.cvp .hint .ph{display:none}
/* a phone: one cover at a time, swiped like a deck (covers.js). A swipe to
   the right shows the cover before. */
@media (max-width:860px){
  .cvp .room{height:auto!important}
  .cvp .stage{position:static;height:auto;grid-template-columns:1fr;gap:26px;text-align:center;padding:22px 0 48px}
  .cvp .pile{justify-self:stretch;width:100%;aspect-ratio:auto;height:calc(min(270px,66vw) * 1.5 + 34px);overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}
  .cvp .cv{left:50%;top:6px;right:auto;bottom:auto;width:min(270px,66vw);height:auto;visibility:hidden;will-change:transform,opacity;-webkit-touch-callout:none}
  .cvp .cv img{-webkit-user-drag:none;pointer-events:none}
  .cvp .pile{perspective:1300px}
  .cvp .cv{backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
  .cvp .cv .shade{position:absolute;inset:0;opacity:0;pointer-events:none;border-radius:3px}
  .cvp .info{margin:0 auto;padding:0 16px}
  .cvp .info h2{font-size:30px;margin:6px 0}.cvp .info .sub{font-size:18px;margin-bottom:12px}
  .cvp .para{font-size:15px;margin:0 auto 6px}
  .cvp .inside{padding-top:10px}.cvp .inside b{font-size:17px;margin-bottom:8px}.cvp .bar{margin:16px auto 0}
  .cvp .hint .pc{display:none}.cvp .hint .ph{display:inline}
}