/* ==========================================================================
   Paragon Department Store — "coming soon" holding page
   --------------------------------------------------------------------------
   The page is a single piece of artwork. Two versions exist:

     landscape (desktop + mobile horizontal) -> desktop.png        1920x1080
     portrait  (mobile vertical)             -> mobile-verical.png  720x1280

   <picture> picks the file; the custom properties below tell the layout which
   aspect ratio to reserve so the artwork scales to fit the viewport without
   cropping, and so the button hotspot lands in the right place.
   ========================================================================== */

:root {
  /* Matches the flat background of both PNGs, so any letterboxing blends in. */
  --bg: #eaeaea;
  --brand: #8a7042;

  /* Landscape artwork ratio (desktop.png). */
  --art-w: 1920;
  --art-h: 1080;

  /* "News & Updates" button position, as a % of the landscape artwork. */
  --cta-left: 4.58%;
  --cta-top: 68.61%;
  --cta-width: 24.32%;
  --cta-height: 7.41%;
}

@media (orientation: portrait) {
  :root {
    /* Portrait artwork ratio and button position (mobile-verical.png). */
    --art-w: 720;
    --art-h: 1280;

    --cta-left: 25.28%;
    --cta-top: 80.70%;
    --cta-width: 50.83%;
    --cta-height: 4.84%;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: #1a1a1a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Full-viewport stage that centres the artwork.
   svh keeps mobile browser chrome from clipping the bottom of the image. */
.stage {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
}

/* On tall portrait screens the artwork is width-limited, so there is spare
   vertical space. Anchor it to the top: the photo then bleeds off the top edge
   as designed, and the leftover space falls at the bottom where it blends into
   the artwork's own grey panel instead of showing a band above the photo. */
@media (orientation: portrait) {
  .stage {
    align-items: start;
  }
}

/* The frame is sized to the largest box with the artwork's aspect ratio that
   still fits inside the viewport. Because it hugs the image exactly, the CTA
   hotspot can be positioned in simple percentages. */
.poster {
  position: relative;
  margin: 0;
  line-height: 0;
  width: min(100%, calc(100svh * var(--art-w) / var(--art-h)));
  aspect-ratio: var(--art-w) / var(--art-h);
}

/* Fallback for browsers without svh support. */
@supports not (height: 100svh) {
  .poster {
    width: min(100%, calc(100vh * var(--art-w) / var(--art-h)));
  }
}

.poster__img {
  display: block;
  width: 100%;
  height: 100%;
  /* contain, not cover: the whole message stays readable at every size. */
  object-fit: contain;
}

/* ---- Clickable "News & Updates" hotspot -------------------------------- */

.poster__cta {
  position: absolute;
  left: var(--cta-left);
  top: var(--cta-top);
  width: var(--cta-width);
  height: var(--cta-height);
  display: block;
  border-radius: 999px;
  text-decoration: none;
  /* Never smaller than a comfortable tap target. */
  min-width: 44px;
  min-height: 44px;
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.poster__cta:hover,
.poster__cta:focus-visible {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--brand);
  transform: scale(1.02);
}

.poster__cta:focus-visible {
  outline: none;
}

.poster__cta:active {
  transform: scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
  .poster__cta {
    transition: none;
  }

  .poster__cta:hover,
  .poster__cta:focus-visible,
  .poster__cta:active {
    transform: none;
  }
}

/* Visible to assistive tech only. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}