/* Preview: relocate the main statement; test the glyph backing only on the experience line. */
.logo-composition .hero-statement{
  font:400 26px/1.35 'Aspect Display','Segoe UI',sans-serif;
  letter-spacing:0;
  text-align:center;
  white-space:nowrap;
  color:#fff;
  margin:32px 0 0;
  padding:0;
  max-width:100%;
  text-shadow:0 0 1.4px rgba(3,17,29,.98),0 1px 2.8px rgba(3,17,29,.86),0 0 6px rgba(3,17,29,.62),0 2px 11px rgba(3,17,29,.28);
}
body[data-layout=dawn] .scene-layout .side-note p{
  font:400 26px/1.38 'Aspect Display','Segoe UI',sans-serif!important;
  letter-spacing:0;
  max-width:none;
  margin:0;
  text-wrap:balance;
}
body[data-scene=dawn] .scene-layout .side-note p{
  color:#fff;
  -webkit-text-stroke:.8px rgba(3,17,29,.95);
  paint-order:stroke fill;
  text-shadow:0 0 1px #03111d,0 0 2.5px rgba(3,17,29,.95),0 0 5px rgba(3,17,29,.78),0 1px 9px rgba(3,17,29,.42);
}
@media(min-width:1800px){
  .logo-composition .hero-statement{font-size:30px}
  body[data-layout=dawn] .scene-layout .side-note p{font-size:30px!important}
}
@media(max-width:1200px){
  .logo-composition .hero-statement{margin-top:24px;font-size:25px}
  .logo-composition .directions{margin-bottom:0}
  body[data-layout=dawn] .scene-layout .side-note p{font-size:25px!important;max-width:600px;margin:0 auto}
}
@media(max-width:760px){
  .logo-composition .hero-statement{white-space:normal;text-wrap:balance;font-size:25px;max-width:30ch;line-height:1.35;margin-top:20px}
  body[data-layout=dawn] .scene-layout .side-note p{font-size:25px!important;line-height:1.35!important}
}
@media(max-width:360px){
  .logo-composition .hero-statement{font-size:24px}
  body[data-layout=dawn] .scene-layout .side-note p{font-size:24px!important}
}
@media(forced-colors:active){
  .logo-composition .hero-statement{color:CanvasText;background:Canvas;text-shadow:none}
  body[data-scene=dawn] .scene-layout .side-note p{color:CanvasText;-webkit-text-stroke:0;text-shadow:none}
}