/* ============================================================
   farrarilabs.com — THEME (locked by Naphat's approved mock,
   job j1004-2e456a, design rounds 8–13)

   Mood: marketplace x muse, warm edition — warm white paper,
   ink type, terracotta spark, handwritten red-pen notes, soft
   card shadows. Nothing neon, nothing cold.

   Palette:
     canvas      #fdfaf4 (hero/district/note/desk pages)
     paper       #f6efe4 (roster/notes/fleet pages, body.soft)
     card        #ffffff, 1px border #e9decb, radius 16,
                 shadow rgba(61,41,26,.06)
     ink         #33261a (text + the one dark card, the fleet)
     text / mute #7d6a58 / #b3a08b
     red         #c9432b terracotta — spark, active tab, TL;DR bar,
                 step numbers, pen #bf4a2f for handwritten notes
     blue        #2d66c9 — pills and links
     chips       ranni #fae0d0/#a0431d · manchester #dce8fa/#1e509e
                 detroit #f9d9d5/#a32f3d · alexandria #dee1f6/#35418f
     desk fields #f3ecdf

   Typography (self-hosted in assets/fonts/, OFL; chosen to NOT
   overlap fastwork.com or muse.ai fonts):
     Figtree      — UI + display, headline 800 tight
     Space Mono   --mono: aliases, captions, step numbers, TL;DR
     Patrick Hand --hand: red-pen annotations, rotated ~2deg

   Components: nav (wordmark + Notes + blue "Say hi" pill / back
   pill + district chip), .card, .chip, .pill-*, .stat tiles,
   .tabs (red active underline), .scap section captions with
   .righthand pen notes, .story, .proof + .prow, .shots/.shot
   frames with .capb mono captions, .wflow numbered steps,
   .stackboxes/.sbox round pills, .tldr red-bar card, .nthumbs
   index strip, .fleetcard (the only dark card), org chart
   (.owner/.kids/.kid.boss), .kb shared-memory band, desk form.

   Page-section rules live in assets/site.css; tokens only here.
   ============================================================ */

