/* ============================================================================
   XUConseil — wide-screen cap.  Added 16 September 2026.
   Loaded LAST, after proto.css and mobile.css, on every page.

   The site had no upper bound. At 2560 the content held both edges of the
   window and about 1000px of empty ivoire opened in the middle of 04-service.
   This caps the CONTENT at 1680px centred, and leaves the full-screen heroes
   running to the real edges of the screen, which is what they are for.

   Two variables carry it, and no HTML changes are needed:

   --gut    the horizontal gutter. Above 1680 it absorbs the surplus width, so
            every gutter, grid and padding on the site moves inward together
            and the content ends up centred in a 1680 box.

   --bleed  how far a body photograph overhangs the text column. It does NOT
            grow. Above 1680 that means body images stop at the edge of the
            content box rather than at the edge of the screen.

   The reason --bleed is fixed is not taste: the photography is cut at a long
   edge of 1800 (see images.md). A body image allowed to run to 2560 is being
   upscaled to 142% and goes visibly soft on a large monitor. The two heroes
   are cut at 2200-2600 and can hold the full width, so they are not expressed
   through --bleed and are unaffected by this file.

   Below 1681px the --gut rule does nothing, and --bleed is identical to --gut
   at both tiers (63 desktop, 22 phone), so nothing changes at any width the
   site was reviewed at.
   ========================================================================== */
:root{--bleed:63px}
@media (max-width:1023px){
  :root{--bleed:22px}
}
@media (min-width:1681px){
  :root{
    /* 63px is the design gutter at 1440; beyond 1680 the surplus splits evenly
       either side. 100vw rather than 100%: --gut is read on :root, where a
       percentage resolves against the initial containing block. html has
       overflow-x:clip site-wide, so the scrollbar's few px can never scroll. */
    --gut: calc(63px + (100vw - 1680px) / 2);
  }
  /* The same reasoning, for the image bands that are not expressed through
     --gut at all: the case-study bleeds, the insights article hero, the NDA
     hero and the Ageless film frame are body-level blocks at width:100%, so
     they follow the window rather than the content box. Capped here to the
     same 1680 so a case page does not upscale an 1800px asset to 2560.

     NOT listed, on purpose: .hero-full on 01-home, .ab-open on 02-about and
     .stage on 14-contact. Those are the full-screen heroes, their sources are
     cut at 2200-2600, and they are meant to hold the window. */
  .bleed, .art-hero, .ndahero, figure.film{
    max-width:1680px;
    margin-inline:auto;
  }

  /* 16 Sep, second pass — .stage is capped after all.
     The note above exempts it as a full-screen hero. On 14-contact that was
     wrong, and it broke the page on a wide monitor. .stage is a grid of
     1fr + a FIXED 600px image column, and .copy takes its left padding from
     --gut inside a max-width:760px box. Above 1680 --gut grows, so the copy
     column collapsed — at 2560 it measured 185px and the h1 broke into four
     lines — while the portrait stranded in the far right corner and the nav
     links, which stop at --gut, ran across it.
     Capping the stage to the same 1680 restores the 1440 composition exactly:
     the copy keeps its 625px measure, the nav mark still sits on the copy's
     left edge, and the links still stop 63px inside the photograph's right
     edge. It also keeps the 1467px portrait from being upscaled. */
  .stage{max-width:1680px;margin-inline:auto}
  .stage .copy{padding-left:63px}
}