/* CSAM 2026 – Coming Soon
 *
 * The page shows one of four artworks, picked by screen shape (width / height),
 * so the chosen artwork is always the closest match to the screen.
 * The artwork is always full width, keeping its shape: never stretched,
 * never cropped, starting at the top of the screen. If it is taller than the
 * screen, the page scrolls; if shorter, the space below is white, matching the
 * white "Supported by" strip at the bottom of every artwork.
 * Keep the media queries in sync with the <picture> sources in index.html.
 */

:root {
  --csam-bg: #ffffff;          /* matches bottom strip of every artwork */

  /* Mobile – 800 × 1420 */
  --csam-logo: none;
  --csam-hotspot: block;
  /* DSCI logo inside the mobile art: 343,49 → 455,102 px */
  --csam-hot-left: 42.88%;
  --csam-hot-top: 3.45%;
  --csam-hot-width: 14%;
  --csam-hot-height: 3.73%;
}

/* Tablet portrait – 769 × 1024 */
@media (min-aspect-ratio: 650/1000) and (max-aspect-ratio: 999/1000) {
  :root {
    /* DSCI logo inside the art: 328,62 → 439,115 px */
    --csam-hot-left: 42.65%;
    --csam-hot-top: 6.05%;
    --csam-hot-width: 14.43%;
    --csam-hot-height: 5.18%;
  }
}

/* Tablet landscape – 1024 × 768 */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 1539/1000) {
  :root {
    /* DSCI logo inside the art: 133,49 → 217,89 px */
    --csam-hot-left: 12.99%;
    --csam-hot-top: 6.38%;
    --csam-hot-width: 8.2%;
    --csam-hot-height: 5.21%;
  }
}

/* Desktop – 1920 × 1080 (DSCI logo comes from the header, not the art) */
@media (min-aspect-ratio: 154/100) {
  :root {
    --csam-logo: block;
    --csam-hotspot: none;
  }
}

html,
body {
  margin: 0;
  overflow-x: hidden;
  background-color: var(--csam-bg);
}

/* At least one screen tall; artwork starts at the top */
.csam-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Artwork box: full width, height follows the artwork's own shape */
.csam-stage {
  z-index: 1;
  width: 100%;
}

.csam-hero__img {
  width: 100%;
  height: auto;
}

/* Header sits on top of the artwork */
.csam-header {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* DSCI logo in the empty top-left spot of the desktop artwork
   (174 × 60 px on the 1920 × 1080 image). Percentages follow the stage,
   so the logo scales with the art and stays in place. */
.csam-header__logo {
  display: var(--csam-logo);
  position: absolute;
  left: 9.06%;
  top: 5.56%;
  width: 6.2%;
  pointer-events: auto;
}

.csam-header__logo img {
  width: 100%;
  height: auto;
}

/* Clickable area over the DSCI logo baked into the mobile / tablet artwork.
   Slightly larger than the logo for an easier tap. */
.csam-header__hotspot {
  display: var(--csam-hotspot);
  position: absolute;
  left: calc(var(--csam-hot-left) - 1.5%);
  top: calc(var(--csam-hot-top) - 0.75%);
  width: calc(var(--csam-hot-width) + 3%);
  height: calc(var(--csam-hot-height) + 1.5%);
  border-radius: 6px;
  pointer-events: auto;
}

.csam-header__hotspot:focus-visible,
.csam-header__logo:focus-visible {
  outline: 3px solid #1d407d;
  outline-offset: 2px;
}