/* ════════════════════════════════════════════════════════════
   Workfied — Field Notes (blog) shared styles
   Listing (.fn-*) + article (.article/.prose + conversion blocks).
   Built on the live tokens in styles.css. Light · Geist · indigo.
   ════════════════════════════════════════════════════════════ */

/* ── Listing ── */
.fn-head { max-width: 720px; margin: 0 auto; text-align: center; }
.fn-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 32px 0 0; }
.fn-filter { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line2); background: #fff; font: 500 14px var(--font); color: var(--ink2); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.fn-filter:hover { border-color: var(--i300); color: var(--i700); }
.fn-filter.on { background: var(--i600); border-color: var(--i600); color: #fff; }

.fn-featured { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; border: 1px solid var(--line2); border-radius: var(--r-xl); overflow: hidden; background: #fff; box-shadow: var(--sh-2); margin-top: 44px; }
.fn-featured .thumb { background: linear-gradient(150deg, #DDE0FF, #EFF0FE); display: flex; align-items: center; justify-content: center; min-height: 300px; color: var(--i400); }
.fn-featured .body { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.fn-featured .tag { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--i700); }
.fn-featured h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; margin: 14px 0 0; }
.fn-featured h2 a { color: var(--ink); } .fn-featured h2 a:hover { color: var(--i700); }
.fn-featured p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink2); }
.fn-by { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.fn-by .av { width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
.fn-by .nm { font-size: 14px; font-weight: 600; color: var(--ink); } .fn-by .meta { font-size: 12.5px; color: var(--ink3); }
@media (max-width: 820px) { .fn-featured { grid-template-columns: 1fr; } .fn-featured .thumb { min-height: 180px; } }

.fn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.fn-card { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s, transform .2s; }
.fn-card:hover { border-color: var(--line2); box-shadow: var(--sh-2); transform: translateY(-3px); }
.fn-card .thumb { background: linear-gradient(150deg, #E7E9FF, #F4F5FF); height: 150px; display: flex; align-items: center; justify-content: center; color: var(--i300); }
.fn-card .body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fn-card .tag { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--i700); }
.fn-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -.018em; line-height: 1.2; margin: 0; }
.fn-card h3 a { color: var(--ink); } .fn-card h3 a:hover { color: var(--i700); }
.fn-card p { font-size: 14px; color: var(--ink2); line-height: 1.5; margin: 0; flex: 1; }
.fn-card .meta { font-size: 12.5px; color: var(--ink3); }
@media (max-width: 820px) { .fn-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fn-grid { grid-template-columns: 1fr; } }
.fn-empty { margin-top: 24px; text-align: center; color: var(--ink3); font-size: 14.5px; }
.doc-ic { width: 56px; height: 56px; }

/* ── Article chrome ── */
.article { max-width: 720px; margin: 0 auto; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink3); }
.breadcrumb a { color: var(--ink3); } .breadcrumb a:hover { color: var(--i700); }
.breadcrumb .sep { color: var(--ghost); }
.cat-pill { display: inline-block; margin-top: 20px; padding: 5px 13px; border-radius: 999px; background: var(--i50); color: var(--i700); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.art-h1 { margin: 18px 0 0; font-size: clamp(32px, 4.6vw, 52px); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; }
.art-deck { margin: 20px 0 0; font-size: 19px; line-height: 1.6; color: var(--ink2); }
.art-deck b { color: var(--ink); }
.byline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 26px 0 0; padding-bottom: 26px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.byline .who { display: flex; align-items: center; gap: 12px; }
.byline .av { width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; }
.byline .nm { font-size: 15px; font-weight: 600; color: var(--ink); }
.byline .meta { font-size: 13px; color: var(--ink3); margin-top: 2px; }
.byline .share { display: flex; gap: 8px; }
.byline .share a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; color: var(--ink2); }
.byline .share a:hover { border-color: var(--i300); color: var(--i700); }

/* ── Prose ── */
.prose { margin-top: 30px; }
.prose p { font-size: 17.5px; line-height: 1.75; color: var(--ink2); margin: 0 0 18px; }
.prose p b { color: var(--ink); }
.prose h2 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin: 40px 0 14px; }
.prose h3 { font-size: 19px; font-weight: 600; color: var(--ink); margin: 28px 0 10px; }
.prose ul { margin: 0 0 18px; padding-left: 22px; }
.prose ul li { font-size: 17px; line-height: 1.7; color: var(--ink2); margin: 0 0 8px; }
.prose .lead-in { font-size: 19px; color: var(--ink); }

.answer-box { border: 1px solid var(--line2); border-left: 3px solid var(--i600); background: var(--bg2); border-radius: var(--r-md); padding: 18px 20px; margin: 0 0 24px; }
.answer-box p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink); }

