/* ------------------------------------------------------------
   Mishkah Residential – cover poster
   Rebuilt from 1.psd (2314 × 3721 px).

   Text blocks are absolutely positioned from their PSD layer
   bounds as a fraction of the canvas; font sizes use container
   query units (cqw), so the layout is pixel-accurate at any width.
   ------------------------------------------------------------ */

:root {
  --canvas-w: 2314;
  --canvas-h: 3721;
  --page-bg: #1a1512;
  --font-plex: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--page-bg);
  font-family: var(--font-plex);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- canvas ---------- */

.poster {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: var(--canvas-w) / var(--canvas-h);
  container-type: inline-size;
  overflow: hidden;
}

.poster__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* ---------- text blocks ---------- */

.t {
  position: absolute;
  display: flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}
.a-left   { justify-content: flex-start; }
.a-right  { justify-content: flex-end; }
.a-center { justify-content: center; }

/* ---------- fonts, mapped from the PSD font set ----------
   GE Dinkum Bold and RB Bold are not available; IBM Plex Sans Arabic
   Bold is the closest free match for both. Drop the real files into
   ./fonts/ and add @font-face rules named "GE Dinkum" / "RB" to use them. */

.f-plex  { font-family: var(--font-plex); font-weight: 700; }
.f-ge    { font-family: "GE Dinkum", var(--font-plex); font-weight: 700; }
.f-rb-b  { font-family: "RB", var(--font-plex); font-weight: 700; }
.f-arial { font-family: Arial, Helvetica, sans-serif; font-weight: 700; }

@media print {
  body { background: #fff; }
  .poster { max-width: none; }
}