/* Preserve the collage angles. Shape text with fractional glyph metrics rather
   than favoring pixel-grid hinting intended for horizontal small text. */
.project,.portrait,.handwritten {
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  font-kerning:normal;
}
.project .project-visual figcaption,
.portrait figcaption { font-size:10px; line-height:1.6; }
.project .agent-note,
.project .channel-result { font-size:11px; }

/* One transform for the whole live window, including all of its text. */
.project [data-echo-ui],
.project [data-aileet-ui] {
  --exhibit-scale:1.015; --exhibit-lift:-3px;
  position:relative; transform:rotate(var(--exhibit-angle)); transform-origin:50% 50%;
  transition:transform 260ms cubic-bezier(.2,.65,.3,1),box-shadow 260ms ease;
}
.project [data-echo-ui] { --exhibit-angle:2deg; --exhibit-turn:.8deg; }
.project [data-aileet-ui] { --exhibit-angle:-1.2deg; --exhibit-turn:-.8deg; }
.project[data-exhibit-active='true'] [data-echo-ui],
.project[data-exhibit-active='true'] [data-aileet-ui] {
  transform:translateY(var(--exhibit-lift)) rotate(calc(var(--exhibit-angle) + var(--exhibit-turn))) scale(var(--exhibit-scale));
  box-shadow:7px 11px 0 #a9b9e749,0 14px 26px #434f7b12;
}

/* Echo: actual reading sizes, including its compact mobile presentation. */
.echo-ui { font-size:13px; }
.echo-ui .echo-titlebar strong { font-size:14px; }
.echo-ui .echo-fictional { font-size:10px; }
.echo-ui .echo-toolbar { font-size:11px; }
.echo-ui .echo-status { font-size:11px; }
.echo-ui .echo-heading h4 { font-size:13px; }
.echo-ui .echo-heading small,
.echo-ui .echo-heading>span { font-size:10px; }
.echo-ui .echo-editor { font-size:12px; line-height:1.65; min-height:124px; }
.echo-ui .echo-audio-label { font-size:11px; }
.echo-ui .echo-fragment small { font-size:10px; }
.echo-ui .echo-fragment p { font-size:12px; line-height:1.5; }
.echo-ui .echo-finding h5 { font-size:13px; line-height:1.45; }
.echo-ui .echo-finding p { font-size:13px; line-height:1.6; color:#45495d; }
.echo-ui .echo-summary,
.echo-ui .echo-footer,
.echo-ui .echo-empty { font-size:10px; }

/* Aileet's small supporting labels should remain legible too. */
[data-aileet-ui] .demo-badge { font-size:10px; }
[data-aileet-ui] .demo-foot { font-size:10px; }
[data-aileet-ui] .extra-head { font-size:11px; }
@media(max-width:1100px) and (min-width:901px) {
  .echo-ui .echo-workspace { grid-template-columns:1fr; }
  .echo-ui .echo-source { border-right:0; border-bottom:1px solid var(--echo-line); }
  .echo-ui .echo-editor { min-height:98px; }
  .echo-ui .echo-finding { padding:12px 0; }
}
@media(max-width:900px) {
  .echo-ui .echo-titlebar { flex-wrap:wrap; }
  .echo-ui .echo-fictional { font-size:9px; }
  .echo-ui .echo-toolbar { gap:6px; }
  .echo-ui .echo-status { font-size:10px; }
  .echo-ui .echo-editor { min-height:100px; }
  .echo-ui .echo-transcript { min-height:122px; }
  .echo-ui .echo-fragment { grid-template-columns:57px 1fr; }
  .echo-ui .echo-finding { min-height:78px; }
  .echo-ui .echo-finding p { font-size:12px; }
  .echo-ui .echo-footer { font-size:9px; }
  [data-aileet-ui] .demo-badge { font-size:9px; }
  [data-aileet-ui] .demo-foot { font-size:9px; }
  .project .project-visual figcaption { font-size:9px; }
  .project [data-echo-ui],.project [data-aileet-ui] { --exhibit-scale:1.008; --exhibit-lift:-2px; }
  .project [data-echo-ui] { --exhibit-angle:1deg; --exhibit-turn:.6deg; }
  .project [data-aileet-ui] { --exhibit-angle:-.65deg; --exhibit-turn:-.6deg; }
}
@media(prefers-reduced-motion:reduce) {
  .project [data-echo-ui],.project [data-aileet-ui] { transition:none; }
  .project[data-exhibit-active] [data-echo-ui],
  .project[data-exhibit-active] [data-aileet-ui] { transform:rotate(var(--exhibit-angle)); }
}