/* Fragranote — Editorial Article Template ("The Newsroom")
   Only loaded on singular posts (see inc/enqueue.php). Builds on the
   existing .fn-prose / .fn-pullquote / .fn-rule primitives in main.css —
   this file is layout + the pieces unique to the magazine template. */

.fn-container--article {
    max-width: 960px;
}

.fn-article {
    padding: 2rem 0 4rem;
}

/* ── Header ────────────────────────────────────────────────────────────────── */

.fn-article__header {
    max-width: 70ch;
    margin-top: 1.5rem;
}

.fn-article__kicker {
    display: inline-block;
    font-family: var(--fn-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--fn-gold-text);
    text-decoration: none;
    margin-bottom: 0.85rem;
}

.fn-article__kicker:hover { text-decoration: underline; }

.fn-article__title {
    font-family: var(--fn-font-heading);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--fn-text);
    margin: 0 0 1rem;
}

.fn-article__dek {
    font-family: var(--fn-font-body);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--fn-text-muted);
    margin: 0 0 1.25rem;
}

.fn-article__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--fn-text-dim);
    margin-bottom: 1.5rem;
}

.fn-article__byline-author {
    color: var(--fn-text);
    font-weight: 600;
    text-decoration: none;
}

.fn-article__byline-author:hover { color: var(--fn-gold-text); }

.fn-article__byline-sep { opacity: 0.6; }

.fn-article__header .fn-rule--gold { margin-block: 0 0; }

/* ── Layout: body + sticky TOC ────────────────────────────────────────────── */

.fn-article__layout {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 3rem;
    align-items: start;
    margin-top: 2.5rem;
}

.fn-article__body { min-width: 0; }

.fn-article__figure {
    margin: 0 0 2rem;
    border-radius: var(--fn-radius-lg);
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--fn-surface-2);
}

.fn-article__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ledger-style H2 numbering — a quiet instrument detail instead of plain
   headings, matching the Ledger Table's "the data is the ornament" idea. */
.fn-prose {
    counter-reset: fn-article-h2;
}

.fn-prose h2 {
    counter-increment: fn-article-h2;
    scroll-margin-top: calc(var(--fn-nav-height) + 1.5rem);
}

.fn-prose h2::before {
    content: counter(fn-article-h2, decimal-leading-zero) '  ';
    color: var(--fn-gold-text);
    font-weight: 500;
}

.fn-prose h3 {
    scroll-margin-top: calc(var(--fn-nav-height) + 1.5rem);
}

/* ── Sticky table of contents (desktop) ───────────────────────────────────── */

.fn-article__toc {
    position: sticky;
    top: calc(var(--fn-nav-height) + 1.5rem);
}

/* Hide the whole sidebar (not just its contents) when the article has no
   H2s for article.js to build a TOC from — a short article without
   subheadings shouldn't reserve a blank column. */
.fn-article__toc:has(#fn-article-toc-list:empty) {
    display: none;
}

.fn-article__toc-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fn-text-dim);
    margin-bottom: 0.75rem;
}

#fn-article-toc-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    border-left: 1px solid var(--fn-hairline);
}

#fn-article-toc-list a {
    display: block;
    padding-left: 0.85rem;
    margin-left: -1px;
    border-left: 1px solid transparent;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--fn-text-muted);
    text-decoration: none;
    transition: color var(--fn-ease), border-color var(--fn-ease);
}

#fn-article-toc-list a:hover,
#fn-article-toc-list a[aria-current="true"] {
    color: var(--fn-gold-text);
    border-left-color: var(--fn-gold);
}

@media (max-width: 900px) {
    .fn-article__layout { grid-template-columns: 1fr; }
    .fn-article__toc { display: none; }
}

/* ── Reading-progress hairline ─────────────────────────────────────────────
   Pure CSS via scroll-timeline — no JS, no fallback. Unsupported browsers
   (Firefox/Safari as of 2026) simply never animate the element; it's
   decoration, not something that needs to degrade gracefully. */

.fn-reading-progress {
    position: fixed;
    top: var(--fn-nav-height);
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--fn-gold);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 90;
    pointer-events: none;
}

