/* ==========================================================================
   HOUSE PATTERN LAYER — template 29 "Cassandra" (Grace & Kevin)
   Loaded LAST so it can override the vendor skins safely.

   What this file does
   -------------------
   • Geometry tokens: --header-h is the single source of truth. The sticky
     header enforces it; the cover cap, scroll padding and anchor offsets
     derive from it. The vendor's --body-height (used for the cover height)
     is re-defined as calc(100dvh - var(--header-h)) so the cover can never
     be taller than one screen under the header.
   • Continuous scroll: the mobile body lock and the fixed "top cover" gate
     are dissolved — every section stacks in normal document flow as a
     full-viewport scene (html.js only).
   • Navigation chrome: sticky header + label nav (desktop), burger + slide-
     down sheet (mobile), floating icon dock, scroll-progress hairline. All
     hidden without JS — the page reads as a plain document.
   • Lightbox, free pages, empty-state (.is-empty) and cover-fit (.fit-hidden)
     states. Both hidden states are visual only: elements stay in the DOM and
     print restores everything.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens
   (Geometry tokens live on :root so html's scroll-padding can resolve them;
   custom properties never inherit upwards.)
   -------------------------------------------------------------------------- */
:root {
    --header-h: 56px;
    --header-gap: 12px;
    --anchor-offset: calc(var(--header-h) + var(--header-gap));
}
body.cassandra {
    /* Vendor geometry hook: cover/top-cover heights derive from this. */
    --body-height: calc(100dvh - var(--header-h));
    --house-ink: #817B5C;                 /* olive accent (matches --text-tertiary) */
    --house-ink-soft: rgba(129, 123, 92, 0.55);
    --house-sand: #D9D2C3;                /* page background */
    --house-sand-glass: rgba(217, 210, 195, 0.88);
    --house-line: rgba(129, 123, 92, 0.28);
    --house-serif: 'Instrument Serif', 'Playfair Display', serif;
    --house-sans: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* --------------------------------------------------------------------------
   2 · Scroll geometry + continuous scroll
   -------------------------------------------------------------------------- */
html {
    /* Native hash jumps land at the same offset the JS engine uses
       (header height + 1px hairline) — the two never disagree. */
    scroll-padding-top: calc(var(--header-h) + 1px);
    scroll-behavior: smooth;
}

/* The old mobile app-shell lock is gone: guests scroll the document. */
@media only screen and (max-width: 960px) {
    body.cassandra {
        overflow: visible;
    }
}

/* Reserve room for the fixed header (both breakpoints). */
body.cassandra {
    padding-top: var(--header-h);
}

/* --------------------------------------------------------------------------
   3 · No-JS: the page is a plain readable document, chrome hidden
   -------------------------------------------------------------------------- */
html:not(.js) .site-head,
html:not(.js) .menu-sheet,
html:not(.js) .menu-backdrop,
html:not(.js) .dock,
html:not(.js) .scroll-progress {
    display: none !important;
}

/* Without JS nothing may depend on script for visibility either. */
html:not(.js) [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

/* --------------------------------------------------------------------------
   4 · AOS-compatible reveal engine styles (aos.js/aos.css ship empty;
       house.js provides the IntersectionObserver engine under window.AOS)
   -------------------------------------------------------------------------- */
html.js [data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: var(--aos-duration, 400ms);
    transition-delay: var(--aos-delay, 0ms);
}
html.js [data-aos="fade-up"]      { transform: translate3d(0, 24px, 0); }
html.js [data-aos="fade-down"]    { transform: translate3d(0, -24px, 0); }
html.js [data-aos="fade-right"]   { transform: translate3d(-24px, 0, 0); }
html.js [data-aos="fade-left"]    { transform: translate3d(24px, 0, 0); }
html.js [data-aos="zoom-in"]      { transform: scale(0.92); }
html.js [data-aos="zoom-out"]     { transform: scale(1.08); }
html.js [data-aos="zoom-out-up"]  { transform: scale(1.08) translate3d(0, 24px, 0); }
html.js [data-aos].aos-animate {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   5 · Sticky header
   -------------------------------------------------------------------------- */
.site-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    z-index: 900;
    background: var(--house-sand-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--house-line);
    transition: box-shadow 0.25s ease, background 0.25s ease;
}
.site-head.scrolled {
    background: rgba(223, 217, 203, 0.96);
    box-shadow: 0 6px 24px rgba(60, 55, 40, 0.12);
}
.site-head-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    max-width: 1560px;
    margin: 0 auto;
}
.brand {
    font-family: var(--house-serif);
    font-style: italic;
    font-size: 21px;
    line-height: 1;
    color: var(--house-ink);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.01em;
    flex: 0 0 auto;
}
.brand .amp {
    color: var(--background-secondary);
    padding: 0 1px;
}
.brand:hover {
    color: #6d6748;
}

/* Desktop label nav */
.head-nav {
    display: none;
    margin-left: auto;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.head-nav::-webkit-scrollbar { display: none; }
.head-nav .tab-btn {
    appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--house-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--house-ink-soft);
    padding: 8px 9px;
    border-radius: 999px;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
}
.head-nav .tab-btn:hover {
    color: var(--house-ink);
    background: rgba(129, 123, 92, 0.12);
}
.head-nav .tab-btn.active {
    color: #fff;
    background: var(--house-ink);
}

/* Burger (below 1100px) */
.burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 10px;
    background: none;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.burger:hover { background: rgba(129, 123, 92, 0.12); }
.burger span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--house-ink);
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Scroll progress hairline */
.scroll-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 100%;
    background: var(--house-ink);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

