/* Patmos announcement: retain the original header grid and View cursor. */
/* Keep the viewport and fixed layers in sync: Safari can sample either. */
html {
    --viewport-background: #f7f4ed;
    --menu-progress: 0;
}

html.is-patmos {
    --viewport-background: #000;
}

html.is-menu-open {
    --viewport-background: #f7f4ed;
    --menu-progress: 1;
}

html,
body,
.page-patmos .patmos-hero,
.page-patmos .mv__cell {
    background-color: var(--viewport-background);
}

.is-patmos #js-opening {
    background-color: #000;
    color: #bfbfbd;
}

.is-patmos #js-opening .loader .base {
    stroke: #333;
}

.is-patmos #js-opening .loader .c-rotate {
    stroke: #bfbfbd;
    opacity: 1;
}

/* Empty, paintless edge surfaces let Safari refresh its cached toolbar tint. */
.viewport-tint {
    display: none;
}

.patmos-copy,
.is-patmos #js-opening,
.is-patmos #js-btn-open span {
    font-family: "HiraMinProN-W3", "ヒラギノ明朝 ProN W3", serif;
}

.patmos-copy {
    /* Position comes from the theme's original mv__ttl-wrap on both sizes. */
    z-index: 11;
    height: auto;
    min-width: 0;
    width: calc(100vw - 100px - 8vw);
    color: #bfbfbd;
    font-size: 1.2rem;
    font-weight: 100;
    line-height: 1.4;
    letter-spacing: inherit;
    pointer-events: none;
}

.patmos-message {
    margin-top: 60px;
}

.patmos-years {
    line-height: inherit;
}

.patmos-message h2 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.patmos-visit {
    display: inline-block;
    margin-top: 24px;
    color: inherit;
    pointer-events: auto;
    transition: color .25s;
}

.patmos-visit:hover {
    color: #fff;
}

.patmos-visit:focus-visible {
    outline: 1px solid currentColor !important;
    outline-offset: 6px;
}

@media screen and (max-width: 767px) {
    /* One animated color paints the page and both browser-edge samples.
       The menu stays transparent to avoid blending its background twice. */
    html.is-patmos #js-menu {
        background: transparent;
        opacity: var(--menu-progress);
        transition: none;
    }

    html.is-patmos #js-logo,
    html.is-patmos #js-btn-open,
    html.is-patmos .patmos-copy {
        opacity: calc(1 - var(--menu-progress));
        transition: none;
    }

    .viewport-tint {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        height: 12px;
        z-index: 2147483647;
        pointer-events: none;
        background-color: var(--viewport-background);
        -webkit-background-clip: text;
        background-clip: text;
    }

    .viewport-tint--top { top: 0; }
    .viewport-tint--bottom { bottom: 0; }

    /* A brief geometry change makes WebKit sample the new color after paint. */
    html.is-tint-refreshing .viewport-tint { height: 13px; }

    .patmos-message {
        margin-top: 90px;
    }
}

@media screen and (min-width: 768px) {
    .patmos-copy {
        top: 55px;
        width: min(600px, 60vw);
        font-size: 1.6rem;
        font-weight: 400;
        letter-spacing: 0;
    }

    .patmos-years {
        line-height: 2;
    }

    .is-patmos #js-btn-open span {
        color: #bfbfbd !important;
        font-size: 1.6rem;
        letter-spacing: 0;
    }
}