/* ============================================================
   Framework Labs — shared styles
   Direction C · "The Index" — systematic / mono-forward registry
   Design Bible v2.0 · strict #000 on #fff · Playfair 400 · square · hairlines
   NOTE: nothing is opacity-hidden by default (screenshot-safe).
   Page-load reveal is transform-only; diagrams animate stroke.
   ============================================================ */

:root{
  --primary:#000; --on-primary:#fff;
  --ink:#000; --ink-soft:#1a1a1a; --body:#757575;
  --canvas:#fff; --canvas-soft:#f5f5f5; --hairline:#e0e0e0;
  --link:#057dbc;
  --serif:'Playfair Display',Georgia,serif;
  --read:'Lora',Georgia,serif;
  --sans:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  --maxw:1320px;
  --rail:148px;
  --pad:44px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--read);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:#000;color:#fff;}
a{color:inherit;}

/* ---------- type primitives ---------- */
.eyebrow{font-family:var(--mono);font-size:13px;line-height:1.4;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--ink);margin:0;}
.eyebrow.muted{color:var(--body);}
.status{font-family:var(--mono);font-size:13px;line-height:1.5;font-weight:400;color:var(--body);letter-spacing:.2px;margin:0;}
.status.ink{color:var(--ink);}
.h1{font-family:var(--serif);font-weight:400;font-size:56px;line-height:1.02;letter-spacing:-.5px;color:var(--ink);margin:0;}
.h2{font-family:var(--serif);font-weight:400;font-size:42px;line-height:1.06;letter-spacing:-.4px;color:var(--ink);margin:0;}
.h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:-.3px;color:var(--ink);margin:0;}
.h4{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.1;color:var(--ink);margin:0;}
.lead{font-family:var(--read);font-weight:400;font-size:19px;line-height:1.5;letter-spacing:.1px;color:var(--ink-soft);margin:0;}
.prose p{font-family:var(--read);font-weight:400;font-size:17px;line-height:1.62;letter-spacing:.05px;color:var(--ink-soft);margin:0 0 18px;}
.prose p:last-child{margin-bottom:0;}
.prose strong{font-weight:600;color:var(--ink);}
.prose a{color:var(--link);text-decoration:none;}
.prose a:hover{text-decoration:underline;text-underline-offset:2px;}
.measure{max-width:660px;}

/* ---------- links & buttons ---------- */
.tlink{display:inline-flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px;transition:opacity .15s;}
.tlink:hover{opacity:.55;}
.tlink .arr{transition:transform .18s ease;}
.tlink:hover .arr{transform:translateX(3px);}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--primary);color:var(--on-primary);font-family:var(--sans);font-weight:700;font-size:16px;line-height:20px;letter-spacing:.3px;padding:13px 22px;border:1px solid var(--primary);border-radius:0;text-decoration:none;cursor:pointer;transition:background .15s,color .15s;}
.btn:hover{background:var(--on-primary);color:var(--primary);}
.btn.sm{font-size:12px;font-family:var(--mono);font-weight:500;letter-spacing:.8px;text-transform:uppercase;padding:9px 16px;}

/* ---------- structure / shell ---------- */
.shell{max-width:var(--maxw);margin:0 auto;}
.hair{height:1px;background:var(--hairline);border:0;margin:0;}
.rule-ink{height:1px;background:var(--ink);border:0;margin:0;}

/* ============================================================
   masthead / nav  (hairline, mono nav — The Index character)
   ============================================================ */
.masthead{position:sticky;top:0;z-index:50;background:var(--canvas);border-bottom:1px solid var(--ink);}
.masthead .inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 var(--pad);}
.wordmark{display:flex;align-items:baseline;gap:14px;text-decoration:none;}
.wordmark .name{font-family:var(--serif);font-size:23px;line-height:1;letter-spacing:-.3px;color:var(--ink);}
.wordmark .tag{font-family:var(--mono);font-size:11px;letter-spacing:.5px;text-transform:lowercase;color:var(--body);}
.nav{display:flex;align-items:center;gap:26px;}
.nav a.navlink,.nav button.navlink{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;position:relative;}
.nav a.navlink::after,.nav button.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .18s ease;}
.nav a.navlink:hover::after,.nav button.navlink:hover::after,.nav a.navlink[aria-current="page"]::after{transform:scaleX(1);}
.nav a.navlink[aria-current="page"]{color:var(--ink);}
.nav .sep{width:1px;height:16px;background:var(--hairline);}

