/* =============================================================
   DC host height — the design-composer runtime injects
   `#dc-root{height:100%}` at boot, which caps the sticky header's
   containing block at exactly 100vh and lets it scroll away past
   the fold. Override with auto height + a full-viewport min so
   sticky header, sidebars, and any other sticky descendant work
   for the full page length. Uses !important because the runtime
   style is injected after our stylesheets load.
   ============================================================= */
#dc-root,
#dc-root > .sc-host {
  height: auto !important;
  min-height: 100vh !important;
}

/* Primary page header — pin to viewport with position:fixed.
   position:sticky was being defeated somewhere in the DC-injected wrapper
   chain (a transform/overflow ancestor breaks sticky silently), so switch
   to fixed which is viewport-relative and can't be broken by ancestors.
   Push the page content down by the header height so nothing hides under it. */
#dc-root header,
body header[data-motion-nav] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
}
/* Push main content down by the fixed-header height so the hero doesn't
   hide under it. Mobile nav is a bit shorter. */
#dc-root main {
  padding-top: 66px;
}
@media (max-width: 767px) {
  #dc-root main {
    padding-top: 58px;
  }
}

/* =============================================================
   STERE LAYOUT SYSTEM — the shared content container
   Single source of truth for page width and side gutters.

   One rule governs the whole site: content occupies 80% of the
   viewport with a 10% gutter either side, relaxing on smaller
   screens where a fixed 10% would waste too much room.

        Desktop      >= 1200px    80% content / 10% + 10% gutters
        Tablet       >=  768px    90% content /  5% +  5% gutters
        Mobile        <  768px    92% content /  4% +  4% gutters

   Percentages, not vw: `vw` includes the scrollbar, so `width:80vw`
   with `margin:0 10vw` overflows by the scrollbar's width and
   introduces horizontal scrolling. Percentage of the body resolves
   against the actual content box, giving exactly 10/80/10 and no
   overflow at any zoom level or scrollbar setting.

   Nothing here sets colour, type, vertical rhythm or component
   styling — this file only decides how wide content is and where
   its side gutters fall.
   ============================================================= */

:root {
  --container-width: 92%;
  --container-gutter: 4%;
}

@media (min-width: 768px) {
  :root {
    --container-width: 90%;
    --container-gutter: 5%;
  }
}

@media (min-width: 1200px) {
  :root {
    --container-width: 80%;
    --container-gutter: 10%;
  }
}

/* -------------------------------------------------------------
   The container
   Applied to the inner wrapper of every band. The band itself
   keeps its own background, border and full-viewport width; only
   what is inside it is constrained.
   ------------------------------------------------------------- */

.container {
  width: var(--container-width);
  margin-inline: auto;
}

/* -------------------------------------------------------------
   Measure modifiers
   Bands that deliberately centre a narrower column keep that
   measure here rather than as a hardcoded width in the markup.
   They still inherit the container's gutters, so they never sit
   wider than the page container on small screens.
   ------------------------------------------------------------- */

/* Centred call-to-action bands. */
.container--narrow { max-width: 900px; }

/* Single-column reading measure. */
.container--prose  { max-width: 820px; }

/* -------------------------------------------------------------
   Gutter-only inset
   For full-bleed elements whose own background or border must span
   the viewport, but whose content still has to line up with the
   container — the mobile navigation drawer being the case in point.
   Pads instead of narrowing, so the background stays edge to edge.
   ------------------------------------------------------------- */

.container-inset {
  padding-inline: var(--container-gutter);
}

/* -------------------------------------------------------------
   Hero underlay
   The page header is sticky, transparent at the top, and 66px tall
   (see motion.css --motion-nav-h). Pull the first main section up
   so it fills the viewport from y=0 and the header floats over it.
   ------------------------------------------------------------- */

main > section:first-child {
  margin-top: -66px;
}

/* -------------------------------------------------------------
   Hero content padding
   ------------------------------------------------------------- */

main > section:first-child > .container,
.hero-content {
  padding-top: 125px;
  padding-bottom: 125px;
}