/* ==========================================================================
   CruiseProdigy site chrome  ·  css/site-chrome.css  ·  version 20261021

   Styles the header (with its Plan and Cruise Lines menus), the footer, the
   phone bottom bar, the cruise line edge tabs and the skip link on every page,
   and the back-to-top button on the pages that have one.
   The markup itself is the master copy in _chrome/, written into each page.

   House rules for this file
   - Everything is fenced under the chrome's own class names, so nothing here
     can restyle the page it sits on. The only page-wide rules are the default
     scroll padding (zero strength: any value a page sets wins) and the bottom
     padding that keeps the phone bar clear of the page's last lines.
   - Every screen rule sits inside "@media screen", so printing is untouched.
     The print block at the very end only hides the chrome.
   - Element + class guards (header.cp-site-header, footer.cp-site-footer,
     nav.cp-bottom-nav, nav.cp-edge) beat the plain element rules in the
     site's other style files, such as port-guides.css hiding "footer".
   - Focus outlines carry !important so a page that forces its own outline
     colour on everything (Disney Fantasy) cannot turn them red.
   - Breakpoints: full menu from 820px, Menu button below; phone bar and
     72px header up to 767px; edge tabs up to 1023px (desktop arrows above).
   ========================================================================== */

@media screen {

    /* ---------- Page-wide defaults ---------- */
    /* Keeps a focused or linked-to item clear of the sticky header. On the pages
       with the search snap, the script adds the snapped search's height. */
    :where(html) { scroll-padding-top: calc(98px + var(--cpc-snap-h, 0px)); }

    /* ---------- Colours and sizes shared by every piece ---------- */
    .cp-site-header, .cp-site-footer, .cp-bottom-nav, .cp-edge, .cp-skip-link, .cp-back-to-top {
        --cpc-paper: #ffffff;
        --cpc-line: #d6e2e3;
        --cpc-ink: #102e3a;
        --cpc-muted: #5f7379;
        --cpc-wash: #f2f7f7;
        --cpc-teal: #087984;
        --cpc-coral: #b84125;
        --cpc-shadow: 0 12px 24px rgb(16 46 58 / 10%);
        --cpc-header-h: 82px;
    }

    header.cp-site-header, footer.cp-site-footer, nav.cp-bottom-nav, nav.cp-edge, a.cp-skip-link { box-sizing: border-box; }

    /* ======================================================================
       Skip link (pages that have none get the master copy's)
       ====================================================================== */
    a.cp-skip-link {
        position: fixed; top: 12px; left: 16px; z-index: 200;
        display: inline-block; margin: 0; padding: 12px 18px;
        border: 0; border-radius: 4px; background: var(--cpc-ink); box-shadow: none;
        color: #ffffff; font-family: 'Inter', Arial, sans-serif; font-size: 15px; font-weight: 500; font-style: normal;
        line-height: 1.4; letter-spacing: normal; text-decoration: none; text-transform: none;
        transform: translateY(-160%);
    }
    a.cp-skip-link:hover { color: #ffffff; text-decoration: none; }
    a.cp-skip-link:focus { transform: translateY(0); }
    a.cp-skip-link:focus-visible { outline: 2px solid var(--cpc-coral) !important; outline-offset: 2px; box-shadow: none !important; }

    /* ======================================================================
       Back-to-top button (pages whose button carries data-cp-back-to-top;
       decided 21 Oct 2026). Same look as the Port Directory's: a light square
       with a thin border and a slim arrow. The shared script shows it only
       while the reader scrolls back up.
       ====================================================================== */
    button.cp-back-to-top {
        position: fixed; right: 24px; bottom: 24px; z-index: 90;
        display: grid; place-items: center; box-sizing: border-box; width: 46px; height: 46px; margin: 0; padding: 0;
        border: 1px solid #dfe7e9; border-radius: 6px; background: #f9fbfb; color: var(--cpc-ink);
        box-shadow: 0 3px 12px rgb(16 46 58 / 7%); cursor: pointer; font: inherit; line-height: 1;
    }
    button.cp-back-to-top[hidden] { display: none; }
    button.cp-back-to-top:hover { border-color: var(--cpc-teal); background: #f9fbfb; color: var(--cpc-teal); }
    button.cp-back-to-top svg { display: block; width: 18px; height: 18px; }
    button.cp-back-to-top:focus-visible { outline: 2px solid var(--cpc-coral) !important; outline-offset: 2px; box-shadow: none !important; }
    button.cp-back-to-top:focus:not(:focus-visible) { outline: none; }

    /* ======================================================================
       Header
       ====================================================================== */
    header.cp-site-header {
        position: sticky; top: 0; z-index: 100;
        display: block; float: none; width: auto; max-width: none; height: auto; min-height: 0;
        justify-content: normal; align-items: normal; gap: normal;
        margin: 0; padding: 0;
        border: 0; border-bottom: 1px solid var(--cpc-line); border-radius: 0;
        background: var(--cpc-paper); box-shadow: none;
        color: var(--cpc-ink);
        font-family: 'Inter', Arial, sans-serif; font-size: 16px; font-weight: 400; font-style: normal;
        line-height: normal; letter-spacing: normal; text-align: left; text-transform: none; text-shadow: none;
        -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    }
    /* Floating version, for pages whose layout already leaves room for it. */
    header.cp-site-header.cp-site-header--fixed { position: fixed; left: 0; right: 0; }

    .cp-site-header *, .cp-site-header *::before, .cp-site-header *::after { box-sizing: border-box; }
    .cp-site-header a { color: inherit; text-decoration: none; background-image: none; -webkit-tap-highlight-color: transparent; }
    .cp-site-header a:hover { text-decoration: none; }
    .cp-site-header p { margin: 0; }
    .cp-site-header ul, .cp-site-header li { margin: 0; padding: 0; list-style: none; }
    .cp-site-header li::before, .cp-site-header li::after { content: none; }
    .cp-site-header svg { display: block; flex-shrink: 0; }

    .cp-site-header .cp-header-main {
        position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px;
        width: min(100% - 80px, 1280px); max-width: none; min-height: var(--cpc-header-h); margin: 0 auto; padding: 0;
    }

    /* Focus outlines: coral, drawn just outside each item. */
    .cp-site-header .cp-header-main :focus-visible { outline: 2px solid var(--cpc-coral) !important; outline-offset: 4px; border-radius: 2px; box-shadow: none !important; }
    .cp-site-header .cp-header-main :focus:not(:focus-visible) { outline: none; box-shadow: none; }

    .cp-site-header .cp-wordmark {
        display: inline-block; color: var(--cpc-ink); font-family: 'Poppins', Arial, sans-serif; font-size: 27px; font-weight: 500;
        font-style: normal; line-height: 1.1; letter-spacing: -1.3px; text-decoration: none; white-space: nowrap;
    }
    .cp-site-header .cp-wordmark:hover { color: var(--cpc-ink); }
    .cp-site-header .cp-wordmark span { color: var(--cpc-teal); font-weight: 400; }
    .cp-site-header .cp-icon { width: 18px; height: 18px; }

    /* Menu button (only below 820px, and only once the script is running) */
    .cp-site-header .cp-nav-toggle {
        display: none; align-items: center; justify-content: center; gap: 9px;
        min-height: 44px; margin: 0; padding: 8px 12px;
        border: 1px solid var(--cpc-line); border-radius: 6px; background: var(--cpc-paper); box-shadow: none;
        color: var(--cpc-ink); font-family: inherit; font-size: 14px; font-weight: 500; font-style: normal;
        line-height: normal; letter-spacing: normal; text-transform: none;
        cursor: pointer; -webkit-appearance: none; appearance: none;
    }
    .cp-site-header .cp-nav-toggle:hover,
    .cp-site-header .cp-nav-toggle[aria-expanded="true"] { border-color: var(--cpc-teal); color: var(--cpc-teal); }

    /* ---------- The menu, 820px and wider ---------- */
    .cp-site-header .cp-main-nav { display: flex; justify-self: end; align-self: stretch; margin: 0; padding: 0; border: 0; background: none; }
    .cp-site-header .cp-menu { display: flex; align-items: stretch; gap: 22px; }
    .cp-site-header .cp-menu-item { position: relative; display: flex; align-items: center; }
    .cp-site-header .cp-menu-link,
    .cp-site-header .cp-menu-button {
        display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin: 0; padding: 0;
        border: 0; border-radius: 0; background: none; box-shadow: none;
        color: var(--cpc-ink); font-family: inherit; font-size: 15px; font-weight: 500; font-style: normal;
        line-height: normal; letter-spacing: normal; text-align: left; text-decoration: none; text-transform: none; white-space: nowrap;
        cursor: pointer; -webkit-appearance: none; appearance: none;
    }
    .cp-site-header .cp-menu-link:hover,
    .cp-site-header .cp-menu-button:hover,
    .cp-site-header .cp-menu-button[aria-expanded="true"] { color: var(--cpc-teal); }
    /* The section you are in is underlined (Ports on port guides, and so on). */
    .cp-site-header .cp-menu-link[aria-current],
    .cp-site-header .cp-menu-button[aria-current] {
        text-decoration: underline; text-decoration-color: var(--cpc-teal); text-decoration-thickness: 2px; text-underline-offset: 9px;
    }
    .cp-site-header .cp-menu-chevron { width: 12px; height: 12px; margin-top: 1px; transition: transform .15s ease; }
    .cp-site-header .cp-menu-button[aria-expanded="true"] .cp-menu-chevron { transform: rotate(180deg); }

    /* Dropdown panels. Each one hangs from the bottom of the header row, touching
       its menu item, so the pointer can travel into it without it closing. */
    .cp-site-header .cp-menu-panel {
        display: none; position: absolute; top: 100%; left: -20px; z-index: 5;
        width: 300px; margin: 0; padding: 8px;
        border: 1px solid var(--cpc-line); border-radius: 0 0 8px 8px;
        background: var(--cpc-paper); box-shadow: var(--cpc-shadow); text-align: left;
    }
    .cp-site-header .cp-menu-panel--lines { left: auto; right: -20px; width: 452px; }
    html.cp-js .cp-site-header .cp-menu-button[aria-expanded="true"] + .cp-menu-panel { display: block; animation: cp-menu-in .14s ease-out; }
    /* If the script has not loaded, the panels still open on hover and on keyboard focus. */
    html:not(.cp-js) .cp-site-header .cp-menu-item--panel:hover > .cp-menu-panel,
    html:not(.cp-js) .cp-site-header .cp-menu-item--panel:focus-within > .cp-menu-panel { display: block; }
    @keyframes cp-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

    .cp-site-header .cp-menu-panel-label { display: none; }
    .cp-site-header .cp-menu-panel :focus-visible { outline-offset: -2px; border-radius: 6px; }

    .cp-site-header .cp-plan-list { display: grid; gap: 2px; }
    .cp-site-header .cp-plan-link { display: grid; gap: 2px; padding: 10px 12px; border-radius: 6px; color: var(--cpc-ink); text-decoration: none; }
    .cp-site-header .cp-plan-link:hover { background: var(--cpc-wash); color: var(--cpc-ink); }
    .cp-site-header .cp-plan-title { display: block; font-size: 15px; font-weight: 500; line-height: 1.35; }
    .cp-site-header .cp-plan-desc { display: block; color: var(--cpc-muted); font-size: 13px; font-weight: 400; line-height: 1.4; }
    .cp-site-header .cp-plan-link:hover .cp-plan-title { color: var(--cpc-teal); }

    .cp-site-header .cp-lines-list { display: block; columns: 2; column-gap: 8px; }
    .cp-site-header .cp-lines-list > li { display: block; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }
    .cp-site-header .cp-lines-link {
        display: flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: 6px;
        color: var(--cpc-ink); font-size: 15px; font-weight: 400; line-height: 1.35; text-decoration: none;
    }
    .cp-site-header .cp-lines-link:hover { background: var(--cpc-wash); color: var(--cpc-teal); }

    /* The page you are on, inside a panel */
    .cp-site-header .cp-menu-panel a[aria-current] { color: var(--cpc-teal); }
    .cp-site-header .cp-menu-panel a[aria-current] .cp-plan-title,
    .cp-site-header .cp-lines-link[aria-current] {
        text-decoration: underline; text-decoration-color: var(--cpc-teal); text-decoration-thickness: 2px; text-underline-offset: 5px;
    }

    /* ======================================================================
       Footer
       ====================================================================== */
    footer.cp-site-footer {
        display: block; float: none; width: auto; max-width: none; height: auto;
        justify-content: normal; align-items: normal; gap: normal;
        margin: 0; padding: 22px 0 20px;
        border: 0; border-top: 1px solid var(--cpc-line); border-radius: 0;
        background: #edf3f3; box-shadow: none;
        color: var(--cpc-ink);
        font-family: 'Inter', Arial, sans-serif; font-size: 14px; font-weight: 400; font-style: normal;
        line-height: 1.5; letter-spacing: normal; text-align: center; text-transform: none; text-shadow: none;
        -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    }
    .cp-site-footer *, .cp-site-footer *::before, .cp-site-footer *::after { box-sizing: border-box; }
    .cp-site-footer p { margin: 0; }
    .cp-site-footer a { background-image: none; -webkit-tap-highlight-color: transparent; }
    .cp-site-footer :focus-visible { outline: 2px solid var(--cpc-teal) !important; outline-offset: 3px; border-radius: 2px; box-shadow: none !important; }
    .cp-site-footer :focus:not(:focus-visible) { outline: none; box-shadow: none; }
    .cp-site-footer .cp-footer-inner { display: flex; flex-direction: column; align-items: center; width: min(100% - 40px, 1280px); margin: 0 auto; padding: 0; }
    .cp-site-footer .cp-footer-wordmark {
        display: inline-flex; align-items: center; min-height: 32px; color: var(--cpc-ink);
        font-family: 'Poppins', Arial, sans-serif; font-size: 26px; font-weight: 500; font-style: normal;
        line-height: 1.15; letter-spacing: -1.2px; text-decoration: none; white-space: nowrap;
    }
    .cp-site-footer .cp-footer-wordmark:hover { color: var(--cpc-ink); text-decoration: none; }
    .cp-site-footer .cp-footer-wordmark span { color: var(--cpc-teal); font-weight: 400; }
    .cp-site-footer .cp-footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 22px; width: 100%; margin: 5px 0 6px; padding: 0; }
    .cp-site-footer .cp-footer-link-group { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 22px; }
    .cp-site-footer .cp-footer-links a {
        display: inline-flex; align-items: center; min-height: 34px; color: var(--cpc-ink);
        font-size: 14px; font-weight: 400; line-height: 1.5; text-decoration: none; white-space: nowrap;
    }
    .cp-site-footer .cp-footer-links a:hover { color: var(--cpc-teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
    .cp-site-footer .cp-footer-disclosure,
    .cp-site-footer .cp-footer-associates { margin: 0; color: #526a70; font-size: 12px; font-style: italic; line-height: 1.5; }
    .cp-site-footer .cp-footer-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px; margin: 6px 0 0; color: #526a70; font-size: 12px; line-height: 1.5; }
    .cp-site-footer .cp-footer-meta > span { white-space: nowrap; }
    .cp-site-footer .cp-footer-tagline::before { content: "·"; margin-right: 8px; }

    /* ======================================================================
       Phone bottom bar (up to 767px)
       ====================================================================== */
    nav.cp-bottom-nav {
        display: none; margin: 0; padding: 0; color: var(--cpc-muted);
        font-family: 'Inter', Arial, sans-serif; font-size: 11px; font-weight: 400; font-style: normal; line-height: 1.3; letter-spacing: normal; text-transform: none;
        -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    }
    .cp-bottom-nav *, .cp-bottom-nav *::before, .cp-bottom-nav *::after { box-sizing: border-box; }
    .cp-bottom-nav a { text-decoration: none; background-image: none; -webkit-tap-highlight-color: transparent; }
    .cp-bottom-nav svg { display: block; flex-shrink: 0; }
    /* Outline drawn inside each item, so it never runs off the screen edge. */
    .cp-bottom-nav :focus-visible { outline: 2px solid var(--cpc-coral) !important; outline-offset: -4px; box-shadow: none !important; }
    .cp-bottom-nav :focus:not(:focus-visible) { outline: none; box-shadow: none; }
    .cp-bottom-nav .cp-bottom-nav-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; }
    .cp-bottom-nav .cp-bottom-nav-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
        min-height: 64px; min-width: 0; margin: 0; padding: 0;
        color: var(--cpc-muted); font-size: 11px; line-height: 1.3; text-align: center; text-decoration: none;
    }
    .cp-bottom-nav .cp-bottom-nav-item:hover,
    .cp-bottom-nav .cp-bottom-nav-item[aria-current] { color: var(--cpc-teal); text-decoration: none; }
    /* The current section's label is underlined as well as coloured, as in the
       header, so it does not rely on colour alone (WCAG 1.4.1; decided 21 Oct). */
    .cp-bottom-nav .cp-bottom-nav-item[aria-current] span {
        text-decoration: underline; text-decoration-color: var(--cpc-teal); text-decoration-thickness: 2px; text-underline-offset: 3px;
    }
    .cp-bottom-nav .cp-bottom-nav-icon { width: 19px; height: 19px; }

    /* ======================================================================
       Cruise line edge tabs (cruise line pages, up to 1023px)
       ====================================================================== */
    nav.cp-edge { display: none; margin: 0; padding: 0; }
    .cp-edge .cp-edge-tab {
        position: fixed; top: 50%; z-index: 90;
        display: grid; place-items: center; width: 26px; height: 60px; margin: 0; padding: 0;
        border: 1px solid var(--cpc-line); background: rgb(255 255 255 / 94%); box-shadow: 0 6px 18px rgb(16 46 58 / 12%);
        color: #003366; text-decoration: none;
        transform: translateY(-50%); transition: opacity .25s ease, width .2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .cp-edge .cp-edge-tab:hover { color: var(--cpc-teal); }
    .cp-edge .cp-edge-tab svg { display: block; width: 16px; height: 16px; }
    .cp-edge .cp-edge-prev { left: env(safe-area-inset-left, 0px); border-left: 0; border-radius: 0 14px 14px 0; }
    .cp-edge .cp-edge-next { right: env(safe-area-inset-right, 0px); border-right: 0; border-radius: 14px 0 0 14px; }
    .cp-edge .cp-edge-tab:active { width: 32px; }
    /* Outline drawn inside the tab, so it keeps its contrast over dark photos. */
    .cp-edge .cp-edge-tab:focus-visible { outline: 2px solid var(--cpc-coral) !important; outline-offset: -4px; box-shadow: 0 6px 18px rgb(16 46 58 / 12%) !important; opacity: 1; }
    .cp-edge .cp-edge-tab:focus:not(:focus-visible) { outline: none; }
    /* They fade back while the page moves, so they never sit over text being read. */
    .cp-edge.is-scrolling .cp-edge-tab { opacity: .28; }
    .cp-edge.is-scrolling .cp-edge-tab:focus-visible { opacity: 1; }
}

/* ---------- Narrower desktops and tablets ---------- */
@media screen and (max-width: 1023px) {
    nav.cp-edge { display: block; }
}
@media screen and (max-width: 899px) {
    .cp-site-header .cp-header-main { width: calc(100% - 48px); }
    .cp-site-header .cp-wordmark { font-size: 25px; }
    /* Tighter spacing so the full menu still fits on one line at 820px. */
    .cp-site-header .cp-menu { gap: 18px; }
}

/* ---------- Below 820px: the Menu button takes over ---------- */
@media screen and (max-width: 819px) {
    .cp-site-header .cp-header-main { grid-template-columns: auto auto; grid-template-rows: minmax(var(--cpc-header-h), auto); justify-content: space-between; }
    html.cp-js .cp-site-header .cp-nav-toggle:not([hidden]) { display: inline-flex; }

    /* Without the script the menu simply sits under the logo. */
    .cp-site-header .cp-main-nav { grid-column: 1 / -1; display: block; justify-self: stretch; align-self: auto; padding: 0 0 16px; }
    .cp-site-header .cp-menu { display: block; }
    .cp-site-header .cp-menu-item { display: block; position: static; }
    .cp-site-header .cp-menu-link,
    .cp-site-header .cp-menu-button { display: flex; justify-content: space-between; width: 100%; padding: 8px 12px; border-radius: 4px; }
    .cp-site-header .cp-menu-link:hover,
    .cp-site-header .cp-menu-button:hover { background: var(--cpc-wash); }
    .cp-site-header .cp-menu-link[aria-current] { background: var(--cpc-wash); text-underline-offset: 5px; }
    /* Outlines sit inside the items here, so the panel's edges never clip them. */
    .cp-site-header .cp-main-nav :focus-visible { outline-offset: -2px; border-radius: 4px; }

    /* With the script, the menu opens from the Menu button as a panel. */
    html.cp-js .cp-site-header .cp-main-nav {
        position: absolute; top: 100%; left: 0; right: 0; z-index: 3; display: none;
        max-height: calc(100vh - var(--cpc-header-h) - 12px); max-height: calc(100dvh - var(--cpc-header-h) - 12px);
        padding: 8px; overflow-y: auto; overscroll-behavior: contain;
        border: 1px solid var(--cpc-line); border-radius: 0 0 8px 8px; background: var(--cpc-paper); box-shadow: var(--cpc-shadow);
    }
    html.cp-js .cp-site-header .cp-main-nav.is-open { display: block; }

    /* Inside the Menu panel the dropdowns become part of the list. */
    .cp-site-header .cp-menu-panel {
        position: static; width: auto; margin: 0; padding: 0;
        border: 0; border-radius: 0; background: none; box-shadow: none; animation: none;
    }
    html.cp-js .cp-site-header .cp-menu-button[aria-expanded="true"] + .cp-menu-panel { animation: none; }
    /* Plan: its three links sit under a small heading. */
    .cp-site-header .cp-menu-item--plan > .cp-menu-button { display: none; }
    .cp-site-header .cp-menu-item--plan > .cp-menu-panel { display: block; }
    .cp-site-header .cp-menu-panel-label {
        display: block; padding: 12px 12px 4px; color: var(--cpc-muted);
        font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase;
    }
    .cp-site-header .cp-plan-list { gap: 0; padding: 0 0 6px; }
    .cp-site-header .cp-plan-link { padding: 8px 12px 8px 24px; border-radius: 4px; }
    .cp-site-header .cp-plan-link[aria-current] { background: var(--cpc-wash); }
    /* Cruise Lines: opens in place (two columns, one on phones). */
    .cp-site-header .cp-menu-panel--lines { padding: 2px 0 8px 12px; }
    .cp-site-header .cp-lines-link { min-height: 44px; border-radius: 4px; }
    .cp-site-header .cp-menu-panel :focus-visible { border-radius: 4px; }
}
@media screen and (min-width: 600px) and (max-width: 819px) {
    /* Small tablets: a narrower panel under the Menu button, wide enough for
       two columns of cruise lines without wrapping. */
    html.cp-js .cp-site-header .cp-main-nav { left: auto; width: 440px; }
}
@media screen and (max-width: 599px) {
    /* Phones: the line names do not fit side by side, so one column. */
    .cp-site-header .cp-lines-list { columns: 1; }
}

/* ---------- Phones (up to 767px) ---------- */
@media screen and (max-width: 767px) {
    /* Keeps a focused or linked-to item clear of the header and the bottom bar
       (the bar is 65px with its top line; 7px of breathing room on top of that). */
    :where(html) { scroll-padding-top: calc(88px + var(--cpc-snap-h, 0px)); scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
    /* Room for the bottom bar at the end of the page. */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

    header.cp-site-header { --cpc-header-h: 72px; }
    .cp-site-header .cp-header-main { gap: 16px; }
    html.cp-js .cp-site-header .cp-main-nav {
        max-height: calc(100vh - 72px - 64px - 12px);
        max-height: calc(100dvh - 72px - 64px - env(safe-area-inset-bottom, 0px) - 12px);
    }

    nav.cp-bottom-nav {
        display: block; position: fixed; inset: auto 0 0; z-index: 105;
        padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        border-top: 1px solid var(--cpc-line); background: var(--cpc-paper);
    }
    /* Back-to-top button: just above the phone bar. */
    button.cp-back-to-top { right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
}
@media screen and (max-width: 767px), screen and (pointer: coarse) {
    .cp-site-footer .cp-footer-links a { min-height: 44px; }
}
@media screen and (max-width: 599px) {
    footer.cp-site-footer { padding: 18px 0 16px; }
    .cp-site-footer .cp-footer-links,
    .cp-site-footer .cp-footer-link-group { column-gap: 18px; }
}
@media screen and (max-width: 479px) {
    .cp-site-header .cp-header-main { width: calc(100% - 36px); gap: 12px; }
    .cp-site-header .cp-wordmark { font-size: 23px; }
    .cp-site-footer .cp-footer-meta { flex-direction: column; }
    .cp-site-footer .cp-footer-tagline::before { content: none; }
}
@media screen and (max-width: 359px) {
    .cp-site-header .cp-wordmark { font-size: 21px; }
}

@media screen and (prefers-reduced-motion: reduce) {
    .cp-site-header *, .cp-edge .cp-edge-tab { transition: none !important; animation: none !important; }
}

/* ---------- Printing: the chrome never prints ---------- */
@media print {
    header.cp-site-header, footer.cp-site-footer, nav.cp-bottom-nav, nav.cp-edge, a.cp-skip-link, button.cp-back-to-top { display: none !important; }
}