/* --- Page shell: gradient background (Linktree-style outer) --- */
html {
  min-height: 100%;
}

body[theme="light"],
body[theme="dark"] {
  background: linear-gradient(
    165deg,
    #a8b0bc 0%,
    #7d8694 22%,
    #5c6573 45%,
    #3d4551 70%,
    #1f242c 100%
  );
  background-attachment: fixed;
  background-color: #1f242c;
}

/* Navbar removed; stub headers stay hidden (theme.js). */
.site-header-stub {
  display: none !important;
}

/* Theme light/dark toggle removed */
.theme-switch {
  display: none !important;
}

/* --- Main column: black card (no top navbar) --- */
main.main {
  padding: 2.25rem 1rem 2rem;
  margin-top: 0;
}

main.main .container {
  max-width: min(92vw, 44rem);
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 1.75rem 2.5rem;
  background: #0a0a0a;
  color: #ececec;
  border-radius: 1.5rem;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.15),
    0 12px 40px rgba(0, 0, 0, 0.35);
}

/* Blog posts only: keep the wider reading column; home / lists stay narrower */
main.main .container:has(article.page.single) {
  max-width: min(92vw, 52rem);
}

/* Readable text + links inside the card */
main.main .container a {
  color: #c4b5fd;
}

main.main .container a:hover {
  color: #e9d5ff;
}

main.main .container h1,
main.main .container h2,
main.main .container h3,
main.main .container .home-title {
  color: #fafafa;
}

main.main .container .home-subtitle,
main.main .container .home-disclaimer {
  color: #a3a3a3;
}

main.main .container .single .content,
main.main .container .content {
  color: #d4d4d4;
}

main.main .container .single .content h1,
main.main .container .single .content h2,
main.main .container .single .content h3,
main.main .container .single .content h4 {
  color: #f5f5f5;
}

/* Post covers — fixed 5:2 aspect ratio, crop with object-fit */
main.main .container .single .featured-image {
  aspect-ratio: 5 / 2;
  overflow: hidden;
  border-radius: 0.5rem;
  margin: 0.5rem 0 1rem;
}

main.main .container .single .featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0.5rem;
  display: block;
}

main.main .container .home .summary .featured-image-preview {
  position: relative;
  width: 100%;
  padding: 0;
  aspect-ratio: 5 / 2;
  overflow: hidden;
  border-radius: 0.5rem;
}

main.main .container .home .summary .featured-image-preview > a {
  position: absolute;
  inset: 0;
  display: block;
}

main.main .container .home .summary .featured-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0.5rem;
}

main.main .container blockquote {
  border-left-color: #7c3aed;
  color: #b4b4b4;
}

main.main .container code:not(pre code) {
  background: rgba(255, 255, 255, 0.08);
  color: #e9d5ff;
}

main.main .container .highlight pre,
main.main .container pre {
  background: #141414 !important;
  border-radius: 0.5rem;
}

/* Social row on home */
main.main .container .links a {
  color: #e5e5e5;
}

main.main .container .links a:hover {
  color: #fff;
}

/* Category pills below social icons (home profile) */
main.main .container .home-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.65rem;
  padding: 1.1rem 0.5rem 0.25rem;
  margin-top: 0.15rem;
}

main.main .container .home-category-link {
  display: inline-block;
  padding: 0.42rem 0.95rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #e8e8e8 !important;
  text-decoration: none;
  line-height: 1.2;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

main.main .container .home-category-link:hover {
  background: rgba(167, 139, 250, 0.28);
  border-color: rgba(196, 181, 253, 0.4);
  color: #fff !important;
}

/* Bio (below categories on home) */
main.main .container .home-bio {
  margin-top: 1.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

main.main .container .home-bio-content {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

main.main .container .home-bio-content p {
  margin: 0 0 0.65rem;
}

main.main .container .home-bio-content p:last-child {
  margin-bottom: 0;
}

main.main .container .home-bio-content a {
  color: rgba(255, 255, 255, 0.95) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Footer: on gradient, light text */
footer.footer {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.88);
}

footer.footer a {
  color: #e9d5ff;
}

footer.footer a:hover {
  color: #fff;
}

/* Larger home profile avatar (LoveIt defaults: 8rem / 6rem with posts) */
.home .home-profile .home-avatar img,
.home[data-home="posts"] .home-avatar img {
  width: 11rem;
}

/* Home feed: post list meta, titles, read-more, tags — white (not purple links) */
main.main .container .home .summary {
  color: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

main.main .container .home .summary .single-title a {
  color: #fff !important;
}

main.main .container .home .summary .single-title a:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

main.main .container .home .summary .post-meta,
main.main .container .home .summary .post-meta a,
main.main .container .home .summary .post-meta time,
main.main .container .home .summary .post-meta .author {
  color: rgba(255, 255, 255, 0.88) !important;
}

main.main .container .home .summary .post-meta a:hover {
  color: #fff !important;
}

main.main .container .home .summary .post-footer a,
main.main .container .home .summary .post-tags a {
  color: rgba(255, 255, 255, 0.9) !important;
}

main.main .container .home .summary .post-footer a:hover,
main.main .container .home .summary .post-tags a:hover {
  color: #fff !important;
}

main.main .container .home .summary .content {
  color: rgba(255, 255, 255, 0.78);
}

main.main .container .home .summary .content a {
  color: rgba(255, 255, 255, 0.95) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

main.main .container .home .summary .content a:hover {
  color: #fff !important;
}