/* Field Notes — editorial section. Reuses Oakline's existing colour tokens
   (see public-site.css :root) so the section reads as Oakline, not a
   separate brand; the serif pairing is what marks it as editorial rather
   than product marketing. */

.fn-serif {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
}

.fn-kicker {
    margin-bottom: 14px;
    color: var(--leaf-dark);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---- Hub hero ---- */
.fn-hero {
    padding: 72px 0 48px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.fn-hero h1 {
    max-width: 760px;
    margin-bottom: 18px;
    color: var(--forest);
    font-size: 3.2rem;
    line-height: 1.1;
}
.fn-hero p.fn-tagline {
    max-width: 620px;
    color: #3f5047;
    font-size: 1.25rem;
}
.fn-hero p.fn-intro {
    max-width: 720px;
    margin-top: 22px;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.7;
}

/* ---- Topic pills ---- */
.fn-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}
.fn-topics a {
    display: inline-flex;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--forest);
    font-size: 0.88rem;
    font-weight: 650;
    text-decoration: none;
    background: var(--white);
}
.fn-topics a:hover,
.fn-topics a[aria-current="page"] {
    border-color: var(--leaf);
    color: var(--leaf-dark);
    background: var(--mint);
}

/* ---- Featured article ---- */
.fn-featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
    gap: 48px;
    align-items: center;
    padding: 64px 0;
    border-bottom: 1px solid var(--line);
}
.fn-featured img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
}
.fn-featured h2 {
    margin: 12px 0 14px;
    color: var(--forest);
    font-size: 2.3rem;
    line-height: 1.18;
}
.fn-featured .fn-dek {
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.6;
}
.fn-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 16px;
    color: var(--muted);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.86rem;
}
.fn-meta span:not(:last-child)::after { content: "·"; margin-left: 14px; color: var(--line); }

/* ---- Article list (hub / category) ---- */
.fn-list {
    padding: 56px 0;
}
.fn-list-title {
    margin-bottom: 30px;
    color: var(--forest);
    font-size: 1.6rem;
}
.fn-article-row {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
}
.fn-article-row:first-child { padding-top: 0; }
.fn-article-row img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
}
.fn-article-row-noimg { grid-template-columns: minmax(0, 1fr); }
.fn-article-row h3 {
    margin-bottom: 8px;
    color: var(--forest);
    font-size: 1.3rem;
    line-height: 1.25;
}
.fn-article-row h3 a { color: inherit; text-decoration: none; }
.fn-article-row h3 a:hover { color: var(--leaf); }
.fn-article-row p { margin-bottom: 10px; color: var(--muted); font-size: 0.98rem; line-height: 1.6; }

.fn-empty {
    padding: 40px 0;
    color: var(--muted);
    font-size: 1.05rem;
}

/* ---- Pagination ---- */
.fn-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 20px 0 0;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.fn-pagination a,
.fn-pagination span {
    display: inline-flex;
    min-width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--forest);
    text-decoration: none;
    font-size: 0.9rem;
}
.fn-pagination a:hover { border-color: var(--leaf); }
.fn-pagination .fn-page-current { background: var(--forest); border-color: var(--forest); color: var(--white); }

/* ---- Article page ---- */
.fn-article-hero {
    padding: 56px 0 0;
}
.fn-article-hero .fn-category {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--leaf-dark);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}
.fn-article-hero h1 {
    max-width: 820px;
    margin-bottom: 18px;
    color: var(--forest);
    font-size: 2.9rem;
    line-height: 1.15;
}
.fn-article-hero .fn-dek {
    max-width: 720px;
    margin-bottom: 24px;
    color: #3f5047;
    font-size: 1.22rem;
    line-height: 1.55;
}
.fn-article-hero .fn-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.9rem;
}
.fn-byline strong { color: var(--forest); }

.fn-article-image {
    margin: 36px 0;
}
.fn-article-image img {
    width: 100%;
    border-radius: 4px;
}
.fn-article-image figcaption {
    margin-top: 10px;
    color: var(--muted);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.85rem;
}