/* impact-reframe */
.reframe { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin: 8px 0 10px; }
.reframe .rf-card { border: 1px solid var(--line2); border-radius: var(--r-md); padding: 18px; background: #fff; }
.reframe .rf-tag { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); }
.reframe .was { margin: 8px 0 0; font-size: 16px; color: var(--ink3); text-decoration: line-through; text-decoration-color: var(--line3); }
.reframe .now { margin: 8px 0 0; font-size: 16px; font-weight: 600; color: var(--green); }
.reframe .rf-arrow { color: var(--i600); }
@media (max-width: 640px) { .reframe { grid-template-columns: 1fr; gap: 10px; } .reframe .rf-arrow { transform: rotate(90deg); justify-self: center; } }

/* proof strip */
.proof-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0; }
.proof { border: 1px solid var(--line2); border-radius: var(--r-md); padding: 18px; background: var(--bg2); }
.proof .pn { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.proof .pt { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink2); }
.proof .ps { margin: 10px 0 0; font-size: 11.5px; color: var(--ink3); }
@media (max-width: 640px) { .proof-strip { grid-template-columns: 1fr; } }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0; }
.step { border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; background: var(--bg2); }
.step b { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--i600); color: #fff; font-size: 13px; font-weight: 700; }
.step h4 { margin: 12px 0 0; font-size: 15.5px; } .step p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink2); line-height: 1.5; }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }

/* opinion / house view */
.opinion { border-radius: var(--r-lg); background: var(--ink-deep); color: #fff; padding: 30px 28px; margin: 14px 0; }
.opinion p { color: var(--ondark); font-size: 19px; line-height: 1.55; margin: 0; font-weight: 500; }
.opinion .by { margin-top: 14px; font-size: 13.5px; color: var(--ondark3); }

/* value table */
.vtable { width: 100%; border-collapse: collapse; border: 1px solid var(--line2); border-radius: var(--r-md); overflow: hidden; margin: 8px 0; }
.vtable th, .vtable td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: top; }
.vtable th { background: var(--bg2); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); }
.vtable td.was { color: var(--ink3); } .vtable td.now { color: var(--ink); } .vtable td.now b { color: var(--green); }
.vtable tr:last-child td { border-bottom: 0; }

/* artifact */
.artifact { border: 1px solid var(--line2); border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1); overflow: hidden; margin: 8px 0; }
.artifact .abar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1px solid var(--line); background: var(--bg2); font-size: 12.5px; color: var(--ink3); }
.artifact .abar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line3); display: inline-block; }
.artifact .asec { padding: 12px 18px; border-bottom: 1px dashed var(--line); } .artifact .asec:last-child { border-bottom: 0; }
.artifact .ak2 { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--i700); }
.artifact .av2 { margin: 5px 0 0; font-size: 14.5px; color: var(--ink); } .artifact .av2 .imp { color: var(--green); font-weight: 600; }

/* inline CTA + privacy */
/* ── Free-template freebie box: HIDDEN until we have resources to send.
   To re-enable the "email me the template" capture on all blog posts,
   delete the single rule below. ── */
