/* ============================================================
   Finclara — design system (website)
   One system across every page: paper, ink, green, saffron;
   Fraunces (display) · Newsreader (text) · IBM Plex Mono (labels).
   Loaded LAST in <head> on every page (baked by generate.mjs), after any
   per-page <style> and after broadsheet-skin.css, so it is the final word
   on frame, type and component vocabulary. Page hooks used by scripts
   (ids, .mrow/.ml/.mv/.mb/.yb/.yoy, #xa-*, #yt/#pt, .pp …) are styled here,
   never renamed — nothing in this file changes behaviour.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#f7f3ea; --paper-2:#efe9da; --sage:#e9ecdf; --cream:#fffdf6;
  --ink:#1c1a16; --ink-soft:#5a5142; --ink-dim:#8a8071;
  --rule:#d8d1bf; --rule-dark:#1c1a16;
  --green:#1c4d3a; --green-soft:#2a6b52; --saffron:#b54708; --midnight:#16243d;
  --serif:"Fraunces",Georgia,serif; --bodyf:"Newsreader",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --fc-r:3px; --fc-r2:6px;
  --fc-shadow:2px 2px 0 rgba(28,26,22,.07); --fc-shadow-strong:3px 3px 0 rgba(28,26,22,.15); --fc-shadow-card:4px 4px 0 rgba(28,26,22,.10);
  --fc-wrap:1180px;
  /* legacy dark-template tokens → system (pages that predate the skin) */
  --bg:var(--paper); --surface:var(--cream); --panel:var(--cream); --panel-strong:var(--paper-2);
  --border:var(--rule); --text:var(--ink); --muted:var(--ink-soft); --dim:var(--ink-dim);
  --gold:var(--saffron); --good:var(--green); --teal:var(--green); --signal:var(--green);
  --soft:var(--ink-soft); --paper2:var(--paper-2); --green2:var(--green-soft); --mid:var(--midnight);
}

/* ── Base ─────────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%;}
body{background:var(--paper) !important;color:var(--ink) !important;font-family:var(--bodyf) !important;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--serif) !important;color:var(--ink);letter-spacing:-.012em;}
h1{font-weight:740;}
::selection{background:var(--saffron);color:var(--cream);}
button,input,select,textarea{font-family:var(--bodyf);}
input,select,textarea{background:var(--cream);color:var(--ink);}
strong,b{font-weight:600;}

/* ── Layout primitives ─────────────────────────────────────── */
.fc-wrap{max-width:var(--fc-wrap);margin:0 auto;padding:0 24px;}
.fc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px;}
.fc-span7{grid-column:span 7;} .fc-span5{grid-column:span 5;} .fc-span4{grid-column:span 4;} .fc-span8{grid-column:span 8;} .fc-span6{grid-column:span 6;} .fc-span12{grid-column:span 12;}
.fc-band{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}

/* ── Type ──────────────────────────────────────────────────── */
.fc-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron);}
.fc-h1{font-family:var(--serif);font-weight:740;font-size:clamp(36px,4.6vw,58px);line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--ink);text-wrap:balance;}
.fc-h2{font-family:var(--serif);font-weight:740;font-size:clamp(24px,2.4vw,32px);line-height:1.1;letter-spacing:-.012em;margin:0;}
.fc-lede{font-size:19px;line-height:1.55;color:var(--ink-soft);margin:0;max-width:62ch;}
.fc-lede em{color:var(--ink);}
.fc-note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.fc-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron);}
.fc-small{font-size:13.5px;line-height:1.55;color:var(--ink-soft);}
.fc-sechead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:12px;}
.fc-sechead .fc-note{margin-left:2px;}
.fc-sechead .fc-spacer{flex:1;}

