/* Feedough single posts. The brand red is the reader's marker: it marks the heading you reach, then routes you to a tool. */
html { scroll-behavior: smooth; }
::selection { background: #e63946; color: #fff; }

.fdp-post {
  --night: #13110f; --cream: #f4f2ef; --ink: #111; --red: #e63946; --red-deep: #c81e2e; --grey: #686868; --mist: #b3ada6;
  --rule: rgb(17 17 17 / 12%); --ease: cubic-bezier(0.22, 1, 0.36, 1); --pad: 1rem;
  background: #fff;
}
.fdp, .fdp-related { margin-block: 0 !important; }
.fdp > *, .fdp-hero > *, .fdp-hero__text > *, .fdp-article > * { margin-block: 0; }
.fdp { overflow-x: clip; font-family: Inter, system-ui, sans-serif; }

/* Reading progress: runs on the browser's scroll timeline, so no script. */
@supports (animation-timeline: scroll()) {
  .fdp::before {
    content: ""; position: fixed; inset: 0 0 auto; z-index: 1000; height: 3px; background: var(--red);
    transform-origin: 0 50%; animation: fdp-grow linear both; animation-timeline: scroll(root);
  }
}
@keyframes fdp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Hero */
.fdp-hero { background: var(--night); color: #fff; padding: 2rem var(--pad) 2.25rem; }
.fdp-cat { font-size: 0.875rem; font-weight: 600; color: #fff; }
.fdp-cat a { color: inherit; text-decoration: none !important; background: linear-gradient(var(--red) 0 0) no-repeat 0 100% / 100% 2px; padding-bottom: 0.2em; transition: background-size 0.45s var(--ease); }
.fdp-cat .wp-block-post-terms__separator { display: none; }
.fdp-cat a:not(:first-of-type) { display: none; }
.fdp-title {
  margin-block-start: 0.9rem !important; color: #fff; font-family: inherit; font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 2.7vw, 3.5rem); line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance;
}
.fdp-mark {
  background: linear-gradient(var(--red) 0 0) no-repeat 0 96% / 100% 0.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding-bottom: 0.04em; animation: fdp-mark 0.9s 0.15s var(--ease) both;
}
@keyframes fdp-mark { from { background-size: 0 0.1em; } }

.fdp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.9rem; margin-block-start: 1.4rem !important; font-size: 0.875rem; color: var(--mist); }
.fdp-meta > p { margin: 0; }
.fdp-meta .crb-author-reviewed-by-page, .fdp-meta .crb-author { font-size: inherit; color: #fff; }
.fdp-meta a { color: inherit; text-decoration: underline !important; text-decoration-color: rgb(255 255 255 / 45%) !important; text-underline-offset: 0.2em; }
.fdp-meta .crb-post-date { margin: 0; }
.fdp-meta .crb-date { font-size: inherit; color: var(--mist); }
.fdp-meta .category-link-container, .fdp-meta .pipe-char { display: none; }
.fdp-meta .reader-disclosure { flex-basis: 100%; display: block; margin-block-start: 0.3rem; font-size: 0; color: var(--mist); cursor: auto; }
.fdp-meta .disclosure-tooltip { position: static; display: inline; visibility: visible; opacity: 1; width: auto; padding: 0; background: none; color: inherit; font-size: 0.8125rem; line-height: 1.5; box-shadow: none; }
.fdp-meta .disclosure-tooltip::after { content: none; }

/* Article */
.fdp-article { padding: 2rem var(--pad) 3rem; min-width: 0; }
.fdp-article .wp-block-post-content { font-size: 1.0625rem; line-height: 1.65; color: #24211e; }
.fdp-article .wp-block-post-content > * { margin-block: 0 1.25em; }
.fdp-article .wp-block-post-content > :is(p, ul, ol, h2, h3, h4, h5, blockquote) { max-width: 42.5rem; }
.fdp-article .wp-block-post-content > p:first-child { font-size: 1.1875rem; line-height: 1.55; color: var(--ink); }

.fdp-article .wp-block-post-content h2 {
  margin-block: 2.1em 0.65em; scroll-margin-top: 6rem; color: var(--ink); font-family: inherit; font-weight: 700;
  font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.375rem); line-height: 1.14; letter-spacing: -0.03em; text-wrap: balance;
}
.fdp-article .wp-block-post-content h2 strong { font-weight: inherit; }
.fdp-h {
  background: linear-gradient(var(--red) 0 0) no-repeat 0 100% / 100% 0.09em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding-bottom: 0.08em; transition: background-size 0.8s var(--ease);
}
.fdp-js .fdp-article .wp-block-post-content h2:not(.is-marked) .fdp-h { background-size: 0 0.09em; }
.fdp-article .wp-block-post-content h3 { margin-block: 1.8em 0.5em; scroll-margin-top: 6rem; color: var(--ink); font-family: inherit; font-weight: 700; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.018em; }
.fdp-article .wp-block-post-content h3 strong, .fdp-article .wp-block-post-content h4 strong { font-weight: inherit; }
.fdp-article .wp-block-post-content h4 { margin-block: 1.6em 0.4em; color: var(--ink); font-family: inherit; font-weight: 700; font-size: 1.125rem; }

.fdp-article .wp-block-post-content a:not(.wp-block-button__link, :has(img)) {
  color: var(--red-deep); text-decoration: none !important;
  background: linear-gradient(var(--red) 0 0) no-repeat 0 100% / 0% 3px, linear-gradient(currentColor 0 0) no-repeat 0 100% / 100% 1px;
  padding-bottom: 0.08em; transition: background-size 0.4s var(--ease);
}
@media (hover: hover) { .fdp-article .wp-block-post-content a:not(.wp-block-button__link, :has(img)):hover { background-size: 100% 3px, 100% 1px; } }

.fdp-article .wp-block-post-content :is(ul, ol):not(.lwptoc *) { padding-inline-start: 0; list-style: none; }
.fdp-article .wp-block-post-content :is(ul, ol):not(.lwptoc *) ul, .fdp-article .wp-block-post-content :is(ul, ol):not(.lwptoc *) ol { margin-block: 0.5em 0; }
.fdp-article .wp-block-post-content li:not(.lwptoc *) { position: relative; padding-inline-start: 1.5em; margin-block-end: 0.55em; }
.fdp-article .wp-block-post-content ul > li:not(.lwptoc *)::before { content: ""; position: absolute; left: 0.1em; top: 0.8em; width: 0.8em; height: 2px; background: var(--red); }
.fdp-article .wp-block-post-content ol { counter-reset: fdp; }
.fdp-article .wp-block-post-content ol > li:not(.lwptoc *) { counter-increment: fdp; }
.fdp-article .wp-block-post-content ol > li:not(.lwptoc *)::before { content: counter(fdp); position: absolute; left: 0; color: var(--red-deep); font-weight: 700; font-size: 0.9em; font-variant-numeric: tabular-nums; }

.fdp-article blockquote { margin-inline: 0; padding: 0.1em 0 0.1em 1.2em; border: 0; border-inline-start: 3px solid var(--red); color: var(--ink); font-size: 1.3125rem; line-height: 1.45; letter-spacing: -0.01em; }
.fdp-article blockquote p { margin: 0 0 0.5em; }
.fdp-article .wp-block-post-content img { max-width: 100%; height: auto; border-radius: 10px; }
.fdp-article figure { margin-inline: 0; }
/* Old diagrams are white-backed at mixed widths: one warm plate makes them read as a set. */
.fdp-article .wp-block-post-content > .wp-block-image { padding: 1rem; border-radius: 10px; background: var(--cream); text-align: center; }
.fdp-article .wp-block-post-content > .wp-block-image img { border-radius: 4px; mix-blend-mode: multiply; }
.fdp-article figcaption { margin-block-start: 0.6em; color: var(--grey); font-size: 0.875rem; line-height: 1.45; text-align: left; }
.fdp-article .wp-block-table { overflow-x: auto; }
.fdp-article table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.fdp-article :is(th, td) { padding: 0.7em 0.85em; border: 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.fdp-article thead :is(th, td), .fdp-article tr:first-child th { background: var(--night); color: #fff; font-weight: 600; }
.fdp-article .wp-block-button__link { background: var(--red-deep); color: #fff; border-radius: 6px; font-weight: 600; }

@media (max-width: 47.99rem) {
  .fdp-article .mtr-table tr, .fdp-article .mtr-table tr .mtr-td-tag, .fdp-article .mtr-table tr .mtr-th-tag { background: #fff !important; border-color: var(--rule) !important; color: var(--ink); }
  .fdp-article .mtr-table tr:nth-child(odd), .fdp-article .mtr-table tr:nth-child(odd) .mtr-td-tag, .fdp-article .mtr-table tr:nth-child(odd) .mtr-th-tag { background: var(--cream) !important; }
}

/* In-flow contents: phones and laptops. Wide screens use the rail. */
.fdp-article .lwptoc { margin-block: 2rem !important; width: 100%; }
.fdp-article .lwptoc_i { width: 100%; max-width: none; padding: 1rem 1.25rem !important; border: 0 !important; border-radius: 10px; background: var(--cream) !important; color: var(--ink) !important; box-sizing: border-box; }
.fdp-article .lwptoc_header { margin: 0 !important; display: flex; justify-content: space-between; font-size: 1rem; }
.fdp-article .lwptoc_title { color: var(--ink); font-weight: 700; }
.fdp-article .lwptoc_toggle { color: var(--grey); }
.fdp-article .lwptoc a { color: var(--ink) !important; background: none !important; }
.fdp-article .lwptoc_toggle a { color: var(--red-deep) !important; text-decoration: underline !important; }
.fdp-article .lwptoc_items { margin-block-start: 0.75rem; font-size: 0.9375rem; line-height: 1.5; }
.fdp-article .lwptoc_item_number { color: var(--red-deep); }

/* Ad bays: the slots stay exactly where Ad Inserter puts them. Width and space are reserved so the text does not jump. */
.fdp-article .code-block {
  margin-block: 2.75rem !important; padding-block: 0.65rem 1.25rem; min-height: 19.5rem; box-sizing: border-box;
  border-block: 1px solid var(--rule); text-align: center; clear: both;
}
.fdp-article .code-block::before, .fdp-side #advertside::before {
  content: "Advertisements"; display: block; margin-block-end: 0.65rem; color: var(--grey);
  font: 500 0.6875rem/1.2 Inter, system-ui, sans-serif; text-align: center;
}
.fdp-article .code-block:has(ins[data-ad-status="filled"]) { min-height: 0; }
.fdp-article .code-block:has(ins[data-ad-status="unfilled"]), .fdp-article .code-block:has(ins[data-ad-status="unfill-optimized"]) { display: none; }
.fdp-side { padding: 0 var(--pad) 2.5rem; }
.fdp-side #advertside { min-height: 20rem; }

/* Author box */
.fdp-article .cpg-author-box { flex-direction: row; align-items: center; gap: 1.25rem; margin-block-start: 3rem; padding: 1.25rem 1.5rem; border: 0; border-radius: 10px; background: var(--cream); box-shadow: none; text-align: left; }
.fdp-article .cpg-author-box, .fdp-article .cpg-author-box * { font-family: Inter, system-ui, sans-serif !important; }
.fdp-article .cpg-author-box-avatar-img { width: 72px !important; height: 72px !important; }
.fdp-article .cpg-author-box-name { margin: 0 0 0.3rem; font-size: 1.125rem; letter-spacing: -0.015em; }
.fdp-article .cpg-author-box-name a { color: var(--ink) !important; background: none !important; }

/* Tool route */
.fdp-route { margin-block-start: 3.5rem !important; padding: 1.75rem 1.25rem 1.5rem; border-top: 3px solid var(--red); border-radius: 10px; background: var(--night); color: #fff; }
.fdp-route__title { margin: 0; color: #fff; font-family: inherit; font-weight: 700; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.03em; }
.fdp-route__head p { margin: 0.4rem 0 0; color: var(--mist); font-size: 0.9375rem; }
.fdp-route__list { position: relative; margin: 1.25rem 0 0; padding: 0 0 0 1.5rem; list-style: none; }
.fdp-route__list::before { content: ""; position: absolute; left: 0; top: 0; bottom: 2rem; width: 2px; background: var(--red); }
.fdp-route__list li { position: relative; }
.fdp-route__list li::before { content: ""; position: absolute; left: -1.5rem; top: 0; width: 1.25rem; height: 50%; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); border-bottom-left-radius: 0.75rem; }
.fdp-route__list a { position: relative; display: grid; grid-template-columns: 1fr 1.25rem; align-items: center; gap: 0.15rem 1rem; padding: 0.8rem 0; color: #fff; text-decoration: none !important; }
.fdp-route__list li + li a { border-top: 1px solid rgb(255 255 255 / 12%); }
.fdp-route__name { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.fdp-route__name span { background: linear-gradient(var(--red) 0 0) no-repeat 0 100% / 0% 2px; padding-bottom: 0.15em; transition: background-size 0.45s var(--ease); }
.fdp-route__desc { grid-row: 2; color: var(--mist); font-size: 0.9375rem; line-height: 1.4; }
.fdp-route__list svg { grid-column: 2; grid-row: 1 / 3; width: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; transition: translate 0.45s var(--ease); }
.fdp-route__all { display: inline-block; margin-block-start: 0.75rem; padding-block: 0.35em; color: #fff; font-size: 0.875rem; text-underline-offset: 0.25em; }
@media (hover: hover) {
  .fdp-route__list a:hover .fdp-route__name span { background-size: 100% 2px; }
  .fdp-route__list a:hover svg { translate: 6px 0; }
  .fdp-cat a:hover { background-size: 100% 4px; }
}
.fdp-route__list a:focus-visible .fdp-route__name span { background-size: 100% 2px; }
.fdp-route__list a:focus-visible svg { translate: 6px 0; }
.fdp-post a:focus-visible, .fdp-post button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

/* Related posts */
.fdp-related { padding: 2.5rem var(--pad) 3rem; background: var(--cream); }
.fdp-related .arp-related-posts { --arp-bg: transparent; --arp-border: var(--rule); --arp-text: var(--ink); max-width: 85rem; margin-inline: auto; }
.fdp-post .fdp-related .arp-related-posts--horizontal { padding: 0; border: 0; border-radius: 0; background: none; }
.fdp-post .wp-site-blocks > footer { margin-block-start: 0; }
.fdp-related .arp-section__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); column-gap: 2rem; }
.fdp-related .arp-section__item:nth-child(-n + 3) { border-top: 0; }
.fdp-related .arp-section__title { padding: 0; border: 0; font-size: 1.5rem; letter-spacing: -0.025em; }

/* Rail: only on wide screens */
.fdp-toc { display: none; }

@media (min-width: 48rem) {
  .fdp-post { --pad: 2rem; }
  .fdp-article .wp-block-post-content { font-size: 1.125rem; line-height: 1.7; }
  .fdp-article .wp-block-post-content > p:first-child { font-size: 1.25rem; }
  .fdp-article, .fdp-side { max-width: 45.5rem; margin-inline: auto; box-sizing: content-box; }
  .fdp-hero { padding-inline: max(var(--pad), calc((100% - 45.5rem) / 2)); }
  .fdp-route { padding: 2rem 2.25rem 1.75rem; }
  .fdp-route__title { font-size: 2rem; }
}

@media (min-width: 64rem) {
  .fdp {
    --side: clamp(300px, 24vw, 336px); --edge: clamp(1.5rem, 3vw, 2.5rem);
    display: grid; grid-template-rows: auto 1fr;
    grid-template-columns: var(--edge) 0 0 minmax(0, 728px) minmax(2rem, 1fr) var(--side) var(--edge);
  }
  .fdp-hero { grid-column: 1 / 5; grid-row: 1; display: grid; grid-template-columns: subgrid; padding: clamp(2.5rem, 4.6vw, 4.25rem) 0; }
  .fdp-hero__text { grid-column: 2 / 5; grid-row: 1; align-self: center; padding-inline-end: 2.5rem; }
  .fdp-title { font-size: clamp(2.25rem, 0.2rem + 3.6vw, 3.5rem); }
  .fdp-toc { grid-column: 2; grid-row: 2; }
  .fdp-article { grid-column: 4; grid-row: 2; max-width: none; margin: 0; padding: 3rem 0 4.5rem; }
  .fdp-side { grid-column: 6; grid-row: 1 / 3; max-width: none; margin: 0; padding: 2rem 0 3rem; }
  .fdp-side #advertside { min-height: 37.5rem; }
  .fdp-related { padding: 3.5rem max(var(--pad), calc((100% - 85rem) / 2)) 4.5rem; }
}

@media (min-width: 85rem) {
  .fdp { grid-template-columns: minmax(var(--edge), 1fr) 200px 3rem 728px 3rem var(--side) minmax(var(--edge), 1fr); }
  .fdp-title { font-size: 3.5rem; }
  .fdp-article .lwptoc { display: none; }
  .fdp-toc { display: block; position: sticky; top: 5.5rem; align-self: start; margin-block-start: 3.25rem !important; font-size: 0.875rem; }
  .fdp-toc__title { margin: 0 0 0.75rem; color: var(--ink); font-weight: 700; font-size: 0.875rem; }
  .fdp-toc ol { --y: 0px; --h: 0px; position: relative; max-height: calc(100vh - 9rem); margin: 0; padding: 0 0 0 0.875rem; overflow-y: auto; list-style: none; scrollbar-width: none; box-shadow: inset 1px 0 0 var(--rule); }
  .fdp-toc ol::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: var(--h); background: var(--red); translate: 0 var(--y); transition: translate 0.5s var(--ease), height 0.5s var(--ease); }
  .fdp-toc a { display: block; padding: 0.3rem 0; color: var(--grey); line-height: 1.35; text-decoration: none !important; transition: color 0.25s, translate 0.45s var(--ease); }
  .fdp-toc a[aria-current] { color: var(--ink); font-weight: 600; }
  .fdp-toc a:hover { color: var(--ink); translate: 3px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fdp::before { display: none; }
  .fdp-mark { animation: none; }
  .fdp-h, .fdp-toc a, .fdp-toc ol::before, .fdp-route__list svg, .fdp-route__name span { transition: none; }
  .fdp-js .fdp-article .wp-block-post-content h2:not(.is-marked) .fdp-h { background-size: 100% 0.09em; }
}