/* ═══════════════════════════════════════════════════════════════════════
   23 — "Timeless Romance" · house.css
   House-UX chrome for the naturally-scrolling conversion:
     · geometry tokens — --header-h drives the header height, the cover
       cap and every anchor offset (real chrome never drifts),
     · sticky header over the scrolling column (the right pane on desktop:
       the fixed photo pane keeps the original side-by-side look),
     · slide-down mobile sheet + floating dock,
     · full-viewport scenes in normal document flow,
     · one-screen covers (top cover + invitation cover) with trim support,
     · free pages, the click-to-zoom lightbox, empty-state classes,
     · no-JS fallback, print restoration, palette scrollbars.

   Palette (matches body.syakira): cream #EAE2DC paper, wine #89565C,
   blush #D6A191, sage #BCC6BD.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --wine:    #89565C;
    --wine-2:  #74464C;
    --blush:   #D6A191;
    --blush-2: #C08A7E;
    --sage:    #BCC6BD;
    --cream:   #EAE2DC;
    --cream-2: #F3EDE9;
    --ink:     #404040;
    --muted:   #9A8B8D;
    --line:    rgba(137, 86, 92, 0.22);
    --veil:    rgba(43, 29, 31, 0.55);

    /* Geometry tokens — real chrome must never drift from these. */
    --header-h: 54px;
    --anchor-gap: 10px;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --head-chrome: calc(var(--header-h) + var(--safe-t));
    --header-offset: calc(var(--head-chrome) + var(--anchor-gap));
    --dock-space: 96px;
    --pane-split: 61%;              /* fixed photo pane width (side-to-side) */
    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Unlock the page ─────────────────────────────────────────────────────
   The old shell locked body overflow on ≤960px until "Open Invitation".
   The house UX scrolls naturally from the first paint. */
html, body.syakira { overflow-x: clip; }
@media only screen and (max-width: 960px) {
    body.syakira { overflow: visible !important; }
}

/* Room for the fixed header (all widths — the primary photo pane is
   position:fixed and ignores flow padding, so only the scrolling column
   moves) and for the floating dock (all widths on this template — the
   side-by-side column is too narrow for a label nav). */
.js body.syakira { padding-top: var(--head-chrome); }
.js body.syakira { padding-bottom: calc(var(--dock-space) + var(--safe-b)); }

/* Native anchor/deep-link jumps stop just below the sticky header. */
.js [data-panel] { scroll-margin-top: var(--header-offset); }
/* Sections receive programmatic focus after nav jumps — no ring. */
.js [data-panel]:focus, .js [data-panel]:focus-visible { outline: none; }

/* ═══ SCENES — sections stack in flow, each a full-viewport scene ═══
   min-height (never height): taller sections simply grow and flow. */
.js section.scene, .js div.scene {
    min-height: calc(100vh - var(--head-chrome));
    min-height: calc(100dvh - var(--head-chrome));
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* The top cover keeps its own display rules (flex ≤960px only, none on
   desktop — the side-by-side look starts at the invitation cover). */

/* ═══ STICKY HEADER ═════════════════════════════════════════════════════ */
.site-head {
    position: fixed;
    top: 0;
    left: 0; right: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--head-chrome);
    padding: var(--safe-t) clamp(10px, 2vw, 18px) 0;
    background: rgba(243, 237, 233, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    color: var(--wine);
    transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
/* On the side-by-side desktop the header belongs to the scrolling column
   only — the fixed photo pane keeps its clean full-height look. */
@media (min-width: 961px) {
    .site-head { left: var(--pane-split); }
}
.site-head.is-scrolled {
    background: rgba(240, 233, 227, 0.97);
    box-shadow: 0 14px 30px -20px rgba(68, 40, 44, 0.55);
}
.head-progress {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--wine), var(--blush));
    pointer-events: none;
}
.head-brand {
    display: inline-flex; align-items: center;
    text-decoration: none;
    color: var(--wine);
}
.head-mark { font-size: 16px; line-height: 1; }
.head-title {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 52%;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 10.5px; letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--wine);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Navigation model on this template: the scrolling column is only ~39% of
   the desktop viewport — too narrow for fifteen label tabs. The burger +
   slide-down sheet and the floating dock therefore serve EVERY width (both
   derive from the DOM sections); the header carries brand + Print. The
   hidden .head-nav mount is still built by house.js so scroll-spy has the
   same surfaces as sibling templates. */
.head-nav { display: none; }
.tab-btn { display: none; }
.tab-btn {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 8px;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 10.5px; line-height: 1;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s var(--ease), background-color .2s var(--ease);
}
.tab-btn span { overflow: hidden; text-overflow: ellipsis; }
.tab-btn:hover { color: var(--wine); background: rgba(137, 86, 92, 0.08); }
.tab-btn[aria-current="page"], .tab-btn.is-current {
    color: var(--cream);
    background: var(--wine);
    border-bottom-color: var(--wine);
}
.tab-btn:focus-visible { outline-offset: -3px; }