/* engines dropdown */
.has-menu{position:relative;}
.menu{position:absolute;top:calc(100% + 16px);left:-18px;min-width:300px;background:var(--canvas);border:1px solid var(--ink);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;}
.has-menu:hover .menu,.has-menu.open .menu{opacity:1;visibility:visible;transform:translateY(0);}
.menu a{display:flex;align-items:baseline;gap:14px;padding:15px 18px;text-decoration:none;border-bottom:1px solid var(--hairline);}
.menu a:last-child{border-bottom:0;}
.menu a:hover{background:var(--canvas-soft);}
.menu .ml{font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--body);}
.menu .mn{font-family:var(--serif);font-size:18px;color:var(--ink);}

.burger{display:none;width:38px;height:38px;border:1px solid var(--ink);background:var(--canvas);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .2s,opacity .2s;}
.burger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
.mobile-menu{display:none;border-bottom:1px solid var(--ink);background:var(--canvas);}
.mobile-menu a{display:block;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:15px var(--pad);border-top:1px solid var(--hairline);}
.mobile-menu a.sub{padding-left:calc(var(--pad) + 18px);font-family:var(--serif);font-size:17px;letter-spacing:0;text-transform:none;}
.mobile-menu .mm-eye{font-family:var(--mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--body);padding:14px var(--pad) 2px;border-top:1px solid var(--hairline);}

/* ============================================================
   the ledger: rows = [rail | content], continuous hairline grid
   ============================================================ */
.ledger{max-width:var(--maxw);margin:0 auto;}
.row{display:grid;grid-template-columns:var(--rail) 1fr;border-top:1px solid var(--hairline);}
.row.ink-top{border-top:1px solid var(--ink);}
.row.first{border-top:0;}
.rail{border-right:1px solid var(--hairline);padding:36px 0 36px var(--pad);}
.rail .rnum{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:1px;color:var(--ink);}
.rail .rlabel{font-family:var(--mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--body);margin-top:8px;}
.rail .sticky{position:sticky;top:96px;}
.col{padding:36px var(--pad) 40px;min-width:0;}

/* ---------- hero row ---------- */
.hero .col{padding-top:54px;padding-bottom:56px;}
.hero .eyebrow{margin-bottom:22px;}
.hero h1{max-width:16ch;margin-bottom:24px;}
.hero .lead{max-width:60ch;}
.hero .lead + .lead{margin-top:16px;}
.hero .herometa{margin-top:26px;display:flex;gap:24px;flex-wrap:wrap;align-items:center;}
.hero .statusline{margin-top:24px;padding-top:18px;border-top:1px solid var(--hairline);max-width:60ch;}

/* ---------- generic content blocks ---------- */
.col > .h2,.col > .h3{margin-bottom:20px;}
.col > .h2 + .prose,.col > .h3 + .prose{margin-top:0;}

/* ---------- registry table (engines) ---------- */
.registry{width:100%;}
.registry .rhead{display:grid;grid-template-columns:96px 1fr 280px;gap:24px;padding:0 0 14px;border-bottom:1px solid var(--ink);}
.registry .rhead span{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--body);}
.registry .rrow{display:grid;grid-template-columns:96px 1fr 280px;gap:24px;padding:30px 0;border-bottom:1px solid var(--hairline);align-items:start;}
.registry .rrow:last-child{border-bottom:0;}
.registry .reg{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:1px;color:var(--ink);padding-top:4px;}
.registry .rname{font-family:var(--serif);font-size:27px;line-height:1.08;margin:0 0 12px;}
.registry .rname em{font-style:italic;color:var(--body);}
.registry .rdesc{font-family:var(--read);font-size:16px;line-height:1.55;color:var(--body);margin:0;max-width:54ch;}
.registry .rstatus{margin-bottom:16px;}
.registry .rdiagram{margin:6px 0 20px;max-width:420px;}

