@font-face {
  font-family: "Dioni Doodles";
  src: url("assets/fonts/Marhey.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Dioni Doodle Serif";
  src: url("assets/fonts/Amiri.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* This chapter is outside the hero's scroll range and needs no JavaScript. */
.extras-scene {
  position: relative;
  padding-block: clamp(64px, 10vh, 160px) clamp(48px, 7vh, 96px);
  overflow: hidden;
  background: #fdfbf9;
}

.extras-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(24px, 2.67vw, 48px) clamp(24px, 4vh, 64px);
  width: 100%;
  max-width: 1600px;
  min-height: max(480px, min(88vh, 960px));
  margin-inline: auto;
  padding-inline: clamp(40px, 4vw, 72px);
  direction: ltr;
}

.extras-heading {
  grid-area: 2 / 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(clamp(-30px, -1.67vw, -15px));
  text-align: center;
}

.extras-heading h2 {
  margin: 0;
  color: #2b1a07;
  font-family: "Dioni Doodle Serif", "Rubik Dioni", serif;
  font-size: clamp(36px, 2.78vw, 50px);
  font-weight: 400;
  line-height: 1.12;
}

.extras-heading h2 span,
.extras-doodle figcaption span {
  display: block;
  white-space: nowrap;
}

.extras-flourish {
  position: relative;
  container-type: inline-size;
  width: clamp(80px, 6.67vw, 120px);
  aspect-ratio: 440 / 171;
  margin: 0 0 8px;
  transform: translateX(clamp(32px, 3.56vw, 64px));
  color: #ff6300;
  font-family: "Dioni Doodles", "Rubik Dioni", sans-serif;
  font-weight: 400;
}

.extras-flourish span {
  position: absolute;
  top: -6%;
  left: -10%;
  width: 120%;
  font-size: 19cqi;
  line-height: 1.2;
  white-space: nowrap;
  transform: rotate(-4deg);
}

.extras-flourish img {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: inset(70% 0 0 0);
}

.extras-doodle {
  --caption-x: 20%;
  --caption-y: 52%;
  --caption-width: 60%;
  --caption-size: 9.7cqi;
  --caption-leading: 1.2;
  --ink-clip: inset(0 0 50% 0);
  position: relative;
  container-type: inline-size;
  grid-row: var(--row);
  grid-column: var(--column);
  justify-self: var(--align-x);
  align-self: var(--align-y);
  width: min(clamp(176px, 14vw, 252px), 28vh);
  aspect-ratio: 6 / 5;
  margin: 0;
  transform: rotate(var(--tilt)) translate(var(--shift-x), var(--shift-y));
}

/* Clip only the baked English captions; keep the source artwork unmodified. */
.extras-doodle picture {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.extras-doodle picture img {
  display: block;
  width: 100%;
  height: 100%;
}

.extras-doodle__ink {
  clip-path: var(--ink-clip);
}

.extras-doodle__heart {
  clip-path: inset(64.5% 12% 26% 79%);
}

.extras-doodle figcaption {
  position: absolute;
  top: var(--caption-y);
  left: var(--caption-x);
  width: var(--caption-width);
  margin: 0;
  color: #000;
  font-family: "Dioni Doodles", "Rubik Dioni", sans-serif;
  font-size: max(14px, var(--caption-size));
  font-weight: 400;
  line-height: var(--caption-leading);
  text-align: var(--caption-align, center);
  direction: rtl;
}

.extras-doodle--bag {
  --row: 1;
  --column: 1;
  --align-x: start;
  --align-y: start;
  --tilt: -2deg;
  --shift-x: clamp(10px, 1.11vw, 20px);
  --shift-y: clamp(15px, 1.67vw, 30px);
}

.extras-doodle--tools {
  --row: 2;
  --column: 1;
  --align-x: start;
  --align-y: center;
  --tilt: -1deg;
  --shift-x: clamp(110px, 12.22vw, 220px);
  --shift-y: clamp(-20px, -1.11vw, -10px);
  --ink-clip: inset(44% 0 0 0);
  --caption-x: 20%;
  --caption-y: 8%;
  --caption-width: 70%;
}

.extras-doodle--paper {
  --row: 1;
  --column: 2;
  --align-x: center;
  --align-y: start;
  --tilt: 1deg;
  --shift-x: clamp(-50px, -2.78vw, -25px);
  --shift-y: clamp(-20px, -1.11vw, -10px);
  --ink-clip: inset(0 0 44% 0);
  --caption-y: 58%;
}

.extras-doodle--review {
  --row: 1;
  --column: 3;
  --align-x: end;
  --align-y: start;
  --tilt: 3deg;
  --shift-x: clamp(-205px, -11.39vw, -102px);
  --shift-y: clamp(5px, 0.56vw, 10px);
  --ink-clip: inset(0 49% 0 0);
  --caption-x: 51%;
  --caption-y: 36.6%;
  --caption-width: 28%;
  --caption-align: left;
  --caption-size: 9cqi;
  --caption-leading: 1.15;
}

.extras-doodle--records {
  --row: 3;
  --column: 1;
  --align-x: start;
  --align-y: end;
  --tilt: -1deg;
  --shift-x: clamp(40px, 4.44vw, 80px);
  --shift-y: clamp(-30px, -1.67vw, -15px);
  --caption-x: 5%;
  --caption-width: 90%;
}

.extras-doodle--payments {
  --row: 2;
  --column: 3;
  --align-x: end;
  --align-y: center;
  --tilt: -1deg;
  --shift-x: clamp(-100px, -5.56vw, -50px);
  --shift-y: clamp(-45px, -2.5vw, -22px);
  --ink-clip: inset(0 0 48% 0);
  --caption-y: 55%;
  --caption-width: 65%;
}

.extras-doodle--organised {
  --row: 3;
  --column: 2;
  --align-x: center;
  --align-y: end;
  --tilt: 0deg;
  --shift-x: clamp(-30px, -1.67vw, -15px);
  --shift-y: clamp(-55px, -3.06vw, -27px);
  --ink-clip: inset(0 0 0 64.58%);
  --caption-x: 3%;
  --caption-y: 41%;
  --caption-width: 57%;
}

.extras-doodle--customers {
  --row: 3;
  --column: 3;
  --align-x: end;
  --align-y: end;
  --tilt: -4deg;
  --shift-x: clamp(-250px, -13.89vw, -125px);
  --shift-y: clamp(-80px, -4.44vw, -40px);
  --caption-x: 15%;
  --caption-y: 52.5%;
  --caption-width: 70%;
  --caption-leading: 1.14;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .extras-grid {
    max-width: 768px;
    min-height: max(480px, min(85vh, 820px));
    gap: 24px clamp(16px, 3vw, 40px);
    padding-inline: 40px;
  }

  .extras-heading { transform: translateY(-15px); }
  .extras-heading h2 { font-size: 32px; }
  .extras-flourish { width: 96px; transform: translateX(45px); }
  .extras-doodle { width: min(154px, 22vh); --caption-size: 10.5cqi; }
  .extras-doodle--bag { --tilt: -7.9deg; --shift-x: -20px; --shift-y: 10px; }
  .extras-doodle--tools { --tilt: 7.5deg; --shift-x: 60px; --shift-y: -10px; }
  .extras-doodle--paper { --tilt: -1.7deg; --shift-x: -20px; --shift-y: -10px; }
  .extras-doodle--review { --tilt: -4deg; --shift-x: -60px; --shift-y: 0px; --caption-size: 9cqi; }
  .extras-doodle--records { --tilt: -6.4deg; --shift-x: 20px; --shift-y: -15px; }
  .extras-doodle--payments { --tilt: 1.5deg; --shift-x: -30px; --shift-y: -20px; }
  .extras-doodle--organised { --tilt: -2.1deg; --shift-x: -15px; --shift-y: -25px; }
  .extras-doodle--customers { --tilt: -4.9deg; --shift-x: -70px; --shift-y: -40px; }
}

@media (max-width: 767px) {
  .extras-grid {
    grid-template-columns: repeat(2, clamp(74px, min(34vw, 22vh), 154px));
    grid-template-rows: repeat(5, auto);
    justify-content: center;
    gap: clamp(12px, 3vh, 28px) clamp(24px, 9vw, 80px);
    min-height: 0;
    padding: clamp(16px, 3vh, 32px) clamp(28px, 9vw, 72px) clamp(32px, 6vh, 56px);
  }

  .extras-heading {
    --reference-title-size: clamp(22px, 6.5vw, 30px);
    --flourish-width: clamp(90px, 25vw, 120px);
    grid-area: 3 / 1 / 4 / 3;
    /* Preserve the reference row height with room for Arabic letter forms. */
    min-height: calc(clamp(16px, 4vh, 36px) * 2 + var(--reference-title-size) * 2.4 + var(--flourish-width) * 171 / 440 + 4px);
    padding-block: 0;
    transform: none;
  }

  .extras-heading h2 { font-size: clamp(28px, 8.2vw, 36px); }
  .extras-flourish { width: var(--flourish-width); margin-bottom: 4px; transform: translateX(clamp(40px, 11vw, 50px)); }

  .extras-doodle {
    --align-x: center;
    --align-y: center;
    --tilt: 0deg;
    --shift-x: 0px;
    --shift-y: 0px;
    --caption-size: 11.8cqi;
    width: 100%;
    aspect-ratio: 1;
  }

  .extras-doodle--bag { --row: 1; --column: 1; --caption-y: 51%; }
  .extras-doodle--tools { --row: 1; --column: 2; --caption-y: 17%; --ink-clip: inset(46% 0 0 0); }
  .extras-doodle--paper {
    --row: 2;
    --column: 1;
    --shift-x: -20px;
    --ink-clip: inset(0 60% 0 0);
    --caption-x: 44%;
    --caption-y: 36%;
    --caption-width: 53%;
    --caption-size: 10.6cqi;
  }

  .extras-doodle--review {
    --row: 2;
    --column: 2;
    --shift-x: -20px;
    --ink-clip: polygon(0 0, 51% 0, 51% 34%, 46.5% 34%, 46.5% 100%, 0 100%);
    --caption-x: 49%;
    --caption-y: 34%;
    --caption-width: 40%;
    --caption-size: 10.4cqi;
  }

  .extras-doodle__heart { clip-path: inset(62% 11% 28% 78%); }
  .extras-doodle--records { --row: 4; --column: 1; --tilt: -6.4deg; }
  .extras-doodle--payments { --row: 4; --column: 2; --tilt: 4.8deg; --caption-y: 54%; --ink-clip: inset(0 0 50% 0); }
  .extras-doodle--organised {
    --row: 5;
    --column: 1;
    --ink-clip: inset(0 0 0 65.55%);
    --caption-x: 1%;
    --caption-y: 39%;
    --caption-width: 60%;
    --caption-size: 10.8cqi;
  }

  .extras-doodle--customers { --row: 5; --column: 2; --tilt: -4.9deg; --caption-y: 53%; }
}