/* An illustrated story with one clock, no embedded application or video. */
.narrative-art {
  --narr-paper: #fff;
  --narr-paper-soft: #f3f7ff;
  --narr-ink: #17335b;
  --narr-muted: #788ba6;
  --narr-line: #dce7f5;
  --narr-blue: #007bff;
  --narr-depth: #c5d9f4;
  --narr-shadow: #22477e24;
  color: var(--narr-ink);
}
html[data-theme="dark"] .narrative-art {
  --narr-paper: #253348;
  --narr-paper-soft: #1c2a3e;
  --narr-ink: #f0f5ff;
  --narr-muted: #b0c2db;
  --narr-line: #405774;
  --narr-blue: #59a6ff;
  --narr-depth: #16253b;
  --narr-shadow: #00000040;
}
.hero:has(.narrative-art) {
  align-items: center;
  padding-top: 30px;
  padding-bottom: 34px;
}
.hero-art.narrative-art {
  position: relative;
  display: block;
  align-self: center;
  width: calc(100% + 72px);
  margin: -12px 0 -6px -38px;
  transform: none;
  isolation: isolate;
}
.narrative-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7% -4% 8% 1%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    #b0d6ff40,
    #cbb4f02b 44%,
    transparent 72%
  );
  pointer-events: none;
}
html[data-theme="dark"] .narrative-art::before {
  background: radial-gradient(
    ellipse,
    #1262a945,
    #8763bb22 44%,
    transparent 72%
  );
}
.narrative-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: "Open Sans", Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
  user-select: none;
}
.narrative-svg .narr-paper {
  fill: var(--narr-paper);
}
.narrative-svg .narr-soft {
  fill: var(--narr-paper-soft);
}
.narrative-svg .narr-ink {
  fill: var(--narr-ink);
}
.narrative-svg .narr-muted {
  fill: var(--narr-muted);
}
.narrative-svg .narr-line {
  stroke: var(--narr-line);
}
.narrative-svg .narr-depth {
  fill: var(--narr-depth);
}
.narrative-svg .narr-blue {
  fill: var(--narr-blue);
}
.narrative-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 38px;
  margin: -14px 12px 0;
  color: var(--narr-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.narrative-caption [data-narrative-label] {
  min-width: 252px;
}
.narrative-description {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 1247px) and (min-width: 845px) {
  .hero-art.narrative-art {
    width: calc(100% + 42px);
    margin-left: -28px;
  }
}
@media (max-width: 844px) {
  .hero:has(.narrative-art) {
    padding-top: 50px;
    padding-bottom: 30px;
  }
  .hero-art.narrative-art {
    width: 100%;
    max-width: 690px;
    margin: 14px auto 0;
  }
}
@media (max-width: 539px) {
  .hero:has(.narrative-art) {
    padding-top: 68px;
    padding-bottom: 26px;
  }
  .hero-art.narrative-art {
    width: calc(100% + 16px);
    margin: 12px -8px 0;
  }
  .narrative-caption {
    margin-top: -5px;
    gap: 7px;
    font-size: 13px;
  }
  .narrative-caption [data-narrative-label] {
    min-width: 0;
  }
}