.profile-site-shell { background: var(--bg); }
.site-preview {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-4);
  background: var(--warning-soft); color: var(--text); font-size: var(--step--1);
}
.site-preview a { color: inherit; font-weight: 700; }
.site-nav {
  position: sticky; z-index: 30; inset-block-start: 0;
  border-block-end: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.5);
}
.site-nav__inner { min-block-size: 4.25rem; display: flex; align-items: center; gap: var(--space-3); }
.site-brand { display: flex; align-items: center; gap: var(--space-2); color: var(--text); text-decoration: none; font-weight: 750; }
.site-brand img { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; object-fit: cover; }
.site-nav__links { display: none; align-items: center; gap: var(--space-1); margin-inline-start: auto; }
.site-nav__links a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); color: var(--text-muted); text-decoration: none; }
.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] { background: var(--fill-3); color: var(--text); }
.site-nav__actions { display: flex; gap: var(--space-1); margin-inline-start: auto; }
.site-nav__toggle:checked ~ .site-nav__links {
  display: grid; position: absolute; inset: calc(100% + var(--space-2)) var(--space-3) auto;
  padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-lg);
}
.profile-site-main { padding-block: var(--space-6) var(--space-8); }
.site-hero {
  display: grid; gap: var(--space-5); align-items: center;
  padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface);
}
.site-hero__logo { inline-size: 8rem; block-size: 8rem; border-radius: 50%; object-fit: cover; }
.site-hero__cta { inline-size: fit-content; }
.site-section-nav {
  display: flex; gap: var(--space-2); overflow-x: auto; padding-block: var(--space-3);
  scrollbar-width: none;
}
.site-section-nav a {
  flex: none; padding: var(--space-2) var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-pill); background: var(--surface); color: var(--text-muted);
  text-decoration: none; font-size: var(--step--1);
}
.site-section { padding-block-start: var(--space-8); }
.site-price-list { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.site-price-list li { display: flex; justify-content: space-between; gap: var(--space-3); }
.site-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-3); }
.site-gallery img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.site-post { max-inline-size: 72rem; margin-inline: auto; }
.site-post__head h1 { font-size: clamp(var(--step-2), 6vw, var(--step-4)); }
.site-post__head time { color: var(--text-muted); }
.site-post__cover { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xl); }
.site-post__body { max-inline-size: 68ch; inline-size: 100%; margin-inline: auto; }
.site-post-layout { display: grid; gap: var(--space-6); align-items: start; }
.site-related a { color: var(--text); text-decoration: none; }
.site-related p { margin-block-end: 0; color: var(--text-muted); }
.site-footer { padding-block: var(--space-7); border-block-start: 1px solid var(--border); background: var(--surface); }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 48rem) {
  .site-nav__links { display: flex; }
  .site-nav .nav-burger { display: none; }
  .site-hero { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-8); }
  .site-post-layout { grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem); }
  .site-related { position: sticky; inset-block-start: 6rem; }
}