@charset "utf-8";

/* Zen Maru Gothic Bold, OFL-1.1. This local subset covers the third-scene heading. */
@font-face {
  font-family: "PNX Hero Round";
  src: url("../fonts/hero-world-zen-maru-gothic-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Index only: the top hero (two backgrounds) and the closing scene (rain clears into the town). */
html.site-theme--ledger.report-page--ledger .article-header--portrait {
  position: relative;
  isolation: isolate;
  --hero-shade: linear-gradient(90deg, #000, rgba(0, 0, 0, .82) 28%, rgba(0, 0, 0, .64) 61%, rgba(0, 0, 0, .12) 78%, transparent);
  padding-bottom: 72px;
  background-color: #000;
  background-image: var(--hero-shade), url("../img/report-hero-staged-optimism.jpg");
  background-repeat: no-repeat;
  background-position: center, right center;
  background-size: 100% 100%, auto 100%;
}

/* Static scenes remain available without WebGL and when motion is reduced. */
html.site-theme--ledger.report-page--ledger .article-header--portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--hero-shade), url("../img/report-hero-quiet-distress.jpg") right center / auto 100% no-repeat #000;
  background-size: 100% 100%, auto 100%;
  opacity: 0;
  transition: opacity .65s ease;
}
html.site-theme--ledger.report-page--ledger .article-header--portrait.hero-revealed::before {
  opacity: 1;
}
html.site-theme--ledger.report-page--ledger .world-finale > .hero-world-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #edf2e6 url("../img/report-hero-borderless-world-v1.webp") center top / cover no-repeat;
  opacity: var(--hero-world-progress);
}

