/* Keep the unfurled scroll readable on a phone: one line per word, enough row height, no overlapping letters.
   The sheet is a size container so the paper keeps one shape and the ink scales with it on every phone (zoom, Safari chrome). */
@media (max-width: 900px) {
  .desk-scene.reading {
    --rule: 38px;
  }
  .desk-scene.reading .sheet {
    width: min(640px, 88vw);
  }
  .desk-scene.reading .vellum {
    height: 460px;
    padding: 3.4rem 19% 3.6rem 20%;
  }
  .desk-scene.reading .summary {
    font-size: 1.22rem;
  }
  .desk-scene.reading .mast {
    gap: 0 0.45rem;
    flex-wrap: wrap;
  }
  .desk-scene.reading .mast > div {
    min-width: 0;
  }
  .desk-scene.reading .mast h1,
  .desk-scene.reading .stamp {
    font-size: 1.3rem;
  }
  .desk-scene.reading .enter {
    font-size: 1.34rem;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
  }
  .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.3rem;
  }
  .desk-scene.reading .figures strong {
    font-size: 1.48rem;
  }
}

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

@supports (width: 1cqw) {
  @media (max-width: 900px) {
    .desk-scene.reading .sheet { container-type: inline-size; }
    .desk-scene.reading { --rule: 11cqw; }
    .desk-scene.reading .vellum {
      height: 122cqw;
      padding: 15cqw 19% 17cqw 20%;
    }
    .desk-scene.reading .summary { font-size: 5.7cqw; }
    .desk-scene.reading .mast { gap: 0 2cqw; }
    .desk-scene.reading .mast h1,
    .desk-scene.reading .stamp { font-size: 6.05cqw; }
    .desk-scene.reading .enter { font-size: 6.25cqw; }
    .desk-scene.reading .figures { gap: 0 3cqw; }
    .desk-scene.reading .figures p>span { font-size: 6.05cqw; }
    .desk-scene.reading .figures strong { font-size: 6.9cqw; }
  }
}

/* Favorable figures in forest ink, unfavorable in oxblood; the benchmark stays plain ink */
.figures p.tone-good strong,
.figures p.tone-good strong .hand > span,
.figures p.tone-good strong .hand > span .glyph {
  color: #1f4a2c;
}
.figures p.tone-bad strong,
.figures p.tone-bad strong .hand > span,
.figures p.tone-bad strong .hand > span .glyph {
  color: #6b2230;
}

/* 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;
}