/* Coordinates are measured in the supplied 935px PSD reference space.
   Artwork remains untouched: no crop, filters, overlays or reconstructed text. */
* { box-sizing:border-box; }
html,body { margin:0;min-height:100%; }
body { background:#111; }
.composition {
  position:relative;
  width:min(100%,935px);
  margin-inline:auto;
  /* Match the supplied design canvas, including its short footer margin. */
  aspect-ratio:935 / 1683;
  /* The footer artwork ends at the reference canvas edge. */
  overflow:clip;
  background:url('assets/site_images/bg_main.jpg') center top / 100% 100% no-repeat;
}
.art { display:block;position:absolute;height:auto;max-width:100%; }
.top-logo {left:3.636364%;top:0.713012478%;width:33.048128%;}
.menu {left:42.566845%;top:0.950683304%;width:57.433155%;}
.hero {left:2.459893%;top:4.337492573%;width:95.828877%;}
.command {left:1.176471%;top:20.855614973%;width:97.754011%;}
.active {left:0;top:33.511586453%;width:100%;}
.public {left:0;top:72.504538397%;width:100%;}
.current {left:0;top:50.250063193%;width:100%;}
.words {left:0;top:61.962819616%;width:100%;}
.why {left:0;top:82.768865122%;width:100%;}
.footer {left:0;top:87.938205585%;width:100%;}
/* The same proportional composition scales down on tablet and mobile. */

/* Live text is scoped to the two approved transparent openings only.
   Container units keep its placement and line breaks proportional to the art. */
.composition {container-type:inline-size}
.text-module>img {display:block;width:100%;height:auto}
.live-copy {
  position:absolute;margin:0;padding:0;color:#111;background:transparent;
  font-family:'Courier New',Courier,monospace;font-weight:700;
  font-size:1.497326cqw;line-height:1.2;letter-spacing:-.025em;
  text-align:left;text-shadow:none;
}
.live-copy p {margin:0;padding:0}
.command-copy {left:4.604052%;top:37.845304%;width:52.946593%}
.manifesto-copy {left:4.788214%;top:45.303867%;width:58.471455%}
.closing-copy {left:68.370166%;top:57.734807%;width:27.624309%}

.manifesto-copy {letter-spacing:-.055em}

/* Transparent hit areas follow the original image coordinates at every scale. */
.link-module>img {display:block;width:100%;height:auto}
.hotspot {position:absolute;display:block;z-index:2;cursor:pointer;background:transparent;text-decoration:none}
.hotspot:focus-visible {outline:2px solid #a82722;outline-offset:2px}
html {scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto}}