/* Reusable Pillar / How-to article template. */
.fdarticle,
.fdarticle * { box-sizing: border-box; }
.fdarticle {
	--fda-forest: #2c4c3b;
	--fda-deep: #18281f;
	--fda-ink: #202723;
	--fda-clay: #d97757;
	--fda-paper: #f9f8f6;
	--fda-sand: #f0ece2;
	--fda-line: rgba(32,39,35,.17);
	background: var(--fda-paper);
	color: var(--fda-ink);
	padding-top: clamp(42px,6vw,84px);
}
.fdarticle-shell { width: min(calc(100% - 40px), 1180px); margin-inline: auto; }
.fdarticle-reading-column { width: min(calc(100% - 40px), 760px); margin-inline: auto; }
.fdarticle-breadcrumbs { margin-bottom: clamp(44px,7vw,88px); font-size: .72rem; line-height: 1.5; }
.fdarticle-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fdarticle-breadcrumbs li:not(:last-child)::after { content: "→"; margin-left: 8px; color: var(--fda-clay); }
.fdarticle-breadcrumbs a { display: inline-flex; align-items: center; min-height: 28px; color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fdarticle-breadcrumbs [aria-current="page"] { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(32,39,35,.65); }
.fdarticle-header { max-width: 960px; margin-bottom: clamp(42px,7vw,82px); }
.fdarticle-eyebrow { margin: 0 0 18px; color: var(--fda-clay); font-size: .7rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.fdarticle-header h1 { max-width: 18ch; margin: 0; color: var(--fda-forest); font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.7rem,7vw,6.25rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.fdarticle-deck { max-width: 740px; margin: 30px 0 0; color: rgba(32,39,35,.78); font-size: clamp(1.08rem,1.7vw,1.35rem); line-height: 1.65; }
.fdarticle-meta { display: flex; flex-wrap: wrap; gap: 9px 20px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--fda-line); color: rgba(32,39,35,.68); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fdarticle-meta span:not(:last-child)::after { content: "/"; margin-left: 20px; color: var(--fda-clay); }
.fdarticle-hero { margin: 0 0 clamp(55px,8vw,100px); }
.fdarticle-hero img { display: block; width: 100%; height: auto; max-height: 720px; object-fit: cover; }
.fdarticle-quick-answer,
.fdarticle-field-note,
.fdarticle-toc,
.fdarticle-related,
.fdarticle-sources { margin: 0 0 clamp(44px,7vw,72px); }
.fdarticle-quick-answer { padding: clamp(24px,4vw,38px); border-left: 5px solid var(--fda-clay); background: var(--fda-sand); }
.fdarticle-quick-answer h2,
.fdarticle-field-note h2 { margin: 0 0 14px; color: var(--fda-forest); font-family: Inter, sans-serif; font-size: .72rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.fdarticle-quick-answer p,
.fdarticle-field-note p { margin: 0; font-size: 1.04rem; line-height: 1.75; }
.fdarticle-quick-answer p + p,
.fdarticle-field-note p + p { margin-top: 1em; }
.fdarticle-toc { padding: 28px 0; border-top: 1px solid var(--fda-line); border-bottom: 1px solid var(--fda-line); }
.fdarticle-toc h2 { margin: 0 0 18px; color: var(--fda-forest); font-family: "Playfair Display", Georgia, serif; font-size: 1.75rem; font-weight: 500; }
.fdarticle-toc ol { columns: 2; column-gap: 42px; margin: 0; padding-left: 1.3rem; }
.fdarticle-toc li { break-inside: avoid; margin: 0 0 10px; padding-left: 6px; }
.fdarticle-toc a { display: inline-flex; align-items: center; min-height: 40px; color: inherit; text-decoration-color: rgba(217,119,87,.7); text-underline-offset: 4px; }
.fdarticle-content { font-size: clamp(1rem,1.2vw,1.1rem); line-height: 1.85; }
.fdarticle-content > * { max-width: 100%; }
.fdarticle-content h2,
.fdarticle-content h3 { scroll-margin-top: 7rem; color: var(--fda-forest); font-family: "Playfair Display", Georgia, serif; font-weight: 500; }
.fdarticle-content h2 { margin: 2em 0 .7em; font-size: clamp(2rem,4.3vw,3.15rem); letter-spacing: -.025em; line-height: 1.12; }
.fdarticle-content h3 { margin: 2em 0 .65em; font-size: clamp(1.45rem,2.8vw,2rem); line-height: 1.25; }
.fdarticle-content p,
.fdarticle-content ul,
.fdarticle-content ol,
.fdarticle-content blockquote,
.fdarticle-content figure,
.fdarticle-content .wp-block-table { margin-top: 0; margin-bottom: 1.5em; }
.fdarticle-content ul,
.fdarticle-content ol { padding-left: 1.45em; }
.fdarticle-content li + li { margin-top: .5em; }
.fdarticle-content a { color: var(--fda-forest); text-decoration-color: var(--fda-clay); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fdarticle-content img { max-width: 100%; height: auto; }
.fdarticle-content figcaption { margin-top: 8px; color: rgba(32,39,35,.67); font-size: .78rem; line-height: 1.5; }
.fdarticle-content blockquote { margin-inline: 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--fda-clay); color: var(--fda-forest); font-family: "Playfair Display", Georgia, serif; font-size: 1.35rem; line-height: 1.55; }
.fdarticle-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fdarticle-content table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9rem; line-height: 1.5; }
.fdarticle-content > table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fdarticle-content th,
.fdarticle-content td { padding: 12px 14px; border: 1px solid var(--fda-line); text-align: left; vertical-align: top; }
.fdarticle-content th { background: var(--fda-sand); color: var(--fda-forest); }
.fdarticle-content .is-style-fourdeers-callout { margin: 2em 0; padding: clamp(22px,4vw,34px); border: 1px solid var(--fda-line); background: #fff; box-shadow: inset 5px 0 0 var(--fda-forest); }
.fdarticle-field-note { padding: clamp(26px,4vw,42px); border-top: 1px solid var(--fda-clay); border-bottom: 1px solid var(--fda-clay); background: rgba(240,236,226,.55); }
.fdarticle-related,
.fdarticle-sources { padding-top: clamp(38px,6vw,58px); border-top: 1px solid var(--fda-line); }
.fdarticle-related h2,
.fdarticle-sources h2 { margin: 0 0 24px; color: var(--fda-forest); font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.8rem,3.5vw,2.5rem); font-weight: 500; }
.fdarticle-related ul { margin: 0; padding: 0; list-style: none; }
.fdarticle-related li { border-bottom: 1px solid var(--fda-line); }
.fdarticle-related a { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; color: inherit; font-weight: 700; text-decoration: none; }
.fdarticle-sources ol { margin: 0; padding-left: 1.35rem; }
.fdarticle-sources li + li { margin-top: 10px; }
.fdarticle-sources a { display: inline-flex; align-items: center; min-height: 32px; color: inherit; overflow-wrap: anywhere; text-decoration-color: var(--fda-clay); text-underline-offset: 3px; }
.fdarticle-cta { margin: 0 0 clamp(52px,8vw,90px); padding: clamp(28px,5vw,48px); background: var(--fda-forest); color: #fff; }
.fdarticle-cta p { margin: 0 0 12px; color: rgba(255,255,255,.72); font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.fdarticle-cta a { display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #fff; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.55rem,3.7vw,2.5rem); text-decoration: none; }
.fdarticle-footer { margin-top: clamp(70px,10vw,130px); padding: clamp(44px,7vw,72px) 0; background: var(--fda-sand); }
.fdarticle-footer p { margin: 0 0 18px; color: rgba(32,39,35,.66); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.fdarticle-footer nav { display: flex; flex-wrap: wrap; gap: 14px 38px; }
.fdarticle-footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fda-forest); font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.45rem,3vw,2.1rem); text-decoration-color: var(--fda-clay); text-underline-offset: 5px; }
.fdarticle-footer .fdarticle-edit { margin-top: 24px; }
.fdarticle a:focus-visible { outline: 3px solid var(--fda-clay); outline-offset: 4px; }
@media (max-width: 680px) {
	.fdarticle { padding-top: 30px; }
	.fdarticle-shell,
	.fdarticle-reading-column { width: min(calc(100% - 32px), 760px); }
	.fdarticle-breadcrumbs { margin-bottom: 42px; }
	.fdarticle-breadcrumbs li:last-child { display: none; }
	.fdarticle-meta { display: grid; gap: 7px; }
	.fdarticle-meta span::after { display: none; }
	.fdarticle-toc ol { columns: 1; }
	.fdarticle-content table { min-width: 520px; }
}
@media (prefers-reduced-motion: reduce) {
	.fdarticle * { scroll-behavior: auto !important; }
}