/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Design tokens ──────────────────────────────────────────── */
:root {
  /*
   * Native frame.webp dimensions — used only for the aspect ratio.
   * Actual rendered size is controlled by --gallery-size below.
   */
  --frame-native-w: 1004;
  --frame-native-h: 785;
  --frame-aspect: calc(var(--frame-native-w) / var(--frame-native-h));

  /*
   * Artwork window as a fraction of the frame.
   * 800 / 1004 ≈ 0.7968   580 / 785 ≈ 0.7389
   */
  --art-frac-x: 0.7968;
  --art-frac-y: 0.7389;

  /* Museum wall */
  --wall-base:   #d6cfc6;
  --wall-light:  #e2dbd3;
  --wall-shadow: #bfb8af;
}

/* ─── Museum wall ────────────────────────────────────────────── */
html, body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--wall-base);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    radial-gradient(
      ellipse 80% 70% at 50% 44%,
      var(--wall-light)   0%,
      var(--wall-base)   55%,
      var(--wall-shadow) 100%
    );
}

/* ─── Gallery wrapper ────────────────────────────────────────── */
.gallery {
  position: relative;

  /*
   * Scale to fit the viewport with comfortable margins,
   * but never exceed the native 1004px width.
   */
  width:  min(1004px, 90vw, 90vh * 1004 / 785);
  /* Height derived from the frame's own aspect ratio */
  aspect-ratio: 1004 / 785;

  filter:
    drop-shadow(0 20px 40px rgba(40, 32, 24, 0.36))
    drop-shadow(0  6px 14px rgba(40, 32, 24, 0.20));
}

/* ─── Artwork container — layer 1 ───────────────────────────── */
.artwork-container {
  position: absolute;

  /*
   * Centre the artwork window inside the frame using percentage offsets.
   * (1 - frac) / 2 gives the margin on each side.
   *
   * Horizontal: (1 - 0.7968) / 2 = 10.16%
   * Vertical:   (1 - 0.7389) / 2 = 13.055%
   */
  left:   10.16%;
  top:    13.055%;
  width:  79.68%;   /* 800 / 1004 */
  height: 73.885%;  /* 580 / 785 */

  z-index: 2;
  overflow: hidden;

  /* Mat colour visible when artwork doesn't fill the window */
  background-color: #f0ebe2;
}

/* ─── Artwork image ───────────────────────────────────────────── */
.artwork-image {
  display: block;
  width:  100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* ─── Frame — layer 2 ───────────────────────────────────────── */
.frame {
  position: absolute;
  inset: 0;
  width:  100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}