/* =============================================================================
   econudge-sustainable-tool.css — what is OURS on
   site/econudge-sustainable-tool.html.

   The layout is NOT here. The intro, the labels, the ~800px document column and
   the media box all come from case-study.css, the frame this page shares with
   site/smart-home-design-system.html and site/hairdresser-website.html.
   Duplicating that frame here would mean three copies of the Inter @font-face
   rules and three answers to "how wide is the document", which is exactly the
   drift the shared file exists to prevent.

   So this file holds the page's own decisions, and there are two of them.

   Loaded LAST, after case-study.css, so both win over the frame's defaults.
   ========================================================================== */

/* --- 1. The headings are set in FUNNEL DISPLAY -----------------------------
   The brief asks for the site's display face on the project title and the
   section labels, and Inter on the body copy — so the token case-study.css
   exposes for exactly this question is re-pointed, rather than the shared frame
   being restated. The design system page keeps the default (Inter), so one token
   carries three answers and no page has to know about the others. Funnel Display
   is already loaded (portfolio.css, self-hosted, weights 300-800), so this costs
   no extra request.

   This is deliberately the same single line as in hairdresser-website.css: that
   file records why the re-point is per-page rather than a rule in the frame. */
:root {
  --cs-heading-font: var(--font-page);
}

/* --- 2. The final-screens recording is PORTRAIT ----------------------------
   The frame lets media take the document's column, which is right for the three
   diagrams above and wrong for this one file: Animation2.mov is 750x1476
   (`mdls -name kMDItemPixelWidth -name kMDItemPixelHeight
   site/assets/Animation2.mov` prints it). At 1440 the column is 800px, so an
   uncapped portrait recording would be 800x1574 — taller than the viewport it is
   playing in, and twice the size the thing needs to be to be read.

   25rem (400px) is roughly the on-screen width of the phone the screens were
   designed for, and it is a DOWNSCALE of a 750px-wide file, so nothing is
   softened by it. `min(100%, 25rem)` rather than a fixed 25rem is the responsive
   half of the rule: on a phone the column is already narrower than 25rem, so
   100% wins and the video fills the page's gutter exactly like the diagrams.

   `max-inline-size` and not `inline-size`, because case-study.css already sets
   `inline-size: 100%` on this element for the fallback paragraph's sake — a max
   caps that width instead of fighting it, and no `!important` is needed to make
   the later rule stick. Height stays `auto` (the frame's), so the box keeps the
   recording's own 750:1476 ratio rather than taking a shape of its own. */
.cs-media video {
  max-inline-size: min(100%, 25rem);
}