.head-print {
    display: inline-flex; align-items: center;
    margin-left: auto;
    border: 1px solid var(--line);
    background: transparent; color: var(--wine);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 10.5px; line-height: 1; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: color .2s var(--ease), background-color .2s var(--ease);
}
.head-print:hover { background: rgba(137, 86, 92, 0.08); }

.head-burger {
    display: inline-grid;
    place-items: center;
    width: 38px; height: 36px;
    padding: 0;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--wine);
    cursor: pointer;
}
.head-burger svg { width: 19px; height: 19px; }
.head-burger .icon-close { display: none; }
.head-burger[aria-expanded="true"] .icon-open { display: none; }
.head-burger[aria-expanded="true"] .icon-close { display: block; }

/* ═══ MOBILE SLIDE-DOWN SHEET ═══════════════════════════════════════════ */
.menu-backdrop {
    position: fixed;
    inset: var(--head-chrome) 0 0 0;
    z-index: 70;
    background: var(--veil);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--ease);
}
/* On the side-by-side desktop the menu belongs to the scrolling column,
   like the header. */
@media (min-width: 961px) {
    .menu-backdrop { inset: var(--head-chrome) 0 0 var(--pane-split); }
}
.menu-backdrop.is-open { opacity: 1; pointer-events: auto; }

.menu-sheet {
    position: fixed;
    top: var(--head-chrome);
    left: 0; right: 0;
    z-index: 71;
    max-height: calc(100dvh - var(--head-chrome));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 clamp(14px, 4vw, 26px) calc(16px + var(--safe-b));
    background: var(--cream-2);
    border-bottom: 2px solid var(--blush);
    box-shadow: 0 30px 50px -24px rgba(68, 40, 44, 0.5);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.menu-sheet.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}
