/* 08-pages/_site.css — how a public page arranges the site modules. Composition only. The measure is
   --measure-site (88 rem, in 01-settings/_layout.css), wider than the app's 76 rem, and sections are
   --gap-site-section (64 px, in 01-settings/_spacing.css) apart, because a marketing
   page is read top to bottom, not scanned. The page ground and the type are the app's. */
/* overflow-x: clip, not hidden, because a full-bleed .c-photo-band is 100vw wide and 100vw counts the
   scrollbar; clip does not make the page a scroll container, so position: sticky on .c-site-header and
   background-attachment: fixed on the band both keep working. */
.site { min-height: 100svh; display: flex; flex-direction: column; overflow-x: clip; }
.site__main { flex: 1; }
.site__container { width: 100%; max-width: var(--measure-site); margin-inline: auto; padding-inline: var(--gutter-page); }
.site__container > * + * { margin-top: var(--gap-site-section); }
.site__section { display: flex; flex-direction: column; gap: var(--space-lg); }
.site__section-title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.site__section-lede { color: var(--ink-muted); font-size: var(--text-base); max-width: var(--measure-prose); margin-top: calc(-1 * var(--space-sm)); }
/* Body prose on the site (a paragraph, the FAQ answers, the privacy page) is 16 px and at most 65 ch. */
.site__prose { font-size: var(--text-base); line-height: var(--leading-normal); max-width: var(--measure-prose); display: flex; flex-direction: column; gap: var(--space-md); }
.site__prose h2 { font-size: var(--text-xl); padding-top: var(--space-md); }
.site__prose h3 { font-size: var(--text-lg); padding-top: var(--space-xs); }
/* Two columns for a section with an image beside its text (the shared core, the shop floor). */
.site__split { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); align-items: center; }
.site__split .c-feature__frame { aspect-ratio: 4 / 3; }
/* The five module doorways on the landing page: five across from lg, three from md, two from sm, one below. */
.site__doorways { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .site__doorways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56.25rem) { .site__doorways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .site__doorways { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* The landing page presents every module in a section of its own, which the doorway above it links to by
   the module's own path as a fragment (#planering). The scroll margin clears the sticky c-site-header:
   --height-topbar plus --space-2xl, which is enough below md, where the header wraps the Meny
   disclosure onto a second row and is taller than --height-topbar; 03-generic/_reset.css sets a smaller
   one on :target for anchors inside a page's prose. The sides alternate so the five sections do not
   read as one column of repeats, and the swap is only from md, where .site__split is two columns —
   stacked, the prose still comes first. */
.site__module { scroll-margin-top: calc(var(--height-topbar) + var(--space-2xl)); }
.site__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-ink); }
.site__more { color: var(--link); font-weight: var(--weight-medium); }
@media (min-width: 56.25rem) { .site__split--reverse .site__prose { order: 2; } }
/* A narrow column for the contact form; its form grid is two columns, not three. */
.site__narrow { max-width: var(--measure-narrow); }
.site__narrow .o-grid--form { --grid-min: 16rem; }