/* ── Buttons / chips / pills ───────────────────────────────── */
.fc-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:var(--fc-r);padding:14px 22px;cursor:pointer;border:1px solid transparent;line-height:1;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;}
.fc-btn-primary{background:var(--green);color:var(--cream);box-shadow:var(--fc-shadow-strong);}
.fc-btn-primary:hover{background:var(--green-soft);transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(28,26,22,.15);}
.fc-btn-ink{background:var(--ink);color:var(--cream);}
.fc-btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.fc-btn-ghost:hover{background:var(--ink);color:var(--paper);}
.fc-chip{display:inline-block;font-family:var(--mono);font-size:11.5px;color:var(--saffron);border:1px dashed var(--saffron);border-radius:14px;padding:6px 12px;text-decoration:none;line-height:1.2;}
.fc-chip:hover{background:rgba(181,71,8,.07);}
.fc-pill{display:inline-block;font-family:var(--mono);font-size:11px;border-radius:12px;padding:2px 9px;border:1px solid var(--rule);color:var(--ink-soft);white-space:nowrap;}
.fc-pill-up{color:var(--green-soft);border-color:var(--green-soft);}
.fc-pill-down{color:var(--saffron);border-color:var(--saffron);}
.fc-seg{display:flex;gap:6px;flex-wrap:wrap;}
.fc-seg a,.fc-seg span,.fc-seg button{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule);color:var(--ink-soft);border-radius:var(--fc-r);padding:5px 10px;background:transparent;text-decoration:none;cursor:pointer;}
.fc-seg .on{background:var(--ink);color:var(--cream);border-color:var(--ink);}

/* ── Cards ─────────────────────────────────────────────────── */
.fc-card{background:var(--cream);border:1px solid var(--rule);border-radius:var(--fc-r2);box-shadow:var(--fc-shadow);padding:22px;}
.fc-card-strong{border-color:var(--ink);box-shadow:var(--fc-shadow-card);}
.fc-big{font-family:var(--serif);font-weight:740;font-size:44px;line-height:1;letter-spacing:-.02em;color:var(--green);}

/* ── Ask Clara bar (a plain GET form to /clara.html?q=) ────── */
.fc-ask{display:flex;border:1.5px solid var(--ink);border-radius:var(--fc-r2);background:var(--cream);overflow:hidden;box-shadow:var(--fc-shadow);}
.fc-ask input{flex:1;min-width:0;border:0;background:transparent;padding:14px 16px;font-family:var(--bodyf);font-size:16px;color:var(--ink);outline:none;}
.fc-ask input::placeholder{color:var(--ink-dim);font-style:italic;}
.fc-ask button{border:0;background:var(--green);color:var(--cream);font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:0 20px;cursor:pointer;}
.fc-ask button:hover{background:var(--green-soft);}

/* ── Ledger pages: body.fc-hub (index.html, markets/index.html).
      The .mrow/.ml/.mv/.mb/.yb/.yoy contract is what the hydration scripts
      and bakeMarketsIndex rely on — styled here, never renamed. Scoped to
      the body class so short class names cannot leak into other pages. ── */