@media (min-width: 1100px) {
    .head-nav { display: flex; }
    .burger { display: none; }
}
@media (max-width: 480px) {
    .brand { font-size: 18px; }
    .site-head-inner { gap: 10px; padding: 0 12px; }
}

/* --------------------------------------------------------------------------
   6 · Mobile slide-down sheet + backdrop
   -------------------------------------------------------------------------- */
.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 940;
    background: rgba(47, 43, 32, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.menu-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.menu-sheet {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 950;
    max-height: calc(100dvh - var(--header-h) - 90px);
    overflow-y: auto;
    background: var(--house-sand);
    border-bottom: 1px solid var(--house-line);
    box-shadow: 0 24px 48px rgba(60, 55, 40, 0.25);
    transform: translateY(-104%);
    transition: transform 0.28s cubic-bezier(0.23, 0.56, 0.38, 0.78);
    overscroll-behavior: contain;
}
.menu-sheet.is-open { transform: translateY(0); }
.menu-sheet ol {
    list-style: none;
    margin: 0;
    padding: 10px 12px 16px;
}
.menu-sheet .menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(129, 123, 92, 0.16);
    padding: 13px 10px;
    cursor: pointer;
    color: #6d6748;
    transition: background 0.15s ease, color 0.15s ease;
}
.menu-sheet li:last-child .menu-item { border-bottom: 0; }
.menu-sheet .menu-item:hover,
.menu-sheet .menu-item:focus-visible { background: rgba(129, 123, 92, 0.12); }
.menu-sheet .menu-item.active { color: var(--house-ink); background: rgba(129, 123, 92, 0.14); }
.menu-sheet .menu-item i {
    font-size: 20px;
    color: var(--house-ink);
    flex: 0 0 auto;
}
.menu-sheet .menu-label {
    font-family: var(--house-serif);
    font-size: 19px;
    line-height: 1.2;
    flex: 1 1 auto;
}
.menu-sheet .menu-num {
    font-family: var(--house-sans);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--house-ink-soft);
}

/* --------------------------------------------------------------------------
   7 · Floating icon dock (mobile / tablet)
   -------------------------------------------------------------------------- */