.inline-cta { display: none !important; }
.inline-cta { border: 1px solid var(--i100); background: var(--i50); border-radius: var(--r-lg); padding: 22px 24px; margin: 16px 0; text-align: center; }
.inline-cta h3 { margin: 0; font-size: 19px; color: var(--ink); letter-spacing: -.015em; }
.inline-cta p { margin: 8px 0 16px; font-size: 14.5px; color: var(--ink2); }
.privacy-line { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line2); border-radius: var(--r-md); padding: 16px 18px; background: var(--bg2); margin: 16px 0; }
.privacy-line svg { color: var(--i600); flex-shrink: 0; margin-top: 1px; }
.privacy-line p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink2); } .privacy-line b { color: var(--ink); }
.seo-cta-note { margin-top: 12px; font-size: 13px; color: var(--ink3); }

/* related / internal links */
.related { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.related h3 { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); margin: 0 0 14px; }
.related a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 500; color: var(--ink); }
.related a:hover { color: var(--i700); } .related a span { display: block; font-size: 13.5px; color: var(--ink3); font-weight: 400; margin-top: 3px; }
.faq { max-width: 720px; }

/* ── Deep-standard components (Batch 1+) ── */

/* include / cut ledger */
.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 24px; }
.ledger .col { border: 1px solid var(--line2); border-radius: var(--r-md); padding: 20px 22px; background: var(--bg2); }
.ledger .col.keep { border-top: 3px solid var(--green); }
.ledger .col.cut { border-top: 3px solid #D26460; }
.ledger .lh { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 14px; }
.ledger .keep .lh { color: var(--green); }
.ledger .cut .lh { color: #BC4843; }
.ledger ul { margin: 0; padding: 0; list-style: none; }
.ledger li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.55; color: var(--ink2); margin: 0 0 12px; }
.ledger li:last-child { margin-bottom: 0; }
.ledger .keep li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 700; }
.ledger .cut li::before { content: "✕"; position: absolute; left: 0; top: 0; color: #BC4843; font-weight: 700; }
.ledger li b { color: var(--ink); }
@media (max-width: 640px) { .ledger { grid-template-columns: 1fr; } }

/* prioritized list */
.prioritize { counter-reset: pri; list-style: none; margin: 16px 0 24px; padding: 0; }
.prioritize li { position: relative; padding: 2px 0 0 48px; margin: 0 0 18px; font-size: 16.5px; line-height: 1.6; color: var(--ink2); }
.prioritize li:last-child { margin-bottom: 0; }
.prioritize li::before { counter-increment: pri; content: counter(pri); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--i600); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.prioritize li b { color: var(--ink); }

/* evidence card kicker */
.proof .pk { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--i600); margin: 0 0 9px; }
.proof.ev .pn { font-size: 20px; line-height: 1.15; }

/* illustration + image SEO */
.fig { margin: 26px 0; }
.fig img { width: 100%; height: auto; display: block; border: 1px solid var(--line2); border-radius: var(--r-lg); background: var(--bg2); }
.fig figcaption { margin: 11px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink3); text-align: center; }
/* table of contents (long-form 1500+ words) + back-to-top */
.prose h2 { scroll-margin-top: 88px; }
.toc { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg2); padding: 20px 24px; margin: 4px 0 30px; }
.toc .toc-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); margin: 0 0 12px; }
.toc ol { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.toc a { color: var(--ink2); text-decoration: none; font-size: 14.5px; line-height: 1.4; }
.toc a:hover { color: var(--i700); text-decoration: underline; }
.back-to-top { display: inline-flex; align-items: center; gap: 6px; margin: 26px 0 4px; font-size: 13px; color: var(--i700); font-weight: 500; text-decoration: none; }
.back-to-top:hover { text-decoration: underline; }
.byline .meta time { color: inherit; }