.fc-ledger .head,.fc-hub .head{display:grid;grid-template-columns:1fr 210px 120px;gap:12px;padding:6px 4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--rule);}
.fc-ledger .head span:not(:first-child),.fc-hub .head span:not(:first-child){text-align:right;}
.fc-ledger .head span:last-child,.fc-hub .head span:last-child{text-align:left;}
.fc-hub .mrow{display:grid;grid-template-columns:1fr 210px 120px;gap:12px;align-items:baseline;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;padding:12px 4px;margin:0;text-decoration:none;color:var(--ink);transition:background .12s;}
.fc-hub a.mrow:hover{background:var(--paper-2);border-color:var(--rule);}
.fc-hub .ml{color:var(--ink);font-weight:500;font-size:16px;font-family:var(--bodyf);}
.fc-hub .mv{font-family:var(--serif);font-weight:740;font-size:18px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;}
.fc-hub .mb{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);text-align:left;}
.fc-hub .yb{font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.08em;color:var(--ink-soft);}
.fc-hub .yoy{color:var(--ink-soft);opacity:1;font-size:12px;cursor:help;font-family:var(--bodyf);}
/* market families on the hub: a parent is a group header, not a destination */
.fc-hub .mparent{background:transparent;border:0;border-bottom:1.5px solid var(--ink);cursor:default;margin-top:22px;padding:6px 4px 6px;border-radius:0;}
.fc-hub .mparent:hover{background:transparent;}
.fc-hub .mparent .ml{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron);font-weight:500;}
.fc-hub .mparent .mv{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ink-soft);letter-spacing:.06em;}
.fc-hub .mtag{margin-left:9px;font-size:9.5px;letter-spacing:.06em;text-transform:none;color:var(--ink-soft);opacity:.8;font-weight:400;}
.fc-hub .mchild{margin-left:0;padding-left:16px;}
.fc-hub .wrap>h1{font-family:var(--serif);font-weight:740;font-size:clamp(32px,4.4vw,50px);line-height:1.06;letter-spacing:-.02em;margin:34px 0 10px;}
.fc-hub .wrap>.intro{color:var(--ink-soft);font-size:17.5px;line-height:1.6;max-width:68ch;margin:0 0 28px;}
.fc-hub .wrap>.intro strong{color:var(--ink);font-weight:600;}
.fc-hub .wrap>footer{border-top:1px solid var(--rule);padding:22px 0 34px;color:var(--ink-soft);font-size:13.5px;margin-top:34px;line-height:1.6;}
.fc-hub .wrap>footer strong{color:var(--ink);font-weight:600;}
@media(max-width:640px){
  .fc-hub .mrow,.fc-ledger .head,.fc-hub .head{grid-template-columns:1fr auto;gap:10px;}
  .fc-hub .mb,.fc-ledger .head span:last-child,.fc-hub .head span:last-child{display:none;}
  .fc-hub .mv{font-size:17px;}
}

/* ── Market detail pages: body.fc-market (market.tpl.html → markets/*.html).
      Scoped to the body class; ids/classes the hydration script uses
      (#hv #hy #hs #ha #yt #pt #ylock .mut .thin .pl .blurred) are untouched. ── */
