/* Finance and accounting (site v3), this page's own design, 2026-09-25. Hand-authored: the words live in
   index.html beside this file, edited directly. Shared pieces (nav, hero grid, the other-areas tiles, contact
   band, footer) come from site.css, site-local.css, art.css and practice.css. Tokens only, never hex, so dark
   mode follows. No eyebrows: hierarchy is font weight. Every gold streak is round-ended. The page's figures
   are ledgers and calendars: plain rules for routine, gold for what closes, agrees and holds. */

/* ---------- Bands ---------- */
.fn-band { padding-block: var(--space-24); }
.fn-band--ground { background: var(--ground); color: var(--ink); }
.fn-band--alt { background: var(--ground-alt); color: var(--ink); }
.fn-band--stone { background: var(--stone); color: var(--on-stone); }

.fn-h2 { font-family: var(--font-serif); font-size: 56px; line-height: 1.04; font-weight: 600; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.fn-head { max-width: 22ch; margin-bottom: var(--space-6); }
.fn-lede { font-size: 21px; line-height: 1.5; color: var(--body); max-width: 56ch; margin: 0 0 var(--space-12); }
.fn-after { font-size: 19px; line-height: 1.6; color: var(--body); max-width: 62ch; margin: var(--space-16) 0 0; }
.fn-after b { color: var(--ink); font-weight: 650; }
.fn-band--stone .fn-lede, .fn-band--stone .fn-after { color: var(--on-stone-muted); }
.fn-band--stone .fn-after b { color: var(--on-stone); }

.fn-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
.fn-split__head { position: sticky; top: calc(var(--site-nav-h) + var(--space-12)); }
.fn-prose { display: flex; flex-direction: column; gap: var(--space-8); }
.fn-prose p { font-size: 19px; line-height: 1.6; color: var(--body); margin: 0; max-width: 60ch; }

@keyframes fn-across { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fn-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fn-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes fn-reveal { from { clip-path: inset(-8px 100% -8px -8px); } to { clip-path: inset(-8px -8px -8px -8px); } }

/* ---------- The cadence: one year as a ruler ----------
   52 weekly ticks, the months taller, the three quarter ends in gold, the year's end tallest. The ruler
   stretches to the column (preserveAspectRatio none); strokes are non-scaling, so ticks stay crisp at any
   width. The key below repeats each tick beside its name. */
.fn-year { margin: 0 0 var(--space-8); }
.fn-year svg { display: block; width: 100%; height: 64px; overflow: visible; animation: fn-reveal 1.6s ease-out both; }
.fn-year path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.fn-year__base { stroke: var(--line-strong); stroke-width: 2px; }
.fn-year__week { stroke: var(--line-strong); stroke-width: 1.5px; }
.fn-year__month { stroke: var(--ink); stroke-width: 2px; }
.fn-year__quarter { stroke: var(--gold); stroke-width: 5px; }
.fn-year__end { stroke: var(--gold); stroke-width: 7px; }

.fn-rhythm { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.fn-rhythm li { display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: 40px auto; column-gap: var(--space-4); row-gap: var(--space-3); align-items: end; align-content: start; animation: fn-rise .4s ease-out both; }
.fn-rhythm li::before { content: ""; grid-row: 1; justify-self: center; width: 2px; height: 20px; border-radius: var(--radius-streak); background: var(--line-strong); }
.fn-rhythm b { grid-row: 1; font-family: var(--font-serif); font-size: 28px; line-height: 1.1; font-weight: 600; color: var(--ink); }
.fn-rhythm span { grid-column: 2; align-self: start; font-size: 17px; line-height: 1.5; color: var(--body); text-wrap: pretty; }
.fn-rhythm .fn-rhythm__month::before { height: 28px; background: var(--ink); }
.fn-rhythm .fn-rhythm__quarter::before { width: 5px; height: 34px; background: var(--gold); }
.fn-rhythm .fn-rhythm__year::before { width: 7px; height: 40px; background: var(--gold); }
.fn-rhythm li:nth-child(2) { animation-delay: .4s; }
.fn-rhythm li:nth-child(3) { animation-delay: .8s; }
.fn-rhythm li:nth-child(4) { animation-delay: 1.2s; }

/* ---------- The close: twelve months, the closed ones underlined in gold, then the notice ----------
   Closed months draw left to right; the open month sits on a plain rule; the rest are faint. The notice
   rises after the last closed month draws. Illustrative. */
.fn-months { margin: 0; }
.fn-months ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2); }
.fn-months li { font-size: 15px; line-height: 1.2; color: var(--muted); text-align: center; padding-bottom: var(--space-3); position: relative; }
.fn-months li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: var(--radius-streak); background: var(--line); }
.fn-months li.is-closed { color: var(--ink); font-weight: 600; }
.fn-months li.is-closed::after { height: var(--streak); background: var(--gold); transform-origin: 0 50%; animation: fn-across .18s linear both; animation-play-state: inherit; }
.fn-months li.is-open { color: var(--body); }
.fn-months li.is-open::after { background: var(--line-strong); }
.fn-months li:nth-child(2)::after { animation-delay: .15s; }
.fn-months li:nth-child(3)::after { animation-delay: .3s; }
.fn-months li:nth-child(4)::after { animation-delay: .45s; }
.fn-months li:nth-child(5)::after { animation-delay: .6s; }
.fn-months li:nth-child(6)::after { animation-delay: .75s; }
.fn-months li:nth-child(7)::after { animation-delay: .9s; }
.fn-months li:nth-child(8)::after { animation-delay: 1.05s; }