/* The shader owns the moving image. */
html.site-theme--ledger.report-page--ledger :is(.article-header--portrait, .world-finale) > .hero-rain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
html.site-theme--ledger.report-page--ledger .article-header--portrait.hero-rain-active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--hero-shade);
  pointer-events: none;
}
html.site-theme--ledger.report-page--ledger .article-header--portrait > :where(:not(.hero-rain):not(.hero-world-background)) {
  position: relative;
  z-index: 2;
}
/* Closing scene, placed just before the contact form. */
html.site-theme--ledger.report-page--ledger .world-finale {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --hero-world-progress: 1;
  height: clamp(280px, 38vw, 540px);
  background: #1c2428;
}
html.site-theme--ledger.report-page--ledger .world-finale > .hero-title-world {
  top: clamp(14px, 2.4vw, 28px);
}
html.site-theme--ledger.report-page--ledger .hero-title-world {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 5%;
  width: 90%;
  color: #2f8f5b;
  font: 700 clamp(46px, 4.55vw, 58px)/1.25 "PNX Hero Round", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", var(--site-sans);
  font-synthesis: none;
  letter-spacing: .03em;
  text-align: center;
  opacity: var(--hero-world-progress);
  pointer-events: none;
}
html.site-theme--ledger.report-page--ledger .hero-title-world__lead {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  opacity: 0;
  margin-bottom: 4px;
  color: #3b5a4a;
  font: 700 24px/1.3 "PNX Hero Round", "Zen Maru Gothic", var(--site-sans);
  letter-spacing: .14em;
  -webkit-text-stroke: 5px #fffdf3;
  paint-order: stroke fill;
}
html.site-theme--ledger.report-page--ledger .hero-title-world__main {
  display: inline-block;
  position: relative;
  max-width: 100%;
  vertical-align: top;
  white-space: nowrap;
}
/* Each character is its own bouncing piece; colours cycle through a crayon box. */
html.site-theme--ledger.report-page--ledger .hero-char {
  display: inline-block;
  opacity: 0;
  -webkit-text-stroke: .16em #fffdf3;
  paint-order: stroke fill;
  filter: drop-shadow(0 2px 3px rgba(60, 48, 30, .25));
}
html.site-theme--ledger.report-page--ledger .hero-char:nth-child(5n + 1) { color: #e8743b; }
html.site-theme--ledger.report-page--ledger .hero-char:nth-child(5n + 2) { color: #2f8f5b; }
html.site-theme--ledger.report-page--ledger .hero-char:nth-child(5n + 3) { color: #2f7fc0; }
html.site-theme--ledger.report-page--ledger .hero-char:nth-child(5n + 4) { color: #d9477b; }
html.site-theme--ledger.report-page--ledger .hero-char:nth-child(5n) { color: #c98a00; }
/* The title is a continuous HTML phrase; SVG only supplies silent decoration. */
html.site-theme--ledger.report-page--ledger .hero-title-world::before {
  content: "";
  position: absolute;
  inset: -8px 18% -20px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 250, 231, .55), rgba(255, 252, 243, .14) 52%, transparent 74%);
  opacity: 0;
}
html.site-theme--ledger.report-page--ledger .hero-title-world__star {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  fill: #f4b63c;
  stroke: #fffdf3;
  stroke-width: 2;
  stroke-linejoin: round;
  opacity: 0;
}
html.site-theme--ledger.report-page--ledger .hero-title-world__star:last-child {
  width: 20px;
  height: 20px;
  fill: #ef8fb0;
}
html.site-theme--ledger.report-page--ledger .hero-title-world__stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
html.site-theme--ledger.report-page--ledger .hero-title-world__underline {
  position: absolute;
  left: 2%;
  bottom: -.3em;
  width: 96%;
  height: .44em;
  overflow: visible;
  fill: none;
  pointer-events: none;
}
html.site-theme--ledger.report-page--ledger .hero-title-world__stroke {
  stroke: #f08a4b;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.site-theme--ledger.report-page--ledger .hero-title-world__stroke--echo {
  stroke: #4aa3d8;
  stroke-width: 3;
}
html.site-theme--ledger.report-page--ledger .hero-title-world__glint {
  fill: #fff3b0;
  opacity: 0;
}
html.site-theme--ledger.report-page--ledger .hero-title-world.is-introduced::before {
  animation: hero-title-halo 1.3s .12s ease-out both;
}
html.site-theme--ledger.report-page--ledger .hero-title-world.is-introduced .hero-char {
  animation: hero-char-pop .7s calc(.2s + var(--i) * .07s) cubic-bezier(.3, 1.5, .5, 1) both;
}
html.site-theme--ledger.report-page--ledger .hero-title-world.is-introduced .hero-title-world__lead {
  animation: hero-title-lead .6s ease-out both;
}
html.site-theme--ledger.report-page--ledger .hero-title-world.is-introduced .hero-title-world__star {
  animation: hero-star-pop .8s .15s cubic-bezier(.3, 1.6, .5, 1) both;
}
html.site-theme--ledger.report-page--ledger .hero-title-world.is-introduced .hero-title-world__star:last-child {
  animation-delay: .3s;
}
html.site-theme--ledger.report-page--ledger .hero-title-world.is-introduced .hero-title-world__stroke {
  animation: hero-title-draw .9s 1.2s cubic-bezier(.22, .61, .36, 1) both;
}
html.site-theme--ledger.report-page--ledger .hero-title-world.is-introduced .hero-title-world__stroke--echo {
  animation-delay: 1.45s;
  animation-duration: .7s;
}
html.site-theme--ledger.report-page--ledger .hero-title-world.is-introduced .hero-title-world__glint {
  animation: hero-title-glint 1.05s 1.8s ease-in-out both;
}
@keyframes hero-title-lead {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-char-pop {
  0% { opacity: 0; transform: translateY(22px) scale(.4) rotate(-10deg); }
  55% { opacity: 1; transform: translateY(-9px) scale(1.12) rotate(4deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes hero-star-pop {
  0% { opacity: 0; transform: scale(0) rotate(-90deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes hero-title-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes hero-title-halo {
  from { opacity: 0; transform: scale(.88); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes hero-title-glint {
  0% { opacity: 0; transform: translate(10px, 16px); }
  18% { opacity: .9; }
  82% { opacity: .7; }
  100% { opacity: 0; transform: translate(468px, 12px); }
}
/* Phones and tablets: an icon at the bottom right switches the two backgrounds. */
html.site-theme--ledger.report-page--ledger .article-header--portrait > .hero-scene-toggle {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(220, 231, 227, .6);
  border-radius: 50%;
  background: rgba(14, 24, 27, .76);
  color: #ecf0e8;
  cursor: pointer;
  touch-action: manipulation;
}
html.site-theme--ledger.report-page--ledger .hero-scene-toggle svg {
  display: block;
  width: 22px;
  height: 22px;
  pointer-events: none;
}
html.site-theme--ledger.report-page--ledger .hero-scene-toggle:is(:hover, :focus-visible) {
  color: #fff;
  border-color: currentColor;
  background: #263b40;
}
html.site-theme--ledger.report-page--ledger .hero-scene-toggle:focus-visible {
  outline: 2px solid #e8f5ee;
  outline-offset: 3px;
}
/* Without scripts the closing scene shows the finished town and title. */
html.site-theme--ledger.report-page--ledger .world-finale:not(.hero-js) :is(.hero-char, .hero-title-world__star, .hero-title-world__lead) {
  opacity: 1;
}
html.site-theme--ledger.report-page--ledger .world-finale:not(.hero-js) .hero-title-world__stroke {
  stroke-dashoffset: 0;
}
html.site-theme--ledger.report-page--ledger :is(.hero-rain, .hero-world-background, .hero-scene-toggle)[hidden] {
  display: none;
}

@media (max-width: 820px) {
  html.site-theme--ledger.report-page--ledger .article-header--portrait {
    --hero-shade: linear-gradient(90deg, rgba(0, 0, 0, .92), rgba(0, 0, 0, .82) 55%, rgba(0, 0, 0, .72));
  }
  /* Keep the whole town visible instead of cropping most people out on phones. */
  html.site-theme--ledger.report-page--ledger .world-finale {
    height: max(56vw, 230px);
  }
  html.site-theme--ledger.report-page--ledger .world-finale > .hero-world-background {
    background-position: center 46%;
    background-size: 100% auto;
  }
  html.site-theme--ledger.report-page--ledger .hero-title-world {
    top: 12px;
    left: 6%;
    width: 88%;
    font-size: clamp(22px, 6.3vw, 46px);
    line-height: 1.25;
  }
  html.site-theme--ledger.report-page--ledger .hero-title-world__lead {
    margin-bottom: 3px;
    gap: 10px;
    font-size: clamp(16px, 4.5vw, 21px);
    letter-spacing: .1em;
  }
  html.site-theme--ledger.report-page--ledger .hero-title-world__star {
    width: 20px;
    height: 20px;
  }
  html.site-theme--ledger.report-page--ledger .hero-title-world__star:last-child {
    width: 16px;
    height: 16px;
  }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  html.site-theme--ledger.report-page--ledger .hero-title-world::before,
  html.site-theme--ledger.report-page--ledger .hero-title-world * {
    animation: none !important;
  }
  html.site-theme--ledger.report-page--ledger .hero-title-world::before,
  html.site-theme--ledger.report-page--ledger :is(.hero-title-world__lead, .hero-title-world__main) {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  html.site-theme--ledger.report-page--ledger :is(.hero-char, .hero-title-world__star) {
    opacity: 1;
    transform: none;
  }
  html.site-theme--ledger.report-page--ledger .hero-title-world__stroke {
    stroke-dashoffset: 0;
  }
  html.site-theme--ledger.report-page--ledger .hero-title-world__glint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.site-theme--ledger.report-page--ledger .world-finale .hero-world-background,
  html.site-theme--ledger.report-page--ledger .world-finale .hero-title-world {
    opacity: 1 !important;
  }
  html.site-theme--ledger.report-page--ledger .hero-rain,
  html.site-theme--ledger.report-page--ledger .article-header--portrait.hero-rain-active::after {
    display: none;
  }
  html.site-theme--ledger.report-page--ledger .article-header--portrait::before {
    transition: none;
  }
}
@media (forced-colors: active) {
  html.site-theme--ledger.report-page--ledger .article-header--portrait {
    background: Canvas;
  }
  html.site-theme--ledger.report-page--ledger :is(.hero-rain, .hero-world-background),
  html.site-theme--ledger.report-page--ledger .article-header--portrait::before,
  html.site-theme--ledger.report-page--ledger .article-header--portrait::after {
    display: none;
  }
  html.site-theme--ledger.report-page--ledger .hero-title-world {
    color: CanvasText;
    text-shadow: none;
  }
  html.site-theme--ledger.report-page--ledger .hero-title-world::before,
  html.site-theme--ledger.report-page--ledger .hero-title-world svg {
    display: none;
  }
  html.site-theme--ledger.report-page--ledger .world-finale {
    background: Canvas;
  }
  html.site-theme--ledger.report-page--ledger .hero-char {
    color: CanvasText;
    -webkit-text-stroke: 0;
    filter: none;
  }
}
@media print {
  html.site-theme--ledger.report-page--ledger .article-header--portrait {
    background: none;
    padding-bottom: 24px;
  }
  html.site-theme--ledger.report-page--ledger .world-finale {
    display: none;
  }
  html.site-theme--ledger.report-page--ledger :is(.hero-rain, .hero-scene-toggle),
  html.site-theme--ledger.report-page--ledger .article-header--portrait::before,
  html.site-theme--ledger.report-page--ledger .article-header--portrait::after {
    display: none;
  }
}