/* ---------- properties / guarantees (ledgered list) ---------- */
.props{margin-top:26px;border-top:1px solid var(--ink);}
.props .prop{display:grid;grid-template-columns:200px 1fr;gap:28px;padding:22px 0;border-bottom:1px solid var(--hairline);align-items:baseline;}
.props .prop .pt{font-family:var(--read);font-weight:600;font-size:17px;color:var(--ink);}
.props .prop .pd{font-family:var(--read);font-weight:400;font-size:16px;line-height:1.55;color:var(--body);max-width:60ch;}

/* ---------- governance Q&A (licensing) ---------- */
.qa{margin-top:24px;border-top:1px solid var(--ink);}
.qa .qrow{padding:24px 0;border-bottom:1px solid var(--hairline);}
.qa .q{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.18;color:var(--ink);margin:0 0 12px;}
.qa .a{font-family:var(--read);font-size:16px;line-height:1.6;color:var(--body);margin:0;max-width:62ch;}

/* ---------- numbered included list ---------- */
.inclist{margin-top:24px;border-top:1px solid var(--ink);}
.inclist .irow{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--hairline);align-items:baseline;}
.inclist .ix{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--ink);letter-spacing:1px;}
.inclist .it{font-family:var(--read);font-size:17px;line-height:1.5;color:var(--ink-soft);}

/* ---------- method (numbered) ---------- */
.method{margin-top:6px;}
.method .m{display:grid;grid-template-columns:48px 1fr;gap:22px;padding:24px 0;border-top:1px solid var(--hairline);}
.method .m:first-child{border-top:0;padding-top:0;}
.method .mn{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:1px;color:var(--ink);padding-top:6px;}
.method .mh{font-family:var(--serif);font-size:23px;line-height:1.12;margin:0 0 9px;}
.method .mb{font-family:var(--read);font-size:16px;line-height:1.55;color:var(--body);margin:0;max-width:62ch;}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:1fr 1px 1fr;}
.team .vline{background:var(--hairline);}
.team .person{padding:6px 40px 4px;}
.team .person:first-child{padding-left:0;}
.team .person:last-child{padding-right:0;}
.team .photo{width:100%;aspect-ratio:4/5;background:var(--canvas-soft);margin-bottom:22px;position:relative;overflow:hidden;border:1px solid var(--hairline);}
.team .photo .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.team .pname{font-family:var(--serif);font-size:30px;margin:0 0 12px;}
.team .prole{margin-bottom:18px;}
.team .pbio{font-family:var(--read);font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0 0 18px;}

/* placeholder hatch */
.hatch{background-image:repeating-linear-gradient(45deg,transparent,transparent 7px,rgba(0,0,0,.045) 7px,rgba(0,0,0,.045) 8px);}
.ph-label{font-family:var(--mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--body);background:var(--canvas);padding:5px 9px;border:1px solid var(--hairline);}

/* ---------- fig panel (engine pages) ---------- */
.fig{border:1px solid var(--ink);margin-top:8px;}
.fig .figbar{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--hairline);}
.fig .figbar .fl{font-family:var(--mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink);}
.fig .figbar .fr{font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--body);}
.fig .figbody{padding:30px 28px;background:var(--canvas-soft);}

/* ---------- CTA row ---------- */
.cta .col{padding-top:50px;padding-bottom:54px;}
.cta .eyebrow{margin-bottom:18px;}
.cta h2{max-width:18ch;margin-bottom:22px;}
.cta .lead{max-width:54ch;margin-bottom:26px;}

/* ============================================================
   footer (black)
   ============================================================ */
