/* ===========================================
   FIXED 16:9 STAGE: MANDATORY BASE STYLES
   Include this ENTIRE file in every presentation.
   Slides are authored at 1920×1080 and scaled as a whole.
   =========================================== */

/* 1. Lock the browser viewport */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--stage-bg, #000);
}

/* 2. Full-window deck viewport */
.deck-viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--stage-bg, #000);
}

/* 3. Fixed 16:9 design canvas.
   JavaScript sets transform: translate(...) scale(...). */
.deck-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    transform-origin: 0 0;
    background: var(--slide-bg, #fff);
}

/* 4. Slides stack inside the fixed stage.
   Content must be laid out at 1920×1080, not reflowed per device. */
.slide {
    position: absolute;
    inset: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: var(--slide-bg, #fff);
}

.slide.active,
.slide.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* 5. Keep media inside authored slide bounds */
img,
video,
canvas,
svg {
    max-width: 100%;
    max-height: 100%;
}

/* 6. Presentation chrome stays outside the slide design system */
.deck-controls {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 1000;
}

/* 7. Print one fixed-size slide per page */
@media print {
    html,
    body {
        width: 1920px;
        height: auto;
        overflow: visible;
        background: #fff;
    }

    .deck-viewport {
        position: static;
        overflow: visible;
        background: #fff;
    }

    .deck-stage {
        position: static;
        width: auto;
        height: auto;
        transform: none !important;
        background: none;
    }

    .slide {
        position: relative;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 1920px;
        height: 1080px;
        break-after: page;
        page-break-after: always;
    }

    .slide:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .deck-controls {
        display: none !important;
    }
}

/* 8. Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.2s !important;
    }
}


:root { --stage-bg:#20142f; --slide-bg:#20142f; color:#fff; font-family:"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
.slide { transition:opacity 220ms ease; }
.slide-copy { position:absolute; left:130px; top:112px; width:850px; }
.brand { color:#d4b5f0; font-size:36px; margin:0 0 72px; font-weight:650; }
h1,h2 { font-family:Georgia,serif; font-size:118px; line-height:1.05; font-weight:500; letter-spacing:-3px; margin:0 0 44px; }
h3 { font-size:44px; line-height:1.15; margin:24px 0; }
.lead { font-size:40px; line-height:1.6; color:#ebdff5; }
.detail { font-size:34px; line-height:1.65; color:#d2bfdc; margin-top:44px; }
.cover-art { position:absolute; width:780px; height:780px; object-fit:contain; right:90px; top:120px; border-radius:48px; }
.footnote { position:absolute; left:130px; bottom:58px; font-size:26px; color:#baa5ca; }
.tour-comparison { position:absolute; width:780px; right:100px; top:240px; }
.tour-comparison img { width:780px; height:520px; object-fit:cover; border-radius:28px; }
.tour-comparison > div { display:flex; justify-content:space-around; font-size:30px; margin-top:24px; color:#e8d4fa; }
.wide-copy { padding:110px 130px; }
.wide-copy h2 { font-size:98px; max-width:1580px; }
.wide-copy .brand { margin-bottom:48px; }
.tour-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:55px; margin-top:70px; }
.tour-steps article { border-top:2px solid #66497d; padding-top:24px; }
.tour-steps article > span { font-size:32px; color:#c69be9; }
.tour-steps p,.tour-paths p,.tour-package p { font-size:32px; line-height:1.6; color:#dccbe9; }
.tour-paths,.tour-package { display:grid; grid-template-columns:1fr 1fr; gap:70px; margin-top:50px; }
.tour-paths article { padding:38px 44px; background:#382448; border-radius:24px; }
.tour-paths h3 { margin-top:0; }
.tour-package strong { font-family:Georgia,serif; font-weight:500; font-size:62px; color:#e7cfff; }
.tour-package { margin-top:60px; }
.tour-action { display:inline-block; padding:22px 34px; background:#dbc0f4; color:#2a173b; font-size:32px; border-radius:16px; margin-top:8px; }
.deck-controls { display:flex; gap:20px; align-items:center; padding:10px 18px; border-radius:40px; background:#3b294d; font-size:16px; }
.deck-controls a { color:white; text-decoration:none; padding:8px; }
.deck-controls button { width:44px; height:44px; border:0; border-radius:50%; font-size:24px; background:#dec3f8; color:#301b41; cursor:pointer; }
.deck-controls button:disabled { opacity:.35; cursor:default; }
a:focus-visible,button:focus-visible { outline:3px solid #fff; outline-offset:5px; }
#tour-position { white-space:nowrap; font-variant-numeric:tabular-nums; min-width:42px; text-align:center; }