.fn-prose {
    max-width: 720px;
    margin: 0 auto;
    padding: 8px 0 40px;
    color: #26332c;
    font-size: 1.18rem;
    line-height: 1.75;
}
.fn-prose h2 { margin: 2.2em 0 0.7em; color: var(--forest); font-size: 1.7rem; line-height: 1.25; }
.fn-prose h3 { margin: 1.8em 0 0.6em; color: var(--forest); font-size: 1.35rem; }
.fn-prose p { margin: 0 0 1.3em; }
.fn-prose ul, .fn-prose ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.fn-prose li { margin-bottom: 0.5em; }
.fn-prose blockquote {
    margin: 1.8em 0;
    padding: 0.2em 0 0.2em 1.2em;
    border-left: 3px solid var(--leaf);
    color: #3f5047;
    font-style: italic;
}
.fn-prose a { color: var(--leaf-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fn-prose strong { color: var(--forest); }

/* ---- Editorial callout blocks ---- */
.fn-prose .fn-callout {
    margin: 2em 0;
    padding: 20px 24px;
    border-left: 4px solid var(--line);
    background: var(--surface);
    font-size: 1.02rem;
    line-height: 1.65;
}
.fn-prose .fn-callout p:last-child { margin-bottom: 0; }
.fn-callout-label {
    margin-bottom: 8px;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fn-callout-in-practice { border-color: var(--leaf); background: var(--mint); }
.fn-callout-in-practice .fn-callout-label { color: var(--leaf-dark); }
.fn-callout-principle { border-color: var(--forest); background: var(--surface); }
.fn-callout-principle .fn-callout-label { color: var(--forest); }
.fn-callout-important { border-color: var(--danger); background: #fbeceD; }
.fn-callout-important .fn-callout-label { color: var(--danger); }
.fn-callout-source { border-color: var(--sky-line, #9fcdd6); background: var(--sky); }
.fn-callout-source .fn-callout-label { color: #1f5b66; }
.fn-callout-key-question { border-color: var(--sun); background: #fdf6e3; }
.fn-callout-key-question .fn-callout-label { color: #7a5c14; }

/* ---- Sources & further reading ---- */
.fn-sources {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 0;
    border-top: 1px solid var(--line);
}
.fn-sources h2 {
    margin-bottom: 18px;
    color: var(--forest);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 1.1rem;
}
.fn-source-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.fn-source-item:last-child { border-bottom: none; }
.fn-source-item a { color: var(--leaf-dark); font-weight: 650; text-decoration: none; }
.fn-source-item a:hover { text-decoration: underline; }
.fn-source-meta { margin-top: 4px; color: var(--muted); font-size: 0.85rem; }
.fn-source-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--surface);
    font-size: 0.78rem;
    font-weight: 650;
}

/* ---- How Oakline approaches this ---- */
.fn-how-oakline {
    max-width: 720px;
    margin: 0 auto 40px;
    padding: 24px 26px;
    background: var(--surface);
    border-radius: 4px;
}
.fn-how-oakline h2 {
    margin-bottom: 10px;
    color: var(--forest);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fn-how-oakline .fn-prose { max-width: none; padding: 0; font-size: 1.02rem; }

/* ---- Related articles ---- */
.fn-related {
    padding: 48px 0 64px;
    border-top: 1px solid var(--line);
}
.fn-related h2 { margin-bottom: 26px; color: var(--forest); font-size: 1.4rem; }
.fn-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}
.fn-related-grid h3 { margin-bottom: 6px; color: var(--forest); font-size: 1.08rem; line-height: 1.3; }
.fn-related-grid a { text-decoration: none; }
.fn-related-grid a:hover h3 { color: var(--leaf); }
.fn-related-grid p { margin: 0; color: var(--muted); font-size: 0.86rem; }

@media (max-width: 860px) {
    .fn-featured { grid-template-columns: 1fr; gap: 26px; }
    .fn-hero h1 { font-size: 2.3rem; }
    .fn-article-hero h1 { font-size: 2.1rem; }
    .fn-prose { font-size: 1.08rem; }
    .fn-related-grid { grid-template-columns: 1fr; }
    .fn-article-row { grid-template-columns: 72px minmax(0, 1fr); }
}