/* Memoroam — Layout */
/* The translateZ(0) is intentional — it establishes a containing block for
   `position: fixed` descendants, so every overlay/sheet/modal in the app
   is scoped to the phone bounds instead of bleeding to the viewport edges
   on desktop preview. No-op on real phones (viewport ≤ 390px). */
.phone{width:100%;max-width:390px;min-height:100vh;background:var(--bg);position:relative;overflow:hidden;display:flex;flex-direction:column;transform:translateZ(0);}

/* Desktop / wide-viewport preview: the phone is meant to render at mobile
   resolution. Frame it intentionally so the bg around it reads as "outside
   the app" rather than a misaligned edge. No effect on real phones because
   their viewport ≤ 390px and the phone fills the screen. */
@media (min-width: 480px){
  body{background:#15110d;}
  [data-theme="dark"] body{background:#0c0a08;}
  .phone{box-shadow:0 12px 60px rgba(0,0,0,.35);}
}

/* ── PAGE STRIP (horizontal swipe container) ── */
.page-strip{display:flex;flex:1;width:400%;/* 4 pages */transition:transform .35s cubic-bezier(0.4,0,0.2,1);will-change:transform;overflow:hidden;}
.page-strip,.page,.page-scroll{overscroll-behavior:contain;}
.page{width:25%;/* each page = 25% of 400% strip = 100vw */flex-shrink:0;height:calc(100vh - 76px);/* leave room for nav */position:relative;overflow:hidden;}
.page-scroll{height:100%;overflow-y:auto;overflow-x:hidden;padding:0 18px 110px;-webkit-overflow-scrolling:touch;position:relative;touch-action:pan-y;}

/* tickets page uses same padding */
#pageTickets .page-scroll{padding-bottom:110px;}

/* blank pages */
.blank-page-header{padding:54px 0 22px;}
.blank-title{font-family:'Playfair Display',serif;font-size:34px;font-weight:700;color:var(--text);line-height:1.1;}
.blank-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:50vh;color:var(--muted);}
.blank-placeholder p{font-size:14px;color:var(--muted);}