/* Self-contained visual section. The headline and credits belong to Anons. */
#megafon {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  margin-top: -20svh;
}
#megafon * {box-sizing: border-box}
#megafon .mf-journey {position: relative; height: 340vh; height: 340svh}
#megafon .mf-sticky {
  position: sticky; top: 0; width: 100%;
  height: 100vh; height: 100svh; min-height: 540px;
  overflow: hidden; isolation: isolate; background: transparent;
}
#megafon .mf-static {
  position: absolute; width: min(74%, 820px);
  left: 50%; top: 43%;
  transform: translate(-50%, -20%) rotate(-7deg);
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 35px 70px -40px #4e355659;
}
#megafon .mf-static img {display:block; width:100%; height:auto}
#megafon .mf-sticky.ready .mf-static {display:none}
#megafon #sim-scene {position:absolute; inset:0}
#megafon #sim-scene canvas {display:block; width:100%; height:100%}
/* Empty marker for original animation JS. Site's title stays outside this block. */
#megafon .mf-title {
  position:absolute; top:0; left:0; right:0; height:0;
  z-index:3; pointer-events:none;
}
#megafon .mf-shade {position:absolute; inset:0; z-index:2; pointer-events:none; background:none}
#megafon #sim-drag {
  position:absolute; z-index:4;
  left:20%; right:20%; top:35%; height:40%;
  cursor:grab; touch-action:pan-y; border-radius:36px;
  pointer-events:none;
}
#megafon #sim-drag:active {cursor:grabbing}
#megafon #sim-drag:focus-visible {outline:2px solid #009f69; outline-offset:4px}
/* Original background letter stream. It is kept behind the content. */
.mf-letter-stream {
  position:fixed; z-index:0; inset:0; overflow:hidden;
  pointer-events:none; visibility:hidden; contain:strict;
}
.mf-letter-stream.is-visible {visibility:visible}
.mf-letter-stream canvas {display:block; width:100%; height:100%}
/* Host template wrapper must not hide the background stream. */
body {position:relative; isolation:isolate; background:#f7f7f5}
.als-body-wrap {position:relative; z-index:1}
.als-body-wrap,.als-content-wrap {background:transparent !important}
.announce__text {position:relative; isolation:isolate;}
@media(max-width:800px) {
  #megafon .mf-static {width:84%; border-radius:18px}
}
@media(max-width:600px) {
  #megafon .mf-journey {height:300svh}
  #megafon .mf-sticky {min-height:500px}
  #megafon .mf-static {width:83%; top:48%; border-radius:14px}
  #megafon #sim-drag {left:9%; right:9%; top:38%; height:32%; border-radius:15px}
}
@media(prefers-reduced-motion:reduce) {
  #megafon .mf-journey {height:100svh}
  .mf-letter-stream {display:none}
}
.no-immersive #megafon .mf-journey {height:100svh}

#megafon .mf-sticky .mf-title {
  /* top: 155px; */
  top: 80px;
  height: auto;
  padding: 0 20px 18px;
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
}

#megafon .mf-title__text {
  display: inline-block;
  /* max-width: 100%; */
  max-width: 860px;
  font-family: ALSArtemiusSerif, Georgia, serif;
  font-size: clamp(32px, 4.4vw, 64px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.035em;
}

@media (max-width: 600px) {
  #megafon {
    margin-top: -38svh;
    margin-bottom: -16svh;
  }
}