:root{
  --bg:#fdfaf4; --bg-soft:#f6efe4; --card:#ffffff;
  --ink:#33261a; --text:#7d6a58; --mute:#b3a08b;
  --line:#e9decb; --line-soft:#f0e7d7;
  --accent:#2d66c9; --red:#c9432b; --pen:#bf4a2f;
  --ranni-bg:#fae0d0; --ranni-tx:#a0431d;
  --manc-bg:#dce8fa; --manc-tx:#1e509e;
  --det-bg:#f9d9d5;  --det-tx:#a32f3d;
  --alex-bg:#dee1f6; --alex-tx:#35418f;
  --font:'Figtree',-apple-system,'SF Pro Display','Helvetica Neue',sans-serif;
  --mono:'Space Mono','SF Mono',ui-monospace,monospace;
  --hand:'Patrick Hand',cursive;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
body{min-height:100vh;font-family:var(--font);color:var(--ink);background:var(--bg);display:flex;flex-direction:column}
.soft{background:var(--bg-soft)}
nav{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex:none}
.wordmark{font-weight:800;font-size:17px;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.spark{width:14px;height:14px;flex:none}
.spark-lg{width:22px;height:22px}
.nav-r{display:flex;align-items:center;gap:16px}
.navlink{font-size:14px;color:var(--text);text-decoration:none;font-weight:500}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:700;text-decoration:none;white-space:nowrap}
.pill-blue{background:var(--accent);color:#fff;font-size:14px;padding:10px 18px}
.pill-gray{background:#f3ecdf;color:var(--ink);font-size:13px;padding:8px 14px}
.pill-white{background:#fff;color:var(--ink);font-size:14px;padding:10px 18px;border:1px solid var(--line);box-shadow:0 6px 16px rgba(61,41,26,.08)}
.chip{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;letter-spacing:.07em;white-space:nowrap;flex:none}
.c-ranni{background:var(--ranni-bg);color:var(--ranni-tx)}
.c-manc{background:var(--manc-bg);color:var(--manc-tx)}
.c-det{background:var(--det-bg);color:var(--det-tx)}
.c-alex{background:var(--alex-bg);color:var(--alex-tx)}
.c-core{background:#f3ecdf;color:#7d6a58}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 24px rgba(61,41,26,.06)}
.cave{font-family:var(--hand);color:var(--pen);font-size:20px;line-height:1;font-weight:400}
.mono{font-family:var(--mono);font-size:11px;color:var(--mute)}
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line-soft)}
.tab{font-size:14px;color:var(--text);padding:10px 2px;font-weight:500}
.tab.on{color:var(--red);font-weight:800;box-shadow:inset 0 -2px 0 var(--red)}
.stat b{font-size:26px;font-weight:800;letter-spacing:-.02em;display:block;line-height:1.1}
.stat span{font-size:11px;color:var(--mute);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.page{flex:1;display:flex;flex-direction:column;min-height:0}
footer{flex:none;margin-top:auto;padding:14px 20px 18px;border-top:1px solid var(--line-soft);font-size:11px;color:var(--mute);display:flex;justify-content:space-between}
h1{letter-spacing:-.02em;line-height:1.02;font-weight:800}
/* R9 shared sections */
.sec{padding:18px 20px 0;flex:none}
.scap{font-size:11px;font-weight:800;letter-spacing:.09em;color:var(--mute);margin-bottom:12px}
.shots{display:flex;gap:10px}
.shot{flex:1;padding:0;overflow:hidden}
.shot .ph{height:104px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center}
.shot .capb{padding:8px 12px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:9px;color:var(--mute)}
.logi{font-family:var(--mono);font-size:9.5px;color:var(--text);line-height:1.9;text-align:left}
.logi b{color:var(--red)}
.logi .more{color:var(--mute)}
.dots{display:flex;gap:6px}
.dots span{width:21px;height:21px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:10px;color:var(--red);display:flex;align-items:center;justify-content:center;font-weight:800}
.wave{display:flex;align-items:flex-end;gap:3px;height:40px}
.wave i{width:4px;border-radius:2px;background:var(--red);opacity:.85}
.voic{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 12px}
.voic .vt{font-family:var(--mono);font-size:9.5px;color:var(--text)}
.fall{display:flex;align-items:flex-end;gap:5px;height:38px}
.fall i{width:8px;border-radius:2px 2px 0 0;background:var(--red)}
.mrow{font-family:var(--mono);font-size:9.5px;color:var(--text);line-height:2;text-align:left}
.mrow b{color:var(--red)}
.tags{display:flex;align-items:baseline;gap:8px}
.tags s{font-family:var(--mono);font-size:11px;color:var(--mute)}
.tags b{font-size:18px;font-weight:800;color:var(--red);letter-spacing:-.02em}
.stamp{font-family:var(--hand);color:var(--pen);border:1.5px dashed var(--pen);border-radius:10px;padding:4px 10px;transform:rotate(-6deg);font-size:15px}
.wflow{padding:14px 18px;display:flex;flex-direction:column;gap:11px}
.wrow{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.45}
.wnum{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--red);border:1px solid var(--line);background:#fff;border-radius:999px;width:22px;height:22px;flex:none;display:flex;align-items:center;justify-content:center;margin-top:1px}
.stackboxes{display:flex;flex-wrap:wrap;gap:8px}
.sbox{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--ink);box-shadow:0 4px 10px rgba(61,41,26,.05)}
.scap .righthand{float:right;font-family:var(--hand);font-size:15px;color:var(--pen);text-transform:none;letter-spacing:0;font-weight:400;transform:rotate(-2deg)}
/* R10 — notes: TL;DR + shots */
.tldr{margin:14px 24px 0;padding:12px 14px;border-left:3px solid var(--red);border-radius:12px}
.tlabel{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--red)}
.ttext{font-size:14px;font-weight:700;color:var(--ink);line-height:1.45;margin-top:6px}
.ntldr{font-size:12.5px;line-height:1.45;color:var(--text);margin-top:7px}
.ntldr b{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--red);margin-right:6px}
.nthumbs{display:flex;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.nth{width:62px;height:42px;border-radius:8px;background:var(--bg-soft);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:7.5px;color:var(--mute)}
.nthmore{align-self:center;font-family:var(--mono);font-size:9px;color:var(--mute)}
.phx{font-family:var(--mono);font-size:8.5px;color:var(--mute);border:1px dashed var(--line);border-radius:6px;padding:4px 8px;background:#fff}