:root {
  --blog-accent: #111111;
  --blog-text: #111111;
  --blog-muted: #505050;
  --blog-line: rgba(0, 0, 0, 0.16);
  --blog-paper: #f5f5f2;
  --blog-card: rgba(255, 255, 255, 0.92);
}

body.site-theme-storyshellos {
  color: var(--blog-text);
  background: var(--blog-paper);
}

body.site-theme-storyshellos::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('/assets/img/hero-world.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 0.10;
  pointer-events: none;
}

.site-theme-storyshellos.blog-shell {
  max-width: 980px;
  position: relative;
  z-index: 1;
}

.site-theme-storyshellos .blog-site-header,
.site-theme-storyshellos .blog-footer,
.site-theme-storyshellos .blog-pagination {
  border-color: var(--blog-line);
}

.site-theme-storyshellos .blog-site-header {
  padding-top: 28px;
}

.site-theme-storyshellos .blog-site-header a,
.site-theme-storyshellos .blog-card-link,
.site-theme-storyshellos .blog-post-nav a,
.site-theme-storyshellos .blog-cta-link,
.site-theme-storyshellos .blog-index a,
.site-theme-storyshellos .blog-post a {
  color: var(--blog-accent);
}

.site-theme-storyshellos .blog-card {
  background: var(--blog-card);
  border: 1px solid var(--blog-line);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
}

.site-theme-storyshellos .blog-index > section:first-child h1,
.site-theme-storyshellos .blog-post-title {
  font-size: clamp(2.4rem, 4vw, 4.25rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.site-theme-storyshellos .blog-meta {
  color: var(--blog-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 800;
}

.site-theme-storyshellos .blog-post-body {
  font-size: 1.12rem;
  line-height: 1.8;
}

.site-theme-storyshellos .blog-post-body h2,
.site-theme-storyshellos .blog-post-body h3 {
  letter-spacing: -0.03em;
}