@charset "UTF-8";
:root{color-scheme:dark;--bg:#0b0e14;--panel:#111722;--ink:#edf2fa;--muted:#a0adbf;--line:#273142;--accent:#82a7ff;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#17264466,transparent 52%)}html{scroll-behavior:smooth;scroll-padding-top:28px}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{background:#335fba;color:#fff}.topbar,main,footer{width:min(1280px,calc(100% - 96px));margin:auto}.topbar{height:88px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.identity{display:flex;align-items:center;gap:13px;font-weight:600;font-size:15px}.monogram{width:36px;height:36px;border:1px solid #5475ab;border-radius:9px;display:grid;place-items:center;background:#1c2c47;color:#b6ceff;font-size:13px;letter-spacing:-1px}nav{display:flex;gap:32px;font-size:14px;color:var(--muted)}.intro{display:grid;grid-template-columns:1.5fr 1fr;gap:80px;align-items:center;padding:65px 0}.eyebrow,.panel-label,.section-heading>span,.category,.cover-index{font:12px/1.5 'Courier New',monospace;letter-spacing:1.2px;color:var(--muted)}.eyebrow{color:var(--accent)}h1{font-size:clamp(38px,4.2vw,62px);letter-spacing:-2.6px;font-weight:600;line-height:1.12;margin:22px 0}h1 em{display:block;font-style:normal;color:var(--accent)}.intro-copy>p{font-size:17px;line-height:1.8;color:var(--muted);margin:0}.index-panel{border:1px solid #30405a;border-radius:12px;background:#101824;padding:24px}.panel-label{display:block;margin-bottom:18px;font-size:12px}.index-panel a{display:flex;gap:18px;font-size:14px;padding:13px 0;border-bottom:1px solid #253043}.index-panel a span{color:#8299bd;font:12px 'Courier New',monospace}.panel-footer{font-size:12px;color:var(--muted);margin-top:20px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:15px}.section-heading h2{font-size:18px;font-weight:500;margin:0}.section-heading>span{font-size:12px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}.project{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s,transform .2s}.project:hover{border-color:#516c94;transform:translateY(-3px)}.project-cover{height:174px;background:linear-gradient(125deg,#23334c,#162238);padding:24px;position:relative;border-bottom:1px solid #30415b;display:flex;flex-direction:column;justify-content:space-between}#market-desk .project-cover{background:linear-gradient(125deg,#193d3c,#12262c);border-color:#284749}#diamond-desk .project-cover{background:linear-gradient(125deg,#2b2f56,#1b2035);border-color:#383e60}.app-mark{border:1px solid #b8caff44;border-radius:13px;background:#ffffff0b;box-shadow:0 8px 24px #0002;display:grid;place-items:center;width:61px;height:61px;font-size:25px;letter-spacing:-1px;font-weight:600;color:#d5e2ff}#market-desk .app-mark{color:#b2e4d9}#diamond-desk .app-mark{color:#d5d3ff}.cover-caption{font-size:13px;color:#bdc9dc}.cover-index{position:absolute;right:24px;top:27px;font-size:12px;color:#a0b5d4}.project-body{padding:24px}.project-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;min-height:22px}.category{font-size:12px;letter-spacing:0}.access{font-size:12px;color:var(--muted)}.visit{font-size:12px;color:var(--accent);border-bottom:1px solid #42669e;padding-bottom:2px}h3{font-size:27px;line-height:1.2;font-weight:600;letter-spacing:-.9px;margin:24px 0 8px}.title-dot{display:none}.description{font-size:14px;color:#bac9df;margin:0 0 20px}.project-body>p:not(.description){font-size:15px;line-height:1.75;color:var(--muted);min-height:105px;margin:0 0 22px}.features{list-style:none;display:grid;gap:12px;margin:0 0 25px;padding:0;font-size:14px}.features li{display:flex;gap:10px;align-items:baseline}.features li:before{content:'/';font:12px 'Courier New',monospace;color:#729bdd}details{border-top:1px solid var(--line);padding-top:18px}summary{display:flex;justify-content:space-between;align-items:center;list-style:none;font-size:14px;color:var(--muted);cursor:pointer}summary::-webkit-details-marker{display:none}summary span{color:var(--accent);font-size:20px}details[open] summary span{transform:rotate(45deg)}details p{font-size:14px;color:var(--muted);line-height:1.8;margin:16px 0 0}.stack{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}.stack span{font-size:12px;padding:6px 8px;background:#1c2534;border-radius:4px;color:#b5c2d6}.about{display:grid;grid-template-columns:1fr 1fr;gap:0 70px;border-top:1px solid var(--line);margin-top:64px;padding:42px 0}.about .eyebrow{grid-column:1;grid-row:1}.about h2{grid-column:1;grid-row:2/4;font-size:30px;font-weight:500;letter-spacing:-.8px;line-height:1.2;margin:16px 0}.about p{grid-column:2;font-size:15px;line-height:1.8;color:var(--muted);margin:0 0 15px}.about p:first-of-type{grid-row:1/3}footer{padding:25px 0 32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}footer>span:first-child{color:var(--ink)}
@media(max-width:1100px){.topbar,main,footer{width:calc(100% - 56px)}.intro{gap:35px}.project-grid{gap:14px}.project-body{padding:20px}.project-top{min-height:48px;align-content:start}.project-body>p:not(.description){min-height:132px}.project-cover{padding:20px}.cover-caption{font-size:12px}}
@media(max-width:800px){.intro{grid-template-columns:1fr 1fr;padding-block:45px;gap:26px}.intro h1{font-size:42px}.project-grid{grid-template-columns:1fr}.project{display:grid;grid-template-columns:200px 1fr}.project-cover{height:auto;min-height:260px;border-bottom:0;border-right:1px solid #30415b}.cover-caption{line-height:1.7;max-width:130px}.cover-index{top:100px;left:24px}.project-top{min-height:0}.project-body>p:not(.description){min-height:0}.features{grid-template-columns:1fr 1fr;font-size:13px}.about{gap:0 30px}.section-heading>span{font-size:12px}}
@media(max-width:560px){.topbar,main,footer{width:calc(100% - 36px)}.topbar{height:74px}nav{gap:22px}.intro{grid-template-columns:1fr;padding:38px 0;gap:28px}.intro h1{font-size:43px;letter-spacing:-1.7px;margin:18px 0}.intro-copy>p{font-size:16px}.index-panel{padding:18px 20px}.index-panel a{padding:10px 0}.panel-label{margin-bottom:8px}.panel-footer{margin-top:14px}.section-heading>span{display:none}.project{display:block}.project-cover{height:140px;min-height:0;border-right:0;border-bottom:1px solid #30415b;flex-direction:row;align-items:center;gap:18px}.app-mark{flex-shrink:0}.cover-caption{max-width:170px;font-size:14px}.cover-index{left:auto;right:18px;top:12px;font-size:12px}.project-body{padding:23px}.project-top{min-height:22px}.project h3{font-size:28px}.about{display:block;margin-top:40px;padding-block:30px}.about h2{font-size:28px;margin:17px 0 23px}footer{flex-wrap:wrap}footer>span:nth-child(2){order:3;flex-basis:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project{transition:none}}

.open-project{display:block;text-align:center;margin-top:22px;padding:13px 16px;border:1px solid #45649b;border-radius:7px;background:#1c2e4a;color:#d5e3ff;font-size:14px;font-weight:600}.open-project:hover{background:#29426a;color:#fff;border-color:#82a7ff}

/* Reuse the project sites' actual wordmark and typographic brand marks. */
.matlot-logo{display:flex;align-items:center;justify-content:center;width:min(240px,100%);height:61px;padding:11px 13px;background:#f7f0e2;border-radius:8px;flex-shrink:0}.matlot-logo img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain}.site-mark{display:grid;place-items:center;flex-shrink:0}.market-mark{width:61px;height:61px;background:#b9ee78;color:#111a23;border-radius:14px;font:750 38px/1.5 Inter,'Segoe UI',Arial,sans-serif;letter-spacing:-.15em;padding-right:5px}.diamond-mark{width:58px;height:61px;background:#0759cc;color:#dce6f3;border-radius:14px;font:800 47px/1 'DM Sans',Arial,sans-serif;letter-spacing:-3.4px}
@media(min-width:561px) and (max-width:800px){.matlot-logo{padding:10px;width:100%;height:54px}}
@media(max-width:560px){#matlot .project-cover{flex-wrap:wrap;gap:12px;align-content:center}.matlot-logo{width:220px;height:58px}#matlot .cover-caption{max-width:none;width:100%;font-size:13px}}