@supports (animation-timeline: scroll()) {
    .fn-reading-progress {
        animation: fn-reading-progress-fill auto linear;
        animation-timeline: scroll(root);
    }
}

@keyframes fn-reading-progress-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .fn-reading-progress { display: none; }
}

/* ── Footer ────────────────────────────────────────────────────────────────── */

.fn-article__footer {
    max-width: 70ch;
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--fn-hairline);
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.fn-article__footer-title {
    font-family: var(--fn-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.fn-article__sources .fn-prose { font-size: 0.9rem; }

.fn-article__methodology-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    font-family: var(--fn-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fn-text-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--fn-hairline);
    padding-bottom: 0.15rem;
    transition: color var(--fn-ease), border-color var(--fn-ease);
}

.fn-article__methodology-link:hover {
    color: var(--fn-gold-text);
    border-color: var(--fn-gold);
}

.fn-article__prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.fn-article__prevnext-link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius);
    text-decoration: none;
    transition: border-color var(--fn-ease), background-color var(--fn-ease);
}

.fn-article__prevnext-link:hover {
    border-color: var(--fn-gold-border);
    background: var(--fn-gold-dim);
}

.fn-article__prevnext-link--next { text-align: right; align-items: flex-end; }

.fn-article__prevnext-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fn-text-dim);
}

.fn-article__prevnext-title {
    font-family: var(--fn-font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fn-text);
}

@media (max-width: 640px) {
    .fn-article__prevnext { grid-template-columns: 1fr; }
    .fn-article__prevnext-link--next { text-align: left; align-items: flex-start; }
}

/* ── Data-block shortcodes ─────────────────────────────────────────────────── */

/* [fn_top_pick] */
.fn-top-pick {
    position: relative;
    max-width: 420px;
    margin-block: 2rem;
}

.fn-top-pick .fn-frag-card { height: 100%; }

.fn-top-pick__rank {
    position: absolute;
    top: -0.75rem;
    left: -0.75rem;
    z-index: 1;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fn-gold);
    color: #1b1712;
    font-family: var(--fn-font-heading);
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: var(--fn-shadow);
}

.fn-top-pick__verdict {
    margin-top: 0.85rem;
    font-family: var(--fn-font-heading);
    font-style: italic;
    font-size: 1rem;
    color: var(--fn-text-muted);
}

/* [fn_score_table] — built on the shared Ledger Table pattern (main.css) */
.fn-score-table {
    margin-block: 2rem;
    max-width: 70ch;
}

.fn-score-table__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 0.65rem;
}

.fn-score-table__row--head {
    border-bottom: 1px solid var(--fn-hairline);
    padding-bottom: 0.5rem;
}

.fn-score-table__col--name { flex: 1; min-width: 0; font-weight: 600; text-decoration: none; color: var(--fn-text); }
.fn-score-table__col--name:hover { color: var(--fn-gold-text); }
.fn-score-table__col--num { width: 5.5rem; flex-shrink: 0; }

.fn-score-table__row--head .fn-score-table__col--name {
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fn-text-dim);
}

.fn-score-table__sort-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--fn-font-body);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fn-text-dim);
    cursor: pointer;
    text-align: right;
}

.fn-score-table__sort-btn:hover { color: var(--fn-gold-text); }

/* [fn_climate_matrix] */
.fn-climate-matrix-wrap {
    margin-block: 2rem;
    overflow-x: auto;
}

.fn-climate-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.fn-climate-matrix th,
.fn-climate-matrix td {
    padding: 0.65rem 0.85rem;
    text-align: center;
    border-bottom: 1px solid var(--fn-hairline);
    white-space: nowrap;
}

.fn-climate-matrix thead th {
    font-family: var(--fn-font-heading);
    font-weight: 700;
    font-size: 0.82rem;
}

.fn-climate-matrix thead th a { color: var(--fn-text); text-decoration: none; }
.fn-climate-matrix thead th a:hover { color: var(--fn-gold-text); }

