/* SkailSites/shared/layout.css: THE PAGE WIDTH OF EVERY SKAIL SITE (skailstudio.com, orgomedia.ai, nowlark.com).
   The owner, 2026-09-30: "there is no longer a domain template being used and should be used for all skail
   sites that have proper margins so content doesnt span edge to edge". One content width and one gutter,
   here, copied byte for byte to each site by sync_shared.py; a site never sets its own.

   Content is at most --page-max wide, centred, with --page-gutter of air on each side. Backgrounds and
   decorative layers (hero waves, marquees, CTA bands) may still run edge to edge; text and cards never do. */

:root {
  --page-max: 1200px;                          /* the widest any content gets */
  --page-gutter: clamp(16px, 4vw, 28px);       /* 16px on phones (Apple HIG), 28px from ~700px up */
}

/* The container: put a section's content inside .wrap. */
.wrap {
  box-sizing: border-box; width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--page-gutter));
  margin-inline: auto; padding-inline: var(--page-gutter);
}

/* A site whose sections are built without a .wrap (orgomedia.ai's ported Framer sections size themselves in %
   of the viewport) marks its <main> with data-page-sections, and each top-level section there gets the same
   content box from its padding: the section spans the page, so its background and any absolutely placed
   decoration (hero waves, glows) still run edge to edge, and its inline padding leaves a centred box at most
   --page-max wide, never less than the gutter. Content narrower than that (a 60ch lead, an 820px legal column)
   keeps its own width inside the box. A section that is itself a card, not a band, opts out with
   data-layout="own". Opt-in by attribute rather than detected with :has(), so every browser agrees.
   !important because this is the invariant a page's own widths must not break. */
main[data-page-sections] > section:not([data-layout="own"]),
main[data-page-sections] > div > section:not([data-layout="own"]) {
  box-sizing: border-box !important;
  width: auto !important; max-width: none !important; margin-inline: 0 !important;
  padding-inline: max(var(--page-gutter), (100% - var(--page-max)) / 2) !important;
}