.foot{background:var(--primary);color:var(--on-primary);}
.foot .inner{max-width:var(--maxw);margin:0 auto;padding:52px var(--pad) 36px;}
.foot .top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:44px;}
.foot .name{font-family:var(--serif);font-size:28px;color:#fff;margin:0 0 12px;}
.foot .ftag{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:lowercase;color:rgba(255,255,255,.5);}
.foot .col2 .ce{font-family:var(--mono);font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 16px;}
.foot .col2 a{display:block;font-family:var(--sans);font-weight:400;font-size:15px;color:rgba(255,255,255,.82);text-decoration:none;padding:5px 0;transition:color .15s;}
.foot .col2 a:hover{color:#fff;}
.foot .bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);flex-wrap:wrap;}
.foot .copy{font-family:var(--mono);font-size:12px;letter-spacing:.5px;color:rgba(255,255,255,.5);}

/* ============================================================
   diagrams (thin 1px ink, mono labels) — boxes/labels never hidden
   ============================================================ */
.diagram svg{display:block;width:100%;height:auto;overflow:visible;}
.dgm{stroke:var(--ink);fill:none;stroke-width:1;vector-effect:non-scaling-stroke;}
.dgm-soft{stroke:var(--hairline);fill:none;stroke-width:1;vector-effect:non-scaling-stroke;}
.dgm-fill{fill:var(--ink);stroke:none;}
text.dgm-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.5px;fill:var(--body);text-transform:uppercase;}
text.dgm-lbl.ink{fill:var(--ink);}
/* connector lines draw in; only runs when .diagram gets .in (in view) */
.diagram .draw{stroke-dasharray:var(--len,420);stroke-dashoffset:0;}
.diagram.in .draw{stroke-dashoffset:var(--len,420);animation:fl-draw .85s ease forwards;animation-delay:var(--d,0ms);}
@keyframes fl-draw{to{stroke-dashoffset:0;}}

/* ============================================================
   page-load reveal — TRANSFORM ONLY (never opacity); always visible
   ============================================================ */
.rise{animation:fl-rise .5s cubic-bezier(.2,.7,.3,1) both;}
.rise.d1{animation-delay:.05s;}
.rise.d2{animation-delay:.1s;}
.rise.d3{animation-delay:.15s;}
.rise.d4{animation-delay:.2s;}
@keyframes fl-rise{from{transform:translateY(12px);}to{transform:none;}}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none;}
  .diagram.in .draw{animation:none;stroke-dashoffset:0;}
}

/* ============================================================
   responsive
   ============================================================ */
@media(max-width:1080px){
  :root{--pad:36px;--rail:128px;}
  .h1{font-size:48px;}
  .registry .rhead,.registry .rrow{grid-template-columns:80px 1fr 240px;}
}
@media(max-width:860px){
  :root{--pad:26px;}
  .nav{display:none;}
  .burger{display:flex;}
  .row{grid-template-columns:1fr;}
  .rail{border-right:0;border-bottom:1px solid var(--hairline);padding:22px var(--pad) 0;display:flex;align-items:baseline;gap:14px;}
  .rail .rlabel{margin-top:0;}
  .rail .sticky{position:static;}
  .col{padding:24px var(--pad) 36px;}
  .registry .rhead{display:none;}
  .registry .rrow{grid-template-columns:1fr;gap:14px;padding:26px 0;}
  .registry .reg{padding-top:0;}
  .props .prop{grid-template-columns:1fr;gap:6px;}
  .method .m{grid-template-columns:36px 1fr;gap:16px;}
  .team{grid-template-columns:1fr;}
  .team .vline{display:none;}
  .team .person{padding:0 0 34px;border-bottom:1px solid var(--hairline);margin-bottom:8px;}
  .team .person:last-child{padding-bottom:0;border-bottom:0;margin-bottom:0;}
  .foot .top{grid-template-columns:1fr 1fr;gap:30px;}
  .h1{font-size:40px;}.h2{font-size:34px;}
}
@media(max-width:520px){
  .h1{font-size:32px;}.h2{font-size:28px;}.h3{font-size:25px;}
  .registry .rname{font-size:24px;}
  .foot .top{grid-template-columns:1fr;}
  .foot .bottom{flex-direction:column;align-items:flex-start;gap:12px;}
}