.fn-climate-matrix tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--fn-text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fn-climate-matrix__icon { width: 16px; height: 16px; color: var(--fn-gold-text); flex-shrink: 0; }
.fn-climate-matrix__icon svg { width: 100%; height: 100%; }

.fn-climate-matrix td { font-variant-numeric: tabular-nums; font-weight: 700; }
.fn-climate-matrix td[data-level="high"] { color: var(--fn-score-8); }
.fn-climate-matrix td[data-level="mid"]  { color: var(--fn-score-6); }
.fn-climate-matrix td[data-level="low"]  { color: var(--fn-score-4); }
.fn-climate-matrix td[data-level="poor"] { color: var(--fn-score-2); }

/* [fn_vs] */
.fn-vs-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-block: 2rem;
    padding: 1rem 1.5rem;
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius-lg);
    background: var(--fn-surface-2);
    text-decoration: none;
    transition: border-color var(--fn-ease), background-color var(--fn-ease);
    flex-wrap: wrap;
}

.fn-vs-strip:hover {
    border-color: var(--fn-gold-border);
    background: var(--fn-gold-dim);
}

.fn-vs-strip__name {
    font-family: var(--fn-font-heading);
    font-weight: 700;
    color: var(--fn-text);
}

.fn-vs-strip__vs {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--fn-text-dim);
}

.fn-vs-strip__cta {
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--fn-gold-text);
}

@media (max-width: 480px) {
    .fn-vs-strip__cta { margin-left: 0; }
}

/* ==========================================================================
   Journal articles — long-form buying guides
   ========================================================================== */

/* Featured image: spans the full article width above the reading column,
   and only exists when a post actually has an image. */
.fn-container--article > .fn-article__figure {
    margin: 1.75rem 0 0;
    aspect-ratio: auto;
    background: none;
    border-radius: var(--fn-radius-lg);
    overflow: hidden;
}
.fn-container--article > .fn-article__figure img {
    width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;
    border-radius: var(--fn-radius-lg);
}
.fn-article__figure figcaption {
    margin-top: .6rem; font-size: .8rem; color: var(--fn-text-dim); line-height: 1.5;
}

.fn-article__header { margin-bottom: .25rem; }
.fn-article__title { text-wrap: balance; }

/* Reading column rhythm for long guides */
.fn-prose--journal > h2 {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--fn-hairline);
    font-size: clamp(1.45rem, 2.4vw, 1.85rem);
    line-height: 1.2;
    text-wrap: balance;
}
.fn-prose--journal > h3 { font-size: 1.2rem; line-height: 1.3; }
.fn-prose--journal ul,
.fn-prose--journal ol { padding-left: 1.25rem; margin: 0 0 1.25rem; }
.fn-prose--journal li { margin-bottom: .45rem; }
.fn-prose--journal li::marker { color: var(--fn-gold-text); }
.fn-prose--journal strong { color: var(--fn-text); }

/* Plain data tables written into an article (Custom HTML blocks). */
.fn-prose--journal .fn-data-table { overflow-x: auto; margin: 1.5rem 0 1.75rem; border: 1px solid var(--fn-border); border-radius: var(--fn-radius); }
.fn-prose--journal .fn-data-table table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.45; }
.fn-prose--journal .fn-data-table th,
.fn-prose--journal .fn-data-table td { padding: .65rem .85rem; text-align: left; border-bottom: 1px solid var(--fn-border); vertical-align: top; }
.fn-prose--journal .fn-data-table thead th { background: var(--fn-surface-2); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fn-text-muted); }
.fn-prose--journal .fn-data-table tbody tr:last-child td { border-bottom: 0; }

/* Phones: tighter cells, plus an edge shadow on whichever side a wide table
   can still scroll to (the page-coloured covers move with the content and hide
   the shadow once that end is reached). */
