/* =============================================================================
   website-redesign.css — what is OURS on site/website-redesign.html.

   The layout is NOT here. The intro, the labels, the document column and the
   media box all come from case-study.css, the frame this page shares with
   site/smart-home-design-system.html, site/hairdresser-website.html and
   site/econudge-sustainable-tool.html. Duplicating that frame here would mean
   four copies of the Inter @font-face rules and four 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 three of them.

   Loaded LAST, after case-study.css, so all three 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. Funnel Display is already loaded (portfolio.css, self-hosted,
   weights 300-800), so this costs no extra request.

   Deliberately the same single line as in hairdresser-website.css and
   econudge-sustainable-tool.css: those files record why the re-point is per-page
   rather than a rule in the frame. */
:root {
  --cs-heading-font: var(--font-page);
}

/* --- 2. The document column is 1000px on this page, not 800px --------------
   The brief asks for the exhibits to be no wider than ~1000px, and this page's
   exhibits are the widest in the site: three flat screenshots at 2290, 2604 and
   2576px native, one of them a full-page capture. On the frame's 50rem (800px)
   column they would still read, but the redesigned interface IS the exhibit
   here, and 200px more is what shows its type, its search bar and its product
   grid.

   Re-pointed as the TOKEN, not as a rule on .cs-intro / .cs-section, because
   those two already take `var(--cs-measure-inline)`: one number moves the whole
   document, and `min(100% - 2 * var(--pad-page), 62.5rem)` keeps it honest on a
   phone, where 1000px is wider than the screen. `62.5rem` rather than `1000px`
   so the document tracks the reader's own root font size like everything else
   in the system.

   This is also why the media needs no rule of its own: case-study.css gives
   every img `max-inline-size: 100%` and centres it, so the pictures land on the
   new column, are capped by it, and are never upscaled past their own pixels. */
:root {
  --cs-measure: 62.5rem;
}

/* --- 3. The prose keeps the readable measure, the pictures get the width ----
   The column got wider for the PICTURES' sake, not the paragraphs': 1000px of
   Inter at 16px is roughly 115 characters a line, well past the ~75 a reader
   tracks comfortably. So the prose is capped at the frame's own 50rem (800px,
   ~92 characters) while the title, the labels and the three figures take the
   wider column.

   `max-inline-size` on .cs-text and not a margin or a padding, so the paragraph
   stays left-aligned on the column's own edge — which is what keeps the label
   above it, the prose under it and the pictures beside it on one left edge.

   THE AIR BETWEEN THE SECTIONS IS ALSO THE FRAME'S, and it is already at the
   brief's own ~4rem and above: .cs-section carries `margin-block: clamp(2.5rem,
   6vw, 4.5rem) clamp(3rem, 8vw, 6rem)`, i.e. 4.5rem above and 6rem below each
   section at a desktop width, and 2.5-3rem on a phone, where 4rem of white space
   would be most of the screen. Restating a padding here would be a second answer
   to "how much air between two sections"; see the note on .cs-section in
   case-study.css for why they are margins (they collapse, so two adjacent
   sections make one gap instead of two). */
.cs-text {
  max-inline-size: 50rem;
}