/* Scoped, code-native paired-plan figures for the Writing Task 1 map candidate. */
.map-visual {
  color: var(--ink, #22334A);
  font-family: var(--font-fa, Vazirmatn, sans-serif);
  margin-block: clamp(40px, 7vw, 80px);
}

.map-visual__figure {
  margin: 0;
  max-width: 1120px;
}

.map-visual__figure-head {
  max-width: 680px;
  margin-block-end: 20px;
}

.map-visual__eyebrow,
.map-visual__orientation,
.map-visual__caption,
.map-visual__legend,
.map-visual__panel-meta {
  font-weight: 500;
}

.map-visual__eyebrow {
  color: var(--ink-soft, #51617A);
  font-size: 13px;
  margin: 0 0 4px;
}

.map-visual__title {
  color: var(--ink, #22334A);
  font-family: var(--font-display, Vazirmatn, serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.map-visual__orientation {
  color: var(--ink-soft, #51617A);
  font-size: 16px;
  line-height: 1.85;
  margin: 4px 0 0;
}

.map-visual__pair {
  display: grid;
  direction: rtl;
  gap: clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.map-visual__panel {
  border-block-start: 2px solid var(--ink, #22334A);
  direction: ltr;
  min-width: 0;
  padding-block-end: 30px;
  padding-block-start: 10px;
}

.map-visual__panel-meta {
  align-items: center;
  color: var(--ink, #22334A);
  display: flex;
  font-family: var(--font-en, Vazirmatn, sans-serif);
  gap: 12px;
  justify-content: space-between;
  margin-block-end: 10px;
}

.map-visual__panel-meta h3,
.map-visual__north {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.map-visual__north {
  align-items: baseline;
  color: var(--ink-soft, #51617A);
  display: inline-flex;
  font-weight: 600;
  gap: 3px;
  white-space: nowrap;
}

.map-visual__north bdi {
  color: var(--ink, #22334A);
}

.map-visual__plan {
  aspect-ratio: 10 / 7;
  background: var(--paper, #F5F1E6);
  border: 2px solid var(--ink, #22334A);
  box-sizing: border-box;
  isolation: isolate;
  margin-block-start: 28px;
  overflow: visible;
  position: relative;
}

.map-visual__road,
.map-visual__footpath,
.map-visual__feature {
  box-sizing: border-box;
  display: block;
  position: absolute;
}

.map-visual__road--cedar {
  background: var(--white, #FFFFFF);
  border-block: 2px solid var(--ink, #22334A);
  height: 5%;
  inset-inline: 0;
  top: 47.5%;
}

.map-visual__road--market {
  background: var(--white, #FFFFFF);
  border-inline: 2px solid var(--ink, #22334A);
  left: 49%;
  width: 2%;
}

.map-visual__road--market-short {
  height: 50%;
  top: 0;
}

.map-visual__road--market-long {
  height: 100%;
  top: 0;
}

.map-visual__feature {
  background: var(--white, #FFFFFF);
  border: 2px solid var(--ink, #22334A);
}

.map-visual__feature--library {
  height: 20%;
  left: 10%;
  top: 12.857%;
  width: 18%;
}

.map-visual__feature--library::after,
.map-visual__feature--school::after {
  background: var(--ink-soft, #51617A);
  content: "";
  height: 2px;
  inset-inline: 12%;
  position: absolute;
  top: 50%;
}

.map-visual__feature--park,
.map-visual__feature--apartments {
  height: 25.714%;
  left: 61%;
  top: 10%;
  width: 29%;
}

.map-visual__feature--park {
  background: var(--paper, #F5F1E6);
}

.map-visual__feature--park::before,
.map-visual__feature--pond::before,
.map-visual__feature--garden::before {
  border: 2px solid var(--ink-soft, #51617A);
  border-radius: 50%;
  content: "";
  inset: 18%;
  position: absolute;
}

.map-visual__feature--apartments {
  display: grid;
  gap: 6%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 10%;
}

.map-visual__feature--apartments i {
  border: 2px solid var(--ink-soft, #51617A);
  display: block;
}

.map-visual__feature--school {
  height: 20%;
  left: 65%;
  top: 67.143%;
  width: 18%;
}

.map-visual__feature--carpark {
  background: var(--white, #FFFFFF);
  top: 71.429%;
}

.map-visual__feature--carpark::before,
.map-visual__feature--carpark::after {
  border-inline-start: 2px solid var(--line-disabled, #9DB0C4);
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
}

.map-visual__feature--carpark::before {
  left: 34%;
}

.map-visual__feature--carpark::after {
  left: 67%;
}

.map-visual__feature--carpark-old {
  height: 11.429%;
  left: 35%;
  width: 12%;
}

.map-visual__feature--carpark-new {
  height: 17.143%;
  left: 25%;
  width: 22%;
}

.map-visual__road-label,
.map-visual__callout {
  background: var(--paper, #F5F1E6);
  color: var(--ink, #22334A);
  font-family: var(--font-en, Vazirmatn, sans-serif);
  font-size: clamp(14px, 1.35vw, 16px);
  font-weight: 600;
  line-height: 1.25;
  padding: 2px 4px;
  position: absolute;
  white-space: nowrap;
  z-index: 2;
}

.map-visual__road-label--cedar {
  right: 2%;
  top: 40%;
}

.map-visual__road-label--market {
  left: 37%;
  top: 28%;
}

.map-visual__callout--library {
  left: -3px;
  top: -28px;
}

.map-visual__callout--park {
  left: 0;
  top: -28px;
}

.map-visual__callout--school {
  left: -4px;
  top: 104%;
}

.map-visual__callout--carpark {
  left: -3px;
  top: 104%;
}

.map-visual__footpath {
  background: var(--white, #FFFFFF);
  border-inline: 2px solid var(--ink, #22334A);
  height: 100%;
  left: 50%;
  top: 0;
  width: 2.667%;
}

.map-visual__feature--cafe {
  left: 10%;
  top: 15%;
}

.map-visual__feature--cafe-old {
  height: 17.5%;
  width: 16.667%;
}

.map-visual__feature--cafe-new {
  height: 17.5%;
  width: 33.333%;
}

.map-visual__feature--pond {
  border-radius: 48% 52% 46% 54%;
  height: 30%;
  left: 8.333%;
  top: 55%;
  width: 25%;
}

.map-visual__feature--trees,
.map-visual__feature--court,
.map-visual__feature--garden {
  left: 61.667%;
  width: 26.667%;
}

.map-visual__feature--trees {
  background: var(--paper, #F5F1E6);
  display: grid;
  gap: 6%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 25%;
  padding: 10%;
  top: 12.5%;
}

.map-visual__feature--trees i {
  background: var(--ink-soft, #51617A);
  border-radius: 50%;
  display: block;
}

.map-visual__feature--court,
.map-visual__feature--garden {
  height: 27.5%;
  top: 57.5%;
}

.map-visual__feature--court::before,
.map-visual__feature--court::after {
  border-inline-start: 2px solid var(--ink-soft, #51617A);
  content: "";
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
}

.map-visual__feature--court::after {
  border-block-start: 2px solid var(--ink-soft, #51617A);
  border-inline-start: 0;
  height: 0;
  inset-inline: 0;
  top: 50%;
}

.map-visual__feature--garden {
  background: var(--paper, #F5F1E6);
}

.map-visual__feature--garden::after {
  border: 2px solid var(--ink-soft, #51617A);
  border-radius: 50%;
  content: "";
  height: 26%;
  left: 12%;
  position: absolute;
  top: 35%;
  width: 20%;
}

.map-visual__callout--cafe,
.map-visual__callout--trees {
  left: -3px;
  top: -28px;
}

.map-visual__callout--pond,
.map-visual__callout--court {
  left: -3px;
  top: 104%;
}

.map-visual__road-label--footpath {
  left: 39%;
  top: 43%;
}

.map-visual__caption {
  color: var(--ink-soft, #51617A);
  font-size: 16px;
  line-height: 1.85;
  margin: 16px 0 0;
}

.map-visual__caption strong {
  color: var(--ink, #22334A);
  font-family: var(--font-en, Vazirmatn, sans-serif);
  font-weight: 700;
}

.map-visual__legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-block-start: 12px;
}

.map-visual__legend span {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-en, Vazirmatn, sans-serif);
  font-size: 14px;
  gap: 6px;
}

.map-visual__legend-mark {
  box-sizing: border-box;
  display: inline-block;
  height: 14px;
  width: 22px;
}

.map-visual__legend-mark--road {
  background: var(--white, #FFFFFF);
  border-block: 2px solid var(--ink, #22334A);
}

.map-visual__legend-mark--path {
  border-inline: 2px solid var(--ink, #22334A);
  width: 8px;
}

.map-visual__legend-mark--place {
  background: var(--white, #FFFFFF);
  border: 2px solid var(--ink, #22334A);
}

.map-visual__legend-mark--area {
  background: var(--paper, #F5F1E6);
  border: 2px solid var(--ink, #22334A);
}

.map-visual__legend-mark--trees {
  border: 2px solid var(--ink, #22334A);
  position: relative;
}

.map-visual__legend-mark--trees::before,
.map-visual__legend-mark--trees::after {
  background: var(--ink-soft, #51617A);
  border-radius: 50%;
  content: "";
  height: 4px;
  position: absolute;
  top: 3px;
  width: 4px;
}

.map-visual__legend-mark--trees::before {
  left: 4px;
}

.map-visual__legend-mark--trees::after {
  right: 4px;
}

.map-visual__sr {
  block-size: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

@media (max-width: 599px) {
  .map-visual__pair {
    direction: ltr;
    grid-template-columns: 1fr;
  }

  .map-visual__panel + .map-visual__panel {
    margin-block-start: 4px;
  }

  .map-visual__panel-meta h3,
  .map-visual__north {
    font-size: 14px;
  }

  .map-visual__road-label,
  .map-visual__callout {
    font-size: 14px;
  }

  .map-visual__road-label--market {
    left: 35%;
  }

  .map-visual__callout--school {
    left: -30%;
  }

  .map-visual__callout--court {
    left: -26%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-visual *,
  .map-visual *::before,
  .map-visual *::after {
    scroll-behavior: auto;
    transition-duration: 0ms;
  }
}

@page {size:A4;margin:15mm 14mm 23mm;}
@media print {
body {margin:0; background:var(--paper); color:var(--ink);}
body > :not(.book-print) {display:none!important;}
.book-print {display:block!important;font:500 10.5pt/1.65 var(--font-fa); color:var(--ink);}
.book-print * {box-sizing:border-box;}
.book-print .print-page {break-after:page;}
.book-print .print-page:last-child {break-after:auto;}
.book-print h1,.book-print h2,.book-print h3 {font-family:var(--font-display);font-weight:700;line-height:1.35;margin:0 0 3mm;}
.book-print h1 {font-size:27pt;}.book-print h2 {font-size:24pt;}.book-print h3 {font-size:18pt;}
.book-print p {margin:2mm 0;}.book-print ul,.book-print ol {margin:3mm 0;padding-inline-start:6mm;}
.book-print a {color:var(--ink);}.book-print .print-kicker,.book-print .print-caption,.book-print .print-source {font-size:9pt;color:var(--ink-soft);}
.book-print .print-map {margin:6mm 0 5mm;break-inside:avoid;}
.book-print .map-visual__pair {display:grid;grid-template-columns:1fr 1fr;gap:8mm;direction:rtl;}
.book-print .map-visual__panel {padding:2mm 0 7mm;direction:ltr;margin:0;}
.book-print .map-visual__panel-meta h3,.book-print .map-visual__north {font:700 10pt/1.4 var(--font-en);}
.book-print .map-visual__plan {aspect-ratio:3/2;margin-top:6mm;}
.book-print .map-visual__road-label,.book-print .map-visual__callout {font:600 8.5pt/1.15 var(--font-en);padding:1px 2px;}
.book-print .map-visual__feature--trees {padding:3%;}
.book-print .map-visual__feature b {background:var(--paper);color:var(--ink);font:600 8.5pt/1.15 var(--font-en);padding:1px 2px;position:absolute;white-space:nowrap;z-index:2;left:-3px;top:-24px;}
.book-print .map-visual__feature--pond b,.book-print .map-visual__feature--court b,.book-print .map-visual__feature--garden b {top:104%;}
.book-print .map-visual__feature--garden b {left:-22%;}
.book-print .map-visual__callout--court {left:-22%;}
.book-print .map-visual__callout--pond {top:100%;}
.book-print .print-prompt {font-size:10pt;font-weight:600;margin:3mm 0 0;break-after:avoid;}
.book-print .print-lines {margin:0 0 2mm;}
.book-print .print-lines span {display:block;height:7mm;border-bottom:1px solid var(--line-gold);}
.book-print .print-model {font-size:10pt;line-height:1.65;text-align:left;direction:ltr;}
}