/* Issue 3 · tarhana. Cartoon scenes; any words on a picture are HTML laid over it so they can be translated. */

.page--burst {
  background:
    repeating-conic-gradient(from 0deg at 72% 50%, #F6C65B 0deg 7.5deg, transparent 7.5deg 15deg),
    var(--mustard);
}
.issue--tarhana .hero__title { font-size: clamp(2.4rem, 4.8vw, 4.6rem); max-width: 14ch; }
.hero__art--wide { width: min(100%, 560px); }
.art--cartoon { filter: drop-shadow(var(--shadow)); }
.page__art .art { width: auto; max-width: 100%; margin-inline: auto; }
.art--framed { border: 4px solid var(--ink); border-radius: 14px; }

/* A picture with HTML labels on top. Its width follows the height cap, so labels stay where the drawing puts them. */
.scene {
  --max-h: 72vh;
  position: relative;
  width: min(100%, calc(var(--max-h) * var(--ratio)));
  margin-inline: auto;
  container-type: inline-size;
}
.page__art .scene > .art { width: 100%; max-height: none; }

/* page 2: the list on the wall */
.wall {
  position: absolute;
  left: 65%;
  top: 6.8%;
  width: 30.2%;
  height: 61.4%;
  margin: 0;
  padding: 4cqw 2.4cqw;
  list-style: none;
  font: 800 max(12px, 2.7cqw)/1.45 var(--font-display);
  color: var(--ink);
}
.wall li { margin-bottom: 1.6cqw; }
.js .wall li { opacity: 0; transition: opacity 0.5s ease; }
.js .in-view .wall li { opacity: 1; }
.js .in-view .wall li:nth-child(1) { transition-delay: 0.2s; }
.js .in-view .wall li:nth-child(2) { transition-delay: 0.45s; }
.js .in-view .wall li:nth-child(3) { transition-delay: 0.7s; }

/* page 4 */
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 0.8em; text-align: center; }
.side {
  justify-self: center;
  font: 800 1rem/1 var(--font-display);
  padding: 0.5em 0.9em;
  box-shadow: var(--shadow);
}
.side--good { background: var(--leaf); transform: rotate(-2deg); }
.side--bad { background: var(--tomato); color: var(--paper); transform: rotate(2deg); }
#s4 .steps { margin-bottom: 0.8em; }
#s4 .steps li { margin-bottom: 0.15em; }

/* page 5 */
.bubble--s5 { position: absolute; top: 1%; left: 54%; margin: 0; transform: rotate(4deg); }

/* page 6: the lab's numbers */
.readout {
  position: absolute;
  top: 1%;
  right: 0;
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 1.6cqw 2.4cqw;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.35);
  font: 700 max(12px, 2.6cqw)/1.3 var(--font-display);
  transform: rotate(2deg);
}
.readout p { display: grid; margin: 0; font-variant-numeric: tabular-nums; }
.readout b { color: var(--tomato); font-weight: 800; }
.readout__arrow { font-size: max(14px, 4cqw); font-weight: 900; }

/* page 7: setting cards on the map */
.pin {
  position: absolute;
  font: 800 max(12px, 2.8cqw)/1 var(--font-display);
  padding: 0.35em 0.6em;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 3px 4px 0 rgba(30, 34, 64, 0.3);
}
.pin--a { left: 38%; top: 48%; transform: rotate(-4deg); }
.pin--b { left: 80%; top: 44%; transform: rotate(3deg); }
.pin--greek { left: 4%; top: 49%; background: var(--mustard); font-style: italic; transform: rotate(-3deg); }

/* page 8 */
.counter {
  position: absolute;
  top: 4%;
  left: 3%;
  font: 800 max(11px, 3cqw)/1 var(--font-display);
  padding: 0.5em 0.8em;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
  transform: rotate(-3deg);
}

/* page 9: the two loops */
.loop-tag {
  position: absolute;
  max-width: 34%;
  font: 800 max(11px, 2.8cqw)/1.2 var(--font-display);
  padding: 0.45em 0.75em;
  background: var(--tomato);
  color: var(--paper);
  border-radius: 12px;
  box-shadow: 3px 4px 0 rgba(30, 34, 64, 0.3);
}
.loop-tag--outer { right: 0; top: 62%; transform: rotate(3deg); }
.loop-tag--inner { left: 0; top: 72%; background: var(--teal); transform: rotate(-3deg); }

/* page 11: four bugs */
.limit__art { display: block; width: 100%; height: clamp(80px, 13vh, 130px); object-fit: contain; margin-bottom: 0.4em; }
.limits__outro {
  font: 700 1.05rem/1.4 var(--font-display);
  margin-top: 1em;
  padding: 0.8em 1em;
  background: var(--paper);
  box-shadow: var(--shadow);
  transform: rotate(-1deg);
}

/* page 12 */
.try { font: 700 1.15rem/1.4 var(--font-display); margin: 0.6em 0 0; }
.try--hard { color: var(--mustard); }
#s12 .source { margin-top: 1.4em; }
.napkin-word {
  position: absolute;
  left: 60%;
  top: 79%;
  max-width: 27%;
  font: 800 max(11px, 3.4cqw)/1.1 var(--font-display);
  padding: 0.3em 0.5em;
  background: var(--mustard);
  color: var(--ink);
  transform: rotate(-3deg);
}

@media (max-width: 820px) {
  .issue--tarhana .hero__title { font-size: 2.2rem; }
  .issue--tarhana .bubble--hero { margin-left: 0; }
  .hero__art--wide { width: 70%; justify-self: center; }
  .scene { --max-h: 30svh; }
  .bubble--s5 { font-size: 0.8rem; padding: 0.5em 0.7em; }
  .side { font-size: 0.85rem; }
  .readout { border-width: 2px; }
  .pin { border-width: 2px; }
  .limit__art { height: 84px; }
  .limits__outro { font-size: 0.92rem; }
  .try { font-size: 1rem; }
  .page--night .page__art { max-height: none; }
}