/* Design dimensions: desktop px / 1920 * 100vw; mobile px / 393 * 100vw. */
@font-face {
  font-family:Helvetica Neue;
  src:url("assets/HelveticaNeue-01.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:Helvetica Neue;
  src:url("assets/HelveticaNeue-Medium-11.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:Helvetica Neue;
  src:url("assets/HelveticaNeue-Bold-02.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
* {
  box-sizing:border-box;
}
html,body {
  margin:0;
  min-height:100%;
  background:#fff;
  color:#000;
}
body {
  font-family:"Helvetica Neue",Arial,sans-serif;
}
main {
  min-height:100svh;
  padding:2.9166666667vw 5.3125vw 6.25vw;
}
.brand {
  margin:0;
  font-size:0;
}
.brand-toggle {
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  appearance:none;
  cursor:pointer;
  touch-action:manipulation;
}
.brand img {
  display:block;
  width:100%;
  height:auto;
}
.contact {
  display:grid;
  grid-template-columns:60.8% 1fr auto;
  margin-top:3.5416666667vw;
  font-size:1.0625vw;
  font-weight:500;
  line-height:1.25vw;
}
.contact a {
  color:inherit;
  text-decoration:none;
  width:max-content;
}
.contact time {
  white-space:nowrap;
}
/* Keep the visual text layer from intercepting the logo toggle below it. */
.statement {
  --statement-top:2.2916666667vw;
  overflow:clip;
  pointer-events:none;
  position:fixed;
  inset:0 5.3125vw;
  padding-top:var(--statement-top);
  color:#f00;
  font-size:2.5260416667vw;
  line-height:3.125vw;
  font-weight:400;
}
.statement p {
  margin:0;
}
.statement p+p {
  margin-top:0.8333333333vw;
}
.statement-inner>div+div {
  margin-top:2.9166666667vw;
}
.status {
  appearance:none;
  touch-action:manipulation;
  position:fixed;
  bottom:2.5520833333vw;
  left:0;
  width:100%;
  padding:0.625vw 0;
  border:0;
  background:transparent;
  color:#000;
  text-align:left;
  font:700 0.8083333333vw/1.0416666667vw "Helvetica Neue",Arial,sans-serif;
  cursor:pointer;
  overflow:hidden;
  z-index:2;
}
/* The native button owns pointer events, including over the animated text. */
.ticker {
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  display:flex;
  width:max-content;
  --marquee-phase:-0.8333333333vw;
  transform:translateX(var(--marquee-phase));
  animation:marquee 80s linear infinite;
}
.ticker-group {
  display:flex;
  flex-shrink:0;
}
.ticker-group>span {
  white-space:pre;
  flex-shrink:0;
}
.status:hover .ticker,.status:focus-visible .ticker {
  animation-play-state:paused;
}
a:focus-visible,button:focus-visible {
  outline:0.1041666667vw solid #f00;
  outline-offset:0.2083333333vw;
}
.status:focus-visible {
  outline-offset:-0.1041666667vw;
}

@media(max-width:600px) {
  main {
    padding:8.2697201018vw 5.8524173028vw 22.9007633588vw;
  }
  .contact {
    grid-template-columns:60.8% 1fr auto;
    margin-top:8.0152671756vw;
    font-size:2.6972010178vw;
    line-height:3.0534351145vw;
  }
  .statement {
    --statement-top:7.1246819338vw;
    inset:0 5.8524173028vw;
    font-size:4.8396946565vw;
    line-height:5.9796437659vw;
  }
  .statement p+p {
    margin-top:2.0356234097vw;
  }
  .statement-inner>div+div {
    margin-top:10.8142493639vw;
  }
  .status {
    bottom:6.106870229vw;
    padding:4.0712468193vw 0;
    font-size:2.4681933842vw;
    line-height:3.0534351145vw;
  }
  .ticker {
    --marquee-phase:-70.2290076336vw;
  }
  
  a:focus-visible,button:focus-visible {
    outline-width:0.5089058524vw;
    outline-offset:1.0178117048vw;
  }
  .status:focus-visible {
    outline-offset:-0.5089058524vw;
  }
}
@media(prefers-reduced-motion:reduce) {
  .ticker {
    animation:none;
  }
}
@media(min-width:601px) {
  .contact a {
    padding-top:0.1041666667vw;
  }
}

/* Each equal group contains enough repeated text to cover the viewport.
   Translating exactly one group makes the end frame identical to the start. */
@keyframes marquee {
  from {
    transform:translateX(var(--marquee-phase));
  }
  to {
    transform:translateX(calc(-50% + var(--marquee-phase)));
  }
}

/* The open transparent overlay can be dismissed anywhere on the page. */
body.overlay-open {
  cursor:pointer;
}