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

   The layout is NOT here. The intro, the labels, the ~800px column and the
   media box all come from case-study.css, the frame this page shares with
   site/smart-home-design-system.html. Duplicating that frame into this file
   would mean two copies of the Inter @font-face rules and two 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:

     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 shared heading token is re-pointed here rather than the
     shared frame being restated. The design system page keeps the default, so
     one token carries every page's answer 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.

   Loaded LAST, after case-study.css, so the re-point below wins over the
   default in that file's :root.

   The second decision is a rule rather than a token, and it is at the bottom of
   the file: `.cs-media--wide`, on the one figure that holds the closing
   recording. See the comment there for the arithmetic.
   ========================================================================== */

:root {
  --cs-heading-font: var(--font-page);
}

/* --- The final-result recording runs nearly the width of the window ---------
   The frame's media box is the document's column — right for the flow diagram
   above, deliberately wrong for the recording that closes the page: a 2858x1638
   capture of a whole desktop site is unreadable at 800px, and the brief asks for
   it large. So this one figure leaves the column instead of being capped inside
   it. That is the mirror of what econudge-sustainable-tool.css does to its
   portrait file — two opposite answers to the same shared box, each stated in
   its own page's file, which is the whole reason case-study.css exposes the
   column as a token and a class rather than fixing one width for every page.

   The arithmetic, because it is the trick: the figure's containing block is
   .cs-section, the centred column, so `50%` is half the COLUMN. Shifting the
   figure by that much puts its start edge on the column's centre line, and
   subtracting `50vw` walks it back out to the window's edge — the standard
   full-bleed break-out. The figure is therefore centred on the window, and its
   width is stated separately as `100vw - 2 * --cs-bleed`. Nothing else has to
   move for this to hold: the figure is a block box in a block parent, so it may
   be wider than the column, and the page shell has no `overflow: hidden` to
   clip it.

   The `--cs-bleed` floor is not decoration, it is the scrollbar: `100vw` counts
   the desktop scrollbar while `100%` does not, so a break-out with no gutter —
   or one narrower than half a 15px scrollbar — is the classic way to hand a
   desktop page a horizontal scrollbar it never asked for. 1rem clears it at
   every platform default, so this box can be `100vw` and stay inside the
   layout.

   `clamp(1rem, 2vw, 2rem)` makes that gutter a phone's 16px, where the column
   is already the window minus its page padding and the recording should read as
   edge to edge, growing to 2rem once there is room — ~95vw at 1440, which is
   "almost full screen" and still a picture with air around it rather than a
   bleed with no margins at all.

   No rule for the video itself, on purpose: the frame already gives it
   `inline-size: 100%` and `block-size: auto`, so it fills whatever box this
   figure becomes and keeps its own 2858:1638 shape, and `max-inline-size: 100%`
   now resolves against this box rather than against the column. Centring comes
   from the negative margins above, not from `margin-inline: auto` — the video
   keeps that one, which changes nothing here because it is exactly as wide as
   its figure. Only this figure is affected: the flow diagram above keeps the
   plain `.cs-media`. */
.cs-media--wide {
  --cs-bleed: clamp(var(--s-4), 2vw, var(--s-6));

  inline-size: calc(100vw - 2 * var(--cs-bleed));
  margin-inline: calc(50% - 50vw + var(--cs-bleed));
}