/* Coming soon page (coming-soon.php): white screen, the blurred wordmark image
   in the middle, "Coming soon" and the email underneath. Proportions measured
   on the reference (coming_soon.png, 1920 px wide): the 891 px image is shown
   at 46.2% of the screen, and the two texts start/end slightly inside it,
   where the letters "A" and "a" are. */
html, body { margin: 0; height: 100%; background: #fff; color: #000; }
* { box-sizing: border-box; }

.cs { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 48px 12px; overflow: hidden; }
/* Image width: as in the reference on desktop, nearly the full width on phones. */
.cs-mark { --img: max(46.2vw, min(100vw - 24px, 760px)); width: var(--img); }
/* In the reference the word (without the ®) is what sits in the middle, so the
   block is nudged slightly right and up. */
.cs-mark { translate: calc(var(--img) * .03) calc(var(--img) * -.011); }

.cs-logo { margin: 0; line-height: 0; }
.cs-logo img { display: block; width: 100%; height: auto; }

.cs-meta { display: flex; justify-content: space-between; gap: 16px; margin: calc(var(--img) * .0225) 0 0; padding: 0 calc(var(--img) * .087) 0 calc(var(--img) * .061); font: 400 13px/1.3 "DM Sans", system-ui, sans-serif; letter-spacing: 0; }
/* Email hover like the menu links in the site header (css/style.css): red,
   and with a mouse also a soft blur. */
.cs-meta a { color: inherit; text-decoration: none; transition: color .2s; }
.cs-meta a:hover, .cs-meta a:focus-visible { color: #ff0019; }
@media (hover: hover) and (pointer: fine) {
  .cs-meta a { transition: color .2s, filter .35s cubic-bezier(.2, .7, .2, 1); }
  .cs-meta a:hover { filter: blur(2px); }
}

@media (max-width: 600px) {
  .cs-meta { font-size: 11px; }
}