.fn-notice { margin-top: var(--space-6); max-width: 30em; background: var(--surface); border: 1px solid var(--line); border-left: var(--streak) solid var(--gold); border-radius: var(--radius-card); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-1); animation: fn-rise .5s 1.4s ease-out both; }
.fn-notice b { font-family: var(--font-serif); font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--ink); }
.fn-notice p { font-size: 17px; line-height: 1.5; color: var(--body); margin: 0; }

/* ---------- The balance sheet: net assets in three plain labels ----------
   One bar in three segments (donor-restricted, board-designated in gold, undesignated), a bracket under the
   two without donor restrictions, then the key. Proportions are illustrative. */
.fn-assets { margin: 0; --fn-donor: 38fr; --fn-board: 24fr; --fn-free: 38fr; }
.fn-assets__bar, .fn-assets__free, .fn-assets__key { display: grid; grid-template-columns: var(--fn-donor) var(--fn-board) var(--fn-free); column-gap: var(--space-2); }
.fn-assets__seg { height: 28px; border-radius: var(--radius-control); transform-origin: 0 50%; animation: fn-across .5s linear both; animation-play-state: inherit; }
.fn-assets__seg--donor { background: var(--art-shade5); }
.fn-assets__seg--board { background: var(--gold); animation-delay: .5s; }
.fn-assets__seg--free { background: var(--on-stone-muted); animation-delay: 1s; }
.fn-assets__free { margin-top: var(--space-3); }
.fn-assets__free span { grid-column: 2 / 4; display: block; padding-top: var(--space-3); border-top: 2px solid var(--line-on-stone); font-size: 15px; line-height: 1.4; color: var(--on-stone-muted); text-align: center; animation: fn-rise .4s 1.4s ease-out both; }
.fn-assets__key { margin: var(--space-8) 0 0; row-gap: var(--space-6); }
.fn-assets__item { padding-right: var(--space-4); animation: fn-rise .4s ease-out both; }
.fn-assets__item dt { font-family: var(--font-serif); font-size: 26px; line-height: 1.15; font-weight: 600; color: var(--on-stone); }
.fn-assets__item dt::before { content: ""; display: block; width: 32px; height: var(--streak); border-radius: var(--radius-streak); margin-bottom: var(--space-4); background: var(--art-shade5); }
.fn-assets__item--board dt::before { background: var(--gold); }
.fn-assets__item--free dt::before { background: var(--on-stone-muted); }
.fn-assets__item dd { margin: var(--space-3) 0 0; font-size: 17px; line-height: 1.5; color: var(--on-stone-muted); max-width: 26ch; }
.fn-assets__item--donor { animation-delay: .3s; }
.fn-assets__item--board { animation-delay: .8s; }
.fn-assets__item--free { animation-delay: 1.3s; }
.fn-assets figcaption { margin-top: var(--space-8); font-size: 15px; line-height: 1.4; color: var(--on-stone-muted); }

/* ---------- A P&L for every program: the 990's functional columns ----------
   A plain typographic table; each line of the books gets one gold dot in the column where it lands. */