@media (max-width: 640px) {
    .fn-prose--journal .fn-data-table {
        --fn-table-edge: rgba(22, 24, 29, .18);
        background:
            linear-gradient(to right, var(--fn-bg) 40%, transparent) left / 1.5rem 100% no-repeat local,
            linear-gradient(to left, var(--fn-bg) 40%, transparent) right / 1.5rem 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, var(--fn-table-edge), transparent) left / .6rem 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, var(--fn-table-edge), transparent) right / .6rem 100% no-repeat scroll;
        background-color: var(--fn-bg);
    }
    :root[data-theme="dark"] .fn-prose--journal .fn-data-table { --fn-table-edge: rgba(0, 0, 0, .7); }
    .fn-prose--journal .fn-data-table table { font-size: .86rem; }
    .fn-prose--journal .fn-data-table th,
    .fn-prose--journal .fn-data-table td { padding: .55rem .6rem; hyphens: auto; }
    .fn-prose--journal .fn-data-table thead th { font-size: .66rem; letter-spacing: .04em; }
}

/* ── Small-screen table of contents ──────────────────────────────────────── */
.fn-article__toc-mobile {
    display: none;
    margin: 0 0 1.75rem;
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius);
    background: var(--fn-surface);
}
.fn-article__toc-mobile summary {
    cursor: pointer; list-style: none;
    padding: .8rem 1rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--fn-text-muted);
    display: flex; justify-content: space-between; align-items: center;
}
.fn-article__toc-mobile summary::-webkit-details-marker { display: none; }
.fn-article__toc-mobile summary::after { content: "+"; font-size: 1.1rem; color: var(--fn-gold-text); }
.fn-article__toc-mobile[open] summary::after { content: "\2212"; }
.fn-article__toc-mobile nav { display: flex; flex-direction: column; padding: 0 1rem .9rem; border-top: 1px solid var(--fn-border); }
.fn-article__toc-mobile nav a { padding: .55rem 0; font-size: .92rem; color: var(--fn-text); text-decoration: none; border-bottom: 1px solid var(--fn-border); }
.fn-article__toc-mobile nav a:last-child { border-bottom: 0; }
@media (max-width: 900px) { .fn-article__toc-mobile { display: block; } }

/* ── Key takeaways (Group block, class "fn-takeaways") ───────────────────── */
.fn-prose .fn-takeaways {
    margin: 0 0 2rem;
    padding: 1.25rem 1.4rem 1.1rem;
    border: 1px solid var(--fn-gold-border);
    border-left: 3px solid var(--fn-gold);
    border-radius: var(--fn-radius);
    background: var(--fn-surface);
}
/* Classic themes wrap group content in .wp-block-group__inner-container, so
   these match the first paragraph with or without that wrapper. */
.fn-prose .fn-takeaways > p:first-child,
.fn-prose .fn-takeaways > .wp-block-group__inner-container > p:first-child {
    margin: 0 0 .6rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--fn-gold-text);
}
.fn-prose .fn-takeaways ul { margin: 0; }
.fn-prose .fn-takeaways li { font-size: .98rem; margin-bottom: .4rem; }
.fn-prose .fn-takeaways p:not(:first-child) { margin: .5rem 0 0; font-size: .98rem; }
.fn-prose .fn-takeaways .wp-block-group__inner-container > :last-child { margin-bottom: 0; }

/* ── Callouts (Group block, "fn-callout fn-callout--tip|note|warning") ───── */
.fn-prose .fn-callout {
    margin: 1.75rem 0;
    padding: 1rem 1.25rem;
    border-radius: var(--fn-radius);
    border: 1px solid var(--fn-border);
    background: var(--fn-surface-2);
}
.fn-prose .fn-callout p { margin: 0 0 .5rem; font-size: .96rem; }
.fn-prose .fn-callout p:last-child { margin-bottom: 0; }
.fn-prose .fn-callout p:first-child strong:first-child { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .2rem; }
.fn-prose .fn-callout--tip     { border-left: 3px solid var(--fn-score-8); }
.fn-prose .fn-callout--tip p:first-child strong:first-child { color: var(--fn-score-8); }
.fn-prose .fn-callout--note    { border-left: 3px solid var(--fn-gold); }
.fn-prose .fn-callout--note p:first-child strong:first-child { color: var(--fn-gold-text); }
.fn-prose .fn-callout--warning { border-left: 3px solid var(--fn-danger); }
.fn-prose .fn-callout--warning p:first-child strong:first-child { color: var(--fn-danger); }

