/* ------------------------------------------------------------
   Mishkah – location advantages map poster
   Rebuilt from 2.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). Labels that ride the tilted road ribbons
   are placed by their centre and rotated with the PSD's angle.
   ------------------------------------------------------------ */

@font-face {
  font-family: "Asal Arabic";
  src: url("fonts/AsalArabicitf-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

: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;
  transform-origin: center;
}
.a-left   { justify-content: flex-start; }
.a-right  { justify-content: flex-end; }
.a-center { justify-content: center; }

/* multi-line labels stack; rotated ones centre on their pivot */
.t:has(> span + span) {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.t.rot:has(> span + span) {
  justify-content: center;
  line-height: 1.45;         /* matches the PSD's leading on the 2-line ribbon */
}

/* ---------- fonts, mapped from the PSD font set ---------- */

.f-asal-r { font-family: "Asal Arabic", var(--font-plex); font-weight: 400; }
.f-plex   { font-family: var(--font-plex); font-weight: 700; }
.f-arial  { font-family: Arial, Helvetica, sans-serif; font-weight: 700; }

.title { text-shadow: 0 0.04em 0.12em rgba(0, 0, 0, 0.35); }

/* ---------- QR / site link ---------- */

.site-link {
  position: absolute;
  /* covers the QR card and the "click here" caption */
  left:   calc(800  / var(--canvas-w) * 100%);
  top:    calc(3040 / var(--canvas-h) * 100%);
  width:  calc(520  / var(--canvas-w) * 100%);
  height: calc(450  / var(--canvas-h) * 100%);
  border-radius: 4%;
  outline: none;
}
.site-link:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8); }

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