.nf-article { background: var(--color-cream-warm, #faf6ef); }
.nf-article-container { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }
.nf-article-header { padding: clamp(7rem, 10vw, 9rem) 0 2.5rem; background: #0f2419; color: #fff; }
.nf-article-header .nf-article-container { max-width: 900px; }
.nf-article-kicker { font-size: .8rem; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 1.3rem; color: #e8dece; }
.nf-article-kicker a { color: inherit; text-decoration: none; }
.nf-article-kicker span { padding: 0 .6rem; }
.nf-article-header h1 { font: 600 clamp(2.7rem, 5.5vw, 5.2rem)/1.04 var(--font-display, Georgia); max-width: 850px; margin-bottom: 1.4rem; }
.nf-article-meta { color: #f2ede5; font-size: .9rem; line-height: 1.6; display: flex; align-items: center; gap: .65rem; }
.nf-article-meta a { color: #fff; text-underline-offset: 3px; }
.nf-article-byline-photo { display: block; width: 2.8rem; height: 2.8rem; flex: none; }
.nf-article-byline-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.nf-article-meta span { margin: 0 .35rem; }
.nf-article-provenance { color: #e8dece; font-size: .85rem; margin: .75rem 0 0; }
.nf-article-hero { max-width: 1120px; margin: 0 auto; background: #e8dece; }
.nf-article-hero-image { display: block; width: 100%; max-height: 500px; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
.nf-article-hero figcaption { padding: .6rem 1.2rem; font-size: .8rem; color: #5c4a36; }
.nf-article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; padding-block: clamp(2.5rem, 6vw, 5rem); }
.nf-article-sidebar { min-width: 0; }
.nf-article-toc { border-top: 3px solid #c4703f; padding: 1.4rem; background: #f1eadd; }
.nf-article-toc p { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1rem; }
.nf-article-toc ol { list-style: decimal; padding-left: 1.2rem; }
.nf-article-toc li { margin: .65rem 0; padding-left: .2rem; line-height: 1.35; }
.nf-article-toc a, .nf-article-end a { color: #1a3a2a; text-underline-offset: 3px; }
.nf-article-main { min-width: 0; max-width: 750px; }
.nf-article-body { font-size: clamp(1.05rem, 1.5vw, 1.17rem); line-height: 1.85; color: #2d2418; }
.nf-article-body p, .nf-article-body ul, .nf-article-body ol, .nf-article-body figure { margin-bottom: 1.35em; }
.nf-article-body p[id] { scroll-margin-top: 6rem; }
.nf-article-body h2, .nf-article-questions h2 { font: 600 clamp(2rem, 3vw, 2.65rem)/1.12 var(--font-display, Georgia); color: #0f2419; margin: 2rem 0 .7rem; scroll-margin-top: 6rem; }
.nf-article-body h3, .nf-article-questions h3 { font: 600 1.65rem/1.2 var(--font-display, Georgia); color: #0f2419; margin: 1.5rem 0 .5rem; }
.nf-article-body ul { list-style: disc; padding-left: 1.6rem; }
.nf-article-body ol { list-style: decimal; padding-left: 1.6rem; }
.nf-article-body img { max-width: 100%; height: auto; border-radius: 4px; }
.nf-article-body a, .nf-article-questions a { color: #85421c; text-decoration: underline; text-underline-offset: 3px; }
.nf-article-questions { border-top: 1px solid #d4c5a9; margin-top: 2.5rem; padding-top: .5rem; }
.nf-article-answer { padding: 1rem 0; border-bottom: 1px solid #e8dece; line-height: 1.7; }
.nf-article-answer h3 { margin: 0 0 .5rem; }
.nf-article-end { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #d4c5a9; }
.nf-article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 2rem; }
.nf-article-tags span { text-transform: uppercase; font-size: .7rem; font-weight: 700; letter-spacing: .12em; margin-right: .5rem; }
.nf-article-tags a, .nf-blog-card-tags a { border: 1px solid #cdbca1; border-radius: 99px; padding: .35rem .7rem; color: #1a3a2a; text-decoration: none; font-size: .75rem; }
.nf-article-tags a:hover, .nf-blog-card-tags a:hover { background: #1a3a2a; color: #fff; }
.nf-author-summary { display: flex; align-items: flex-start; gap: 1.25rem; background: #eee6d9; padding: 1.5rem; margin-top: 2.5rem; }
.nf-author-initial { display: grid; place-items: center; flex: none; width: 4rem; height: 4rem; border-radius: 50%; background: #1a3a2a; color: #f5f0e8; font: 600 1.2rem var(--font-display, Georgia); }
.nf-author-initial img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nf-author-summary p:first-child { text-transform: uppercase; font-size: .7rem; letter-spacing: .12em; }
.nf-author-summary h2 { font: 600 1.8rem var(--font-display, Georgia); color: #0f2419; margin: .25rem 0; }
.nf-author-summary h2 a { color: inherit; }
.nf-author-summary p:last-child { font-size: .9rem; line-height: 1.6; }
.nf-author-summary p:last-child a { color: #85421c; text-underline-offset: 3px; }
.nf-related { background: #f5f0e8; padding: clamp(3rem, 6vw, 5rem) 0; }
.nf-related h2 { font: 600 2.6rem/1.1 var(--font-display, Georgia); color: #0f2419; margin-bottom: 1.5rem; }
.nf-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.nf-related-card { background: #fff; color: #0f2419; text-decoration: none; display: flex; flex-direction: column; }
.nf-related-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.nf-related-placeholder { aspect-ratio: 16/9; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(135deg, #1a3a2a, #4a6d5c); color: #fff; font: 600 1.8rem var(--font-display, Georgia); }
.nf-related-placeholder small { font: 400 .75rem var(--font-body, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: #f1eadd; margin-top: .5rem; }
.nf-related-card-text { padding: 1.3rem; display: grid; gap: .7rem; }
.nf-related-card small { color: #5c4a36; }
.nf-related-card strong { font: 600 1.55rem/1.18 var(--font-display, Georgia); }
.nf-related-card-text > span { color: #85421c; font-size: .85rem; }
.nf-article a:focus-visible, .nf-related a:focus-visible, .nf-blog-archive a:focus-visible, .nf-blog-search :focus-visible, .nf-author-page a:focus-visible { outline: 3px solid #c4703f; outline-offset: 3px; }
@media (min-width: 900px) { .nf-article-layout:has(.nf-article-sidebar) { grid-template-columns: 240px minmax(0, 750px); } .nf-article-toc { position: sticky; top: 6rem; } }
@media (max-width: 700px) { .nf-article-hero-image { aspect-ratio: 4/3; } .nf-related-grid { grid-template-columns: 1fr; } }

/* Tips archive — editorial rhythm adapted to the existing Nature's Friends palette. */
.nf-blog-container { width: min(100% - 2.5rem, 1200px); margin-inline: auto; }
.nf-blog-intro { background: #0f2419; color: #fff; padding: clamp(7.5rem, 10vw, 10rem) 0 clamp(3rem, 5vw, 5rem); }
.nf-blog-intro h1 { font: 600 clamp(2.9rem, 5.2vw, 5.5rem)/1.04 var(--font-display, Georgia); max-width: 950px; margin: .8rem 0 1.1rem; }
.nf-blog-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 600; }
.nf-blog-intro .nf-blog-eyebrow { color: #d4c5a9; }
.nf-blog-lede { color: #e8dece; font-size: 1.1rem; max-width: 650px; line-height: 1.6; }
.nf-blog-search { margin-top: 2rem; max-width: 540px; }
.nf-blog-search label { display: block; font-size: .85rem; margin-bottom: .45rem; }
.nf-blog-search > div { display: flex; background: #fff; padding: .3rem; border-radius: 3px; }
.nf-blog-search input { min-width: 0; flex: 1; padding: .8rem 1rem; color: #0f2419; font: 400 1rem var(--font-body, sans-serif); outline: none; }
.nf-blog-search button { background: #d4c5a9; color: #0f2419; padding: .7rem 1.4rem; font-weight: 600; cursor: pointer; }
.nf-blog-archive { padding: clamp(2rem, 5vw, 4rem) 0 5rem; }
.nf-blog-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.nf-blog-filters a { border: 1px solid #d4c5a9; border-radius: 99px; color: #1a3a2a; padding: .6rem 1rem; text-decoration: none; font-size: .8rem; min-height: 2.6rem; }
.nf-blog-filters a:hover, .nf-blog-filters a[aria-current] { background: #1a3a2a; border-color: #1a3a2a; color: #fff; }
.nf-blog-feature { display: grid; grid-template-columns: 1.12fr 1fr; background: #fff; border: 1px solid #e8dece; margin-bottom: 4.5rem; }
.nf-blog-feature-visual, .nf-blog-feature-visual a { display: block; height: 100%; min-height: 390px; }
.nf-blog-feature-visual img, .nf-blog-card-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-blog-feature-copy { padding: clamp(2rem, 4vw, 4rem); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.nf-blog-feature-copy .nf-blog-eyebrow { color: #85421c; }
.nf-blog-feature-copy h2 { font: 600 clamp(2rem, 3.4vw, 3.5rem)/1.06 var(--font-display, Georgia); margin: .8rem 0 1rem; }
.nf-blog-feature-copy h2 a, .nf-blog-card h3 a { text-decoration: none; color: #0f2419; }
.nf-blog-feature-copy > p:not(.nf-blog-eyebrow) { font-size: .95rem; line-height: 1.7; color: #5c4a36; }
.nf-blog-feature-copy .nf-blog-byline { margin-top: 1.2rem; font-size: .8rem !important; }
.nf-blog-byline a, .nf-blog-card-meta a { color: #1a3a2a; text-underline-offset: 2px; }
.nf-blog-feature-copy .nf-blog-byline span, .nf-blog-card-meta span { padding: 0 .25rem; }
.nf-blog-read { color: #85421c; text-decoration: none; font-size: .84rem; font-weight: 600; margin-top: 1.2rem; }
.nf-blog-read:hover, .nf-blog-feature-copy h2 a:hover, .nf-blog-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nf-blog-section-heading { margin-bottom: 1.7rem; }
.nf-blog-section-heading .nf-blog-eyebrow, .nf-blog-topics .nf-blog-eyebrow { color: #85421c; }
.nf-blog-section-heading h2, .nf-blog-topics h2, .nf-author-coverage h2 { font: 600 clamp(2.2rem, 3.5vw, 3.1rem)/1.1 var(--font-display, Georgia); color: #0f2419; }
.nf-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.nf-blog-card { background: #fff; display: flex; flex-direction: column; border: 1px solid #e8dece; min-width: 0; }
.nf-blog-card-visual { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.nf-blog-card-visual img { transition: transform .25s; }
.nf-blog-card:hover img { transform: scale(1.035); }
.nf-blog-card-content { padding: 1.4rem; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.nf-blog-card-category { color: #85421c; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.nf-blog-card h3 { font: 600 1.75rem/1.13 var(--font-display, Georgia); margin: .6rem 0 .7rem; }
.nf-blog-card-content > p { color: #5c4a36; font-size: .88rem; line-height: 1.6; }
.nf-blog-card-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.nf-blog-card-tags a { font-size: .7rem; padding: .25rem .5rem; }
.nf-blog-card-meta { margin-top: auto; padding-top: 1.2rem; font-size: .76rem; color: #5c4a36; line-height: 1.6; }
.nf-blog-card .nf-blog-read { margin-top: .7rem; }
.nf-blog-illustration { display: flex; align-items: center; justify-content: center; gap: 1.2rem; width: 100%; height: 100%; min-height: 190px; background: radial-gradient(circle at 75% 25%, #607b5e, #1a3a2a 65%); color: #f5f0e8; font: 600 1.6rem/1 var(--font-display, Georgia); }
.nf-blog-illustration-leaf { font: 400 4rem/1 var(--font-display, Georgia); color: #d4c5a9; }
.nf-blog-illustration small { font: 500 .65rem var(--font-body, sans-serif); text-transform: uppercase; letter-spacing: .15em; }
.nf-blog-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin: 3rem 0; }
.nf-blog-pagination .page-numbers { margin: 0; width: auto; min-width: 2.7rem; padding-inline: .8rem; }
.nf-blog-topics { border-top: 1px solid #d4c5a9; padding-top: 3rem; scroll-margin-top: 3rem; }
.nf-blog-topic-list { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }
.nf-blog-topic-list a { background: #fff; color: #1a3a2a; border: 1px solid #e8dece; text-decoration: none; padding: .65rem 1rem; border-radius: 99px; font-size: .82rem; }
.nf-blog-topic-list a:hover { border-color: #1a3a2a; }
.nf-blog-topic-list span { color: #5c4a36; padding-left: .35rem; }
.nf-blog-empty { margin: 2rem 0; }
.nf-author-page { background: linear-gradient(to bottom, #0f2419 0 90px, #faf6ef 90px); padding: clamp(8rem, 11vw, 11rem) 0 clamp(3rem, 6vw, 6rem); }
.nf-author-back { font-size: .82rem; color: #5c4a36; margin-bottom: 3rem; }
.nf-author-back a, .nf-author-coverage a, .nf-author-more a { color: #85421c; text-underline-offset: 3px; }
.nf-author-intro { display: grid; grid-template-columns: minmax(240px, 400px) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); max-width: 1050px; }
.nf-author-photo { aspect-ratio: 1; background: #1a3a2a; overflow: hidden; border-radius: 3px; }
.nf-author-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.nf-author-intro h1 { font: 600 clamp(3rem, 5vw, 5rem)/1 var(--font-display, Georgia); color: #0f2419; margin: .5rem 0 1rem; }
.nf-author-intro p:not(.nf-blog-eyebrow) { font-size: 1.08rem; line-height: 1.7; margin-bottom: 1rem; }
.nf-author-intro a { color: #85421c; text-underline-offset: 3px; }
.nf-author-coverage { border-top: 1px solid #d4c5a9; margin-top: 4rem; padding-top: 3rem; }
.nf-author-coverage ul { margin-top: 1.5rem; max-width: 850px; }
.nf-author-coverage li { border-bottom: 1px solid #e8dece; padding: 1rem 0; display: flex; justify-content: space-between; gap: 1rem; }
.nf-author-coverage li span { color: #5c4a36; white-space: nowrap; }
.nf-author-more { margin-top: 2rem; }
.nf-about-founder { background: #f5f0e8; padding: 0 2.5rem 5rem; }
.nf-about-founder > div { border-top: 1px solid #d4c5a9; padding-top: 3rem; display: flex; justify-content: space-between; gap: 3rem; }
.nf-about-founder a { color: #85421c; }
.nf-about-founder a:focus-visible { outline: 3px solid #c4703f; outline-offset: 3px; }
.nf-about-founder ul { list-style: none; padding: 0; }
.nf-about-founder li + li { margin-top: .75rem; }
@media (max-width: 900px) { .nf-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .nf-blog-feature { grid-template-columns: 1fr; } .nf-blog-feature-visual, .nf-blog-feature-visual a { min-height: 0; height: auto; aspect-ratio: 16/10; } .nf-blog-grid { grid-template-columns: 1fr; } .nf-author-intro { grid-template-columns: 1fr; } .nf-author-photo { max-width: 360px; width: 100%; } .nf-author-coverage li { flex-direction: column; gap: .25rem; } .nf-about-founder { padding-inline: 1.25rem; } .nf-about-founder > div { flex-direction: column; } }