/* ═══════════════════════════════════════════════════════════════
   FIELD NOTES v2 — index, full index, and annual letter
   Design ref: design_handoff_field_notes (2026-08). Tokens: papers
   #f7f4f0/#faf8f5/#f1ebe2, ink #2c2c2c, body #4f4a44, action orange
   #fb9000 (hover #db7a05, the ONLY action color), editorial tobacco
   #7f6045 (hover #5e4530), 6-color rainbow hairlines, radius 12/8.
   Fonts: Tiempos Headline (display), Tiempos Text (body),
   General Sans (UI) — all self-hosted via fonts.css.
   ═══════════════════════════════════════════════════════════════ */

.fn2-page {
  font-family: 'Tiempos Text', Georgia, serif;
  color: #4f4a44;
  background: #f7f4f0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.fn2-page a { text-decoration: none; }

/* ── Shared bits ── */
.fn2-eyebrow {
  font-family: 'General Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.fn2-eyebrow--orange { color: #fb9000; }
.fn2-eyebrow--tobacco {
  color: #7f6045;
  font-size: 11px;
  letter-spacing: 1.5px;
  opacity: 0.8;
}
.fn2-h2 {
  font-family: 'Tiempos Headline', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #2c2c2c;
  margin: 0;
}
.fn2-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4aae8c;
  display: inline-block;
  flex: none;
}
.fn2-bridge,
.fn2-page a.fn2-bridge {
  font-family: 'General Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #7f6045;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(127, 96, 69, 0.35);
  transition: color 0.2s;
}
.fn2-bridge:hover,
.fn2-page a.fn2-bridge:hover { color: #5e4530; }
.fn2-bridge--sm { font-size: 12.5px; }
.fn2-bridge--md { font-size: 13.5px; }
.fn2-btn,
.fn2-page a.fn2-btn {
  font-family: 'General Sans', sans-serif;
  display: inline-block;
  background: #fb9000;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  transition: background 0.2s;
}
.fn2-btn:hover,
.fn2-page a.fn2-btn:hover { background: #db7a05; color: #fff; }
.fn2-btn--lg { padding: 14px 28px; font-size: 15px; }

/* ── Rainbow bands (the six category colors, edge to edge) ── */
.fn2-rainbow {
  height: 3px;
  background: linear-gradient(90deg, #fb9000, #e8724a, #d94f6e, #9b59b6, #6cc8d7, #4aae8c);
}

/* ── Hero ── */
.fn2-hero { background: #f7f4f0; }
.fn2-hero__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 68px 40px 8px;
  text-align: center;
}
.fn2-hero--index .fn2-hero__inner { padding-bottom: 24px; }
.fn2-hero .fn2-eyebrow { margin-bottom: 22px; }
.fn2-hero__title {
  font-family: 'Tiempos Headline', Georgia, serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: #2c2c2c;
  margin: 0 auto 18px;
  max-width: 620px;
  text-wrap: pretty;
}
.fn2-hero__lede {
  font-size: 18px;
  line-height: 1.7;
  color: #4f4a44;
  margin: 0 auto 10px;
  max-width: 560px;
}
.fn2-hero__tick {
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fb9000, #e8724a, #d94f6e, #9b59b6, #6cc8d7, #4aae8c);
  margin: 22px auto 12px;
}
.fn2-hero__note {
  font-family: 'Tiempos Text', Georgia, serif;
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.65;
  color: #5a5248;
  margin: 0 auto 10px;
  max-width: 520px;
}
.fn2-hero__reach {
  font-family: 'General Sans', sans-serif;
  font-size: 13px;
  color: #6b7378;
  margin: 0;
}

/* ── Question shelves ── */
.fn2-shelves { background: #f7f4f0; }
.fn2-shelves__grid {
  max-width: 1040px;
  margin: 0 auto;
  padding: 44px 40px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.fn2-shelf {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-left: 3px solid #fb9000;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}
.fn2-shelf__inner {
  padding: 22px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.fn2-shelf__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.fn2-shelf__question {
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  color: #2a2520;
  margin: 0;
}
.fn2-shelf__tag {
  font-family: 'General Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  margin-top: 4px;
}
.fn2-shelf__links {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #efece7;
  flex: 1;
}
.fn2-shelf__link,
.fn2-page a.fn2-shelf__link {
  font-family: 'General Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2c2c2c;
  padding: 11px 0;
  border-bottom: 1px solid #efece7;
  line-height: 1.4;
  transition: color 0.2s;
}
.fn2-shelf__link:last-child { border-bottom: none; }
.fn2-shelf__link:hover,
.fn2-page a.fn2-shelf__link:hover { color: #7f6045; }
.fn2-shelves__note {
  grid-column: 1 / -1;
  text-align: center;
  font-family: 'General Sans', sans-serif;
  font-size: 12px;
  color: #a39b8e;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

/* ── What we notice (dark band — the Data Window energy: glyphs and
      category colors pop on ink, breaks the beige run at the midpoint;
      ink-palette overrides live at the end of this section) ── */
.fn2-notice {
  background: #2c2c2c;
}
.fn2-notice__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 40px 60px;
}
.fn2-notice__header {
  text-align: center;
  margin-bottom: 36px;
}
.fn2-notice__header .fn2-eyebrow { margin-bottom: 8px; }
.fn2-notice__title {
  font-family: 'Tiempos Headline', Georgia, serif;
  font-size: 25px;
  font-weight: 500;
  color: #2c2c2c;
  margin: 0 0 6px;
}
.fn2-notice__sub {
  font-family: 'General Sans', sans-serif;
  font-size: 12.5px;
  color: #a39b8e;
  margin: 0;
}
.fn2-notice__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.fn2-notice__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fn2-notice__glyph { width: 72px; height: 44px; }
.fn2-notice__item-title {
  font-family: 'Tiempos Headline', Georgia, serif;
  font-weight: 600;
  font-size: 19px;
  color: #2c2c2c;
  line-height: 1.25;
}
.fn2-notice__item-body {
  font-size: 14px;
  line-height: 1.65;
  color: #5a5a5a;
  margin: 0;
  flex: 1;
}
/* Notice-grid bridge links: columns are narrow, so these often wrap to two
   lines — resting underlines + a stranded arrow read as clutter. Balance the
   wrap, drop the underline until hover. Arrows are glued with   in the
   data file. */
.fn2-notice__item .fn2-bridge,
.fn2-page .fn2-notice__item a.fn2-bridge {
  text-decoration: none;
  text-wrap: balance;
  line-height: 1.55;
  max-width: 24ch;
  /* uniform two-line footprint: every link block is the same height, so with
     bodies flexing above them the FIRST lines align across columns — short
     links sit on the first line instead of sinking to the bottom */
  display: block;
  min-height: calc(1.55em * 2);
}
.fn2-notice__item .fn2-bridge:hover,
.fn2-page .fn2-notice__item a.fn2-bridge:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(127, 96, 69, 0.35);
}

/* ink-palette overrides for the dark band (must follow the base rules) */
.fn2-notice .fn2-eyebrow--tobacco {
  color: #c29d7c;
  opacity: 1;
}
.fn2-notice__title { color: #f7f4f0; }
.fn2-notice__sub { color: rgba(247, 244, 240, 0.5); }
.fn2-notice__item-title { color: #f7f4f0; }
.fn2-notice__item-body { color: #c5bfb8; }
.fn2-notice__item .fn2-bridge,
.fn2-page .fn2-notice__item a.fn2-bridge { color: #c29d7c; }
.fn2-notice__item .fn2-bridge:hover,
.fn2-page .fn2-notice__item a.fn2-bridge:hover {
  color: #e8dccb;
  text-decoration-color: rgba(232, 220, 203, 0.4);
}

/* ── Annual letter card ── */
.fn2-letterband { background: #f1ebe2; }
.fn2-letterband__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 40px;
}
.fn2-lettercard {
  background: #fff;
  border: 1px solid #e5ddd2;
  border-radius: 12px;
  padding: 48px 56px;
  position: relative;
}
.fn2-lettercard__rainbow {
  position: absolute;
  top: 0;
  left: 56px;
  right: 56px;
  height: 3px;
  background: linear-gradient(90deg, #fb9000, #e8724a, #d94f6e, #9b59b6, #6cc8d7, #4aae8c);
  border-radius: 0 0 2px 2px;
}
.fn2-lettercard__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 44px;
  align-items: center;
}
.fn2-lettercard__eyebrow { margin-bottom: 14px; opacity: 1; }
.fn2-lettercard__title {
  font-family: 'Tiempos Headline', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  color: #2c2c2c;
  margin: 0 0 14px;
  line-height: 1.2;
  text-wrap: pretty;
}
.fn2-lettercard__para {
  font-size: 15.5px;
  line-height: 1.8;
  color: #4f4a44;
  margin: 0 0 10px;
}
.fn2-lettercard__para--em {
  font-style: italic;
  color: #5a5248;
  margin-bottom: 22px;
}
.fn2-lettercard__ctarow {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.fn2-lettercard__sig {
  font-family: 'General Sans', sans-serif;
  font-size: 12.5px;
  color: #888;
}
.fn2-lettercard__chart {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fn2-lettercard__chart-title {
  font-family: 'Tiempos Headline', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: #2c2c2c;
}
.fn2-lettercard__chart-sub {
  font-family: 'General Sans', sans-serif;
  font-size: 13px;
  color: #6b7378;
  margin-bottom: 8px;
}
.fn2-slope { width: 100%; height: auto; display: block; }
.fn2-lettercard__chart-note {
  font-family: 'General Sans', sans-serif;
  font-size: 12.5px;
  color: #a39b8e;
  margin-top: 6px;
}

/* ── Worth your time ── */
.fn2-worth { background: #f7f4f0; }
.fn2-worth--band {
  background: #faf8f5;
  border-top: 1px solid #ece7e0;
  border-bottom: 1px solid #ece7e0;
}
.fn2-worth__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 40px;
}
.fn2-worth__eyebrow {
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin-bottom: 6px;
}
.fn2-worth__sub {
  font-family: 'General Sans', sans-serif;
  font-size: 14px;
  color: #6b7378;
  margin: 0 0 10px;
}
.fn2-worth__list { display: flex; flex-direction: column; }
.fn2-worth__item {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid #e5e0db;
  transition: opacity 0.2s;
}
.fn2-worth__item:last-child { border-bottom: none; }
.fn2-worth__item:hover { opacity: 0.75; }
.fn2-worth__item-title {
  font-family: 'General Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2c2c2c;
  line-height: 1.35;
  margin-bottom: 4px;
}
.fn2-worth__item-blurb {
  font-size: 13.5px;
  color: #777;
  line-height: 1.5;
}

/* ── Find + recent ── */
.fn2-find {
  background: #fff;
  border-top: 1px solid #ece7e0;
}
.fn2-find__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 40px 60px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
}
.fn2-find__search {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.fn2-search { display: flex; gap: 10px; width: 100%; }
.fn2-search__input {
  flex: 1;
  min-width: 0;
  font-family: 'General Sans', sans-serif;
  font-size: 14.5px;
  color: #2c2c2c;
  background: #faf8f5;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.fn2-search__input:focus {
  border-color: #7f6045;
  background: #fff;
}
.fn2-search__btn {
  font-family: 'General Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  background: #fb9000;
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.2s;
}
.fn2-search__btn:hover { background: #db7a05; }
.fn2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fn2-chip,
.fn2-page a.fn2-chip {
  font-family: 'General Sans', sans-serif;
  font-size: 12.5px;
  color: #7f6045;
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 6px 14px;
  border-radius: 20px;
  transition: color 0.2s, border-color 0.2s;
}
.fn2-chip:hover,
.fn2-page a.fn2-chip:hover {
  border-color: var(--fn2-chip, #fb9000);
  color: var(--fn2-chip, #fb9000);
}
.fn2-find__recent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.fn2-autodot {
  font-family: 'General Sans', sans-serif;
  font-size: 11px;
  color: #a39b8e;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fn2-recent__list { display: flex; flex-direction: column; }
.fn2-recent__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid #e5e0db;
  transition: opacity 0.2s;
}
.fn2-recent__item:last-child { border-bottom: none; }
.fn2-recent__item:hover { opacity: 0.75; }
.fn2-recent__title {
  font-family: 'General Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2c2c2c;
  line-height: 1.4;
}
.fn2-recent__date {
  font-family: 'General Sans', sans-serif;
  font-size: 11.5px;
  color: #a39b8e;
  white-space: nowrap;
}

/* ── Bottom CTA ── */
.fn2-cta { background: #2c2c2c; }
.fn2-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 40px;
  text-align: center;
}
.fn2-cta__title {
  font-family: 'Tiempos Headline', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  color: #f7f4f0;
  margin: 0 0 12px;
  text-wrap: pretty;
}
.fn2-cta__sub {
  font-size: 16px;
  line-height: 1.7;
  color: #c5bfb8;
  margin: 0 0 24px;
}

/* ── Full index (/field-notes/all/) ── */
.fn2-index { background: #f7f4f0; }
.fn2-index__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 40px 64px;
}
.fn2-index__section { margin-bottom: 44px; }
.fn2-index__heading {
  font-family: 'Tiempos Headline', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #2c2c2c;
  border-left: 3px solid #fb9000;
  padding-left: 14px;
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.fn2-index__count {
  font-family: 'General Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #a39b8e;
}
.fn2-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 40px;
}
.fn2-index__list li {
  padding: 6px 0;
  break-inside: avoid;
  line-height: 1.45;
}
.fn2-index__list a,
.fn2-page .fn2-index__list a {
  font-family: 'General Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #4f4a44;
  transition: color 0.2s;
}
.fn2-index__list a:hover,
.fn2-page .fn2-index__list a:hover { color: #7f6045; }

/* ── Annual letter page ── */
.fn2-letter {
  max-width: 680px;
  margin: 0 auto;
  padding: 72px 40px 40px;
}
.fn2-letter__eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  opacity: 1;
  margin-bottom: 18px;
}
.fn2-letter__title {
  font-family: 'Tiempos Headline', Georgia, serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #2c2c2c;
  margin: 0 0 14px;
  text-wrap: pretty;
}
.fn2-letter__dateline {
  font-family: 'General Sans', sans-serif;
  font-size: 13px;
  color: #a39b8e;
  margin-bottom: 40px;
}
.fn2-letter p {
  font-size: 17.5px;
  line-height: 1.85;
  margin: 0 0 24px;
}
.fn2-letter h2 {
  font-family: 'Tiempos Headline', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: #2c2c2c;
  margin: 44px 0 14px;
}
.fn2-letter a { text-decoration: underline; text-underline-offset: 3px; }
.fn2-letter .fn2-chartcard {
  background: #fff;
  border: 1px solid #e5ddd2;
  border-radius: 12px;
  padding: 32px 36px;
  margin: 40px 0;
}
.fn2-letter .fn2-chartcard__title {
  font-family: 'Tiempos Headline', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: #2c2c2c;
  margin-bottom: 2px;
}
.fn2-letter .fn2-chartcard__sub {
  font-family: 'General Sans', sans-serif;
  font-size: 13px;
  color: #6b7378;
  margin-bottom: 12px;
}
.fn2-letter .fn2-chartcard__note {
  font-family: 'General Sans', sans-serif;
  font-size: 12.5px;
  color: #a39b8e;
  margin-top: 8px;
}
.fn2-letter__sig,
.fn2-letter p.fn2-letter__sig {
  font-family: 'Tiempos Headline', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  color: #2c2c2c;
  margin: 28px 0 4px;
}
.fn2-letter__footline {
  font-family: 'General Sans', sans-serif;
  font-size: 12.5px;
  color: #a39b8e;
}
.fn2-cta--letter { margin-top: 48px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .fn2-notice__grid { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
  .fn2-lettercard { padding: 36px 32px; }
  .fn2-lettercard__rainbow { left: 32px; right: 32px; }
  .fn2-lettercard__grid { grid-template-columns: 1fr; gap: 32px; }
  .fn2-find__inner { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 700px) {
  .fn2-hero__inner { padding: 48px 24px 8px; }
  .fn2-hero__title { font-size: 34px; }
  .fn2-shelves__grid { grid-template-columns: 1fr; padding: 32px 24px 48px; }
  .fn2-notice__inner,
  .fn2-find__inner,
  .fn2-worth__inner,
  .fn2-cta__inner,
  .fn2-index__inner { padding-left: 24px; padding-right: 24px; }
  .fn2-letterband__inner { padding: 44px 24px; }
  .fn2-letter { padding: 48px 24px 24px; }
  .fn2-letter__title { font-size: 32px; }
  .fn2-index__list { columns: 1; }
}
@media (max-width: 560px) {
  .fn2-notice__grid { grid-template-columns: 1fr; }
  .fn2-notice__item .fn2-bridge { min-height: 0; } /* single column: no cross-column alignment to hold */
  .fn2-shelf__head { flex-direction: column; gap: 6px; }
  .fn2-shelf__tag { margin-top: 0; }
  .fn2-search { flex-direction: column; }
  .fn2-search__btn { align-self: flex-start; }
  .fn2-recent__item { flex-direction: column; gap: 2px; }
}