/* ── [fn_quick_picks] ────────────────────────────────────────────────────── */
.fn-quick-picks { margin: 1.5rem 0 2.25rem; overflow-x: auto; border: 1px solid var(--fn-border); border-radius: var(--fn-radius-lg); }
.fn-quick-picks table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.4; }
.fn-quick-picks caption {
    caption-side: top; text-align: left;
    padding: .85rem 1rem; border-bottom: 1px solid var(--fn-border);
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fn-text-muted);
    background: var(--fn-surface-2);
}
.fn-quick-picks th { padding: .6rem 1rem; text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fn-text-dim); border-bottom: 1px solid var(--fn-border); }
.fn-quick-picks td { padding: .75rem 1rem; border-bottom: 1px solid var(--fn-border); vertical-align: middle; }
.fn-quick-picks tbody tr:last-child td { border-bottom: 0; }
.fn-quick-picks td a { color: var(--fn-text); font-weight: 600; text-decoration: none; }
.fn-quick-picks td a:hover { color: var(--fn-gold-text); }
.fn-quick-picks td small { display: block; font-size: .76rem; color: var(--fn-gold-text); margin-top: .1rem; }
.fn-quick-picks__rank { width: 2.25rem; font-family: var(--fn-font-heading); font-weight: 700; color: var(--fn-text-dim); font-variant-numeric: tabular-nums; }
.fn-quick-picks__num { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fn-quick-picks td.fn-quick-picks__num small { display: inline; margin: 0; color: var(--fn-text-dim); font-weight: 500; }
.fn-quick-picks__price .fn-frag-card__price { margin: 0; padding: 0; font-size: .78rem; color: var(--fn-text-dim); white-space: nowrap; }
.fn-quick-picks__price .fn-price-item strong { font-family: var(--fn-font-body); font-size: .88rem; font-weight: 700; }
@media (max-width: 640px) {
    .fn-quick-picks__hide-sm { display: none; }
    .fn-quick-picks td, .fn-quick-picks th { padding-inline: .55rem; }
    .fn-quick-picks__rank { width: 1.5rem; padding-right: 0; }
    /* Stack "From USD" over the amount so the column stays narrow. */
    .fn-quick-picks__price .fn-frag-card__price { white-space: normal; }
    .fn-quick-picks__price .fn-price-item strong { display: block; white-space: nowrap; }
}

/* ── [fn_pick] ───────────────────────────────────────────────────────────── */
.fn-prose .fn-pick {
    margin: 2.75rem 0 1.25rem;
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius-lg);
    background: var(--fn-surface);
    overflow: hidden;
    scroll-margin-top: calc(var(--fn-nav-height) + 1.5rem);
}
.fn-pick__head {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--fn-border);
    background: var(--fn-surface-2);
}
.fn-pick__rank {
    flex: 0 0 auto;
    font-family: var(--fn-font-heading);
    font-size: 2rem; font-weight: 700; line-height: 1;
    color: var(--fn-gold-text); font-variant-numeric: tabular-nums;
}
.fn-pick__heading { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.fn-pick__award { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fn-gold-text); }
.fn-prose .fn-pick__title { margin: 0; font-family: var(--fn-font-heading); font-size: 1.3rem; line-height: 1.2; }
.fn-prose .fn-pick__title a { color: var(--fn-text); text-decoration: none; }
.fn-prose .fn-pick__title a:hover { color: var(--fn-gold-text); }
.fn-pick__meta { font-size: .8rem; color: var(--fn-text-dim); }

.fn-pick__body { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.25rem; padding: 1.15rem 1.25rem 1.2rem; align-items: start; }
.fn-pick__media {
    display: block; aspect-ratio: 1; border-radius: var(--fn-radius);
    background: var(--fn-surface-2); overflow: hidden;
}
.fn-pick__media img { width: 100%; height: 100%; object-fit: contain; display: block; }

