/* Layout primitives — container, grids, section rhythm. */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 720px) {
  .container { padding-inline: var(--sp-6); }
}

.container--narrow { max-width: var(--container-narrow); }

section {
  padding-block: var(--sp-8);
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}
@media (max-width: 640px) {
  section { padding-block: var(--sp-7); }
}

section + section { border-top: 1px solid var(--border); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.section-head h2 { margin: 0; }
.section-head .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
}

.grid {
  display: grid;
  gap: var(--sp-4);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* Sticky header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  display: flex;
  align-items: center;
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--fg);
  letter-spacing: -0.01em;
}
.site-header .brand svg { width: 26px; height: 26px; color: var(--leaf); }
.site-header .brand[data-icon="lakes"] svg { color: var(--accent); }
.site-header .brand[data-icon="owl"]   svg { color: var(--warm); }
.site-header nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.site-header nav a {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
}
.site-header nav a:hover { color: var(--fg); background: var(--bg-elev-2); text-decoration: none; }
@media (max-width: 640px) {
  .site-header nav .nav-link { display: none; }
}

/* Footer */
.site-footer {
  margin-top: var(--sp-9);
  padding-block: var(--sp-7) var(--sp-6);
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: flex-start;
  justify-content: space-between;
}
.site-footer a { color: var(--fg-muted); }
.site-footer a:hover { color: var(--fg); }
.build-info {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.04em;
}
.build-info code {
  background: var(--bg-elev-2);
  padding: 1px 5px;
  border-radius: var(--r-sm);
  color: var(--fg-muted);
  font-size: 10px;
}
.build-info a { color: var(--fg-faint); }
.build-info a:hover { color: var(--fg-muted); }

/* Print: emergency / utilities sheet */
@media print {
  .site-header, .site-footer,
  #map-section, #gallery, #hero, #ads,
  .no-print { display: none !important; }
  section { padding-block: 1rem !important; border-top: 1px solid #aaa !important; }
  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  a { color: #000 !important; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}