@media (min-width: 961px) {
    .menu-sheet { left: var(--pane-split); }
}
.menu-sheet-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 50px;
    padding: 11px 4px;
    border: 0;
    border-bottom: 1px solid rgba(137, 86, 92, 0.14);
    background: transparent;
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 14.5px; line-height: 1.3;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: color .18s var(--ease), background-color .18s var(--ease), padding-left .18s var(--ease);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item svg { width: 17px; height: 17px; flex: none; color: var(--wine); }
.menu-item .menu-num {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.menu-item:hover, .menu-item:focus-visible { background: rgba(214, 161, 145, 0.14); padding-left: 10px; }
.menu-item.is-current { color: var(--wine); }
.menu-item.is-current svg { color: var(--blush-2); }
.menu-sheet:focus { outline: none; }

/* ═══ FLOATING DOCK (all widths — centred in the scrolling column) ══════ */
.dock {
    position: fixed;
    left: 50%;
    bottom: calc(12px + var(--safe-b));
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: calc(100vw - 20px);
    padding: 5px;
    background: rgba(116, 70, 76, 0.95);
    border: 1px solid rgba(214, 161, 145, 0.4);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 44px -22px rgba(68, 40, 44, 0.65);
    overflow-x: auto;
    scrollbar-width: none;
}
.dock::-webkit-scrollbar { display: none; }
@media (min-width: 961px) {
    .dock { left: calc(var(--pane-split) + (100% - var(--pane-split)) / 2); max-width: calc(39vw - 20px); }
}
.dock button {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 1 auto;
    min-width: 28px;
    width: 34px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(234, 226, 220, 0.82);
    cursor: pointer;
    transition: color .2s var(--ease), background-color .2s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.dock button svg { width: 17px; height: 17px; }
.dock button:hover { color: #fff; background: rgba(214, 161, 145, 0.22); }
.dock button.is-current { color: var(--wine-2); background: var(--blush); }

/* ═══ EMPTY-STATE + COVER-FIT CLASSES ═══════════════════════════════════
   Hidden = visually hidden only: present in DOM, restored in print. */
.is-empty, .fit-hidden { display: none !important; }

/* ═══ TOP COVER — first scene, exactly one screen (mobile) ══════════════
   Was a position:fixed gate with body overflow hidden; now it stacks like
   every other section and "Open Invitation" simply glides onward. */
section.top-cover {
    position: relative;
    z-index: 1;
    height: auto;
    min-height: calc(100vh - var(--head-chrome));
    min-height: calc(100dvh - var(--head-chrome));
    transition: none;
}
section.top-cover.hide { top: auto; bottom: auto; }
@media (min-width: 961px) {
    section.top-cover { display: none !important; }   /* desktop never had it */
}

/* ═══ INVITATION COVER — exactly one screen ═════════════════════════════
   Capped at 100dvh minus the header token; the oval frame's fixed 510px
   height becomes fluid so mid-size phones never lose the foot (names +
   date). If content still overflows, house.js trims decorative ornaments
   first (.fit-hidden) — nothing is removed from the DOM. */
.js section.cover {
    max-height: none;
    min-height: calc(100vh - var(--head-chrome));
    min-height: calc(100dvh - var(--head-chrome));
}
.js section.cover .inner .body {
    height: clamp(270px, calc(100dvh - var(--head-chrome) - 235px), 510px);
}
@media (max-width: 375px) {
    .js section.cover .inner .body { max-width: 270px; }
    .js section.cover .inner .foot .prime-title { font-size: clamp(30px, 11vw, 62px); }
}

/* ═══ FREE PAGES ════════════════════════════════════════════════════════ */
.free-page { text-align: center; overflow: hidden; }
.free-page .free-page-inner {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: clamp(48px, 8vh, 84px) 22px;
}
.free-page .free-kicker {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 11px; font-weight: 600;
    letter-spacing: .26em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}
.free-page .free-page-title {
    font-family: var(--heading-family);
    font-style: italic;
    font-size: clamp(30px, 6vw, 44px);
    color: var(--text-primary);
    margin: 0 0 26px;
}
.free-page .still-figure {
    margin: 0 auto 18px;
    max-width: 420px;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 24px 48px -30px rgba(68, 40, 44, 0.4);
}
.free-page .still-figure img { width: 100%; height: auto; display: block; border-radius: 12px; }
.free-page .still-cap {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 15px;
    color: var(--muted);
    margin-top: 12px;
}
.free-page .free-note {
    font-size: 14px;
    color: var(--muted);
    max-width: 400px;
    margin: 0 auto;
}
.free-page .film-figure {
    position: relative;
    margin: 0 auto 16px;
    max-width: 460px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--wine-2);
    box-shadow: 0 24px 48px -30px rgba(68, 40, 44, 0.45);
}
.free-page .film-figure .video-inline {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.free-page .film-figure .film-cap {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 15px;
    color: var(--cream);
    padding: 12px 16px 14px;
    margin: 0;
}
/* The chip rides on the film's corner and opens the lightbox player. */
.video-chip {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid rgba(234, 226, 220, 0.6);
    background: rgba(116, 70, 76, 0.88);
    color: var(--cream);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 12px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .2s var(--ease), transform .2s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.video-chip:hover { background: var(--wine); transform: translate(-50%, -50%) scale(1.04); }
.video-chip svg, .video-chip i { font-size: 14px; }

/* ═══ CLICK-TO-OPEN MEDIA ═══════════════════════════════════════════════
   Every content image/video gets a house lightbox trigger. Media triggers
   keep the template's own layout; the affordance is a soft zoom cursor +
   hover lift only. */
.js .media-open { cursor: zoom-in; }
.js .media-open img { transition: transform .35s var(--ease), filter .35s var(--ease); }
.js .media-open:hover img { transform: scale(1.02); }
.js button.media-open {
    border: 0; padding: 0; margin: 0;
    background: none;
    display: block;
    width: 100%; height: 100%;
}

/* Click-to-open switch: <html data-media-lightbox="off"> renders media
   INLINE ONLY — no lightbox triggers, no leftover click affordances. */
html[data-media-lightbox="off"] .media-open { pointer-events: none; cursor: default; }
html[data-media-lightbox="off"] .media-open:hover img { transform: none; }
html[data-media-lightbox="off"] .video-chip { display: none !important; }
.media-open[disabled], .video-chip[disabled] { pointer-events: none; cursor: default; }
.media-open[disabled]:focus-visible, .video-chip[disabled]:focus-visible { outline: none; }

/* ═══ LIGHTBOX ══════════════════════════════════════════════════════════ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(43, 29, 31, 0.96);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; }
.lightbox-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}
.lightbox img, .lightbox video, .lightbox iframe {
    max-width: 100%;
    max-height: calc(100dvh - 170px);
    border-radius: 6px;
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
}
.lightbox iframe { width: min(92vw, 960px); height: min(51.75vw, 540px); border: 0; }
/* Keep the media under the text layer while zoomed (transformed img would
   otherwise paint over the caption row). */
.lightbox-media { z-index: 1; }
.lightbox-cap, .lightbox-hint, .lightbox-original { position: relative; z-index: 2; }
.lightbox img {
    cursor: zoom-in;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .2s var(--ease);
}
.lightbox.is-zoomed .lightbox-media { overflow: visible; }
.lightbox.is-panning img { transition: none; cursor: grabbing; }
.lightbox-cap, .lightbox-hint, .lightbox-original { align-self: center; }
.lightbox-cap {
    margin: 14px 0 0;
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: 16px;
    color: rgba(243, 237, 233, 0.92);
    text-align: center;
    max-width: min(92vw, 640px);
}
.lightbox-hint {
    margin: 6px 0 0;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 10.5px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(214, 161, 145, 0.85);
    text-align: center;
}
.lightbox-original {
    margin-top: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid rgba(214, 161, 145, 0.5);
    border-radius: 999px;
    padding: 8px 16px;
    color: var(--blush);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    text-decoration: none;
    transition: border-color .2s var(--ease), color .2s var(--ease);
}
.lightbox-original:hover { border-color: var(--blush); color: #fff; }
.lightbox-close, .lightbox-prev, .lightbox-next {
    position: fixed;
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border: 1px solid rgba(214, 161, 145, 0.5);
    border-radius: 999px;
    background: rgba(43, 29, 31, 0.6);
    color: var(--cream);
    font-size: 18px; line-height: 1;
    cursor: pointer;
    transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
    border-color: var(--blush); color: #fff; background: rgba(137, 86, 92, 0.5);
}
.lightbox-close { top: calc(14px + var(--safe-t)); right: 14px; }
.lightbox-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-prev.is-hidden, .lightbox-next.is-hidden { display: none; }
.lightbox-original.is-hidden { display: none; }
@media (max-width: 640px) {
    .lightbox { padding: 12px; }
    .lightbox-prev { left: 6px; }
    .lightbox-next { right: 6px; }
}

/* ═══ NO-JS FALLBACK ════════════════════════════════════════════════════
   Without JS the page reads as a plain stacked document: no chrome, no
   scene geometry, media inline. */
html:not(.js) .site-head,
html:not(.js) .dock,
html:not(.js) .head-nav,
html:not(.js) .head-print,
html:not(.js) .head-burger,
html:not(.js) .head-progress,
html:not(.js) .menu-sheet,
html:not(.js) .menu-backdrop,
html:not(.js) .video-chip { display: none !important; }

/* ═══ SCROLLBARS styled to the palette (sheet, lightbox, page) ══════════ */
.menu-sheet::-webkit-scrollbar, .lightbox::-webkit-scrollbar, .dock::-webkit-scrollbar { width: 8px; }
.menu-sheet::-webkit-scrollbar-track { background: var(--cream-2); }
.menu-sheet::-webkit-scrollbar-thumb { background: var(--blush); border-radius: 6px; }
.lightbox::-webkit-scrollbar-track { background: transparent; }
.lightbox::-webkit-scrollbar-thumb { background: rgba(214, 161, 145, 0.5); border-radius: 6px; }

/* ═══ SAVE-THE-DATE PLATE — keep content inside the wood frame ══════════
   The frame is a stretched mask: text touching the box edges gets masked
   away, and the corner florals (z-index 2 by design) reach over the plate
   on narrow screens. Side padding keeps the date/countdown on the plate;
   the florals shrink and lean outward on phones. */
.save-date-box { padding-left: 12%; padding-right: 12%; }
@media (min-width: 560px) and (max-width: 960px) {
    .save-date-box { padding: 150px 11%; }
}
@media (min-width: 1200px) {
    .save-date-box { padding: 150px 9%; }
}
@media (max-width: 600px) {
    .save-date-body .orn-1-left { transform: translate(-58%, -52%) scaleX(-1) scale(.78); }
    .save-date-body .orn-1-right { transform: translate(56%, -52%) scale(.78); }
    .save-date-box .save-date-event { font-size: 15px; letter-spacing: .5px; }
    /* the 2×2 countdown cells are 85px wide here — keep labels from
       abutting ("MinutesSeconds") */
    .countdown .count-text { font-size: 12.5px; }
    .countdown .count-item { padding: 0 5px; }
}

/* ═══ REDUCED MOTION ════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    html.js { scroll-behavior: auto !important; }
    [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .js .media-open img, .lightbox img { transition: none !important; }
}

/* ═══ PRINT ═════════════════════════════════════════════════════════════ */
@media print {
    .site-head, .dock, .menu-sheet, .menu-backdrop, .lightbox,
    .head-progress, .video-chip { display: none !important; }
    .is-empty, .fit-hidden { display: revert !important; }
    .js body.syakira { padding-top: 0; padding-bottom: 0; }
    .js section.scene, .js div.scene, section.top-cover, section.cover {
        min-height: 0 !important;
        display: block !important;
        page-break-inside: avoid;
    }
    .js section.cover .inner .body { height: 510px !important; }
    section.top-cover { display: block !important; }
}