.dock {
    position: fixed;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: calc(100vw - 20px);
    padding: 5px;
    background: var(--house-sand-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--house-line);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(60, 55, 40, 0.22);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--house-ink-soft) transparent;
}
.dock::-webkit-scrollbar { height: 3px; }
.dock::-webkit-scrollbar-thumb { background: var(--house-ink-soft); border-radius: 3px; }
.dock::-webkit-scrollbar-track { background: transparent; }
.dock button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    appearance: none;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--house-ink);
    font-size: 17px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.dock button:hover { background: rgba(129, 123, 92, 0.16); }
.dock button.active {
    background: var(--house-ink);
    color: var(--house-sand);
    transform: scale(1.06);
}
@media (min-width: 960px) {
    .dock { display: none; }
}

/* --------------------------------------------------------------------------
   8 · Scenes — every section is a full-viewport moment in normal flow.
       Taller sections simply grow; the cap only applies to the covers.
   -------------------------------------------------------------------------- */
/* Reserve media geometry where the vendor left images unsized — otherwise
   lazy/natural-size images shift the layout under an in-flight glide
   (the glide re-snap only corrects residue, this removes the source). */
.story-preview .story-picture a {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.story-preview .story-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.live-streaming .streaming-info .preview.wide.youtube {
    position: relative;
    aspect-ratio: 16 / 9;
    height: auto;
    overflow: hidden;
}
.live-streaming .streaming-info .preview.wide.youtube > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media only screen and (min-width: 961px) {
    /* The fixed primary pane keeps its full-height look; the header floats
       above it as glass, so only the scrolling column needs the offset. */
    .kat-page__side-to-side .secondary-pane {
        padding-top: 0;
    }
}

html.js .secondary-pane > section,
html.js .secondary-pane > .photo-wrap {
    min-height: calc(100dvh - var(--header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-margin-top: var(--anchor-offset);
}
html.js .secondary-pane > section.footer {
    min-height: 0;
    display: block;
    scroll-margin-top: 0;
}

/* The floating dock is fixed over the page end — reserve room so the last
   interactive element (footer credit link) is never covered. */
@media only screen and (max-width: 960px) {
    body.cassandra .footer .footer-inner {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

/* --------------------------------------------------------------------------
   9 · Cover scenes — exactly one screen, capped, centred, fully visible
   -------------------------------------------------------------------------- */
/* The old fixed "top cover" gate becomes the mobile hero scene. It keeps its
   vendor display contract — hidden on desktop (the fixed primary pane IS the
   desktop cover), first scene on mobile — but scoped so it out-specifies the
   scenes rule above (which would otherwise force it visible everywhere). */
section.top-cover {
    /* relative, not static: the vendor ::before gradient is absolute with
       height:100% — left unpositioned, it resolves against the whole
       document and paints (and hit-tests!) over every section. */
    position: relative;
    height: auto;
    min-height: var(--body-height);
    max-height: none;
    z-index: auto;
    display: none;
    transition: none;
    scroll-margin-top: calc(var(--header-h));
}
html.js .secondary-pane > section.top-cover { display: none; }
@media only screen and (max-width: 960px) {
    html.js .secondary-pane > section.top-cover { display: flex; }
    section.top-cover { display: flex; }
}
section.top-cover.hide {
    top: auto;
    bottom: auto;
    pointer-events: auto;
}
section.top-cover .inner {
    justify-content: center;
    min-height: var(--body-height);
    padding-top: 8px;
}
/* The decorative hairlines were % of a fixed-height shell; as a growing
   scene they need absolute-safe fluid heights so they never collapse or
   force the hero past one screen. */
section.top-cover .topcover-line.top { height: clamp(48px, 14vh, 160px); }
section.top-cover .topcover-line.bottom { height: clamp(64px, 20vh, 220px); }
/* The gate's full-bleed photo now breathes: it may not eat the whole scene. */
section.top-cover .inner .highlight {
    height: 100%;
    max-height: 100%;
}
section.top-cover .inner .details {
    bottom: 18px;
    padding: 0 18px;
}
/* The floating dock lives over the hero's bottom edge — raise the CTA so
   the scene's primary action is never covered. */
@media only screen and (max-width: 960px) {
    section.top-cover .inner .details {
        bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }
}

/* The main cover (names + date + framed photo) */
section.cover {
    height: auto;
}
section.cover .inner .head {
    padding-bottom: 40px;
}
section.cover .inner .body .cover-frame,
section.cover .inner .body .preview-container .picture img {
    /* decorative full-bleed photo: capped so the head text always fits */
}

/* Fluid hero type stops growing past ~700px-tall viewports so mid-size
   phones never lose content. */
@media only screen and (max-width: 960px) {
    section.top-cover .inner .head h1,
    section.cover .inner .head h1 {
        font-size: clamp(34px, 10vw, 52px);
    }
}
@media only screen and (min-height: 700px) and (max-width: 960px) {
    section.top-cover .inner .head h1,
    section.cover .inner .head h1 {
        font-size: clamp(34px, 8.5vw, 56px);
    }
}

/* --------------------------------------------------------------------------
   10 · Free / custom pages
   -------------------------------------------------------------------------- */
.free-page .free-inner {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 48px 24px;
}
.free-page .free-kicker {
    font-family: var(--house-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--house-ink-soft);
    margin-bottom: 10px;
}
.free-page .free-page-title {
    font-family: var(--house-serif);
    font-weight: 500;
    font-size: clamp(30px, 7vw, 44px);
    line-height: 1.1;
    color: #5d573d;
    margin: 0 0 8px;
}
.free-page .free-rule {
    width: 56px;
    height: 2px;
    background: var(--house-ink);
    margin: 18px 0 26px;
}
.free-page .free-block {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(129, 123, 92, 0.30);
    border-radius: 10px;
    padding: 20px 22px;
    margin-bottom: 14px;
}
.free-page .free-block h3 {
    font-family: var(--house-serif);
    font-size: 22px;
    color: #5d573d;
    margin: 0 0 6px;
}
.free-page .free-block p {
    font-family: var(--house-sans);
    font-size: 15px;
    line-height: 1.65;
    color: #6d6748;
    margin: 0;
}
.free-page .free-block a {
    color: var(--house-ink);
    font-weight: 600;
}

/* Free-page media: the venue plate (image) and the film (video). Both open
   full size in the lightbox; with the media flag OFF the affordances are
   stripped by the rules in §12. */
.free-page .plate-figure,
.free-page .film-figure {
    margin: 0 0 20px;
}
.free-page .plate-figure .gallery-open {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 1px solid rgba(129, 123, 92, 0.35);
    border-radius: 10px;
    overflow: hidden;
    cursor: zoom-in;
}
.free-page .plate-figure .plate-img {
    display: block;
    width: 100%;
    height: auto;
}
.free-page .plate-figure .plate-cap,
.free-page .film-figure .film-cap {
    font-family: var(--house-sans);
    font-size: 12.5px;
    font-style: italic;
    color: var(--house-ink-soft);
    margin: 10px 2px 0;
}
.free-page .film-figure .video-inline {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #2b271d;
    border: 1px solid rgba(129, 123, 92, 0.35);
    border-radius: 10px;
}
.free-page .video-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    appearance: none;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--house-line);
    border-radius: 999px;
    padding: 12px 24px;
    font-family: var(--house-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: #6d6748;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.free-page .video-chip:hover {
    background: var(--house-ink);
    color: #fff;
}
.free-page .video-chip .arrow { transition: transform 0.2s ease; }
.free-page .video-chip:hover .arrow { transform: translate(2px, -2px); }
.free-page .video-chip[disabled] { pointer-events: none; cursor: default; }
.free-page .film-actions { margin: 0 0 22px; }

/* --------------------------------------------------------------------------
   11 · Empty-state (.is-empty) and cover-fit (.fit-hidden) — visual only.
        Present in the DOM; print restores everything.
   -------------------------------------------------------------------------- */
.is-empty,
html.js .fit-hidden {
    display: none !important;
}

/* --------------------------------------------------------------------------
   12 · Lightbox (media click-to-open with zoom)
   -------------------------------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(43, 39, 29, 0.92);
    opacity: 0;
    transition: opacity 0.22s ease;
    touch-action: none;
}
.lightbox.is-open { opacity: 1; }
html.lb-open, html.lb-open body { overflow: hidden !important; }
.lightbox-media {
    position: relative;
    width: min(94vw, 1200px);
    height: min(82vh, 82dvh);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
}
.lightbox-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center center;
    transition: transform 0.12s ease-out;
    user-select: none;
    -webkit-user-select: none;
}
.lightbox-media video,
.lightbox-media iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 6px;
    object-fit: contain;
    background: transparent;
}
.lightbox.is-panning .lightbox-media img { transition: none; }
.lightbox-cap {
    margin: 12px 16px 0;
    max-width: 80vw;
    text-align: center;
    font-family: var(--house-serif);
    font-size: 17px;
    color: #e9e4d6;
}
.lightbox-hint {
    margin: 4px 16px 14px;
    text-align: center;
    font-family: var(--house-sans);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: rgba(233, 228, 214, 0.62);
}
.lightbox-original {
    display: inline-block;
    margin-bottom: 8px;
    font-family: var(--house-sans);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: #D9D2C3;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.lightbox-original.is-hidden { display: none; }
.lightbox button {
    appearance: none;
    border: 0;
    background: rgba(217, 210, 195, 0.14);
    color: #efe9da;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox button:hover { background: rgba(217, 210, 195, 0.3); transform: scale(1.05); }
.lightbox-close {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: 16px;
    width: 42px;
    height: 42px;
    font-size: 17px;
}
.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    font-size: 22px;
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-prev:hover, .lightbox-next:hover { transform: translateY(-50%) scale(1.05); }
.lightbox-prev.is-hidden, .lightbox-next.is-hidden { display: none; }

/* Media click affordance for lightbox-able images */
.lightgallery a {
    cursor: zoom-in;
}
.photo-link { cursor: zoom-in; }

/* Option flag OFF: media renders inline only — no leftover affordances. */
html[data-media-lightbox="off"] .lightgallery a,
html[data-media-lightbox="off"] .photo-link,
html[data-media-lightbox="off"] .gallery-open {
    cursor: default;
    pointer-events: none;
}
html[data-media-lightbox="off"] .video-chip { display: none !important; }

/* --------------------------------------------------------------------------
   13 · Styled scrollbars for scrollable areas (palette-matched)
   -------------------------------------------------------------------------- */
body.cassandra::-webkit-scrollbar { width: 10px; }
body.cassandra::-webkit-scrollbar-track { background: #cfc7b4; }
body.cassandra::-webkit-scrollbar-thumb {
    border-width: 2px;
    border-radius: 8px;
    background-color: var(--house-ink-soft);
}
body.cassandra::-webkit-scrollbar-thumb:hover { background-color: var(--house-ink); }
.menu-sheet, .head-nav { scrollbar-color: var(--house-ink-soft) transparent; }

/* --------------------------------------------------------------------------
   14 · Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .menu-sheet, .menu-backdrop, .lightbox, .site-head { transition: none !important; }
}

/* --------------------------------------------------------------------------
   15 · Print — chrome off, everything hidden by fit/empty states restored
   -------------------------------------------------------------------------- */
@media print {
    .site-head, .dock, .menu-sheet, .menu-backdrop,
    .scroll-progress, .lightbox, .video-chip {
        display: none !important;
    }
    body.cassandra { padding-top: 0; }
    html.js [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .is-empty, html.js .fit-hidden { display: revert !important; }
    html.js .secondary-pane > section,
    html.js .secondary-pane > .photo-wrap {
        min-height: 0;
        display: block;
    }
    section.top-cover { display: none !important; }
    .kat-page__side-to-side .primary-pane {
        position: static;
        width: 100%;
    }
    .kat-page__side-to-side .secondary-pane { width: 100%; }
}

/* Platform film embed (Film Video Link morph): the engine swaps the
   placeholder <video class="video-inline"> for an <iframe> of the same
   class — keep the 16:9 frame and drop the native video chrome. */
.free-page .film-figure iframe.video-inline {
    border: 0;
}