/* Site glue only. Everything visual comes from skerra.css tokens. */
html, body { margin: 0; background: #16191B; }
.site-hover-link { color: var(--sk-fg-soft); text-decoration: none; }
.site-hover-link:hover { color: var(--sk-fg); }
.site-muted-link { color: var(--sk-fg-muted); text-decoration: none; }
.site-muted-link:hover { color: var(--sk-fg); }
.site-card { background: var(--sk-surface); border-radius: var(--sk-radius); color: inherit; text-decoration: none; }
.site-card:hover { background: var(--sk-stone-800); }
.site-tab { padding: var(--sk-space-3) 0; margin-bottom: -1px; text-decoration: none; border-bottom: 2px solid transparent; color: var(--sk-fg-muted); }
.site-tab:hover { color: var(--sk-fg); }
.site-tab[aria-current="page"] { border-bottom-color: var(--sk-fg); color: var(--sk-fg); }

/* 2026-11-02: line hero text and the header up with the centered page column
   (sections use max-width var(--sk-max) centered). Without this, on wide screens
   the hero text sits at the far left edge while everything below is centered.
   Candidate to move into @skerra/ui Hero/SiteHeader. */
.sk-hero__content {
  max-width: none;
  padding-left: max(var(--sk-gutter), calc((100% - var(--sk-max)) / 2 + var(--sk-gutter)));
  padding-right: max(var(--sk-gutter), calc((100% - var(--sk-max)) / 2 + var(--sk-gutter)));
}
.sk-hero__content > * { max-width: 760px; }
.sk-hero__content > .sk-hero__text { max-width: 520px; }

/* How we work hero: show more of the photo's top so the lit lamp sits
   below the menu instead of behind it. */
.site-hero-how .sk-hero__media img { object-position: 50% 32%; }

/* Home "fixed point" passage: one text style, two columns of plain paragraphs. */
.site-fp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sk-space-7); align-items: start;
  margin-top: calc(var(--sk-space-6) - var(--sk-space-8)); }
.site-fp > div { display: grid; gap: var(--sk-space-4); }
@media (max-width: 860px) { .site-fp { grid-template-columns: 1fr; gap: var(--sk-space-4); } }