/* SOF Ventures Ops - shared design system. Ops-dossier x private capital, LIGHT. */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --bg:#E9E5DB; --bg2:#DFD9CB; --card:#FFFFFF; --card-hi:#FBFAF5;
  --line:#E4DFD2; --line-hi:#D6D0BF;
  --gold:#A9842A; --gold-lt:#C9A227; --gold-dim:#8A6D22;
  --ink:#1C1D20; --muted:#6B6F77; --faint:#9DA1A8;
  --green:#0B6B2E; --green-bg:#E7F2EA;
  --amber:#95660A; --amber-bg:#FBF1D9;
  --red:#9A2A2A; --red-bg:#F7E8E6;
  --blue:#2C4F8C;
  --shadow:0 1px 2px rgba(40,33,10,.05), 0 10px 28px rgba(40,33,10,.06);
  /* header stays a dark island so the gold seal keeps its backing */
  --hd-ink:#F2EFE7; --hd-sub:#AEB2BA; --hd-faint:#7C818A;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  background-image:radial-gradient(70% 45% at 50% -6%, rgba(201,162,39,.10), transparent 62%);
  background-attachment:fixed;
}
body::before{  /* very faint paper grain */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:20px}

.disp{font-family:'Saira Condensed',sans-serif;font-weight:700;letter-spacing:.02em}
.label{font-family:'Saira Condensed',sans-serif;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-size:11.5px}
.mono{font-family:'IBM Plex Mono',monospace}
.metric{font-family:'IBM Plex Mono',monospace;font-weight:500;font-variant-numeric:tabular-nums;line-height:1}
.unclass{font-family:'Saira Condensed',sans-serif;font-weight:600;letter-spacing:.5em;font-size:10px;color:var(--green);text-align:center}

/* header band - dark island */
.ops-hdr{
  display:flex;align-items:center;gap:18px;padding:16px 22px;border-radius:14px;
  background:linear-gradient(180deg,#14171C,#0C0E11);
  border:1px solid #23262C; box-shadow:0 14px 34px rgba(20,15,0,.18); position:relative; overflow:hidden;
}
.ops-hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold-lt),transparent);opacity:.7}
.ops-hdr .seal{width:64px;height:64px;flex:none;filter:drop-shadow(0 0 14px rgba(201,162,39,.3))}
.ops-hdr h1{margin:0;font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:24px;letter-spacing:.06em;text-transform:uppercase;color:var(--hd-ink)}
.ops-hdr h1 .g{color:var(--gold-lt)}
.ops-hdr .sub{color:var(--hd-sub);font-size:12.5px;margin-top:3px}
.ops-hdr .right{margin-left:auto;text-align:right}
.ops-hdr .right .k{font-family:'IBM Plex Mono',monospace;color:var(--gold-lt);font-size:13px}
.ops-hdr .right .m{color:var(--hd-faint);font-size:11.5px;margin-top:2px}
.ops-hdr .right a{color:var(--hd-sub)}

.sec{display:flex;align-items:center;gap:14px;margin:26px 2px 12px}
.sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-hi),transparent)}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);transition:border-color .18s, transform .18s, box-shadow .18s}
.card:hover{border-color:var(--gold-dim)}
.grid{display:grid;gap:14px}

.stat{padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.stat .n{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:30px;color:var(--ink);font-variant-numeric:tabular-nums}
.stat .n.gold{color:var(--gold)}
.stat .l{margin-top:6px;font-family:'Saira Condensed',sans-serif;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-size:10.5px}

.anchor-card{padding:18px 20px;border-radius:12px;background:linear-gradient(180deg,#fff,var(--card-hi));border:1px solid var(--line);border-left:3px solid var(--gold);box-shadow:var(--shadow)}
.anchor-card.dim{border-left-color:var(--faint)}
.anchor-card .n{font-family:'IBM Plex Mono',monospace;font-size:38px;font-weight:500;color:var(--gold)}
.anchor-card .l{font-family:'Saira Condensed',sans-serif;font-weight:600;letter-spacing:.11em;text-transform:uppercase;font-size:11px;color:var(--muted);margin-top:6px}
.anchor-card .z{color:var(--faint);font-size:11px;margin-top:5px;font-style:italic}

.badge{display:inline-flex;align-items:center;gap:6px;font-family:'Saira Condensed',sans-serif;font-weight:600;letter-spacing:.09em;text-transform:uppercase;font-size:10.5px;padding:3px 10px;border-radius:20px;border:1px solid var(--line-hi);color:var(--muted);background:#F5F2EA}
.badge.on{color:var(--green);border-color:#B8D8C2;background:var(--green-bg)}
.badge.amber{color:var(--amber);border-color:#E4CE94;background:var(--amber-bg)}
.badge.red{color:var(--red);border-color:#E4B9B6;background:var(--red-bg)}
.badge.gold{color:var(--gold);border-color:var(--gold-dim);background:#FBF3DC}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Saira Condensed',sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:14px;padding:12px 22px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:.15s}
.btn-gold{background:linear-gradient(180deg,var(--gold-lt),var(--gold));color:#241d08;box-shadow:0 6px 18px rgba(169,132,42,.28)}
.btn-gold:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn-ghost{background:#fff;border-color:var(--line-hi);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-ms{background:#fff;color:#1b1b1b;border:1px solid var(--line-hi);box-shadow:var(--shadow)}
.btn-ms:hover{transform:translateY(-1px);border-color:var(--gold-dim)}

.field{margin-bottom:14px}
.field > label{display:block;font-family:'Saira Condensed',sans-serif;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:11px;margin-bottom:6px}
.field input[type=number],.field input[type=text],.field textarea,.field select{
  width:100%;background:#fff;border:1px solid var(--line-hi);border-radius:8px;color:var(--ink);
  font-family:'IBM Plex Mono',monospace;font-size:14px;padding:10px 12px;transition:border-color .15s, box-shadow .15s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.15)}
.field .hint{color:var(--faint);font-size:11px;margin-top:4px;font-style:italic}

.tgl{display:inline-flex;border:1px solid var(--line-hi);border-radius:8px;overflow:hidden}
.tgl button{background:#fff;border:none;color:var(--muted);font-family:'Saira Condensed',sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:12px;padding:8px 16px;cursor:pointer}
.tgl button.on{background:var(--green-bg);color:var(--green)}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal{animation:rise .5s both}