.fn-matrix { margin: 0; }
.fn-matrix table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fn-matrix th, .fn-matrix td { padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.fn-matrix thead th { font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--ink); vertical-align: bottom; border-bottom: 2px solid var(--line-strong); text-wrap: balance; }
.fn-matrix thead td { border-bottom: 2px solid var(--line-strong); }
.fn-matrix tbody th { font-family: var(--font-serif); font-size: 21px; line-height: 1.25; font-weight: 400; color: var(--ink); text-align: left; padding-left: 0; }
.fn-matrix tr > :first-child { width: 36%; }
.fn-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); overflow: hidden; text-indent: 100%; white-space: nowrap; vertical-align: middle; animation: fn-pop .25s ease-out both; animation-play-state: inherit; }
.fn-matrix tbody tr:nth-child(2) .fn-dot { animation-delay: .2s; }
.fn-matrix tbody tr:nth-child(3) .fn-dot { animation-delay: .4s; }
.fn-matrix tbody tr:nth-child(4) .fn-dot { animation-delay: .6s; }
.fn-matrix tbody tr:nth-child(5) .fn-dot { animation-delay: .8s; }
.fn-matrix figcaption { margin-top: var(--space-4); font-size: 15px; line-height: 1.4; color: var(--muted); }

/* ---------- The one big statement: four documents, one set of figures ---------- */
.fn-big { font-family: var(--font-serif); font-size: 72px; line-height: 1.04; font-weight: 300; letter-spacing: -.02em; color: var(--on-stone); margin: 0; text-wrap: balance; }
.fn-big b { font-weight: 650; }
.fn-agree { list-style: none; margin: var(--space-12) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--space-4); }
.fn-agree li { font-family: var(--font-serif); font-size: 30px; line-height: 1.2; font-weight: 400; color: var(--on-stone); white-space: nowrap; animation: fn-rise .4s ease-out both; }
.fn-agree li + li::before { content: "=" / ""; display: inline-block; margin-inline: var(--space-5); color: var(--gold); font-weight: 600; }
.fn-agree li:nth-child(2) { animation-delay: .3s; }
.fn-agree li:nth-child(3) { animation-delay: .6s; }
.fn-agree li:nth-child(4) { animation-delay: .9s; }
.fn-big__why { font-size: 19px; line-height: 1.6; color: var(--on-stone-muted); max-width: 60ch; margin: var(--space-12) 0 0; text-wrap: pretty; }
.fn-big__why a { color: var(--on-stone); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--gold); }
.fn-big__why a:hover { color: var(--gold); }

/* ---------- Breakpoints: the design system's (1023, 899, 719) ---------- */
@media (max-width: 1023px) {
  .fn-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .fn-split__head { position: static; }
  .fn-rhythm { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-12); }
  .fn-big { font-size: 60px; }
}
@media (max-width: 899px) {
  .fn-band { padding-block: var(--space-16); }
  .fn-h2 { font-size: 44px; }
  .fn-big { font-size: 48px; }
  .fn-agree li { font-size: 26px; }
}
@media (max-width: 719px) {
  .fn-h2 { font-size: 34px; }
  .fn-big { font-size: 38px; }
  .fn-year svg { height: 48px; }
  .fn-rhythm { grid-template-columns: 1fr; row-gap: var(--space-8); }
  .fn-rhythm b { font-size: 24px; }
  /* Twelve months wrap to two rows of six. */
  .fn-months ol { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--space-5); }
  /* The bar keeps its three segments; the key stacks. */
  .fn-assets__key { grid-template-columns: 1fr; }
  .fn-assets__item dd { max-width: none; }
  .fn-assets__item dt { font-size: 22px; }
  .fn-matrix th, .fn-matrix td { padding-inline: var(--space-2); }
  .fn-matrix thead th { font-size: 13px; hyphens: manual; }
  .fn-matrix tbody th { font-size: 17px; }
  .fn-matrix tr > :first-child { width: 30%; }
  /* The equation stacks, one document per line, the equals sign leading each after the first. */
  .fn-agree { flex-direction: column; align-items: flex-start; }
  .fn-agree li { position: relative; padding-left: var(--space-8); font-size: 24px; }
  .fn-agree li + li::before { position: absolute; left: 0; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fn-year svg, .fn-rhythm li, .fn-months li::after, .fn-notice, .fn-assets__seg, .fn-assets__free span,
  .fn-assets__item, .fn-dot, .fn-agree li { animation: none !important; }
}