/* Current CoupleIn theme reminder: preserve the pink-to-lilac gradient, rounded white cards, coral/plum accents, and playful relationship tone. */

:root {
  --blog-primary: #ff4d6d;
  --blog-secondary: #6a00f4;
  --blog-pink: #fff1f5;
  --blog-lilac: #f6efff;
  --blog-ink: #291b2d;
  --blog-muted: #6f6573;
  --blog-border: rgba(83, 49, 94, 0.12);
  --blog-shadow: 0 18px 50px rgba(73, 34, 86, 0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--blog-ink);
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 48%, #fbc2eb 100%);
  background-attachment: fixed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
a { color: inherit; }

.blog-shell { display: flex; min-height: 100vh; padding: 26px 20px 52px; }
.blog-wrap { display: flex; width: min(1120px, 100%); min-height: calc(100vh - 78px); flex-direction: column; margin: 0 auto; }
.blog-wrap > main { flex: 1 0 auto; }
.blog-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  margin-bottom: 50px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(80, 30, 80, 0.08);
  backdrop-filter: blur(12px);
}
.blog-nav-main { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.blog-brand { color: var(--blog-primary); font-size: 1.25rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
.blog-nav-actions { display: flex; align-items: center; justify-content: end; gap: 10px; }
.blog-wallet-wrap { display: flex; align-items: center; gap: 8px; }
.blog-wallet-status { color: var(--blog-muted); font-size: 0.66rem; white-space: nowrap; }
.blog-wallet-button, .blog-menu-toggle { padding: 9px 13px; color: #fff; background: linear-gradient(135deg, var(--blog-primary), var(--blog-secondary)); border: 0; border-radius: 999px; font-size: 0.72rem; font-weight: 800; cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; white-space: nowrap; }
.blog-wallet-button:hover, .blog-menu-toggle:hover { transform: translateY(-2px); }
.blog-wallet-button:disabled { cursor: wait; opacity: 0.68; transform: none; }
.blog-wallet-button.is-connected { background: #607354; }
.blog-nav-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: end; gap: 10px 18px; color: var(--blog-muted); font-size: 0.82rem; font-weight: 700; }
.blog-nav-links a { text-decoration: none; transition: color 0.2s ease; }
.blog-nav-links a:hover { color: var(--blog-primary); }
.blog-nav-cta { padding: 9px 14px; color: #fff !important; background: linear-gradient(135deg, var(--blog-primary), var(--blog-secondary)); border-radius: 999px; }
.blog-menu-toggle, .blog-mobile-menu { display: none; }
.blog-mobile-menu.open { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: rgba(255,255,255,0.98); border: 1px solid var(--blog-border); border-radius: 12px; box-shadow: 0 15px 30px rgba(73,34,86,0.14); }
.blog-mobile-menu a { padding: 10px 12px; color: var(--blog-ink); border-radius: 8px; font-size: 0.78rem; font-weight: 700; text-decoration: none; }
.blog-mobile-menu a:hover { color: var(--blog-primary); background: var(--blog-pink); }

.blog-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); gap: 26px; align-items: stretch; margin-bottom: 28px; }
.blog-hero-copy, .blog-feature-note, .blog-card, .article-shell, .article-aside, .blog-footer {
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: var(--blog-shadow);
  backdrop-filter: blur(10px);
}
.blog-hero-copy { padding: clamp(30px, 6vw, 72px); border-radius: 26px; }
.blog-kicker { color: var(--blog-secondary); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.blog-hero h1 { max-width: 650px; margin: 18px 0 18px; color: var(--blog-ink); font-size: clamp(2.9rem, 7vw, 6rem); line-height: 0.93; letter-spacing: -0.06em; }
.blog-hero h1 span { color: var(--blog-primary); }
.blog-hero p { max-width: 560px; margin: 0; color: var(--blog-muted); font-size: 1rem; line-height: 1.7; }
.blog-feature-note { display: flex; flex-direction: column; justify-content: end; min-height: 310px; padding: 28px; border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(246,239,255,0.96)); }
.blog-feature-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: auto; color: var(--blog-primary); background: var(--blog-pink); border-radius: 50%; font-size: 1.55rem; }
.blog-feature-note h2 { margin: 0 0 9px; font-size: 1.45rem; line-height: 1.1; }
.blog-feature-note p { margin: 0; color: var(--blog-muted); font-size: 0.82rem; line-height: 1.55; }

.featured-post {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin: 28px 0 42px;
  padding: 23px 26px;
  color: #fff;
  background: linear-gradient(110deg, #6a00f4 0%, #b31bd3 48%, #ff4d6d 100%);
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 21px;
  box-shadow: 0 20px 45px rgba(106,0,244,.2);
}
.featured-post-mark { display: grid; place-items: center; width: 48px; height: 48px; color: var(--blog-primary); background: rgba(255,255,255,.95); border-radius: 50%; font-size: 1.35rem; }
.featured-post-copy .blog-kicker { color: rgba(255,255,255,.78); }
.featured-post h2 { margin: 6px 0 7px; font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1; letter-spacing: -.045em; }
.featured-post p { margin: 0; color: rgba(255,255,255,.86); font-size: .82rem; line-height: 1.5; }
.featured-post .featured-post-title { margin-bottom: 3px; color: #fff; font-size: .98rem; font-weight: 850; }
.featured-post .featured-post-title a, .blog-card h3 a { color: inherit; text-decoration: none; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.featured-post .featured-post-title a:hover, .featured-post .featured-post-title a:focus-visible, .blog-card h3 a:hover, .blog-card h3 a:focus-visible { color: var(--blog-primary); text-decoration: underline; outline: none; }
.featured-post-link { justify-self: end; padding: 11px 14px; color: var(--blog-ink); background: #fff; border-radius: 999px; font-size: .74rem; font-weight: 850; text-decoration: none; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease; }
.featured-post-link:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(41,27,45,.18); }

.blog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 42px 0 18px; }
.blog-toolbar h2 { margin: 0; font-size: 1.55rem; letter-spacing: -0.04em; }
.blog-toolbar p { margin: 0; color: var(--blog-muted); font-size: 0.8rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.blog-card { display: flex; flex-direction: column; min-height: 300px; padding: 23px; border-radius: 19px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 22px 54px rgba(73,34,86,0.16); }
.blog-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--blog-muted); font-size: 0.68rem; }
.blog-tag { padding: 5px 8px; color: var(--blog-secondary); background: var(--blog-lilac); border-radius: 999px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; }
.blog-card h3 { margin: 28px 0 12px; font-size: 1.35rem; line-height: 1.1; letter-spacing: -0.035em; }
.blog-card p { margin: 0; color: var(--blog-muted); font-size: 0.82rem; line-height: 1.6; }
.blog-card-link { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 26px; color: var(--blog-primary); font-size: 0.78rem; font-weight: 800; text-decoration: none; }
.blog-card-link:hover { color: var(--blog-secondary); }

.blog-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; margin-top: 42px; padding: 20px 22px; border-radius: 18px; color: var(--blog-muted); font-size: 0.72rem; }
.blog-footer p { margin: 0; }
.blog-footer a { color: var(--blog-ink); font-weight: 700; text-decoration: none; }

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; align-items: start; }
.article-shell { padding: clamp(26px, 6vw, 66px); border-radius: 26px; }
.article-header { max-width: 760px; margin-bottom: 38px; }
.article-header h1 { margin: 15px 0; font-size: clamp(2.35rem, 5vw, 4.6rem); line-height: 0.98; letter-spacing: -0.06em; }
.article-dek { margin: 0; color: var(--blog-muted); font-size: 1.02rem; line-height: 1.7; }
.article-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 20px; color: var(--blog-muted); font-size: 0.74rem; }
.article-body { max-width: 760px; color: #493c4c; font-size: 1rem; line-height: 1.78; }
.article-body h2 { margin: 36px 0 11px; color: var(--blog-ink); font-size: 1.7rem; line-height: 1.12; letter-spacing: -0.035em; }
.article-body h3 { margin: 26px 0 8px; color: var(--blog-ink); font-size: 1.18rem; }
.article-body p { margin: 0 0 17px; }
.article-body ul { margin: 0 0 20px; padding-left: 22px; }
.article-body li { margin: 8px 0; }
.article-callout { margin: 25px 0; padding: 18px 20px; color: #55425d; background: linear-gradient(135deg, var(--blog-pink), var(--blog-lilac)); border-left: 4px solid var(--blog-primary); border-radius: 10px; }
.article-aside { position: sticky; top: 18px; padding: 22px; border-radius: 18px; }
.article-aside h2 { margin: 0 0 11px; font-size: 1.1rem; }
.article-aside p { margin: 0 0 16px; color: var(--blog-muted); font-size: 0.77rem; line-height: 1.6; }
.article-aside a { display: inline-block; color: var(--blog-primary); font-size: 0.76rem; font-weight: 800; text-decoration: none; }
.article-footer { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--blog-border); color: var(--blog-muted); font-size: 0.72rem; }
.contact-page { display: grid; flex: 1 0 auto; place-items: center; padding: 70px 0; }
.contact-empty { width: 100%; max-width: 900px; text-align: center; }
.contact-empty h1 { margin: 17px 0 13px; font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 0.95; letter-spacing: -0.06em; }
.contact-empty p { max-width: 540px; margin: 0 auto; color: var(--blog-muted); font-size: 1rem; line-height: 1.7; }

@media (max-width: 820px) {
  .blog-hero, .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .blog-shell { padding: 12px 11px 30px; }
  .blog-nav { align-items: stretch; flex-direction: column; margin-bottom: 17px; padding: 12px; gap: 9px; }
  .blog-brand { font-size: 1rem; }
  .blog-nav-actions { gap: 6px; }
  .blog-wallet-status { display: none; }
  .blog-wallet-button, .blog-menu-toggle { padding: 8px 9px; font-size: 0.64rem; }
  .blog-nav-links { display: none; }
  .blog-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .blog-hero-copy { padding: 31px 22px; }
  .blog-hero h1 { font-size: clamp(2.75rem, 15vw, 4.4rem); }
  .blog-feature-note { min-height: 245px; padding: 22px; }
  .featured-post { grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin: 24px 0 30px; padding: 20px; }
  .featured-post-link { grid-column: 1 / -1; justify-self: start; }
  .blog-toolbar { display: block; margin-top: 30px; }
  .blog-toolbar p { margin-top: 6px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card { min-height: 255px; }
  .article-shell { padding: 29px 20px; }
  .article-header h1 { font-size: 2.7rem; }
  .article-body { font-size: 0.94rem; }
  .contact-page { padding: 32px 0; }
  .contact-empty { padding: 48px 23px; }
}