.fc-market .wrap .crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:22px;}
.fc-market .wrap .crumb a{color:var(--ink-soft);text-decoration:none;}
.fc-market .wrap .crumb a:hover{color:var(--green);}
.fc-market .wrap>h1{font-family:var(--serif);font-weight:740;font-size:clamp(32px,4.4vw,50px);line-height:1.06;letter-spacing:-.02em;margin:14px 0 8px;}
.fc-market .wrap>.intro{color:var(--ink-soft);font-size:17.5px;line-height:1.6;max-width:68ch;margin:0 0 28px;}
.fc-market .wrap>.intro strong{color:var(--ink);font-weight:600;}
.fc-market .wrap>.hero{background:var(--cream);border:1px solid var(--rule);border-radius:var(--fc-r2);box-shadow:var(--fc-shadow);padding:22px 24px;margin:18px 0 26px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:baseline;}
.fc-market .hv{font-family:var(--serif);font-weight:740;font-size:clamp(34px,5vw,48px);line-height:1;letter-spacing:-.02em;color:var(--green);font-variant-numeric:tabular-nums;}
.fc-market .hy{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.fc-market .hb{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--saffron);border:1px solid var(--saffron);border-radius:12px;padding:2px 9px;}
.fc-market .hb:empty{display:none;}
.fc-market .hero .yoy{font-size:14px;color:var(--ink-soft);}
.fc-market .hnote{flex-basis:100%;color:var(--ink-soft);font-size:14px;line-height:1.55;margin-top:6px;border-top:1px solid var(--rule);padding-top:10px;}
.fc-market .wrap>h2{font-family:var(--serif);font-weight:740;font-size:24px;letter-spacing:-.012em;margin:34px 0 10px;padding-bottom:10px;border-bottom:2px solid var(--ink);}
.fc-market .wrap>table{width:100%;border-collapse:collapse;font-size:15px;background:transparent;}
.fc-market .wrap>table th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding:8px 8px;border-bottom:1px solid var(--rule);font-weight:500;}
.fc-market .wrap>table td{padding:12px 8px;border-bottom:1px solid var(--rule);vertical-align:baseline;}
.fc-market .wrap>table td.num{text-align:right;font-family:var(--serif);font-weight:740;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums;}
.fc-market .wrap>table th.num{text-align:right;}
.fc-market .mut{color:var(--ink-soft);}
.fc-market .thin{font-family:var(--mono);font-size:10px;color:var(--ink-soft);cursor:help;letter-spacing:.04em;}
.fc-market .pl{font-family:var(--mono);font-size:9.5px;font-weight:400;color:var(--ink-soft);margin-left:6px;letter-spacing:.06em;}
.fc-market .blurred{filter:blur(5px);user-select:none;-webkit-user-select:none;pointer-events:none;}
.fc-market .lock{background:var(--cream);border:1px solid var(--rule);border-left:3px solid var(--saffron);border-radius:0 var(--fc-r) var(--fc-r) 0;padding:12px 16px;margin:12px 0 0;color:var(--ink-soft);font-size:14.5px;}
.fc-market .lock a{color:var(--saffron);text-decoration:none;font-weight:600;}
.fc-market .wrap>.cta{background:var(--cream);border:1px solid var(--ink);border-radius:var(--fc-r2);box-shadow:var(--fc-shadow-card);padding:22px 24px;margin:34px 0;}
.fc-market .wrap>.cta strong{font-family:var(--serif);font-weight:740;font-size:22px;letter-spacing:-.012em;}
.fc-market .wrap>.cta a{display:inline-flex;align-items:center;margin-top:14px;background:var(--green);color:var(--cream);font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:13px 20px;border-radius:var(--fc-r);box-shadow:var(--fc-shadow-strong);}
.fc-market .wrap>.cta a:hover{background:var(--green-soft);}
.fc-market .wrap>footer{border-top:1px solid var(--rule);padding:22px 0 34px;color:var(--ink-soft);font-size:13.5px;margin-top:34px;line-height:1.6;}
.fc-market .wrap>footer strong{color:var(--ink);font-weight:600;}

/* ── Cross-asset comparison (#crossasset, hydrated by inline JS) ── */
.xa{margin:44px 0 0;border-top:2px solid var(--ink);padding-top:22px;}
.xa h2{font-family:var(--serif);font-weight:740;font-size:26px;letter-spacing:-.012em;margin:0;border:0;padding:0;}
.xa-sub{color:var(--ink-soft);font-size:15px;margin:6px 0 18px;}
.xa-tabs button{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule);color:var(--ink-soft);border-radius:var(--fc-r);padding:5px 10px;background:transparent;}
.xa-tabs button.on{background:var(--ink);color:var(--cream);border-color:var(--ink);font-weight:500;}
.xa-r{border-bottom:1px solid var(--rule);padding:10px 4px;}
.xa-n{font-size:15px;font-weight:500;color:var(--ink);}
.xa-n span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink-soft);font-weight:400;}
.xa-track{background:var(--paper-2);border-radius:2px;height:12px;}
.xa-fill{border-radius:2px;}
.xa-fill.pos{background:var(--green);}
.xa-fill.neg{background:rgba(181,71,8,.55);}
.xa-fill.gold{background:var(--ink);}
.xa-v{font-family:var(--serif);font-weight:740;font-size:15px;color:var(--ink);}
/* the inline script colours .xa-v with the old palette; remap without touching it */
.xa-v[style*="#7ee787"]{color:var(--green) !important;}
.xa-v[style*="#f09696"]{color:var(--saffron) !important;}
.xa-anchor{background:var(--cream);border:1px solid var(--ink);border-radius:var(--fc-r);margin:2px 0 8px;box-shadow:var(--fc-shadow);}
.xa-anchor .xa-v{color:var(--green);}
.xa-more button{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ink);color:var(--ink);border-radius:var(--fc-r);padding:9px 16px;background:transparent;}
.xa-more button:hover{background:var(--ink);color:var(--paper);}
.xa-cls{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron);margin:18px 0 6px;font-weight:500;}
.xa-chartwrap{border:1px solid var(--rule);border-radius:var(--fc-r2);background:var(--cream);box-shadow:var(--fc-shadow);padding:14px 14px 6px;}
.xa-chartwrap .cap{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-soft);}
.xa-foot{font-size:13px;color:var(--ink-soft);margin-top:16px;line-height:1.6;}
.xa-foot strong{color:var(--ink);font-weight:600;}

