/*
 * Offline, the coming soon page. The layout and styles of the page built for
 * em-offline.com in October, moved into the plugin. It loads on its own, with
 * no theme styles alongside it.
 */

:root{--masthead:#1F201C;--blue:#98A6C8;--paper:#F8F4EE;--ui:"Manrope",-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--masthead)}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--masthead);color:var(--paper);font-family:var(--ui);-webkit-font-smoothing:antialiased}
.cs{flex:1;display:flex;align-items:center}
.cs-band{position:relative;width:100%;aspect-ratio:3.2/1;max-height:80vh}
.cs-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
.cs-text{position:relative;z-index:1;height:100%;width:57%;display:flex;flex-direction:column;justify-content:center;padding:0 4vw 0 6vw}
.cs-logo{display:block;width:100%;max-width:640px;height:auto}
.cs-soon{margin-top:clamp(20px,2.4vw,36px);font-size:clamp(13px,0.55vw + 9px,17px);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--blue)}
.cs-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding:20px 6vw 22px;font-size:14px;line-height:20px;color:rgba(248,244,238,.62)}
/* F21: the credit is the site footer's own (offline_diary_footer()): the
   72 by 24 white Waywest mark before "Website by Waywest Design", the
   underline unseen at rest, a 44px target. offline.css never loads here,
   so its sizes are set here. */
.cs-foot a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:transparent;text-underline-offset:4px}
.cs-foot img{width:72px;height:24px;object-fit:contain;object-position:left}
/* A hover only where there's a pointer that hovers, so a tap never leaves
   it latched, with the same on keyboard focus. */
@media (hover:hover){.cs-foot a:hover{color:var(--paper);text-decoration-color:var(--blue)}}
.cs-foot a:focus-visible{color:var(--paper);text-decoration-color:var(--blue);outline:2px solid var(--blue);outline-offset:2px}
/* SiteGround's optimiser fades in any image it lazy loads. These show at once. */
html body img.skip-lazy{opacity:1!important;transition:none!important}
/* Under 760px the words and the foot sit on the site's 16px phone edge (F21). */
@media (max-width:760px){
.cs{align-items:stretch}
.cs-band{aspect-ratio:auto;max-height:none;display:flex;flex-direction:column}
.cs-text{order:1;width:100%;height:auto;padding:12vh 16px 28px}
.cs-logo{max-width:420px}
.cs-photo{order:2;position:relative;inset:auto;height:auto;aspect-ratio:1.35/1;margin-top:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 80%,transparent 100%)}
.cs-foot{padding:18px 16px 24px;flex-direction:column;align-items:flex-start}
}