/* dtr-cascade.css — stylesheet for the cascade animation iframe.
   Extracted from the inline <style> block in dtr-cascade.html on
   2026-05-27 because the site CSP (style-src 'self', no
   'unsafe-inline') blocks inline <style> blocks. Same-origin
   external stylesheet is permitted by style-src 'self', so
   moving the CSS out keeps the strict CSP intact without
   compromising the cascade's rendering. */

/* Self-hosted Jost (matches the rest of the site — see brand book).
   The cascade iframe used to pull Jost from Google Fonts CDN; switched
   to local woff2 to eliminate the external dependency, the link-checker
   false positive on fonts.googleapis.com, and the privacy footprint. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jost-500.woff2') format('woff2');
}
:root { --bg: #072420; }
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  height: 100%;
  font-family: 'Jost', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
/* .wrap is a positioning context for the absolutely-positioned .stage
   inside it. Switched from `display: flex; align-items/justify-content:
   center` to position-based centering on 2026-05-27 because the flex
   layout combined with the SVG's intrinsic 16:9 aspect ratio (from its
   viewBox) was pushing the entire percentage-height chain (html → body
   → .wrap → .stage) to size based on the SVG's content rather than the
   iframe viewport. At viewports where the iframe's height was less than
   `width × 9/16` — which happens whenever .cascade-hero-frame's
   `max-height: 62vh` clamps the iframe below the aspect-ratio'd height —
   the SVG rendered at its intrinsic size, body grew to ~width × 9/16,
   and the cascade content ended up centered around a too-tall SVG with
   the wordmark pushed off the bottom of the visible iframe area. */
.wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Stage fills the available iframe area while preserving 16:9 — covers the
   iframe like a contained background so the embedding page controls dimensions.
   Absolute-positioned (top: 0; bottom: 0) so .stage's height is the
   iframe's full height as a definite value (no percentage chain), and the
   SVG inside no longer participates in sizing its parents. Horizontal
   centering via left: 50% + translateX(-50%) replaces the prior flex
   justify-content: center. */
.stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1600px;
}
/* SVG fills .stage via absolute inset: 0 so its intrinsic 16:9 aspect
   ratio (from viewBox) doesn't drive layout — .stage's dimensions are
   definite, so the SVG just fits inside them. Default preserveAspectRatio
   (xMidYMid meet) handles fitting viewBox content inside the SVG box. */
svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}