/* Keep the unfurled scroll readable on a phone: one line per word, enough row height, no overlapping letters. */
@media (max-width: 900px) {
  .desk-scene.reading {
    --rule: 36px;
  }
  .desk-scene.reading .sheet {
    width: min(640px, 92vw);
  }
  .desk-scene.reading .vellum {
    height: min(72dvh, 640px);
    padding: 2.6rem 8% 0.9rem;
  }
  .desk-scene.reading .summary {
    font-size: 1.15rem;
  }
  .desk-scene.reading .mast {
    gap: 0.45rem;
  }
  .desk-scene.reading .mast h1,
  .desk-scene.reading .stamp {
    font-size: 1.28rem;
  }
  .desk-scene.reading .enter {
    font-size: 1.32rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .desk-scene.reading .figures {
    grid-template-columns: 1fr 1fr;
    gap: 0 0.7rem;
  }
  .desk-scene.reading .figures p>span,
  .desk-scene.reading .figures strong,
  .desk-scene.reading .hand,
  .desk-scene.reading .hand > span:not(.read) {
    white-space: nowrap;
  }
  .desk-scene.reading .figures p>span {
    font-size: 1.22rem;
  }
  .desk-scene.reading .figures strong {
    font-size: 1.4rem;
  }
}

@media (max-width: 430px) {
  .desk-scene.reading {
    --rule: 38px;
  }
  .desk-scene.reading .figures,
  .desk-scene.reading .decisions ol {
    grid-template-columns: 1fr;
  }
}

/* Crisp, labeled ink charts on the scroll */
.graphs-root { margin-top: 1.6rem; }
.graphs { gap: 2.8rem; }
.graph { margin: 0; }
.graph .plot { overflow: visible; }
.graph svg {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  min-height: 300px;
  overflow: visible;
}
.graph.wide svg { min-height: 340px; }
.graph .axis,
.graph .when,
.graph .axis-title {
  font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 500;
  fill: #2c2118;
  paint-order: stroke fill;
  stroke: #f3e4c4;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.graph .axis,
.graph .when { font-size: 15px; }
.graph .axis-title { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; }
.graph .spine { stroke: #2c2118; stroke-width: 1.35px; opacity: 0.9; }
.graph .grid { stroke: #2c211833; stroke-width: 0.8px; }
.graph .zero { stroke: #2c2118; stroke-width: 1.15px; stroke-dasharray: 4 5; opacity: 0.65; fill: none; }
.graph .stroke { fill: none; stroke: #3a3128; stroke-width: 2.15px; stroke-linecap: round; stroke-linejoin: round; }
.graph .stroke.light { stroke: #7a6a58; stroke-width: 2px; stroke-dasharray: 6 5; }
.graph .stroke.up { stroke: #234a30; }
.graph .stroke.down { stroke: #6e2e28; }
.graph .wash { fill-opacity: 0.14; stroke: none; }
.graph .wash.up { fill: #234a30; }
.graph .wash.down { fill: #6e2e28; }
.graph .mark { stroke: #f3e4c4; stroke-width: 1.5px; }
.graph .mark.up { fill: #234a30; }
.graph .mark.down { fill: #6e2e28; }
.graph .bar { stroke: #f3e4c4; stroke-width: 0.6px; }
.graph .bar.up { fill: #234a30; }
.graph .bar.down { fill: #6e2e28; }
.glegend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0.35rem 0 0;
  padding: 0;
  font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 15px;
  color: #2c2118;
}
.glegend li { display: flex; align-items: center; gap: 0.45rem; }
.glegend i {
  width: 1.4rem;
  height: 0;
  border-top: 2.15px solid #3a3128;
  display: inline-block;
}
.glegend i.light { border-top: 2px dashed #7a6a58; }
.gempty {
  font-family: Palatino, Georgia, serif;
  color: #5a4636;
  margin: 0.6rem 0 0;
  font-size: 1.05rem;
}
@media (max-width: 900px) {
  .graph svg { min-height: 260px; }
  .graph.wide svg { min-height: 280px; }
  .graph .axis,
  .graph .when { font-size: 13px; }
  .graph .axis-title { font-size: 14px; }
}

/* After the quill is done, keep axis ticks, fills, and end marks visible */
.vellum:not(.writing) .graph .wash,
.vellum:not(.writing) .graph .mark,
.vellum:not(.writing) .graph .when,
.vellum:not(.writing) .graph .axis-title {
  opacity: 1;
}