.fn-pick__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0 0 .85rem; }
.fn-pick__stat { padding: .55rem .65rem; border: 1px solid var(--fn-border); border-radius: var(--fn-radius-sm); min-width: 0; }
.fn-pick__stat dt { font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fn-text-dim); margin-bottom: .15rem; }
.fn-pick__stat dd { margin: 0; font-size: .82rem; color: var(--fn-text-muted); line-height: 1.3; }
.fn-pick__stat dd strong { font-family: var(--fn-font-heading); font-size: 1.15rem; color: var(--fn-text); }
.fn-pick__stat dd small { display: block; font-size: .72rem; color: var(--fn-text-dim); }
.fn-pick__stat--price .fn-frag-card__price { display: block; margin: 0; padding: 0; font-size: .72rem; color: var(--fn-text-dim); }
.fn-pick__stat--price .fn-price-item strong { display: block; margin-top: .1rem; font-size: .98rem; line-height: 1.25; }

.fn-prose .fn-pick__notes { margin: 0 0 .7rem; font-size: .88rem; line-height: 1.55; color: var(--fn-text-muted); }
.fn-pick__notes span { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fn-text-dim); margin-right: .35rem; }
.fn-prose .fn-pick__links { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .86rem; }
.fn-prose .fn-pick__links a { font-weight: 600; text-decoration: none; }
.fn-prose .fn-pick__links a:hover { text-decoration: underline; }
@media (pointer: coarse) {
    .fn-prose .fn-pick__links { row-gap: 0; }
    .fn-prose .fn-pick__links a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 720px) {
    .fn-pick__body { grid-template-columns: 1fr; }
    .fn-pick__media { max-width: 9rem; }
    .fn-pick__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── [fn_tool_cta] ───────────────────────────────────────────────────────── */
.fn-prose .fn-tool-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
    margin: 2.25rem 0;
    padding: 1.2rem 1.35rem;
    border: 1px solid var(--fn-gold-border);
    border-radius: var(--fn-radius-lg);
    background: var(--fn-gold-dim);
}
.fn-tool-cta__text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.fn-tool-cta__label { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fn-gold-text); }
.fn-tool-cta__title { font-family: var(--fn-font-heading); font-size: 1.15rem; color: var(--fn-text); }
.fn-tool-cta__body { font-size: .9rem; line-height: 1.5; color: var(--fn-text-muted); }
.fn-prose .fn-tool-cta__btn { flex: 0 0 auto; text-decoration: none; color: #1b1712; white-space: nowrap; }
@media (max-width: 640px) { .fn-prose .fn-tool-cta { flex-direction: column; align-items: flex-start; } }

/* ── FAQ: every H3 after the "Frequently asked questions" H2 ────────────── */
.fn-prose--journal > h2[id^="frequently-asked"] ~ h3 {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--fn-border);
    font-family: var(--fn-font-body);
    font-size: 1.05rem; font-weight: 700;
}

/* ── Author box ──────────────────────────────────────────────────────────── */
.fn-author-box {
    display: flex; gap: 1rem; align-items: flex-start;
    max-width: 70ch;
    margin: 3rem 0 0;
    padding: 1.35rem 1.4rem;
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius-lg);
    background: var(--fn-surface-2);
}
.fn-author-box__mark {
    flex: 0 0 auto;
    width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
    border-radius: var(--fn-radius-full);
    background: var(--fn-surface); border: 1px solid var(--fn-gold-border);
    font-family: var(--fn-font-heading); font-size: 1.3rem; font-weight: 700; font-style: italic;
    color: var(--fn-gold-text);
}
.fn-author-box__text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.fn-author-box__label { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fn-text-dim); }
.fn-author-box__name { font-family: var(--fn-font-heading); font-size: 1.12rem; font-weight: 700; color: var(--fn-text); text-decoration: none; }
.fn-author-box__name:hover { color: var(--fn-gold-text); }
.fn-author-box__bio { margin: .2rem 0 0; font-size: .9rem; line-height: 1.6; color: var(--fn-text-muted); }
.fn-author-box__links { margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .85rem; }
.fn-author-box__links a { color: var(--fn-gold-text); font-weight: 600; text-decoration: none; }
.fn-author-box__links a:hover { text-decoration: underline; }