/* Field One: Field Notes, note pages, Humane "AI is a choice" section, Working Together team line.
   Uses the site's existing tokens (--ink, --clay, --taupe, --frame, --line, --maxw ...). */

/* ---------- Section headings on notes pages ---------- */
.fn-section { padding: 48px 0 32px; }
.fn-section + .fn-section { padding-top: 16px; }
.fn-section .fo-h2 { margin: 0 0 12px; }
.fn-section .fn-intro { max-width: 46em; margin: 0 0 24px; color: var(--ink, #0C0B0A); line-height: var(--line-normal, 1.5); }

/* ---------- Simple list (talks) ---------- */
.fn-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line, rgba(21,19,19,.2)); }
.fn-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line, rgba(21,19,19,.2)); }
.fn-list .fn-item-title { font-weight: 500; }
.fn-list .fn-item-where { grid-column: 1; color: var(--charcoal, #6B6255); font-size: .9em; }
.fn-list .fn-item-tag { grid-column: 2; grid-row: 1; font-size: .78em; letter-spacing: .06em; text-transform: uppercase; color: var(--clay, #847968); white-space: nowrap; }
.fn-more { display: inline-block; margin-top: 20px; color: var(--jade, #1F5A45); border-bottom: 1px solid var(--clay, #847968); text-decoration: none; }

/* ---------- Note (article) body ---------- */
.fn-note-lead { max-width: 40em; font-size: 1.15em; line-height: 1.45; margin: 0 0 28px; }
.fn-note .field-detail p, .fn-note .field-detail li { max-width: 44em; line-height: var(--line-normal, 1.5); }
.fn-note .field-detail ul, .fn-note .field-detail ol { padding-left: 1.2em; margin: 0 0 16px; }
.fn-note .field-detail li { margin: 0 0 8px; }
.fn-note .field-detail strong { font-weight: 600; }
.fn-cite { font-size: .85em; color: var(--charcoal, #6B6255); font-style: italic; }

/* Three questions grid (Who / What / Which) */
.fn-three { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin: 8px 0 16px; }
.fn-three > div { background: var(--taupe-soft, #F5F1EB); padding: 20px; }
.fn-three h4 { margin: 0 0 8px; font-size: 1.05em; font-weight: 600; }
.fn-three p { margin: 0; font-size: .95em; }

/* Levels table (Global / Regional / National / Others) */
.fn-levels { width: 100%; max-width: 52em; border-collapse: collapse; margin: 8px 0 20px; font-size: .95em; }
.fn-levels th, .fn-levels td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line, rgba(21,19,19,.2)); }
.fn-levels th { width: 8.5em; font-weight: 600; }

/* Impact levels (Compute / Application / System) */
.fn-impact { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 8px 0 16px; }
.fn-impact > div { padding: 18px 20px; background: var(--taupe, #ECE6DE); }
.fn-impact > div.fn-impact-open { background: var(--frame, #292d30); color: var(--frame-ink, #fff); }
.fn-impact strong { display: block; font-size: 1.1em; margin-bottom: 4px; }

/* Socio-technical diagram */
.fn-diagram { margin: 8px 0 16px; max-width: 320px; }
.fn-diagram svg { width: 100%; height: auto; display: block; }
.fn-diagram figcaption { font-size: .8em; color: var(--charcoal, #6B6255); margin-top: 6px; }

/* ---------- Quote band ---------- */
.fn-band { background: var(--frame, #292d30); color: var(--frame-ink, #fff); padding: 40px 0; }
.fn-band blockquote { margin: 0; max-width: 44em; }
.fn-band blockquote p { font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.25; font-weight: 500; margin: 0 0 12px; }
.fn-band cite { font-style: normal; font-size: .85em; opacity: .75; }

/* ---------- Sources ---------- */
.fn-sources { padding: 24px 0 40px; font-size: .85em; color: var(--charcoal, #6B6255); }
.fn-sources h3 { font-size: 1em; font-weight: 600; margin: 0 0 8px; color: var(--ink, #0C0B0A); }
.fn-sources ul { margin: 0; padding-left: 1.1em; }
.fn-sources li { margin: 0 0 4px; }
.fn-sources a { color: inherit; }

/* ---------- Humane page: AI is a choice ---------- */
.htd-choice { padding: 48px 0 40px; }
.htd-choice .htd-choice-copy { max-width: 46em; }
.htd-choice .htd-choice-copy p { line-height: var(--line-normal, 1.5); margin: 0 0 12px; }
.fn-note .field-detail p { margin: 0 0 12px; }
.htd-choice .fn-three { margin-top: 20px; }

/* ---------- Working Together: names line replacing photos in offers ---------- */
.jo-team { margin: 10px 0 0; font-size: .9em; color: var(--charcoal, #6B6255); }

@media (max-width: 720px) {
  .fn-three, .fn-impact { grid-template-columns: 1fr; }
  .fn-list li { grid-template-columns: 1fr; }
  .fn-list .fn-item-tag { grid-column: 1; grid-row: auto; }
  .fn-levels th { width: 6.5em; }
}

/* ---------- Note: Field of view (2026-10-26) ---------- */
.fn-diagram.fn-diagram-wide { max-width: 440px; }
.fn-four { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 8px 0 16px; }
.fn-four > div { padding: 18px 20px; background: var(--taupe, #ECE6DE); font-size: .95em; line-height: 1.4; }
.fn-four > div.fn-impact-open { background: var(--frame, #292d30); color: var(--frame-ink, #fff); }
.fn-four strong { display: block; font-size: 1.1em; margin-bottom: 4px; }
.fn-list .fn-item-title a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--clay, #847968); }
@media (max-width: 720px) { .fn-four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .fn-four { grid-template-columns: 1fr; } }

/* ---------- Field Notes index (2026-10-26) ---------- */
.fn-index-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.fn-index-count { font-size: .78em; letter-spacing: .06em; text-transform: uppercase; color: var(--clay, #847968); }
.fn-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink, #0C0B0A); }
.fn-index li { border-bottom: 1px solid var(--line, rgba(21,19,19,.2)); }
.fn-index a { position: relative; display: grid; grid-template-columns: 3.2em 7.5em minmax(0,1fr) auto 1.5em; gap: 8px 24px; align-items: baseline; padding: 28px 12px 30px; color: var(--ink, #0C0B0A); text-decoration: none; isolation: isolate; }
.fn-index a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--taupe, #ECE6DE); transform: scaleY(0); transform-origin: bottom; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.fn-index a:hover::before, .fn-index a:focus-visible::before { transform: scaleY(1); }
.fn-index-no { font-size: .78em; color: var(--clay, #847968); font-variant-numeric: tabular-nums; }
.fn-index-date { font-size: .85em; color: var(--charcoal, #6B6255); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fn-index-main { display: block; }
.fn-index-title { display: block; font-size: clamp(1.6rem, 3.6vw, 2.75rem); line-height: 1.02; font-weight: 500; letter-spacing: -.015em; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.fn-index-dek { display: block; max-width: 38em; margin-top: 10px; font-size: .95em; line-height: 1.4; color: var(--charcoal, #6B6255); }
.fn-index-tag { font-size: .72em; letter-spacing: .08em; text-transform: uppercase; color: var(--jade, #1F5A45); border: 1px solid currentColor; padding: 3px 8px; white-space: nowrap; align-self: start; margin-top: .6em; }
.fn-index-arrow { font-size: 1.4em; color: var(--clay, #847968); align-self: start; margin-top: .35em; transition: transform .35s cubic-bezier(.2,.7,.2,1), color .2s; }
.fn-index a:hover .fn-index-title { transform: translateX(6px); }
.fn-index a:hover .fn-index-arrow { transform: translateX(6px); color: var(--ink, #0C0B0A); }
.fn-index a:focus-visible { outline: 2px solid var(--jade, #1F5A45); outline-offset: -2px; }
@media (max-width: 720px) {
  .fn-index a { grid-template-columns: auto 1fr auto; gap: 6px 12px; padding: 22px 4px 24px; }
  .fn-index-no { grid-column: 1; grid-row: 1; }
  .fn-index-date { grid-column: 2; grid-row: 1; }
  .fn-index-tag { grid-column: 3; grid-row: 1; margin-top: 0; }
  .fn-index-main { grid-column: 1 / -1; grid-row: 2; }
  .fn-index-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fn-index a::before, .fn-index-title, .fn-index-arrow { transition: none; } }
.fn-index-head .fo-h2 { margin: 0; }
.fn-index-head .fn-index-count { margin-right: auto; }
.fn-index-latest .fn-index-title { font-size: clamp(2rem, 5.2vw, 3.75rem); line-height: .98; }
.fn-index-latest .fn-index-date::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .5em; border-radius: 50%; background: var(--jade, #1F5A45); vertical-align: .08em; }
.fn-index-latest a { padding-top: 36px; padding-bottom: 38px; }