/* Device guard — the "unsupported format" screen shown by
   js/device-guard.js below 360px wide. Loaded unconditionally (no
   media query on the <link> itself) since it only does anything once
   .is-device-unsupported is toggled on the <html> element.

   Scaled independently from the rest of the site's rem system: 1em on
   .device-guard-overlay = 10px at a 360px-wide viewport (matching the
   client's own 360x768 reference mockup), shrinking below that via
   vw so nothing overflows even on something narrower still. Children
   use em (not rem) so they scale off this local baseline instead of
   the page's own root font-size. */

html.is-device-unsupported,
html.is-device-unsupported body {
    overflow: hidden;
}

.device-guard-overlay {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2147483647 !important;
    margin: 0 !important;
    transform: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #ffffff;
    font-size: clamp(1px, 2.7778vw, 10px);
}

.device-guard-image {
    width: 30em;
    height: 22.4em;
    margin: 0 0 2.6em;
    max-width: none;
}

.device-guard-title {
    margin: 0 0 0.5em;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 2.5em;
    line-height: 1em;
    letter-spacing: -0.08em;
    color: #000000;
    opacity: 0.5;
    text-align: center;
}

.device-guard-subtitle {
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5em;
    line-height: 1.5em;
    letter-spacing: -0.05em;
    color: #000000;
    text-align: center;
}