/* ============================================================
   Package sheet lightbox.

   Deliberately NOT an iframe. iOS Safari will not render a PDF in an
   iframe reliably, and most of this site's traffic is iPhone, so the
   sheets are shown as the images they already are. The PDF stays one tap
   away at the bottom for anyone who wants to save or print it.

   Shell copied from .book-modal so the two read as the same component:
   same scrim, same card colour, same brass border, same close button.
   ============================================================ */

.pkg-modal{position:fixed;inset:0;z-index:2147481400;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(6,5,7,.84);backdrop-filter:blur(6px)}
.pkg-modal.open{display:flex}

/* The height is definite, not a max-height. A percentage max-height on the
   image only resolves against an ancestor with a definite height — with
   max-height alone it computes to none, the image takes its full width and
   the bottom of the sheet is cut off with no sign that it scrolled. */
.pkg-card{position:relative;display:flex;flex-direction:column;width:min(720px,100%);height:calc(100vh - 40px);
  background:#141116;border:1px solid var(--brass,#D9A441);border-radius:20px;overflow:hidden;
  box-shadow:0 34px 90px rgba(0,0,0,.66);
  animation:pkg-in .3s cubic-bezier(.2,.8,.25,1) both}
@supports(height:100dvh){.pkg-card{height:calc(100dvh - 40px)}}
@keyframes pkg-in{from{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:none}}
html[data-a11y-motion="1"] .pkg-card{animation:none}
@media(prefers-reduced-motion:reduce){.pkg-card{animation:none}}

.pkg-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px 14px;border-bottom:1px solid rgba(244,239,231,.09);flex:0 0 auto}
.pkg-head h3{font-family:var(--font-display,sans-serif);font-weight:800;font-size:1.25rem;letter-spacing:.04em;
  text-transform:uppercase;line-height:1.05;margin:0;color:var(--cream,#F4EFE7)}
.pkg-x{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid rgba(244,239,231,.24);
  background:rgba(13,11,14,.5);color:var(--cream,#F4EFE7);font-size:1.4rem;line-height:1;cursor:pointer}
.pkg-x:hover{border-color:var(--brass,#D9A441);color:var(--brass,#D9A441)}

/* The sheet itself. It opens showing the WHOLE page — a lightbox that
   starts halfway down a menu makes you scroll to find out what you are
   looking at. Tapping zooms to twice the card width and the container
   becomes pannable; pinch-zoom stays enabled so iOS can do its own thing
   on top of that. */
.pkg-figure{flex:1 1 auto;min-height:0;margin:0;display:flex;align-items:center;justify-content:center;
  overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:#0D0B0E;touch-action:pan-x pan-y pinch-zoom;cursor:zoom-in}
.pkg-figure img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;margin:auto}
.pkg-figure.zoomed{cursor:zoom-out;align-items:flex-start}
.pkg-figure.zoomed img{width:200%;max-width:none;max-height:none;margin:0}

.pkg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:13px 18px;border-top:1px solid rgba(244,239,231,.09);flex:0 0 auto}
.pkg-hint{color:var(--ash,#B8AFA4);font-size:.78rem;margin:0}
.pkg-dl{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(244,239,231,.28);border-radius:12px;
  padding:10px 16px;font-family:var(--font-display,sans-serif);font-size:.92rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cream,#F4EFE7);background:rgba(13,11,14,.35)}
.pkg-dl:hover{border-color:var(--brass,#D9A441);color:var(--brass,#D9A441)}
.pkg-dl svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8}

/* Phones: use nearly the whole screen, but keep a scrim margin. Going
   edge-to-edge would leave nothing to tap to dismiss, and every other
   modal on the site closes on a scrim tap — the sheet is not worth
   breaking that habit for 12px. */
@media(max-width:760px){
  .pkg-modal{padding:12px}
  .pkg-card{width:100%;height:calc(100vh - 24px);border-radius:14px}
  .pkg-head{padding:12px 14px 10px}
  .pkg-head h3{font-size:1.05rem}
  .pkg-foot{padding:11px 14px}
  .pkg-hint{display:none}
  .pkg-dl{width:100%;justify-content:center;padding:14px 16px}
}
@supports(height:100dvh){
  @media(max-width:760px){.pkg-card{height:calc(100dvh - 24px)}}
}