@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap");

:root {
  --blog-paper: #f3f0e7;
  --blog-panel: #faf8f1;
  --blog-ink: #1b3730;
  --blog-muted: #66766e;
  --blog-line: #d7ded5;
  --blog-moss: #2b594b;
  --blog-rust: #a95334;
  --blog-sun: #e4bd73;
}

html:has(.blog-article-page),
body:has(.blog-article-page),
body:has(.blog-article-page) main {
  background: var(--blog-paper) !important;
}

body:has(.blog-article-page) {
  color: var(--blog-ink) !important;
  font-family: "DM Sans", sans-serif !important;
}

.blog-article-page h1,
.blog-article-page h2,
.blog-article-page h3,
.blog-article-page h4,
.blog-article-page .font-serif {
  font-family: Fraunces, Georgia, serif !important;
  color: var(--blog-ink) !important;
  letter-spacing: -.035em;
}

/* Preserve the sidebar's intended light labels on dark green header bars. */
.blog-article-page .blog-related-sidebar h3.text-white {
  color: #fff !important;
}

body:has(.blog-article-page) .site-header {
  color: var(--blog-ink) !important;
  background: var(--blog-paper) !important;
  border-bottom: 1px solid var(--blog-line);
  box-shadow: none !important;
}

body:has(.blog-article-page) .site-header a,
body:has(.blog-article-page) .site-header summary,
body:has(.blog-article-page) .site-header button { color: var(--blog-ink) !important; }
body:has(.blog-article-page) .site-header [class~="text-white/60"] { color: var(--blog-muted) !important; }
body:has(.blog-article-page) .site-header a:hover,
body:has(.blog-article-page) .site-header summary:hover { color: var(--blog-rust) !important; }
body:has(.blog-article-page) .site-header .bg-golf-green {
  background: var(--blog-moss) !important;
  color: var(--blog-panel) !important;
  border-radius: 0 !important;
}
body:has(.blog-article-page) .site-explore-menu {
  background: var(--blog-panel) !important;
  border-color: var(--blog-line) !important;
  box-shadow: 0 10px 24px rgba(27,55,48,.1) !important;
}
body:has(.blog-article-page) .mobile-menu { background: var(--blog-ink) !important; }
body:has(.blog-article-page) footer { background: #142b26 !important; }

.blog-article-page { color: var(--blog-ink); min-width: 0; }
.blog-reading-progress {
  position: fixed;
  z-index: 60;
  inset: 0 auto auto 0;
  height: 3px;
  width: 0;
  background: var(--blog-rust);
  transition: width .1s linear;
}

/* Keep the existing article metadata and real featured-image data, but turn
   the old full-bleed hero into a compact editorial masthead. */
.blog-article-page .editorial-hero {
  position: relative !important;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  padding: 34px max(24px, calc((100% - 1152px) / 2)) 42px !important;
  overflow: hidden;
  background: var(--blog-paper) !important;
}
.blog-article-page .editorial-hero-media {
  position: relative !important;
  inset: auto !important;
  display: block;
  flex: 0 0 36%;
  width: 36% !important;
  height: 228px !important;
  object-fit: cover;
  border: 1px solid var(--blog-line);
}
.blog-article-page .editorial-hero > .absolute { display: none !important; }
.blog-article-page .editorial-hero-content {
  position: static !important;
  z-index: auto !important;
  display: block;
  flex: 1;
  min-width: 0;
}
.blog-article-page .editorial-hero-content > div {
  width: 100%;
  max-width: none !important;
  padding: 0 !important;
}
.blog-article-page .editorial-hero nav {
  margin: 0 0 25px !important;
  color: var(--blog-muted) !important;
  font: 500 10px/1.4 "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.blog-article-page .editorial-hero nav a { color: var(--blog-moss) !important; }
.blog-article-page .editorial-hero nav span { color: var(--blog-muted) !important; }
.blog-article-page .editorial-hero h1 {
  max-width: 760px !important;
  margin: 0 0 22px !important;
  color: var(--blog-ink) !important;
  font-size: clamp(38px, 5.2vw, 72px) !important;
  font-weight: 600 !important;
  line-height: .97 !important;
  letter-spacing: -.055em !important;
  text-shadow: none !important;
  overflow-wrap: anywhere;
}
.blog-article-page .editorial-hero .flex.flex-wrap {
  gap: 7px 18px !important;
  color: var(--blog-muted);
  font: 500 10px/1.4 "DM Mono", monospace;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.blog-article-page .editorial-hero .flex.flex-wrap > div {
  padding: 0 !important;
  color: var(--blog-muted) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.blog-article-page .editorial-hero .flex.flex-wrap > div svg { display: none; }

.blog-article-page > .bg-gray-50 {
  padding: 14px 0 !important;
  color: var(--blog-muted);
  background: #e9eee7 !important;
  border-top: 1px solid var(--blog-line);
  border-bottom: 1px solid var(--blog-line) !important;
}
.blog-article-page .max-w-7xl { max-width: 1152px; }
.blog-ad-label {
  margin: 0 0 10px;
  color: var(--blog-muted);
  font: 500 9px/1.4 "DM Mono", monospace;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}
.blog-ad-label span { letter-spacing: .02em; text-transform: none; }

.blog-article-page > .max-w-6xl {
  max-width: 1152px !important;
  margin: 0 auto !important;
  padding: 42px 24px 78px !important;
}
.blog-article-page > .max-w-6xl > .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start;
  gap: clamp(28px, 4vw, 58px) !important;
}
@media (min-width: 1024px) {
  .blog-article-page > .max-w-6xl > .grid {
    grid-template-columns: minmax(0, 1.8fr) minmax(260px, .82fr) !important;
  }
}
.blog-article-page .blog-post-article,
.blog-article-page article.lg\:col-span-2 {
  min-width: 0;
  overflow: visible !important;
  border: 1px solid var(--blog-line);
  border-radius: 0 !important;
  background: var(--blog-panel) !important;
  box-shadow: 0 8px 26px rgba(27,55,48,.045) !important;
}
.blog-article-page .blog-post-article > div,
.blog-article-page article.lg\:col-span-2 > div {
  padding: clamp(24px, 4.3vw, 56px) !important;
}

.blog-article-page .blog-article-content {
  max-width: 72ch;
  color: var(--blog-ink);
  font: 400 17px/1.78 "DM Sans", sans-serif;
  overflow-wrap: anywhere;
}
.blog-article-page .blog-article-content > * + * { margin-top: 1.2em; }
.blog-article-page .blog-article-content h2,
.blog-article-page .blog-article-content h3,
.blog-article-page .blog-article-content h4 {
  margin: 2.2em 0 .7em;
  color: var(--blog-ink) !important;
  line-height: 1.12;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.blog-article-page .blog-article-content h2 { font-size: clamp(29px, 3.5vw, 43px); }
.blog-article-page .blog-article-content h3 { font-size: clamp(23px, 2.7vw, 32px); }
.blog-article-page .blog-article-content h4 { font-size: 21px; }
.blog-article-page .blog-article-content p,
.blog-article-page .blog-article-content li { color: var(--blog-ink); }
.blog-article-page .blog-article-content ul,
.blog-article-page .blog-article-content ol { padding-left: 1.5em; }
.blog-article-page .blog-article-content li + li { margin-top: .45em; }
.blog-article-page .blog-article-content a {
  color: var(--blog-moss);
  text-decoration-color: #9db4a5;
  text-underline-offset: .18em;
}
.blog-article-page .blog-article-content a:hover { color: var(--blog-rust); }
.blog-article-page .blog-article-content blockquote {
  margin: 2em 0;
  padding: .2em 0 .2em 1.25em;
  border-left: 3px solid var(--blog-sun);
  color: var(--blog-muted);
}
.blog-article-page .blog-article-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .9em;
}
.blog-article-page .blog-article-content th,
.blog-article-page .blog-article-content td {
  min-width: 110px;
  padding: 11px 13px;
  border: 1px solid var(--blog-line);
  text-align: left;
  vertical-align: top;
}
.blog-article-page .blog-article-content th { background: #e9eee7; font-weight: 700; }
.blog-article-page .blog-article-content pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 18px;
  color: #f3f0e7;
  background: var(--blog-ink);
  font: 13px/1.65 "DM Mono", monospace;
}
.blog-article-page .blog-article-content :not(pre) > code {
  padding: .12em .35em;
  color: var(--blog-rust);
  background: #f0e9d9;
  font: .88em "DM Mono", monospace;
  overflow-wrap: anywhere;
}
.blog-article-page .blog-article-content img,
.blog-article-page .blog-article-content video,
.blog-article-page .blog-article-content iframe {
  max-width: 100%;
  height: auto;
}
.blog-article-page .blog-article-content figure { margin: 2.25rem auto; }
.blog-article-page .blog-article-content figure img,
.blog-article-page .blog-article-content figure video {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 0 !important;
}
.blog-article-page .blog-article-content figcaption {
  margin: 11px auto 0;
  max-width: 62ch;
  color: var(--blog-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.blog-article-page .blog-article-content section[data-blog-section] {
  margin: 2.5rem 0;
  padding: 0;
}
.blog-article-page .blog-article-content section[data-blog-section] > h2:first-child,
.blog-article-page .blog-article-content section[data-blog-section] > h3:first-child {
  margin-top: 0;
}
.blog-article-page .blog-article-content blockquote.blog-focus-callout {
  margin: 2rem 0;
  padding: 1.1rem 1.35rem 1.1rem 1.5rem;
  border: 0;
  border-left: 3px solid var(--blog-moss);
  background: #e9eee7;
  color: var(--blog-ink);
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.5;
}
.blog-article-page .blog-article-content blockquote.blog-focus-callout > :first-child { margin-top: 0; }
.blog-article-page .blog-article-content blockquote.blog-focus-callout > :last-child { margin-bottom: 0; }
.blog-article-page .blog-article-content section[data-blog-section] > p.text-xs {
  margin: 10px auto 0;
  color: var(--blog-muted);
  font: 10px/1.5 "DM Mono", monospace;
  text-align: center;
}

.blog-article-page .bg-gradient-to-br.from-golf-blue\/5 {
  padding: 25px 28px !important;
  margin: 0 0 36px !important;
  overflow: visible !important;
  background: #e9eee7 !important;
  border: 0 !important;
  border-left: 3px solid var(--blog-moss) !important;
  border-radius: 0 !important;
}
.blog-article-page .bg-gradient-to-br.from-golf-blue\/5 .absolute { display: none; }
.blog-article-page .bg-gradient-to-br.from-golf-blue\/5 h2 {
  color: var(--blog-rust) !important;
  font: 500 10px/1.4 "DM Mono", monospace !important;
  letter-spacing: .13em;
}
.blog-article-page .bg-gradient-to-br.from-golf-blue\/5 p {
  margin: 0;
  color: var(--blog-ink);
  font-size: 16px;
  line-height: 1.65;
}
.blog-share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
  padding: 13px 0;
  border-top: 1px solid var(--blog-line);
  border-bottom: 1px solid var(--blog-line);
}
.blog-share-row > span {
  margin-right: auto;
  color: var(--blog-muted);
  font: 500 9px/1 "DM Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.blog-share-row button {
  min-width: 44px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid var(--blog-line);
  border-radius: 0;
  color: var(--blog-ink);
  background: transparent;
  font: 500 11px "DM Mono", monospace;
  cursor: pointer;
}
.blog-share-row button:hover { color: var(--blog-panel); background: var(--blog-moss); border-color: var(--blog-moss); }
.blog-share-row button:focus-visible,
.blog-disclosures summary:focus-visible {
  outline: 3px solid var(--blog-rust);
  outline-offset: 3px;
}

.blog-article-questions {
  margin: 58px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--blog-line);
}
.blog-article-questions h2 {
  margin: 0 0 21px;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
}
.blog-kicker {
  margin: 0 0 12px;
  color: var(--blog-rust);
  font: 500 9px/1.3 "DM Mono", monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.blog-disclosures { border-top: 1px solid var(--blog-line); }
.blog-disclosures details { border-bottom: 1px solid var(--blog-line); }
.blog-disclosures summary {
  position: relative;
  padding: 17px 34px 17px 0;
  color: var(--blog-ink);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.blog-disclosures summary::-webkit-details-marker { display: none; }
.blog-disclosures summary::after {
  content: "+";
  position: absolute;
  top: 15px;
  right: 4px;
  color: var(--blog-rust);
  font: 400 20px/1 "DM Mono", monospace;
}
.blog-disclosures details[open] summary::after { content: "−"; }
.blog-disclosure-answer {
  padding: 0 30px 18px 0;
  color: var(--blog-muted);
  font-size: 14px;
  line-height: 1.7;
}
.blog-disclosure-answer p { margin: 0; white-space: pre-line; }
.blog-disclosure-answer a { display: inline-block; margin-top: 12px; color: var(--blog-moss); font-weight: 600; }
.blog-sponsored-placement { margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--blog-line); }
.blog-sponsored-placement .blog-ad-label { text-align: left; color: var(--blog-rust); }
.blog-sponsored-placement:not(:has(.editorial-premium-cards)) { display: none; }
.blog-article-page .my-12.py-6.border-y {
  margin: 38px 0 0 !important;
  padding: 20px 0 !important;
  border-color: var(--blog-line) !important;
}
.blog-article-page .blog-related-sidebar { min-width: 0; }
.blog-article-page .blog-related-sidebar .sticky-sidebar { position: sticky; top: 24px; }
.blog-article-page .blog-related-sidebar > * { max-width: 100%; }
.blog-article-page .blog-related-sidebar a { overflow-wrap: anywhere; }
.blog-article-page .editorial-sidebar-cta h3 { color: white !important; }

.blog-article-page + section.bg-white,
body:has(.blog-article-page) section.bg-white {
  padding: 72px 24px !important;
  background: var(--blog-ink) !important;
  border-color: var(--blog-ink) !important;
}
body:has(.blog-article-page) section.bg-white > div { max-width: 1152px !important; }
body:has(.blog-article-page) section.bg-white > div > div {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}
body:has(.blog-article-page) section.bg-white h2 { color: var(--blog-paper) !important; font-size: clamp(38px, 5vw, 65px) !important; }
body:has(.blog-article-page) section.bg-white p { color: #c5d1c7 !important; }
body:has(.blog-article-page) section.bg-white a {
  border-radius: 0 !important;
  color: var(--blog-ink) !important;
  background: var(--blog-sun) !important;
  box-shadow: none !important;
  font: 700 11px "DM Mono", monospace !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body:has(.blog-article-page) .max-w-6xl:has(> .bg-gray-50) { padding-top: 20px !important; }
body:has(.blog-article-page) .bg-gray-50.rounded-lg { border-radius: 0 !important; background: #e9eee7 !important; border-color: var(--blog-line) !important; }

@media (max-width: 767px) {
  .blog-article-page .editorial-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding: 22px 20px 25px !important;
  }
  .blog-article-page .editorial-hero-content { order: 0; }
  .blog-article-page .editorial-hero-media {
    order: 1;
    width: 100% !important;
    height: clamp(145px, 42vw, 220px) !important;
    flex: 0 0 auto;
  }
  .blog-article-page .editorial-hero h1 { font-size: clamp(36px, 10vw, 54px) !important; }
  .blog-article-page .editorial-hero nav { margin-bottom: 18px !important; }
  .blog-article-page > .max-w-6xl { padding: 26px 20px 56px !important; }
  .blog-article-page > .max-w-6xl > .grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 34px !important; }
  .blog-article-page .blog-post-article > div,
  .blog-article-page article.lg\:col-span-2 > div { padding: 24px 20px !important; }
  .blog-article-page .blog-article-content { font-size: 16px; line-height: 1.72; }
  .blog-share-row > span { flex-basis: 100%; margin-bottom: 4px; }
  .blog-share-row button { flex: 1; padding-inline: 6px; }
  .blog-article-page > .max-w-6xl .blog-related-sidebar { order: 2; }
  body:has(.blog-article-page) section.bg-white { padding: 54px 22px !important; }
}

@media (max-width: 380px) {
  .blog-share-row { gap: 5px; }
  .blog-share-row > span { flex-basis: 100%; margin-bottom: 4px; }
  .blog-share-row button { flex: 1; padding-inline: 6px; }
  .blog-article-page .editorial-hero { padding-inline: 16px !important; }
  .blog-article-page > .max-w-6xl { padding-inline: 14px !important; }
}