:root {
  --forest: #173f2c;
  --leaf: #3f7e55;
  --sage: #dfeadf;
  --sage2: #edf4ec;
  --cream: #f8f5ed;
  --clay: #c9784b;
  --ink: #243129;
  --muted: #667169;
  --white: #fff;
  --line: #dbe4dc;
  --shadow: 0 20px 55px rgba(23, 63, 44, 0.12);
  --radius: 24px;
  --container: 1180px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.65;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
h1,
h2,
h3 {
  margin: 0 0 16px;
  color: var(--forest);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
h1 {
  font-size: clamp(3rem, 6.5vw, 6rem);
}
h2 {
  font-size: clamp(2rem, 4vw, 3.6rem);
}
h3 {
  font-size: 1.32rem;
}
p {
  margin: 0 0 20px;
}
.container {
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}
.container-narrow {
  width: min(800px, calc(100% - 40px));
  margin-inline: auto;
}
.section {
  padding: 92px 0;
}
.section-soft {
  background: var(--cream);
}
.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--leaf);
  font-size: 0.77rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  left: 14px;
  top: -80px;
  z-index: 9999;
  background: var(--forest);
  color: white;
  padding: 12px 16px;
  border-radius: 10px;
}
.skip-link:focus {
  top: 14px;
}
.utility-bar {
  background: #173f2c;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
}
.utility-inner {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.utility-inner p {
  margin: 0;
}
.utility-inner a {
  text-decoration: none;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-main {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand img {
  width: 46px;
  height: 46px;
}
.brand strong,
.brand small {
  display: block;
}
.brand strong {
  font-size: 1.22rem;
  color: var(--forest);
}
.brand small {
  font-size: 0.78rem;
  color: var(--muted);
}
.header-actions {
  display: flex;
  gap: 10px;
}
.icon-button {
  border: 1px solid var(--line);
  background: white;
  border-radius: 999px;
  padding: 10px 15px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.menu-toggle {
  display: none;
}
.primary-nav {
  border-top: 1px solid var(--line);
}
.nav-inner {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-inner > a,
.nav-dropdown > button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.nav-dropdown {
  position: relative;
}
.mega-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 640px;
  padding: 24px;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.nav-dropdown.is-open .mega-menu {
  display: grid;
}
.mega-menu a {
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
}
.mega-menu a:hover {
  background: var(--sage2);
}
.site-search {
  border-top: 1px solid var(--line);
  background: var(--cream);
}
.search-panel {
  padding: 24px 0;
}
.search-panel label {
  display: block;
  margin-bottom: 8px;
  font-weight: 900;
}
.search-panel form div,
.large-search {
  display: flex;
  gap: 10px;
}
.search-panel input,
.large-search input {
  flex: 1;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
}
.search-panel button,
.large-search button {
  border: 0;
  border-radius: 12px;
  padding: 0 22px;
  background: var(--forest);
  color: white;
  font-weight: 900;
}
.home-hero {
  overflow: hidden;
  padding: 76px 0 88px;
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(82, 143, 91, 0.13),
      transparent 35%
    ),
    linear-gradient(135deg, #fbfcf8, #eef5ec);
}
.hero-layout {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: 56px;
}
.hero-copy p {
  max-width: 650px;
  color: var(--muted);
  font-size: 1.18rem;
}
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 30px 0 25px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 23px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}
.button-primary {
  background: var(--leaf);
  color: white;
}
.button-primary:hover {
  background: var(--forest);
}
.button-light {
  background: white;
  border: 1px solid var(--line);
  color: var(--forest);
}
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.9rem;
}
.hero-proof li::before {
  content: "✓";
  margin-right: 7px;
  color: var(--leaf);
  font-weight: 900;
}
.hero-visual {
  position: relative;
}
.hero-visual > img {
  filter: drop-shadow(0 24px 44px rgba(23, 63, 44, 0.18));
}
.hero-note {
  position: absolute;
  right: 16px;
  bottom: 18px;
  max-width: 220px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.hero-note span,
.hero-note strong {
  display: block;
}
.hero-note span {
  font-size: 0.75rem;
  color: var(--leaf);
  font-weight: 900;
  text-transform: uppercase;
}
.ad-slot {
  display: grid;
  place-items: center;
  min-height: 110px;
  margin: 30px auto;
  padding: 20px;
  border: 1px dashed #aebaae;
  border-radius: 16px;
  background: #fafcf9;
  color: #859086;
  text-align: center;
}
.ad-slot span,
.ad-slot small {
  display: block;
}
.ad-slot span {
  font-weight: 900;
}
.ad-wide {
  width: min(var(--container), calc(100% - 40px));
}
.ad-sidebar {
  min-height: 280px;
  margin: 0;
}
.ad-in-article {
  min-height: 250px;
  margin: 36px 0;
}
.featured-layout {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 48px;
}
.featured-image {
  overflow: hidden;
  border-radius: 28px;
  background: var(--sage2);
}
.featured-image img {
  width: 100%;
  aspect-ratio: 16/11;
  object-fit: cover;
}
.featured-copy p {
  color: var(--muted);
  font-size: 1.08rem;
}
.featured-copy h2 a,
.post-card h3 a,
.horizontal-post h2 a {
  text-decoration: none;
}
.text-link {
  color: var(--leaf);
  font-weight: 900;
  text-decoration: none;
}
.section-heading {
  max-width: 720px;
  margin-bottom: 38px;
}
.section-heading > p {
  color: var(--muted);
  font-size: 1.05rem;
}
.section-heading-row {
  max-width: none;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.post-card {
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: 0.2s;
}
.post-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.post-card-image {
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--sage2);
}
.post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}
.post-card:hover .post-card-image img {
  transform: scale(1.04);
}
.post-card-body {
  padding: 24px;
}
.post-category {
  color: var(--leaf);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}
.post-card-body p {
  color: var(--muted);
}
.post-meta {
  display: flex;
  gap: 16px;
  color: var(--muted);
  font-size: 0.82rem;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.hub-card {
  display: flex;
  min-height: 170px;
  padding: 22px;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
  transition: 0.2s;
}
.hub-card:hover {
  transform: translateY(-4px);
  background: var(--sage2);
}
.hub-card span {
  color: var(--clay);
  font-size: 0.77rem;
  font-weight: 900;
}
.hub-card strong {
  color: var(--forest);
  font-size: 1.1rem;
}
.hub-card small {
  color: var(--leaf);
  font-weight: 800;
}
.seasonal-section {
  background: var(--forest);
  color: white;
}
.seasonal-section h2,
.seasonal-section .eyebrow {
  color: white;
}
.seasonal-section p {
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.08rem;
}
.seasonal-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 50px;
}
.seasonal-layout img {
  max-height: 390px;
  margin-inline: auto;
}
.home-columns-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 50px;
  align-items: start;
}
.stacked-links {
  display: grid;
}
.stacked-links a {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.stacked-links span {
  color: var(--clay);
  font-size: 0.75rem;
  font-weight: 900;
}
.stacked-links strong {
  color: var(--forest);
}
.stacked-links small {
  color: var(--muted);
}
.newsletter-panel {
  padding: 38px;
  background: linear-gradient(135deg, var(--sage2), var(--cream));
  border: 1px solid var(--line);
  border-radius: 28px;
}
.newsletter-panel form {
  display: flex;
  gap: 10px;
  margin: 24px 0 10px;
}
.newsletter-panel input,
.footer-newsletter input,
.contact-form input,
.contact-form textarea,
.sidebar-card input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
}
.newsletter-panel button,
.footer-newsletter button,
.sidebar-card button {
  flex: none;
  border: 0;
  border-radius: 12px;
  padding: 0 18px;
  background: var(--forest);
  color: white;
  font-weight: 900;
}
.newsletter-panel small {
  color: var(--muted);
}
.page-hero {
  padding: 78px 0;
  background: var(--cream);
}
.page-hero h1 {
  font-size: clamp(2.8rem, 6vw, 5.4rem);
}
.page-hero p {
  max-width: 720px;
  color: var(--muted);
  font-size: 1.12rem;
}
.page-hero-inner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}
.hub-number {
  font-size: 1rem;
  font-weight: 900;
  color: var(--clay);
}
.content-with-sidebar,
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 42px;
}
.category-list {
  display: grid;
  gap: 28px;
}
.horizontal-post {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 26px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.horizontal-post img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 18px;
  background: var(--sage2);
}
.horizontal-post p {
  color: var(--muted);
}
.sidebar {
  display: grid;
  align-content: start;
  gap: 22px;
}
.sidebar-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
}
.sidebar-card h2 {
  font-size: 1.3rem;
}
.sidebar-card a {
  display: block;
  padding: 9px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.sidebar-card form {
  display: grid;
  gap: 10px;
}
.newsletter-mini {
  background: var(--sage2);
}
.article-hero {
  padding: 68px 0;
  background: var(--cream);
}
.article-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 46px;
  align-items: center;
}
.article-hero h1 {
  font-size: clamp(2.7rem, 5.8vw, 5.2rem);
}
.article-hero img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 28px;
  background: var(--sage2);
}
.article-deck {
  color: var(--muted);
  font-size: 1.17rem;
}
.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
  font-size: 0.87rem;
}
.breadcrumbs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 0.84rem;
}
.breadcrumbs a {
  text-decoration: none;
}
.article-content {
  font-size: 1.08rem;
}
.article-content h2 {
  margin-top: 42px;
  font-size: 2rem;
}
.article-content blockquote {
  margin: 36px 0;
  padding: 24px 28px;
  border-left: 5px solid var(--clay);
  background: var(--cream);
  font-size: 1.25rem;
  font-weight: 800;
}
.article-content details {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.article-content summary {
  font-weight: 900;
  cursor: pointer;
}
.lead {
  font-size: 1.25rem;
  color: var(--forest);
}
.toc {
  margin-bottom: 34px;
  padding: 24px;
  background: var(--sage2);
  border-radius: 18px;
}
.toc strong,
.toc a {
  display: block;
}
.toc a {
  padding: 5px 0;
  text-decoration: none;
  color: var(--leaf);
}
.tip-box {
  margin: 30px 0;
  padding: 24px;
  background: #fff7e9;
  border-left: 5px solid var(--clay);
  border-radius: 16px;
}
.tip-box p {
  margin-bottom: 0;
}
.author-box {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 22px;
  margin-top: 50px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.author-box img {
  width: 80px;
}
.reading-progress {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  z-index: 9999;
}
.reading-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--clay);
}
.prose h2 {
  margin-top: 38px;
}
.contact-form {
  display: grid;
  gap: 18px;
}
.contact-form label {
  display: grid;
  gap: 8px;
  font-weight: 800;
}
.large-search {
  margin-bottom: 34px;
}
.search-results {
  margin-top: 30px;
}
.empty-state {
  padding: 30px;
  border: 1px dashed var(--line);
  border-radius: 18px;
}
.site-footer {
  padding: 68px 0 24px;
  background: #10291d;
  color: rgba(255, 255, 255, 0.72);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 36px;
}
.site-footer h2 {
  color: white;
  font-size: 1rem;
  letter-spacing: 0;
}
.site-footer a {
  display: block;
  margin: 8px 0;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.brand-footer strong {
  color: white;
}
.footer-brand > p {
  margin-top: 18px;
}
.footer-newsletter {
  display: grid;
  gap: 10px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.86rem;
}
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--forest);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}
.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 1050px) {
  .hub-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .utility-bar {
    display: none;
  }
  .menu-toggle {
    display: inline-flex;
  }
  .primary-nav {
    display: none;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 82px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
  }
  .primary-nav.is-open {
    display: block;
  }
  .nav-inner {
    display: grid;
    padding: 18px;
  }
  .nav-dropdown > button {
    padding: 0;
  }
  .mega-menu {
    position: static;
    width: auto;
    margin-top: 10px;
    box-shadow: none;
  }
  .hero-layout,
  .featured-layout,
  .seasonal-layout,
  .home-columns-grid,
  .article-hero-grid {
    grid-template-columns: 1fr;
  }
  .content-with-sidebar,
  .article-layout {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    text-align: center;
  }
  .hero-buttons,
  .hero-proof {
    justify-content: center;
  }
  .article-hero-grid > img {
    order: -1;
  }
}
@media (max-width: 650px) {
  .section {
    padding: 68px 0;
  }
  .posts-grid,
  .hub-grid,
  .footer-top {
    grid-template-columns: 1fr;
  }
  .section-heading-row,
  .page-hero-inner,
  .footer-bottom {
    display: block;
  }
  .horizontal-post {
    grid-template-columns: 1fr;
  }
  .newsletter-panel form,
  .search-panel form div,
  .large-search {
    flex-direction: column;
  }
  .brand small {
    display: none;
  }
  .hero-note {
    position: static;
    margin-top: 14px;
  }
}
/* V3 additions */
.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 36px 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.share-row a {
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 800;
}
.related-section {
  margin-top: 70px;
}
.related-section .posts-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ad-slot-live {
  margin: 30px auto;
  min-height: 100px;
}
@media (max-width: 760px) {
  .related-section .posts-grid {
    grid-template-columns: 1fr;
  }
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
}
.pagination a {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
}
.pagination a.current {
  background: var(--forest);
  color: white;
  border-color: var(--forest);
}
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.tag-cloud a,
.article-tags a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  background: var(--sage-2);
  font-weight: 800;
}
.tag-cloud span {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  font-size: 0.76rem;
}
.article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 34px 0;
}
.article-tags a {
  padding: 7px 11px;
  font-size: 0.82rem;
}
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 900px;
  margin: auto;
  padding: 18px 20px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-banner p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}
