/* =============================================================================
   design-system.css — what is OURS on site/smart-home-design-system.html.

   The frame is NOT here. The Inter faces, the ~800px document column, the intro
   block and the media box all come from case-study.css, which this page shares
   with site/hairdresser-website.html and site/econudge-sustainable-tool.html —
   see that file for why the frame is shared rather than copied.

   So this file holds the page's own part, and there is one of them: the specimen
   sheets. Three exports of ONE document, stacked with no seam — the thing no
   other page needs, which is why it lives here.

   Loaded after case-study.css and after portfolio.css, so it sits on top of both
   the shared frame and the shared header chrome.

   NOT to be confused with site/system/ — that directory is the site's own
   informal design system (tokens, base, components). This file lays out a
   PROJECT page.
   ========================================================================== */

/* --- The sheet -------------------------------------------------------------
   The export is a single style guide sliced into three files, so the three are
   stacked with NO gap, padding or rule between them — anything here that added
   space would draw a seam across a document that has none.

   The gap is closed by `display: block` on the images (base.css already sets it;
   it is restated below because this is the page it matters on), NOT by
   `font-size: 0` on this wrapper. That trick also works, but it would hide the
   alt text of any slice that failed to load — and a missing sheet is exactly
   when the words saying which sheet it was matter most. */

.ds-sheet {
  /* The document's own column, taken from case-study.css rather than restated:
     the sheets have to line up with the intro above them, and one token is what
     keeps them lined up the day either number changes. */
  inline-size: var(--cs-measure-inline);
  margin-inline: auto;
  background: var(--c-bg);
}

.ds-sheet img {
  /* system/base.css already sets display:block / max-width:100% / height:auto on
     every img — that is what lets them stack without an inline gap and shrink on
     a phone. Restated here for the things BASE cannot know:

       inline-size: 100%   all three scale by the SAME factor and stay in
                           register; max-width alone can size two slices of
                           different native widths differently, and the sheet
                           comes apart at a seam — and these three are 2470 /
                           2690 / 2510px wide, so the rule is doing real work
       margin-inline       centred if a slice is ever narrower than the column
       margin-block: 0     the no-seam rule, stated where it is easy to find */
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  margin-block: 0;
  margin-inline: auto;
}