@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ivory: #fff4df;
  --serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  /* 80 / 0.9 keeps the travel distance and reduces speed by exactly 10%. */
  --chart-duration: 88.8889s;
  --utility-text-size: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; }
body { background: #10659b; color: var(--ivory); font-family: Arial, Helvetica, sans-serif; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.landing { position: relative; isolation: isolate; overflow: hidden; background: #10659b; }

/* The stationary composition retains the approved reference proportions. */
.scene { position: relative; width: 100%; aspect-ratio: 1672 / 941; container-type: inline-size; }
.scene__art { position: absolute; inset: 0; width: 100%; height: auto; pointer-events: none; }

/* Use the original visual lettering, including its cloud occlusion. This is
   deliberately a brand artwork, not an approximate font or faded HTML text.
   The crop excludes the original masthead and subtitle; those remain HTML. */
.hero-title { position: absolute; z-index: 2; inset: 0; margin: 0; clip-path: inset(8% 0 56%); mask-image: linear-gradient(to bottom, transparent 8%, #000 12%, #000 41%, transparent 44%); pointer-events: none; }
.hero-title img { display: block; width: 100%; height: auto; }

/* Four overlapping copies blend across their cloud-covered edges. Moving by
   exactly one tile pitch means the reset frame equals the starting frame.
   Only the lower artwork moves; upper clouds, title, and copy stay stationary. */
.chart-window { position: absolute; z-index: 1; inset: 46% 0 0; overflow: hidden; visibility: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%); mask-image: linear-gradient(to bottom, transparent, #000 14%); pointer-events: none; }
.has-chart-art .chart-window { visibility: visible; }
.chart-strip { display: flex; height: 100%; width: max-content; transform: translateX(-88cqw); }
.chart-tile {
  position: relative;
  overflow: hidden;
  flex: 0 0 100cqw;
  width: 100cqw;
  height: 100%;
  margin-right: -12cqw;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%);
  mask-image: linear-gradient(to right, transparent, #000 12%);
}
.chart-tile img { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: auto; }
.is-animated .chart-strip { animation: chart-pan var(--chart-duration) linear infinite; will-change: transform; }
.is-paused .chart-strip { animation-play-state: paused; }
@keyframes chart-pan { from { transform: translateX(-88cqw); } to { transform: translateX(-176cqw); } }

.tagline { position: absolute; z-index: 3; top: 44.6%; left: 0; width: 100%; margin: 0; padding: 0 20px; text-align: center; color: #fff9ef; font-size: clamp(14px, 1.7vw, 32px); font-weight: 400; line-height: 1.4; letter-spacing: .012em; text-shadow: 0 1px 12px #07508480; }
.masthead { position: absolute; z-index: 4; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 28px; }
.wordmark { color: var(--ivory); font-family: var(--serif); font-size: clamp(30px, 2.6vw, 46px); font-weight: 400; line-height: 1; letter-spacing: -.055em; text-decoration: none; }
.wordmark:focus-visible, .motion-control:focus-visible { outline: 2px solid var(--ivory); outline-offset: 5px; border-radius: 4px; }
.status { color: #fff9ef; font-size: var(--utility-text-size); white-space: nowrap; }
.header-meta { display: flex; align-items: center; gap: 24px; }

.motion-control { position: absolute; z-index: 5; right: 22px; bottom: 20px; display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 6px; border: 0; border-radius: 4px; background: transparent; color: #fff9ef; font: var(--utility-text-size)/1.2 Arial, sans-serif; text-shadow: 0 1px 5px #074871; cursor: pointer; }
.motion-control:hover { background: #07487155; }
.motion-control svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; filter: drop-shadow(0 1px 2px #074871); }
.play-icon { display: none; }
.is-paused .play-icon { display: block; }
.is-paused .pause-icon { display: none; }

@media (max-width: 700px) {
  :root { --utility-text-size: 12px; }
  /* Leave room for the masthead; retain the exact wordmark and full chart. */
  .landing { padding-top: 62px; padding-bottom: 56px; }
  .masthead { padding: 20px; gap: 12px; }
  .header-meta { gap: 16px; }
  .wordmark { font-size: 31px; }
  .tagline { font-size: clamp(11px, 3.2vw, 16px); }
  .motion-control { right: 14px; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-animated .chart-strip { animation: none; will-change: auto; }
  .motion-control { display: none; }
}