.cookie-accept {
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  background: var(--forest);
  color: white;
  font-weight: 900;
  cursor: pointer;
}
@media (max-width: 650px) {
  .cookie-banner {
    align-items: stretch;
    flex-direction: column;
  }
  .cookie-accept {
    width: 100%;
  }
}
@media print {
  .site-header,
  .site-footer,
  .sidebar,
  .ad-slot,
  .back-to-top,
  .reading-progress,
  .share-row,
  .cookie-banner {
    display: none !important;
  }
  .article-layout {
    display: block;
  }
  .article-content {
    max-width: none;
  }
  .article-hero {
    padding: 20px 0;
  }
  .article-hero-grid {
    display: block;
  }
  .article-hero img {
    max-height: 320px;
  }
  .toc {
    border: 1px solid #bbb;
  }
}


/*
|--------------------------------------------------------------------------
| V6: TRENDING ARTICLES
|--------------------------------------------------------------------------
*/

.trending-section
{
    background: var(--white);
}

.trending-grid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.trending-card
{
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 18px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--white);
}

.trending-card h3
{
    margin-top: 8px;
    font-size: 1.24rem;
}

.trending-card h3 a
{
    text-decoration: none;
}

.trending-number
{
    color: var(--clay);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

/*
|--------------------------------------------------------------------------
| V6: EDITORIAL TRUST
|--------------------------------------------------------------------------
*/

.editorial-trust
{
    background: var(--cream);
}

.editorial-trust-grid
{
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: start;
}

.editorial-trust-grid > div:first-child > p
{
    color: var(--muted);
    font-size: 1.08rem;
}

.trust-points
{
    display: grid;
    gap: 14px;
}

.trust-points article
{
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 4px 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.trust-points strong
{
    grid-row: 1 / 3;
    color: var(--clay);
    font-size: 0.8rem;
}

.trust-points h3,
.trust-points p
{
    margin: 0;
}

.trust-points p
{
    color: var(--muted);
}

/*
|--------------------------------------------------------------------------
| V6: AUTHOR PAGES
|--------------------------------------------------------------------------
*/

.author-hero
{
    padding: 78px 0;
    background: var(--cream);
}

.author-profile
{
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 34px;
    align-items: center;
}

.author-profile-image
{
    width: 170px;
    height: 170px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
}

.author-role
{
    color: var(--leaf);
    font-weight: 900;
}

/*
|--------------------------------------------------------------------------
| V6: RESPONSIVE ADDITIONS
|--------------------------------------------------------------------------
*/

@media (max-width: 900px)
{
    .editorial-trust-grid
    {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px)
{
    .trending-grid
    {
        grid-template-columns: 1fr;
    }

    .author-profile
    {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .author-profile-image
    {
        margin-inline: auto;
    }
}


/*
|--------------------------------------------------------------------------
| V7: ACTIVE NAVIGATION
|--------------------------------------------------------------------------
*/

.nav-inner > a.active
{
    color: var(--leaf);
}

.nav-inner > a.active::after
{
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 5px;
    background: var(--leaf);
    content: "";
}


/*
|--------------------------------------------------------------------------
| V7: GLOBAL BREADCRUMBS
|--------------------------------------------------------------------------
*/

body > .breadcrumbs,
main > .breadcrumbs
{
    width: min(
        var(--container),
        calc(100% - 40px)
    );
    margin: 22px auto 0;
}

.breadcrumbs
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: var(--muted);
    font-size: 0.84rem;
}

.breadcrumbs a
{
    color: var(--leaf);
    text-decoration: none;
}

.breadcrumbs a:hover
{
    text-decoration: underline;
}


/*
|--------------------------------------------------------------------------
| V7: ADVANCED SEARCH
|--------------------------------------------------------------------------
*/

.search-hero
{
    padding-bottom: 58px;
}

.advanced-search
{
    display: grid;
    grid-template-columns:
        minmax(260px, 1.5fr)
        minmax(180px, 0.75fr)
        minmax(170px, 0.65fr)
        auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 28px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--cream);
}

.search-field
{
    display: grid;
    gap: 7px;
}

.search-field label
{
    color: var(--forest);
    font-size: 0.82rem;
    font-weight: 900;
}

.search-field input,
.search-field select
{
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    color: var(--ink);
    font: inherit;
}

.advanced-search > button
{
    min-height: 50px;
    padding: 0 24px;
    border: 0;
    border-radius: 12px;
    background: var(--forest);
    color: var(--white);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.advanced-search > button:hover
{
    background: var(--leaf);
}

.search-summary
{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    color: var(--muted);
}

.search-summary a
{
    color: var(--leaf);
    font-weight: 800;
    text-decoration: none;
}

.search-results
{
    margin-top: 0;
}


/*
|--------------------------------------------------------------------------
| V7: RESPONSIVE SEARCH
|--------------------------------------------------------------------------
*/

@media (max-width: 980px)
{
    .advanced-search
    {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 650px)
{
    .advanced-search
    {
        grid-template-columns: 1fr;
    }

    .search-summary
    {
        display: block;
    }

    .search-summary a
    {
        display: inline-block;
        margin-top: 8px;
    }
}


/*
|--------------------------------------------------------------------------
| V8: PREMIUM HOMEPAGE HERO
|--------------------------------------------------------------------------
*/

.premium-hero
{
    overflow: hidden;
    padding: 82px 0 92px;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(63, 126, 85, 0.15),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 8%,
            rgba(201, 120, 75, 0.10),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #fbfcf8,
            #edf5ec
        );
}

.premium-hero-grid
{
    display: grid;
    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(0, 0.98fr);
    gap: 64px;
    align-items: center;
}

.premium-hero-copy h1
{
    max-width: 760px;
}

.premium-hero-copy h1 span
{
    color: var(--leaf);
}

.premium-hero-copy > p
{
    max-width: 650px;
    color: var(--muted);
    font-size: 1.18rem;
}

.hero-stats
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 34px;
}

.hero-stats article
{
    padding: 18px 16px;
    border: 1px solid rgba(23, 63, 44, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
}

.hero-stats strong,
.hero-stats span
{
    display: block;
}

.hero-stats strong
{
    color: var(--forest);
    font-size: 1.35rem;
}

.hero-stats span
{
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.78rem;
}

.premium-hero-visual
{
    position: relative;
}

.hero-image-frame
{
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(23, 63, 44, 0.12);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.hero-image-frame img
{
    width: 100%;
    border-radius: 24px;
}

.hero-feature-card
{
    position: absolute;
    right: 18px;
    bottom: -34px;
    width: min(330px, calc(100% - 36px));
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow);
}

.hero-feature-card h2
{
    margin-top: 8px;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.hero-feature-card h2 a
{
    text-decoration: none;
}

.ad-home-top
{
    margin-top: 34px;
    margin-bottom: 34px;
}


/*
|--------------------------------------------------------------------------
| V8: START HERE
|--------------------------------------------------------------------------
*/

.start-here-section
{
    padding-top: 70px;
}

.start-here-grid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.start-here-card
{
    display: grid;
    grid-template-columns:
        44px
        minmax(0, 1fr)
        34px;
    gap: 16px;
    align-items: center;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--white);
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.start-here-card:hover
{
    transform: translateY(-4px);
    border-color: rgba(63, 126, 85, 0.32);
    box-shadow: var(--shadow);
}

.start-card-number
{
    color: var(--clay);
    font-size: 0.8rem;
    font-weight: 900;
}

.start-here-card strong,
.start-here-card small
{
    display: block;
}

.start-here-card strong
{
    color: var(--forest);
    font-size: 1.08rem;
}

.start-here-card small
{
    margin-top: 5px;
    color: var(--muted);
}

.start-card-arrow
{
    color: var(--leaf);
    font-size: 1.2rem;
}


/*
|--------------------------------------------------------------------------
| V8: EDITORIAL LATEST GUIDES
|--------------------------------------------------------------------------
*/

.editorial-grid
{
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 0.85fr);
    gap: 28px;
}

.editorial-lead-card
{
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: var(--white);
}

.editorial-lead-image
{
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--sage-2);
}

.editorial-lead-image img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.editorial-lead-body
{
    padding: 30px;
}

.editorial-lead-body h3
{
    margin-top: 10px;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.editorial-lead-body h3 a,
.editorial-side-card h3 a
{
    text-decoration: none;
}

.editorial-lead-body p
{
    color: var(--muted);
    font-size: 1.04rem;
}

.editorial-side-list
{
    display: grid;
    gap: 14px;
}

.editorial-side-card
{
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
}

.editorial-side-image
{
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background: var(--sage-2);
}

.editorial-side-image img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.editorial-side-card h3
{
    margin-top: 6px;
    margin-bottom: 8px;
    font-size: 1.04rem;
    letter-spacing: -0.02em;
}


/*
|--------------------------------------------------------------------------
| V8: PREMIUM TOPIC HUBS
|--------------------------------------------------------------------------
*/

.topic-hubs-section
{
    background: var(--white);
}

.premium-hub-grid
{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.premium-hub-card
{
    display: flex;
    min-height: 185px;
    padding: 22px;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
        linear-gradient(
            180deg,
            var(--white),
            #fbfcf9
        );
    text-decoration: none;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.premium-hub-card:hover
{
    transform: translateY(-5px);
    background: var(--sage-2);
    box-shadow: var(--shadow);
}

.premium-hub-card .hub-index
{
    color: var(--clay);
    font-size: 0.76rem;
    font-weight: 900;
}

.premium-hub-card strong
{
    color: var(--forest);
    font-size: 1.08rem;
}

.premium-hub-card small
{
    color: var(--leaf);
    font-weight: 800;
}


/*
|--------------------------------------------------------------------------
| V8: SEASONAL FEATURE
|--------------------------------------------------------------------------
*/

.seasonal-feature
{
    padding: 92px 0;
    background:
        radial-gradient(
            circle at 86% 20%,
            rgba(255, 255, 255, 0.09),
            transparent 32%
        ),
        var(--forest);
    color: var(--white);
}

.seasonal-feature-grid
{
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.85fr);
    gap: 56px;
    align-items: center;
}

.seasonal-feature h2,
.seasonal-feature .eyebrow
{
    color: var(--white);
}

.seasonal-feature p
{
    max-width: 650px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 1.08rem;
}

.seasonal-art
{
    display: grid;
    place-items: center;
}

.seasonal-art img
{
    max-height: 400px;
}


/*
|--------------------------------------------------------------------------
| V8: POPULAR GUIDES
|--------------------------------------------------------------------------
*/

.popular-guides-grid
{
    display: grid;
    gap: 14px;
}

.popular-guide-card
{
    display: grid;
    grid-template-columns:
        48px
        minmax(0, 1fr)
        46px;
    gap: 18px;
    align-items: center;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
}

.popular-guide-number
{
    color: var(--clay);
    font-size: 0.8rem;
    font-weight: 900;
}

.popular-guide-card h3
{
    margin-top: 6px;
    margin-bottom: 8px;
    font-size: 1.45rem;
}

.popular-guide-card h3 a
{
    text-decoration: none;
}

.popular-guide-card p
{
    max-width: 760px;
    margin-bottom: 0;
    color: var(--muted);
}

.popular-guide-arrow
{
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--leaf);
    text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| V8: EDITORIAL PROMISE
|--------------------------------------------------------------------------
*/

.editorial-promise-section
{
    background: var(--cream);
}

.editorial-promise-grid
{
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    gap: 64px;
    align-items: start;
}

.editorial-promise-grid > div:first-child > p
{
    color: var(--muted);
    font-size: 1.08rem;
}

.promise-points
{
    display: grid;
    gap: 10px;
}

.promise-points article
{
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 4px 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.promise-points strong
{
    grid-row: 1 / 3;
    color: var(--clay);
    font-size: 0.8rem;
}

.promise-points h3,
.promise-points p
{
    margin: 0;
}

.promise-points p
{
    color: var(--muted);
}


/*
|--------------------------------------------------------------------------
| V8: NEWSLETTER SHOWCASE
|--------------------------------------------------------------------------
*/

.newsletter-showcase
{
    padding: 0 0 92px;
}

.newsletter-showcase-box
{
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.95fr);
    gap: 42px;
    align-items: center;
    padding: 54px;
    border-radius: 30px;
    background:
        linear-gradient(
            135deg,
            var(--leaf),
            var(--forest)
        );
    color: var(--white);
}

.newsletter-showcase-box h2,
.newsletter-showcase-box .eyebrow
{
    color: var(--white);
}

.newsletter-showcase-box p
{
    color: rgba(255, 255, 255, 0.76);
}

.newsletter-showcase-form
{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.newsletter-showcase-form input
{
    min-height: 58px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--ink);
    font: inherit;
}

.newsletter-showcase-form button
{
    min-height: 58px;
    padding: 0 24px;
    border: 0;
    border-radius: 14px;
    background: var(--cream);
    color: var(--forest);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| V8: RESPONSIVE HOMEPAGE
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px)
{
    .premium-hub-grid
    {
        grid-template-columns: repeat(3, 1fr);
    }

    .editorial-grid
    {
        grid-template-columns: 1fr;
    }

    .editorial-side-list
    {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px)
{
    .premium-hero-grid,
    .seasonal-feature-grid,
    .editorial-promise-grid,
    .newsletter-showcase-box
    {
        grid-template-columns: 1fr;
    }

    .premium-hero-copy
    {
        text-align: center;
    }

    .hero-buttons,
    .hero-stats
    {
        justify-content: center;
    }

    .hero-feature-card
    {
        position: static;
        width: 100%;
        margin-top: 16px;
    }
}

@media (max-width: 700px)
{
    .start-here-grid,
    .editorial-side-list,
    .premium-hub-grid
    {
        grid-template-columns: 1fr;
    }

    .hero-stats
    {
        grid-template-columns: 1fr;
    }

    .editorial-side-card
    {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .newsletter-showcase-box
    {
        padding: 34px 24px;
    }

    .newsletter-showcase-form
    {
        grid-template-columns: 1fr;
    }

    .popular-guide-card
    {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .popular-guide-arrow
    {
        display: none;
    }
}


/*
|--------------------------------------------------------------------------
| V9: PREMIUM ARTICLE HEADER
|--------------------------------------------------------------------------
*/

.premium-article-header
{
    padding: 70px 0 78px;
    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(63, 126, 85, 0.12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            var(--cream),
            var(--sage-2)
        );
}

.article-header-grid
{
    display: grid;
    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(0, 0.94fr);
    gap: 52px;
    align-items: center;
}

.article-header-copy h1
{
    margin-top: 14px;
    font-size: clamp(2.8rem, 5.6vw, 5.25rem);
}

.article-meta-grid
{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
}

.article-meta-grid div
{
    padding: 14px 15px;
    border: 1px solid rgba(23, 63, 44, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
}

.article-meta-grid span,
.article-meta-grid strong
{
    display: block;
}

.article-meta-grid span
{
    color: var(--muted);
    font-size: 0.75rem;
}

.article-meta-grid strong
{
    margin-top: 3px;
    color: var(--forest);
    font-size: 0.86rem;
}

.article-share-row
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 24px;
}

.article-share-row > span
{
    margin-right: 4px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.article-share-row a
{
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--forest);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.article-header-image
{
    position: relative;
}

.article-header-image > img
{
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid rgba(23, 63, 44, 0.12);
    border-radius: 28px;
    background: var(--sage-2);
    box-shadow: var(--shadow);
}

.article-image-note
{
    position: absolute;
    right: 18px;
    bottom: 18px;
    padding: 14px 17px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
}

.article-image-note span,
.article-image-note strong
{
    display: block;
}

.article-image-note span
{
    color: var(--leaf);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.article-image-note strong
{
    margin-top: 3px;
    color: var(--forest);
}

.article-top-ad
{
    margin-top: 26px;
    margin-bottom: 26px;
}


/*
|--------------------------------------------------------------------------
| V9: ARTICLE BODY
|--------------------------------------------------------------------------
*/

.premium-article-layout
{
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        320px;
    gap: 46px;
    padding-top: 48px;
    padding-bottom: 82px;
}

.premium-toc
{
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 38px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--sage-2);
}

.premium-toc strong
{
    display: block;
    color: var(--forest);
    font-size: 1.06rem;
}

.premium-toc nav
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
}

.premium-toc a
{
    color: var(--leaf);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.premium-article-content
{
    max-width: 780px;
}

.premium-article-content > p:first-child
{
    color: var(--forest);
    font-size: 1.25rem;
    line-height: 1.75;
}

.premium-article-content img
{
    margin: 32px 0;
    border-radius: 20px;
}

.premium-article-content ul,
.premium-article-content ol
{
    padding-left: 24px;
}

.premium-article-content li
{
    margin-bottom: 9px;
}

.article-tags
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 42px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.article-tags a
{
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--sage-2);
    color: var(--leaf);
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
}

.premium-author-box
{
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 24px;
    margin-top: 42px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--cream);
}

.premium-author-box img
{
    width: 92px;
    margin: 0;
}

.premium-author-box h2
{
    font-size: 1.7rem;
}

.article-pagination
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.article-pagination > div
{
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
}

.article-pagination > div:last-child
{
    text-align: right;
}

.article-pagination span,
.article-pagination a
{
    display: block;
}

.article-pagination span
{
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.article-pagination a
{
    margin-top: 5px;
    color: var(--forest);
    font-weight: 900;
    text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| V9: PREMIUM SIDEBAR
|--------------------------------------------------------------------------
*/

.sticky-sidebar
{
    position: sticky;
    top: 118px;
    align-self: start;
}

.sidebar-post-link
{
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.sidebar-post-link img
{
    width: 74px;
    height: 74px;
    object-fit: cover;
    border-radius: 12px;
    background: var(--sage-2);
}

.sidebar-post-link strong,
.sidebar-post-link small
{
    display: block;
}

.sidebar-post-link strong
{
    color: var(--forest);
    font-size: 0.88rem;
    line-height: 1.35;
}

.sidebar-post-link small
{
    margin-top: 4px;
    color: var(--muted);
}

.sidebar-topics a
{
    position: relative;
    padding-right: 18px;
}

.sidebar-topics a::after
{
    position: absolute;
    right: 0;
    color: var(--leaf);
    content: "→";
}


/*
|--------------------------------------------------------------------------
| V9: RELATED GUIDES
|--------------------------------------------------------------------------
*/

.related-guides-section
{
    background: var(--cream);
}


/*
|--------------------------------------------------------------------------
| V9: RESPONSIVE ARTICLE
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px)
{
    .article-meta-grid
    {
        grid-template-columns: repeat(2, 1fr);
    }

    .premium-article-layout
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .sticky-sidebar
    {
        position: static;
    }
}

@media (max-width: 900px)
{
    .article-header-grid
    {
        grid-template-columns: 1fr;
    }

    .article-header-image
    {
        order: -1;
    }
}

@media (max-width: 700px)
{
    .article-meta-grid
    {
        grid-template-columns: 1fr;
    }

    .premium-toc
    {
        grid-template-columns: 1fr;
    }

    .premium-toc nav
    {
        grid-template-columns: 1fr;
    }

    .premium-author-box
    {
        grid-template-columns: 1fr;
    }

    .article-pagination
    {
        grid-template-columns: 1fr;
    }

    .article-pagination > div:last-child
    {
        text-align: left;
    }

    .article-share-row
    {
        align-items: flex-start;
    }
}


/*
|--------------------------------------------------------------------------
| V10: CATEGORY MAGAZINE HERO
|--------------------------------------------------------------------------
*/

.category-magazine-hero
{
    padding: 42px 0 78px;
    background:
        radial-gradient(
            circle at 12% 16%,
            rgba(63, 126, 85, 0.12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            var(--cream),
            var(--sage-2)
        );
}

.category-hero-grid
{
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        250px;
    gap: 44px;
    align-items: end;
    margin-top: 30px;
}

.category-hero-grid h1
{
    font-size: clamp(
        3rem,
        6vw,
        5.5rem
    );
}

.category-hero-grid p
{
    max-width: 760px;
    color: var(--muted);
    font-size: 1.14rem;
}

.category-hero-meta
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.category-hero-meta span
{
    padding: 8px 12px;
    border: 1px solid rgba(23, 63, 44, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--forest);
    font-size: 0.8rem;
    font-weight: 800;
}

.category-hero-panel
{
    padding: 26px;
    border: 1px solid rgba(23, 63, 44, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: var(--shadow);
}

.category-hero-panel span,
.category-hero-panel strong,
.category-hero-panel small
{
    display: block;
}

.category-hero-panel span
{
    color: var(--leaf);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.category-hero-panel strong
{
    margin: 8px 0 12px;
    color: var(--forest);
    font-size: 3rem;
    line-height: 1;
}

.category-hero-panel small
{
    color: var(--muted);
}

.category-top-ad
{
    margin-top: 28px;
    margin-bottom: 28px;
}


/*
|--------------------------------------------------------------------------
| V10: FEATURED CATEGORY STORY
|--------------------------------------------------------------------------
*/

.category-feature-card
{
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);
    gap: 42px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--white);
}

.category-feature-image
{
    display: block;
    height: 100%;
    min-height: 420px;
    overflow: hidden;
    background: var(--sage-2);
}

.category-feature-image img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-feature-body
{
    padding: 42px 42px 42px 0;
}

.category-feature-body h2
{
    margin-top: 10px;
    font-size: clamp(
        2rem,
        4vw,
        3.5rem
    );
}

.category-feature-body h2 a
{
    text-decoration: none;
}

.category-feature-body p
{
    color: var(--muted);
    font-size: 1.08rem;
}

.category-feature-body .button
{
    margin-top: 24px;
}


/*
|--------------------------------------------------------------------------
| V10: EDITOR'S PICKS
|--------------------------------------------------------------------------
*/

.category-editors-grid
{
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.category-editor-card
{
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--white);
}

.editor-card-number
{
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--forest);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 900;
}

.category-editor-image
{
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--sage-2);
}

.category-editor-image img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-editor-card > div
{
    padding: 22px;
}

.category-editor-card h3
{
    margin-top: 8px;
}

.category-editor-card h3 a
{
    text-decoration: none;
}

.category-editor-card p
{
    color: var(--muted);
}


/*
|--------------------------------------------------------------------------
| V10: CATEGORY TOOLBAR
|--------------------------------------------------------------------------
*/

.category-toolbar
{
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: end;
    margin-bottom: 30px;
}

.category-toolbar h2
{
    margin-bottom: 0;
}

.category-toolbar form
{
    display: flex;
    gap: 10px;
    align-items: center;
}

.category-toolbar label
{
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.category-toolbar select
{
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    color: var(--ink);
    font: inherit;
}


/*
|--------------------------------------------------------------------------
| V10: MAGAZINE ARTICLE LIST
|--------------------------------------------------------------------------
*/

.category-magazine-list
{
    display: grid;
    gap: 24px;
}

.category-magazine-card
{
    display: grid;
    grid-template-columns:
        250px
        minmax(0, 1fr);
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.category-magazine-image
{
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    background: var(--sage-2);
}

.category-magazine-image img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-magazine-card h2
{
    margin-top: 7px;
    font-size: 1.65rem;
}

.category-magazine-card h2 a
{
    text-decoration: none;
}

.category-magazine-card p
{
    color: var(--muted);
}

.ad-in-list
{
    min-height: 180px;
    margin: 8px 0 18px;
}


/*
|--------------------------------------------------------------------------
| V10: RELATED HUBS
|--------------------------------------------------------------------------
*/

.category-related-section
{
    padding: 82px 0;
    background: var(--cream);
}

.category-related-grid
{
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.category-related-grid a
{
    display: flex;
    min-height: 150px;
    padding: 22px;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--white);
    text-decoration: none;
}

.category-related-grid strong
{
    color: var(--forest);
    font-size: 1.08rem;
}

.category-related-grid span
{
    color: var(--leaf);
    font-size: 0.84rem;
    font-weight: 800;
}

.category-adjacent-nav
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

.category-adjacent-nav > div
{
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
}

.category-adjacent-nav > div:last-child
{
    text-align: right;
}

.category-adjacent-nav span,
.category-adjacent-nav a
{
    display: block;
}

.category-adjacent-nav span
{
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.category-adjacent-nav a
{
    margin-top: 5px;
    color: var(--forest);
    font-weight: 900;
    text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| V10: CATEGORY NEWSLETTER
|--------------------------------------------------------------------------
*/

.category-newsletter
{
    padding: 0 0 92px;
    background: var(--cream);
}

.category-newsletter-box
{
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.95fr);
    gap: 40px;
    align-items: center;
    padding: 48px;
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            var(--leaf),
            var(--forest)
        );
    color: var(--white);
}

.category-newsletter-box h2,
.category-newsletter-box .eyebrow
{
    color: var(--white);
}

.category-newsletter-box p
{
    color: rgba(
        255,
        255,
        255,
        0.76
    );
}

.category-newsletter-box form
{
    display: grid;
    grid-template-columns:
        1fr
        auto;
    gap: 10px;
}

.category-newsletter-box input
{
    min-height: 56px;
    padding: 0 16px;
    border: 0;
    border-radius: 13px;
    background: var(--white);
    color: var(--ink);
    font: inherit;
}

.category-newsletter-box button
{
    min-height: 56px;
    padding: 0 22px;
    border: 0;
    border-radius: 13px;
    background: var(--cream);
    color: var(--forest);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| V10: RESPONSIVE CATEGORY
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px)
{
    .category-editors-grid
    {
        grid-template-columns:
            repeat(2, 1fr);
    }
}

@media (max-width: 900px)
{
    .category-hero-grid,
    .category-feature-card,
    .category-newsletter-box
    {
        grid-template-columns: 1fr;
    }

    .category-feature-body
    {
        padding: 0 30px 34px;
    }

    .category-feature-image
    {
        min-height: auto;
    }
}

@media (max-width: 700px)
{
    .category-editors-grid,
    .category-related-grid
    {
        grid-template-columns: 1fr;
    }

    .category-toolbar
    {
        display: block;
    }

    .category-toolbar form
    {
        margin-top: 16px;
    }

    .category-magazine-card
    {
        grid-template-columns: 1fr;
    }

    .category-adjacent-nav
    {
        grid-template-columns: 1fr;
    }

    .category-adjacent-nav > div:last-child
    {
        text-align: left;
    }

    .category-newsletter-box
    {
        padding: 34px 24px;
    }

    .category-newsletter-box form
    {
        grid-template-columns: 1fr;
    }
}


/*
|--------------------------------------------------------------------------
| V11: ABOUT PAGE
|--------------------------------------------------------------------------
*/

.about-hero
{
    padding: 86px 0;
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(63, 126, 85, 0.14),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            var(--cream),
            var(--sage-2)
        );
}

.about-hero-grid
{
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        360px;
    gap: 52px;
    align-items: center;
}

.about-hero p
{
    max-width: 700px;
    color: var(--muted);
    font-size: 1.16rem;
}

.about-hero-card
{
    padding: 30px;
    border: 1px solid rgba(23, 63, 44, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow);
}

.about-hero-card strong
{
    display: block;
    margin-bottom: 12px;
    color: var(--forest);
    font-size: 1.45rem;
}

.about-mission-grid
{
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    gap: 64px;
}

.about-mission-grid > div:first-child p
{
    color: var(--muted);
    font-size: 1.08rem;
}

.about-values
{
    display: grid;
    gap: 12px;
}

.about-values article
{
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 4px 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.about-values strong
{
    grid-row: 1 / 3;
    color: var(--clay);
    font-size: 0.8rem;
}

.about-values h3,
.about-values p
{
    margin: 0;
}

.about-values p
{
    color: var(--muted);
}

.about-topic-grid
{
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.about-topic-grid a
{
    display: flex;
    min-height: 150px;
    padding: 20px;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
    text-decoration: none;
}

.about-topic-grid span
{
    color: var(--clay);
    font-size: 0.76rem;
    font-weight: 900;
}

.about-topic-grid strong
{
    color: var(--forest);
}

.team-grid
{
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.team-card
{
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--white);
}

.team-card > img
{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--sage-2);
}

.team-card > div
{
    padding: 24px;
}

.team-card > div > span
{
    color: var(--leaf);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.team-card p
{
    color: var(--muted);
}

.about-contact-strip
{
    padding: 70px 0;
    background: var(--forest);
}

.about-contact-grid
{
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
}

.about-contact-strip h2,
.about-contact-strip .eyebrow
{
    color: var(--white);
}


/*
|--------------------------------------------------------------------------
| V11: TEAM DIRECTORY
|--------------------------------------------------------------------------
*/

.team-hero
{
    padding: 82px 0;
    text-align: center;
    background: var(--cream);
}

.team-hero p
{
    color: var(--muted);
    font-size: 1.12rem;
}

.team-directory
{
    display: grid;
    gap: 24px;
}

.team-directory-card
{
    display: grid;
    grid-template-columns:
        260px
        minmax(0, 1fr);
    gap: 34px;
    align-items: center;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--white);
}

.team-directory-card > img
{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
    background: var(--sage-2);
}

.team-directory-card h2
{
    margin-top: 8px;
}

.team-location
{
    color: var(--leaf);
    font-weight: 800;
}

.author-specialties
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
}

.author-specialties span
{
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--sage-2);
    color: var(--leaf);
    font-size: 0.8rem;
    font-weight: 800;
}

.team-process
{
    text-align: left;
}

.team-process h2
{
    margin-top: 8px;
}

.team-process-grid
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 28px 0;
}

.team-process-grid > div
{
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
}

.team-process-grid strong
{
    display: block;
    margin-bottom: 8px;
    color: var(--leaf);
}

@media (max-width: 720px)
{
    .team-process-grid
    {
        grid-template-columns: minmax(0, 1fr);
    }
}


/*
|--------------------------------------------------------------------------
| V11: PREMIUM AUTHOR PAGE
|--------------------------------------------------------------------------
*/

.premium-author-hero
{
    padding: 82px 0;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(63, 126, 85, 0.12),
            transparent 34%
        ),
        var(--cream);
}

.premium-author-grid
{
    display: grid;
    grid-template-columns:
        220px
        minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.premium-author-image
{
    width: 220px;
    height: 220px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow);
}

.premium-author-bio
{
    max-width: 760px;
    color: var(--muted);
    font-size: 1.08rem;
}

.author-profile-meta
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.author-profile-meta span
{
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--forest);
    font-size: 0.8rem;
    font-weight: 800;
}

.author-editorial-note
{
    padding: 78px 0;
    text-align: center;
    background: var(--forest);
    color: var(--white);
}

.author-editorial-note h2,
.author-editorial-note .eyebrow
{
    color: var(--white);
}

.author-editorial-note p
{
    color: rgba(255, 255, 255, 0.76);
}


/*
|--------------------------------------------------------------------------
| V11: RESPONSIVE ABOUT & AUTHORS
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px)
{
    .about-topic-grid
    {
        grid-template-columns:
            repeat(3, 1fr);
    }
}

@media (max-width: 900px)
{
    .about-hero-grid,
    .about-mission-grid,
    .premium-author-grid
    {
        grid-template-columns: 1fr;
    }

    .premium-author-image
    {
        margin-inline: auto;
    }

    .premium-author-grid
    {
        text-align: center;
    }

    .author-profile-meta,
    .author-specialties
    {
        justify-content: center;
    }
}

@media (max-width: 700px)
{
    .about-topic-grid,
    .team-grid
    {
        grid-template-columns: 1fr;
    }

    .team-directory-card
    {
        grid-template-columns: 1fr;
    }

    .about-contact-grid
    {
        display: block;
        text-align: center;
    }

    .about-contact-grid .button
    {
        margin-top: 20px;
    }
}


/*
|--------------------------------------------------------------------------
| V12: SEARCH RESULT HIGHLIGHTING
|--------------------------------------------------------------------------
*/

mark
{
    padding: 0 0.12em;
    border-radius: 0.2em;
    background: #fff0a8;
    color: inherit;
}

.search-result-list
{
    display: grid;
    gap: 24px;
}

.search-result-card
{
    display: grid;
    grid-template-columns:
        250px
        minmax(0, 1fr);
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.search-result-image
{
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    background: var(--sage-2);
}

.search-result-image img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-card h2
{
    margin-top: 8px;
    font-size: 1.65rem;
}

.search-result-card h2 a
{
    text-decoration: none;
}

.search-result-card p
{
    color: var(--muted);
}

.search-empty-state
{
    text-align: center;
}

.search-suggestions
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.search-suggestions a
{
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--leaf);
    font-weight: 800;
    text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| V12: TAG ARCHIVES
|--------------------------------------------------------------------------
*/

.tag-hero
{
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(63, 126, 85, 0.12),
            transparent 34%
        ),
        var(--cream);
}

.tag-cloud-grid
{
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.tag-cloud-grid a
{
    display: flex;
    min-height: 125px;
    padding: 20px;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.tag-cloud-grid a:hover
{
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.tag-cloud-grid strong
{
    color: var(--forest);
}

.tag-cloud-grid span
{
    color: var(--muted);
    font-size: 0.82rem;
}


/*
|--------------------------------------------------------------------------
| V12: RESPONSIVE SEO PAGES
|--------------------------------------------------------------------------
*/

@media (max-width: 950px)
{
    .tag-cloud-grid
    {
        grid-template-columns:
            repeat(2, 1fr);
    }
}

@media (max-width: 700px)
{
    .search-result-card
    {
        grid-template-columns: 1fr;
    }

    .tag-cloud-grid
    {
        grid-template-columns: 1fr;
    }
}


/*
|--------------------------------------------------------------------------
| V13: IMAGE PERFORMANCE
|--------------------------------------------------------------------------
*/

img[loading="lazy"]
{
    content-visibility: auto;
}

.post-card-image,
.editorial-lead-image,
.editorial-side-image,
.category-feature-image,
.category-editor-image,
.category-magazine-image,
.search-result-image
{
    background:
        linear-gradient(
            90deg,
            var(--sage-2) 25%,
            var(--cream) 50%,
            var(--sage-2) 75%
        );
    background-size: 200% 100%;
    animation: sproutstead-skeleton 1.4s linear infinite;
}

.post-card-image img,
.editorial-lead-image img,
.editorial-side-image img,
.category-feature-image img,
.category-editor-image img,
.category-magazine-image img,
.search-result-image img
{
    background: var(--sage-2);
}

@keyframes sproutstead-skeleton
{
    from
    {
        background-position: 200% 0;
    }

    to
    {
        background-position: -200% 0;
    }
}


/*
|--------------------------------------------------------------------------
| V13: DARK MODE
|--------------------------------------------------------------------------
*/

:root[data-theme="dark"]
{
    --forest: #d8eadc;
    --forest-2: #b9d8c1;
    --leaf: #8ac49a;
    --sage: #21392b;
    --sage-2: #1a2f23;
    --cream: #15231b;
    --sand: #3b3326;
    --clay: #e49a70;
    --ink: #edf5ef;
    --muted: #a9b7ad;
    --white: #101b15;
    --line: #2d4435;
    --shadow: 0 20px 55px rgba(0, 0, 0, 0.35);
}

:root[data-theme="dark"] body
{
    background: #0d1711;
}

:root[data-theme="dark"] .site-header
{
    background: rgba(16, 27, 21, 0.95);
}

:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .post-card,
:root[data-theme="dark"] .sidebar-card,
:root[data-theme="dark"] .category-editor-card,
:root[data-theme="dark"] .category-feature-card,
:root[data-theme="dark"] .team-card,
:root[data-theme="dark"] .team-directory-card,
:root[data-theme="dark"] .advanced-search,
:root[data-theme="dark"] .search-field input,
:root[data-theme="dark"] .search-field select,
:root[data-theme="dark"] .newsletter-panel,
:root[data-theme="dark"] .premium-author-box,
:root[data-theme="dark"] .hero-image-frame,
:root[data-theme="dark"] .hero-feature-card,
:root[data-theme="dark"] .category-hero-panel,
:root[data-theme="dark"] .about-hero-card
{
    background: var(--white);
    color: var(--ink);
}

:root[data-theme="dark"] .premium-hero
{
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(138, 196, 154, 0.12),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 8%,
            rgba(228, 154, 112, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #101b15,
            #0d1711
        );
}

:root[data-theme="dark"] .seasonal-feature
{
    background: #0a130e;
}

/*
|--------------------------------------------------------------------------
| Dark mode: visual-article component (every article page's body —
| steps, tools, checklist, tips, warnings, comparisons, quiz, FAQ).
| These used a separate, always-light color system that never had a
| dark-mode counterpart, so text became invisible against still-light
| card backgrounds whenever dark mode was on.
|--------------------------------------------------------------------------
*/
:root[data-theme="dark"] .visual-article
{
    --visual-green: #8ac49a;
    --visual-pale: #1a2f23;
    --visual-line: #2d4435;
}

:root[data-theme="dark"] .visual-quick-answer,
:root[data-theme="dark"] .visual-final-takeaway
{
    background: linear-gradient(135deg, #16241a, #182a1d);
}

:root[data-theme="dark"] .visual-callout-tip
{
    background: #16241a;
}

:root[data-theme="dark"] .visual-callout-warning
{
    background: #2a2214;
}

:root[data-theme="dark"] .visual-checklist-items label:has(input:checked)
{
    background: #16241a;
}

:root[data-theme="dark"] .visual-progress-track
{
    background: #21392b;
}

:root[data-theme="dark"] .visual-tool-icon
{
    background: #1a2f23;
}

:root[data-theme="dark"] .site-ad
{
    background: #1a2f23;
}

/*
|--------------------------------------------------------------------------
| Dark mode: remaining sitewide components with hardcoded light
| backgrounds (homepage stats, category cards, article meta boxes,
| newsletter forms, form feedback, error pages, pagination, toast).
|--------------------------------------------------------------------------
*/
:root[data-theme="dark"] .hero-note,
:root[data-theme="dark"] .hero-stats article,
:root[data-theme="dark"] .article-meta-grid div,
:root[data-theme="dark"] .article-image-note,
:root[data-theme="dark"] .category-hero-meta span,
:root[data-theme="dark"] .newsletter-benefits article,
:root[data-theme="dark"] .visual-progress-card,
:root[data-theme="dark"] .ad-slot
{
    background: var(--white);
    color: var(--ink);
}

:root[data-theme="dark"] .premium-hub-card
{
    background: linear-gradient(180deg, var(--white), #16241a);
}

:root[data-theme="dark"] .newsletter-showcase-form input,
:root[data-theme="dark"] .footer-newsletter input
{
    background: var(--white);
    color: var(--ink);
}

:root[data-theme="dark"] .tip-box
{
    background: #2a2214;
    color: var(--ink);
}

:root[data-theme="dark"] .form-success
{
    border-color: #2f5c3d;
    background: #16241a;
    color: #8ac49a;
}

:root[data-theme="dark"] .form-error
{
    border-color: #6b3530;
    background: #2a1a18;
    color: #e6a49c;
}

:root[data-theme="dark"] .category-pagination-compact
{
    background: linear-gradient(180deg, #16241a, var(--white));
}

:root[data-theme="dark"] .site-toast-close
{
    background: rgba(255, 255, 255, 0.15);
}

:root[data-theme="dark"] .friendly-error-page
{
    background:
        radial-gradient(circle at top, rgba(138, 196, 154, 0.10), transparent 42%),
        #0d1711;
}

:root[data-theme="dark"] .friendly-error-card
{
    background: var(--white);
}

:root[data-theme="dark"] .friendly-error-card h1
{
    color: var(--forest);
}

:root[data-theme="dark"] .friendly-error-message
{
    color: var(--muted);
}

:root[data-theme="dark"] .friendly-error-icon
{
    background: linear-gradient(145deg, #3a2018, #2a1712);
    color: #e6a49c;
}

:root[data-theme="dark"] .friendly-error-details
{
    background: #2a1a18;
    color: #e6a49c;
}




:root[data-theme="dark"] .button-light
{
    background: var(--white);
    color: var(--forest);
}


/*
|--------------------------------------------------------------------------
| V13: AUTOCOMPLETE
|--------------------------------------------------------------------------
*/

.autocomplete-wrapper
{
    position: relative;
    flex: 1;
}

.autocomplete-wrapper > input
{
    width: 100%;
}

.autocomplete-panel
{
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 1200;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow);
}

.autocomplete-panel a
{
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
}

.autocomplete-panel a:last-child
{
    border-bottom: 0;
}

.autocomplete-panel a:hover
{
    background: var(--sage-2);
}

.autocomplete-panel strong,
.autocomplete-panel span
{
    display: block;
}

.autocomplete-panel strong
{
    color: var(--forest);
    font-size: 0.9rem;
}

.autocomplete-panel span
{
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.75rem;
}


/*
|--------------------------------------------------------------------------
| V13: SAVE ARTICLE
|--------------------------------------------------------------------------
*/

.article-save-button
{
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--forest);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.article-save-button.is-saved
{
    background: var(--leaf);
    color: var(--white);
}


/*
|--------------------------------------------------------------------------
| V13: RECENTLY VIEWED
|--------------------------------------------------------------------------
*/

.recently-viewed-section
{
    padding-top: 0;
    background: var(--white);
}

.recently-viewed-grid
{
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.recently-viewed-grid a
{
    display: flex;
    min-height: 140px;
    padding: 20px;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--cream);
    text-decoration: none;
}

.recently-viewed-grid span
{
    color: var(--leaf);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.recently-viewed-grid strong
{
    color: var(--forest);
}


/*
|--------------------------------------------------------------------------
| V13: RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 700px)
{
    .recently-viewed-grid
    {
        grid-template-columns: 1fr;
    }
}


/*
|--------------------------------------------------------------------------
| V14: LEGAL PAGES
|--------------------------------------------------------------------------
*/

.legal-hero
{
    padding: 76px 0 58px;
    background: var(--cream);
}

.legal-page
{
    background: var(--white);
}

.legal-updated
{
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 800;
}


/*
|--------------------------------------------------------------------------
| V14: FAQ
|--------------------------------------------------------------------------
*/

.faq-list
{
    display: grid;
    gap: 12px;
}

.faq-list details
{
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--white);
}

.faq-list summary
{
    color: var(--forest);
    font-weight: 900;
    cursor: pointer;
}

.faq-list p
{
    margin: 14px 0 0;
    color: var(--muted);
}


/*
|--------------------------------------------------------------------------
| V14: NEWSLETTER PAGE
|--------------------------------------------------------------------------
*/

.newsletter-page-hero
{
    padding: 86px 0;
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(63, 126, 85, 0.14),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            var(--cream),
            var(--sage-2)
        );
}

.newsletter-page-grid
{
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.85fr);
    gap: 56px;
    align-items: center;
}

.newsletter-page-form
{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin: 28px 0 10px;
}

.newsletter-page-form input
{
    min-height: 56px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--white);
    color: var(--ink);
    font: inherit;
}

.newsletter-page-form button
{
    min-height: 56px;
    padding: 0 22px;
    border: 0;
    border-radius: 13px;
    background: var(--forest);
    color: var(--white);
    font: inherit;
    font-weight: 900;
}

.newsletter-benefits
{
    display: grid;
    gap: 12px;
}

.newsletter-benefits article
{
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 4px 16px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
}

.newsletter-benefits strong
{
    grid-row: 1 / 3;
    color: var(--clay);
    font-size: 0.8rem;
}

.newsletter-benefits h2,
.newsletter-benefits p
{
    margin: 0;
}

.newsletter-benefits h2
{
    font-size: 1.1rem;
}

.newsletter-benefits p
{
    color: var(--muted);
}

.newsletter-archive-grid
{
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.newsletter-archive-grid article
{
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
}

.newsletter-archive-grid span
{
    color: var(--leaf);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.newsletter-archive-grid p
{
    color: var(--muted);
}


/*
|--------------------------------------------------------------------------
| V14: CONTACT
|--------------------------------------------------------------------------
*/

.contact-hero
{
    padding: 80px 0;
    background: var(--cream);
}

.contact-hero-grid
{
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        340px;
    gap: 50px;
    align-items: center;
}

.contact-info-card
{
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--white);
    box-shadow: var(--shadow);
}

.contact-info-card strong
{
    display: block;
    color: var(--forest);
    font-size: 1.2rem;
}

.contact-info-card p
{
    color: var(--muted);
}

.contact-info-card a
{
    color: var(--leaf);
    font-weight: 900;
    text-decoration: none;
}

.contact-layout
{
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        300px;
    gap: 44px;
}

.premium-contact-form
{
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--white);
}

.field-error
{
    color: #b42318;
    font-weight: 800;
}

.form-message
{
    margin-bottom: 18px;
    padding: 18px 20px;
    border-radius: 14px;
}

.form-success
{
    border: 1px solid #93c5a1;
    background: #edf8ef;
    color: #245c34;
}

.form-error
{
    border: 1px solid #efb4ae;
    background: #fff1f0;
    color: #8a1c13;
}

.contact-sidebar
{
    display: grid;
    align-content: start;
    gap: 14px;
}

.contact-sidebar section
{
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--cream);
}

.contact-sidebar h2
{
    font-size: 1.1rem;
}

.contact-sidebar p
{
    margin-bottom: 0;
    color: var(--muted);
}


/*
|--------------------------------------------------------------------------
| V14: 404 PAGE
|--------------------------------------------------------------------------
*/

.error-page
{
    display: grid;
    min-height: 68vh;
    place-items: center;
    padding: 80px 0;
    text-align: center;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(63, 126, 85, 0.12),
            transparent 36%
        ),
        var(--cream);
}

.error-code
{
    display: block;
    color: var(--clay);
    font-size: clamp(5rem, 14vw, 10rem);
    font-weight: 900;
    line-height: 0.9;
}

.error-page p
{
    color: var(--muted);
    font-size: 1.08rem;
}

.error-search
{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin: 28px auto;
    max-width: 620px;
}

.error-search input
{
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    color: var(--ink);
    font: inherit;
}

.error-search button
{
    min-height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: var(--forest);
    color: var(--white);
    font-weight: 900;
}


/*
|--------------------------------------------------------------------------
| V14: ACCESSIBILITY
|--------------------------------------------------------------------------
*/

:focus-visible
{
    outline: 3px solid var(--clay);
    outline-offset: 3px;
}

button,
a,
input,
select,
textarea,
summary
{
    scroll-margin-top: 120px;
}

@media (prefers-reduced-motion: reduce)
{
    *,
    *::before,
    *::after
    {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/*
|--------------------------------------------------------------------------
| V14: RESPONSIVE UTILITY PAGES
|--------------------------------------------------------------------------
*/

@media (max-width: 900px)
{
    .newsletter-page-grid,
    .contact-hero-grid,
    .contact-layout
    {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px)
{
    .newsletter-page-form,
    .error-search
    {
        grid-template-columns: 1fr;
    }

    .newsletter-archive-grid
    {
        grid-template-columns: 1fr;
    }
}


/*
|--------------------------------------------------------------------------
| V15: FINAL PRODUCTION POLISH
|--------------------------------------------------------------------------
*/

html
{
    text-rendering: optimizeLegibility;
}

body
{
    min-width: 320px;
}

table
{
    width: 100%;
    margin: 28px 0;
    border-collapse: collapse;
}

th,
td
{
    padding: 12px 14px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

th
{
    background: var(--sage-2);
    color: var(--forest);
}

.article-content
{
    overflow-wrap: anywhere;
}

.article-content pre
{
    overflow-x: auto;
    padding: 18px;
    border-radius: 14px;
    background: #101b15;
    color: #edf5ef;
}

img
{
    height: auto;
}

@media print
{
    .site-header,
    .site-footer,
    .sidebar,
    .article-share-row,
    .article-pagination,
    .related-guides-section,
    .recently-viewed-section,
    .back-to-top,
    .ad-slot,
    .cookie-banner,
    .premium-toc,
    .article-save-button
    {
        display: none !important;
    }

    body,
    .premium-article-header,
    .premium-article-layout
    {
        background: #fff !important;
        color: #000 !important;
    }

    .premium-article-layout,
    .article-header-grid
    {
        display: block !important;
        width: 100% !important;
    }

    .article-content
    {
        max-width: none !important;
        font-size: 11pt;
        line-height: 1.5;
    }

    h1,
    h2,
    h3
    {
        color: #000 !important;
    }
}

@media (max-width: 520px)
{
    .container,
    .container-narrow
    {
        width: min(100% - 24px, var(--container));
    }

    .button
    {
        width: 100%;
    }

    .hero-buttons
    {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/*
|--------------------------------------------------------------------------
| V17: PROFESSIONAL VISUAL ARTICLES
|--------------------------------------------------------------------------
*/

.visual-article
{
    --visual-green: #275f36;
    --visual-pale: #f1f7f1;
    --visual-line: #dbe7dc;
    display: grid;
    gap: 34px;
}

.visual-article img
{
    width: 100%;
    height: auto;
    display: block;
}

.visual-quick-answer,
.visual-final-takeaway
{
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    padding: 22px;
    border: 1px solid var(--visual-line);
    border-radius: 18px;
    background: linear-gradient(135deg, #f7fbf7, #eef7ef);
}

.visual-quick-answer > span,
.visual-final-takeaway > span
{
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: var(--visual-green);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
}

.visual-quick-answer strong,
.visual-final-takeaway strong
{
    color: var(--forest);
    font-size: 1.05rem;
}

.visual-quick-answer p,
.visual-final-takeaway p
{
    margin: 5px 0 0;
    color: var(--muted);
}

.visual-facts
{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.visual-facts article
{
    padding: 16px;
    border: 1px solid var(--visual-line);
    border-radius: 14px;
    background: var(--white);
}

.visual-facts span,
.visual-facts strong
{
    display: block;
}

.visual-facts span
{
    color: var(--muted);
    font-size: 0.73rem;
    text-transform: uppercase;
}

.visual-facts strong
{
    margin-top: 4px;
    color: var(--forest);
}

.visual-section
{
    padding: 28px;
    border: 1px solid var(--visual-line);
    border-radius: 22px;
    background: var(--white);
}

.visual-section > h2
{
    margin-top: 6px;
}

.visual-tool-grid
{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.visual-tool-grid article
{
    padding: 18px;
    border-radius: 16px;
    background: var(--visual-pale);
}

.visual-tool-icon
{
    display: block;
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.visual-tool-grid p
{
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.visual-step-nav
{
    padding: 24px;
    border: 1px solid var(--visual-line);
    border-radius: 20px;
    background: var(--white);
}

.visual-step-nav > span
{
    color: var(--leaf);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.visual-step-nav ol
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    margin: 18px 0 0;
    list-style: none;
}

.visual-step-nav a
{
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--forest);
    font-weight: 800;
    text-decoration: none;
}

.visual-step-nav a span
{
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: var(--visual-green);
    color: #fff;
    font-size: 0.75rem;
}

.visual-progress-card
{
    position: sticky;
    top: 92px;
    z-index: 10;
    padding: 18px 20px;
    border: 1px solid var(--visual-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 35px rgba(23, 63, 44, 0.1);
    backdrop-filter: blur(12px);
}

.visual-progress-card > div:first-child
{
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.visual-progress-label
{
    color: var(--muted);
    font-size: 0.86rem;
}

.visual-progress-track
{
    height: 9px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7eee8;
}

.visual-progress-track span
{
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--visual-green);
    transition: width 0.25s ease;
}

.visual-steps
{
    display: grid;
    gap: 32px;
}

.visual-step
{
    scroll-margin-top: 170px;
    padding: 30px;
    border: 1px solid var(--visual-line);
    border-radius: 22px;
    background: var(--white);
}

.visual-step > header
{
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.visual-step-number
{
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 50%;
    background: var(--visual-green);
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
}

.visual-step h2
{
    margin: 2px 0 18px;
}

.visual-step-image
{
    margin: 0 0 24px;
}

.visual-step-image img
{
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 18px;
}

.visual-step-image figcaption
{
    margin-top: 9px;
    color: var(--muted);
    font-size: 0.86rem;
}

.visual-callout
{
    padding: 18px 20px;
    margin: 22px 0;
    border-radius: 14px;
}

.visual-callout strong
{
    display: block;
    color: var(--forest);
}

.visual-callout p
{
    margin: 5px 0 0;
}

.visual-callout-tip
{
    border-left: 5px solid #3f7e55;
    background: #edf8ef;
}

.visual-callout-warning
{
    border-left: 5px solid #d97706;
    background: #fff8e5;
}

.visual-step-complete
{
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 10px 13px;
    border-radius: 999px;
    background: var(--visual-pale);
    color: var(--forest);
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
}

.visual-comparison-grid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.visual-comparison-grid article
{
    overflow: hidden;
    border: 1px solid var(--visual-line);
    border-radius: 18px;
    background: var(--white);
}

.visual-comparison-grid img
{
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.visual-comparison-grid article > span,
.visual-comparison-grid h3,
.visual-comparison-grid p
{
    margin-right: 18px;
    margin-left: 18px;
}

.visual-comparison-grid article > span
{
    display: block;
    margin-top: 16px;
    font-size: 0.8rem;
    font-weight: 900;
}

.visual-comparison-wrong > span
{
    color: #b42318;
}

.visual-comparison-right > span
{
    color: #2f7d44;
}

.visual-comparison-grid p
{
    color: var(--muted);
}

.visual-table-wrap
{
    overflow-x: auto;
}

.visual-checklist-items
{
    display: grid;
    gap: 10px;
}

.visual-checklist-items label
{
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    border: 1px solid var(--visual-line);
    border-radius: 12px;
    cursor: pointer;
}

.visual-checklist-items label:has(input:checked)
{
    background: #edf8ef;
    text-decoration: line-through;
}

.visual-quiz-list,
.visual-faq-list
{
    display: grid;
    gap: 10px;
}

.visual-quiz-list details,
.visual-faq-list details
{
    padding: 16px 18px;
    border: 1px solid var(--visual-line);
    border-radius: 13px;
}

.visual-quiz-list summary,
.visual-faq-list summary
{
    color: var(--forest);
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 850px)
{
    .visual-facts,
    .visual-tool-grid
    {
        grid-template-columns: repeat(2, 1fr);
    }

    .visual-progress-card
    {
        position: static;
    }
}

@media (max-width: 620px)
{
    .visual-facts,
    .visual-tool-grid,
    .visual-step-nav ol,
    .visual-comparison-grid
    {
        grid-template-columns: 1fr;
    }

    .visual-section,
    .visual-step
    {
        padding: 20px;
    }
}


.category-empty-state
{
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(32px, 6vw, 72px);
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--white);
    text-align: center;
    box-shadow: 0 24px 60px rgba(17, 73, 48, 0.08);
}

.category-empty-state h2
{
    margin: 12px 0;
}

.category-empty-state p
{
    max-width: 620px;
    margin: 0 auto 24px;
    color: var(--muted);
}


.site-ad
{
    width: min(100% - 32px, 1180px);
    min-height: 90px;
    margin: 24px auto;
    overflow: hidden;
    border-radius: 14px;
    background: #f5f7f3;
    text-align: center;
}

@media (max-width: 720px)
{
    img
    {
        max-width: 100%;
        height: auto;
    }

    .container
    {
        width: min(100% - 24px, 1180px);
    }

    .site-ad
    {
        width: min(100% - 24px, 1180px);
    }
}


/* V33 mobile front-header correction */
@media (max-width: 650px)
{
    .header-main
    {
        min-height: 72px;
        gap: 8px;
        padding-inline: 12px;
    }

    .brand
    {
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px;
    }

    .brand img
    {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    .brand span
    {
        min-width: 0;
    }

    .brand strong
    {
        overflow: hidden;
        font-size: clamp(1rem, 4.8vw, 1.15rem);
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand small
    {
        display: none;
    }

    .header-actions
    {
        flex: 0 0 auto;
        gap: 5px;
    }

    .header-actions .icon-button
    {
        display: inline-grid;
        width: 42px;
        height: 42px;
        padding: 0;
        place-items: center;
        border-radius: 50%;
        overflow: hidden;
        font-size: 0;
        line-height: 1;
    }

    .header-actions .theme-toggle::before
    {
        content: "◐";
        font-size: 1.25rem;
    }

    .header-actions .search-toggle::before
    {
        content: "⌕";
        font-size: 1.45rem;
        transform: translateY(-1px);
    }

    .header-actions .menu-toggle::before
    {
        content: "☰";
        font-size: 1.2rem;
    }

    .primary-nav
    {
        top: 72px;
    }
}

@media (max-width: 390px)
{
    .header-main
    {
        padding-inline: 9px;
    }

    .brand img
    {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .brand strong
    {
        font-size: 0.98rem;
    }

    .header-actions .icon-button
    {
        width: 39px;
        height: 39px;
    }
}


/* V36: empty-card, tools, and mobile table corrections */
.visual-tool-grid article:empty,
.visual-tool-grid article:not(:has(strong:not(:empty))),
.ad-slot:empty
{
    display: none !important;
}

.visual-tool-grid article
{
    display: flex;
    min-width: 0;
    gap: 11px;
    align-items: center;
}

.visual-tool-grid article strong
{
    min-width: 0;
    overflow-wrap: anywhere;
}

.visual-tool-icon
{
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    margin: 0;
    place-items: center;
    border-radius: 10px;
    background: #dfeee2;
    color: var(--forest);
    font-size: 1rem;
    font-weight: 900;
}

.visual-table-wrap
{
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.visual-table-wrap table
{
    width: 100%;
    min-width: 680px;
    table-layout: fixed;
    border-collapse: collapse;
}

.visual-table-wrap th,
.visual-table-wrap td
{
    padding: 16px 18px;
    vertical-align: top;
    text-align: left;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

.visual-table-wrap th
{
    white-space: nowrap;
}

.visual-table-wrap th:first-child,
.visual-table-wrap td:first-child
{
    width: 24%;
}

.visual-table-wrap th:nth-child(2):not(:last-child),
.visual-table-wrap td:nth-child(2):not(:last-child)
{
    width: 30%;
}

@media (max-width: 620px)
{
    .visual-tool-grid
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .visual-tool-grid article
    {
        min-height: 64px;
        padding: 12px;
    }

    .visual-table-wrap
    {
        margin-inline: -2px;
        padding-bottom: 8px;
    }

    .visual-table-wrap::after
    {
        content: "Swipe sideways to view the full table →";
        display: block;
        margin-top: 8px;
        color: var(--muted);
        font-size: 0.75rem;
    }

    .visual-table-wrap table
    {
        min-width: 620px;
        font-size: 0.92rem;
    }

    .visual-table-wrap th,
    .visual-table-wrap td
    {
        padding: 13px 14px;
        line-height: 1.55;
    }
}


/*
|--------------------------------------------------------------------------
| V37: MOBILE ARTICLE LAYOUT FIX
|--------------------------------------------------------------------------
*/

html,
body
{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 760px)
{
    body
    {
        min-width: 0;
        font-size: 16px;
    }

    .container,
    .container-narrow
    {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        margin-inline: auto !important;
    }

    .premium-article-header
    {
        padding: 26px 0 34px !important;
    }

    .article-header-grid
    {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    .article-header-image
    {
        order: -1;
        width: 100% !important;
        max-width: 100% !important;
    }

    .article-header-image > img,
    .article-header-image picture,
    .article-header-image picture > img
    {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
        border-radius: 22px !important;
    }

    .article-header-copy
    {
        width: 100% !important;
        max-width: 100% !important;
    }

    .article-header-copy h1
    {
        margin-top: 10px !important;
        font-size: clamp(2.35rem, 12vw, 3.35rem) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.045em !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    .article-deck,
    .article-header-copy > p
    {
        font-size: 1.05rem !important;
        line-height: 1.65 !important;
    }

    .breadcrumbs
    {
        gap: 7px !important;
        margin-bottom: 18px !important;
        overflow-x: auto;
        padding-bottom: 4px;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .breadcrumbs::-webkit-scrollbar
    {
        display: none;
    }

    .article-meta-grid
    {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-top: 22px !important;
    }

    .article-meta-grid div
    {
        min-width: 0;
        padding: 13px !important;
    }

    .article-meta-grid span
    {
        font-size: 0.72rem !important;
    }

    .article-meta-grid strong
    {
        font-size: 0.86rem !important;
        overflow-wrap: anywhere;
    }

    .article-share-row
    {
        align-items: stretch !important;
        gap: 8px !important;
    }

    .article-share-row > span
    {
        width: 100%;
        margin: 0 0 2px !important;
    }

    .article-share-row a,
    .article-share-row button
    {
        min-height: 42px;
        flex: 1 1 auto;
    }

    .premium-article-layout
    {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-block: 34px !important;
    }

    .premium-article-content,
    .article-content,
    .visual-article
    {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .article-content
    {
        font-size: 1rem !important;
        line-height: 1.72 !important;
    }

    .article-content h2,
    .visual-article h2
    {
        font-size: clamp(1.85rem, 9vw, 2.45rem) !important;
        line-height: 1.08 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .article-content h3,
    .visual-article h3
    {
        font-size: 1.35rem !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .visual-tools-grid,
    .visual-facts-grid,
    .visual-checklist
    {
        grid-template-columns: 1fr !important;
    }

    .visual-tools-grid > *,
    .visual-facts-grid > *,
    .visual-checklist > *
    {
        min-width: 0;
    }

    .visual-table-wrap,
    .table-scroll,
    .article-table-wrap
    {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table
    {
        width: 100%;
        min-width: 640px;
        table-layout: auto !important;
    }

    th,
    td
    {
        min-width: 150px;
        padding: 14px 16px !important;
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        vertical-align: top;
    }

    th:first-child,
    td:first-child
    {
        min-width: 145px;
    }

    .premium-author-box,
    .visual-step,
    .visual-quick-answer,
    .visual-final-takeaway,
    .visual-section,
    .sidebar-card
    {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .sticky-sidebar
    {
        display: none !important;
    }

    .site-ad:empty,
    .visual-tools-grid:empty,
    .visual-facts-grid:empty,
    .visual-checklist:empty,
    .skeleton:empty,
    .placeholder:empty
    {
        display: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
}

@media (max-width: 420px)
{
    .container,
    .container-narrow
    {
        width: calc(100% - 22px) !important;
    }

    .article-meta-grid
    {
        grid-template-columns: 1fr !important;
    }

    .article-header-copy h1
    {
        font-size: clamp(2.15rem, 13vw, 2.85rem) !important;
    }
}


/* V38: hide empty article navigation cards */
.article-pagination:empty,
.article-pagination > div:empty
{
    display: none !important;
}

.article-pagination:has(> div:only-child)
{
    grid-template-columns: 1fr;
}

.article-pagination:has(> div:only-child) > div
{
    width: 100%;
}


.category-pagination-compact
{
    padding: 34px 0 24px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #f7faf5, #ffffff);
}

.category-pagination-compact .container
{
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
}

.category-pagination-compact h1
{
    margin: 8px 0 5px;
    font-size: clamp(2rem, 5vw, 3.6rem);
}

.category-pagination-compact p
{
    margin: 0;
    color: var(--muted);
    font-weight: 800;
}

@media (max-width: 680px)
{
    .category-pagination-compact
    {
        padding-top: 20px;
    }

    .category-pagination-compact .container
    {
        align-items: stretch;
        flex-direction: column;
    }
}


.friendly-error-page
{
    min-height: 68vh;
    display: grid;
    place-items: center;
    padding: 48px 16px;
    background:
        radial-gradient(circle at top, rgba(71, 116, 75, 0.12), transparent 42%),
        #f7faf6;
}

.friendly-error-card
{
    width: min(100%, 680px);
    padding: clamp(28px, 6vw, 54px);
    border: 1px solid rgba(45, 79, 49, 0.14);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 70px rgba(39, 73, 43, 0.14);
    text-align: center;
    animation: friendlyErrorIn 0.45s ease-out both;
}

.friendly-error-icon
{
    width: 82px;
    height: 82px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff1ee, #ffe2db);
    color: #a63b28;
    box-shadow: 0 12px 28px rgba(166, 59, 40, 0.16);
    animation: friendlyErrorPulse 1.8s ease-in-out infinite;
}

.friendly-error-icon span
{
    font-size: 2.3rem;
    font-weight: 900;
}

.friendly-error-card h1
{
    margin: 8px 0 14px;
    font-size: clamp(2rem, 6vw, 3.4rem);
    line-height: 1.05;
    color: #27462c;
}

.friendly-error-message
{
    margin: 0 auto;
    max-width: 52ch;
    color: #58655a;
    font-size: 1.08rem;
    line-height: 1.7;
}

.friendly-error-details
{
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #fff7f5;
    color: #7f3528;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.55;
    text-align: left;
}

.friendly-error-actions
{
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

@keyframes friendlyErrorIn
{
    from
    {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }
    to
    {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes friendlyErrorPulse
{
    0%, 100%
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.05);
    }
}

/*
|--------------------------------------------------------------------------
| Site toast notification (newsletter subscribe feedback, etc.)
|--------------------------------------------------------------------------
*/
.site-toast
{
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--forest);
    color: var(--white);
    box-shadow: var(--shadow);
    font-weight: 700;
    font-size: 0.95rem;
    transform: translate(-50%, 24px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    pointer-events: none;
}

.site-toast.is-visible
{
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.site-toast.is-success
{
    background: var(--forest);
    border: 1px solid var(--leaf);
}

.site-toast.is-error
{
    background: #7a2e2e;
    border: 1px solid #b95252;
}

.site-toast-message
{
    line-height: 1.4;
}

.site-toast-close
{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.site-toast-close:hover
{
    background: rgba(255, 255, 255, 0.28);
}

@media (max-width: 520px)
{
    .site-toast
    {
        left: 16px;
        right: 16px;
        bottom: 16px;
        transform: translateY(24px);
    }

    .site-toast.is-visible
    {
        transform: translateY(0);
    }
}

/*
|--------------------------------------------------------------------------
| Honeypot field (spam trap) — visually hidden, not display:none so
| it still registers with simple bots that skip hidden inputs.
|--------------------------------------------------------------------------
*/
.hp-field
{
    position: absolute;
    left: -9999px;
    top: -9999px;
}