/* ── Registry project pages (/projects/*, fc-project.css) — one type
      system and one radius vocabulary; hooks untouched ─────────── */
.pp .crumb,.pp .eyebrow,.pp .klabel,.pp .stale,.pp .thin,.pp .fcp-note,.pp .disc{font-family:var(--mono);}
.pp .crumb{letter-spacing:.12em;text-transform:uppercase;font-size:10.5px;}
.pp h1{font-weight:740;}
.pp h2{font-weight:740;letter-spacing:-.012em;}
.pp .card,.pp .rera,.pp .ask,.pp .enq{border-radius:var(--fc-r2);border-color:var(--rule);background:var(--cream);box-shadow:var(--fc-shadow);}
.pp .near a{border-radius:var(--fc-r);border-color:var(--rule);background:var(--cream);}
.pp .near a:hover{background:var(--paper-2);}
.pp .thin{border-radius:12px;background:transparent;border-color:var(--saffron);}
.pp .askbar input,.pp .enq input,.pp .enq textarea{border-radius:var(--fc-r);border:1.5px solid var(--ink);background:var(--cream);font-family:var(--bodyf);}
.pp .btn{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;border-radius:var(--fc-r);padding:13px 20px;box-shadow:var(--fc-shadow-strong);}
.pp .btn.s{box-shadow:none;}
.pp .big{font-weight:740;letter-spacing:-.02em;}
.pp .narrative p{color:var(--ink);}

/* ── Footer (class-based; baked by generate.mjs between the
      FC-LEGAL-FOOTER markers on every page) ───────────────────── */
.fcft{background:var(--ink);color:#cfc8b8;margin:56px 0 0;padding:40px 24px 44px;font-family:var(--bodyf);}
.fcft *{box-sizing:border-box;}
.fcft-in{max-width:var(--fc-wrap);margin:0 auto;display:flex;flex-direction:column;gap:18px;}
.fcft-top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border-bottom:1px solid rgba(255,253,246,.14);padding-bottom:18px;}
.fcft-mark{font-family:var(--serif);font-weight:740;font-size:24px;letter-spacing:-.01em;color:var(--paper);text-decoration:none;line-height:1;}
.fcft-mark span{color:#8fd9b8;}
.fcft-links{display:flex;flex-wrap:wrap;gap:4px 18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;}
.fcft-links a{color:#d8d1c2;text-decoration:none;}
.fcft-links a:hover{color:var(--paper);}
.fcft-co{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#e7c69b;}
.fcft-legal{margin:0;font-size:13.5px;line-height:1.6;color:#a89f8c;max-width:760px;}
.fcft-legal a{color:#d8d1c2;text-decoration:none;}
@media(max-width:640px){.fcft{padding:32px 16px 36px;}.fcft-top{flex-direction:column;align-items:flex-start;}}

/* ── Responsive primitives ─────────────────────────────────── */
@media(max-width:900px){
  .fc-grid{gap:24px;}
  .fc-span7,.fc-span5,.fc-span4,.fc-span8,.fc-span6{grid-column:span 12;}
  .fc-h1{font-size:clamp(32px,8vw,44px);}
  .fc-lede{font-size:17px;}
}
@media(max-width:640px){
  .fc-wrap{padding:0 16px;}
  .fc-sechead{gap:8px 12px;}
  .fc-btn{padding:13px 18px;}
}
