/* Four quiet area tiles, using the existing public-shell palette and light strip. */
[data-public-shell] > .website-sections {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 1.2vw, 16px);
  width: min(100% - 32px, 1320px);
  margin: 18px auto;
  font-family: Inter, system-ui, sans-serif;
}
.website-sections > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 4px;
  border: 1px solid color-mix(in srgb, var(--bb-border) 48%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bb-surface) 65%, transparent);
  color: var(--bb-muted);
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 500;
  text-decoration: none;
}
.website-sections > a:hover,
.website-sections > a[aria-current="page"] { color: var(--bb-text); }
.website-sections > a:focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 4px; }
.website-sections > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--stinvar-panel);
  box-shadow: 0 0 8px var(--stinvar-accent), 0 0 16px var(--stinvar-accent);
}
body.website-section-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.website-section-page > .website-section-content { flex: 1; width: 100%; margin: 0; padding: 0; }
.website-section-page > .public-footer { margin-top: 0; }