/* ============================================================ Muntasir Masum — static site design system One stylesheet, shared by every page (index, about, research, publications, dispatches, teaching, studio). All component classes are namespaced .mm-*. Design tokens live in :root (light) and .quarto-dark (dark) so the whole palette switches with one class on . ============================================================ */ :root{ --bg:#f5f6f8; --surface:#ffffff; --ink:#1f2d3a; --body:#3b4651; --muted:#5a6571; --muted2:#74808b; --faint:#9aa4ae; --border:#e7eaee; --hair:#eef0f3; --btnborder:#cfd6dd; --accent:#46166b; --accent-text:#46166b; --accent-hover:#341050; --accent-tint:#f1ecf7; --accent-underline:#dccfe8; --gold:#c2a23a; --gold-tint:#fbf3e0; --gold-text:#a07d12; } .quarto-dark{ --bg:#141118; --surface:#1f1b27; --ink:#f4f2f8; --body:#cdc9d6; --muted:#aaa6b5; --muted2:#928da0; --faint:#6f6b7c; --border:#332e3e; --hair:#28232f; --btnborder:#4a4456; --accent:#7a4fb0; --accent-text:#cbb1e8; --accent-hover:#6b41a0; --accent-tint:#2a2138; --accent-underline:#4a3b60; --gold:#c2a23a; --gold-tint:#332b16; --gold-text:#d8b84e; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ background:var(--bg); } ::selection{ background:#e7d8f3; } .quarto-dark ::selection{ background:#43355c; } .mm-serif{ font-family:'Newsreader',Georgia,serif; } .mm-root{ min-height:100vh; background:var(--bg); color:var(--body); font-family:'IBM Plex Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; } @keyframes mmFadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } /* ---------- NAV ---------- */ .mm-nav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border); } .mm-nav-inner{ max-width:1080px; margin:0 auto; padding:13px 28px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; } .mm-brand{ font:600 20px 'Newsreader',Georgia,serif; color:var(--ink); letter-spacing:-.2px; text-decoration:none; } .mm-links{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-left:auto; } .mm-nav-tools{ display:flex; align-items:center; gap:18px; } .mm-link{ font:500 14.5px 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted); text-decoration:none; } .mm-link:hover{ color:var(--accent-text); } .mm-link.active{ font-weight:600; color:var(--accent-text); } .mm-ai{ font:700 14.5px 'IBM Plex Sans',system-ui,sans-serif; color:var(--accent-text); text-decoration:none; } .mm-ai:hover{ color:var(--accent); } .mm-iconbtn{ display:inline-flex; align-items:center; cursor:pointer; color:var(--muted); user-select:none; background:none; border:0; padding:0; line-height:1; } .mm-iconbtn:hover{ color:var(--accent-text); } .mm-cv{ border:1px solid var(--accent); color:var(--accent-text); border-radius:8px; padding:7px 14px; font:600 13.5px 'IBM Plex Sans',system-ui,sans-serif; text-decoration:none; white-space:nowrap; } .mm-cv:hover{ background:var(--accent); color:#fff; } .mm-skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; font:600 14px 'IBM Plex Sans',system-ui,sans-serif; text-decoration:none; } .mm-skip:focus{ left:0; } /* ---------- INTERIOR PAGE SHELL ---------- */ .mm-page{ max-width:860px; margin:0 auto; padding:56px 28px 8px; } .mm-page.narrow{ max-width:760px; } .mm-page.wide{ max-width:1080px; } .mm-h1{ font:600 42px 'Newsreader',Georgia,serif; color:var(--ink); margin:0; letter-spacing:-.4px; } .mm-lead{ font:400 16.5px/1.62 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted); max-width:640px; margin:12px 0 4px; } .mm-prose{ font:400 16.5px/1.65 'IBM Plex Sans',system-ui,sans-serif; color:var(--body); } .mm-prose strong{ font-weight:600; color:var(--ink); } .mm-prose a{ color:var(--accent-text); text-decoration:none; border-bottom:1px solid var(--accent-underline); } .mm-prose a:hover{ color:var(--accent); } .mm-link-strong{ font:600 14.5px 'IBM Plex Sans',system-ui,sans-serif; color:var(--accent-text); text-decoration:none; } .mm-link-strong:hover{ border-bottom:1px solid var(--accent); } /* ---------- HERO (home) ---------- */ .mm-hero{ max-width:720px; margin:0 auto; padding:72px 28px 12px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; } .mm-photo{ width:168px; height:168px; border-radius:50%; object-fit:cover; box-shadow:0 6px 22px rgba(31,45,58,.12); } .mm-name{ font:600 46px/1.04 'Newsreader',Georgia,serif; color:var(--ink); margin:0; letter-spacing:-.5px; } .mm-role{ font:500 18.5px 'IBM Plex Sans',system-ui,sans-serif; color:var(--accent-text); margin-top:9px; } .mm-affil{ font:400 15px 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted2); margin-top:3px; } .mm-affil a{ color:var(--muted2); text-decoration:none; } .mm-affil a:hover{ color:var(--accent-text); } .mm-intro{ font:400 17.5px/1.62 'IBM Plex Sans',system-ui,sans-serif; color:var(--body); max-width:600px; margin:0; } .mm-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:2px; } .mm-social{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; border:1px solid var(--btnborder); color:var(--body); border-radius:50%; text-decoration:none; } .mm-social:hover{ border-color:var(--accent-text); color:var(--accent-text); } .mm-social.email{ background:var(--accent); border-color:var(--accent); color:#fff; } .mm-social.email:hover{ background:var(--accent-hover); color:#fff; } .mm-aipill{ display:inline-flex; align-items:center; background:var(--accent-tint); border:1px solid var(--accent); color:var(--accent-text); border-radius:8px; padding:9px 15px; font:700 14px 'IBM Plex Sans',system-ui,sans-serif; text-decoration:none; } .mm-aipill:hover{ background:var(--accent); color:#fff; } .mm-stats{ display:flex; gap:30px; justify-content:center; flex-wrap:wrap; margin-top:8px; } .mm-stat{ text-align:center; } .mm-statnum{ font:600 27px 'Newsreader',Georgia,serif; color:var(--ink); line-height:1; } .mm-statlabel{ font:600 10.5px 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--muted2); margin-top:3px; } .mm-tags{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:8px; } .mm-tag{ background:var(--surface); border:1px solid var(--border); color:var(--muted); border-radius:999px; padding:6px 13px; font:500 13px 'IBM Plex Sans',system-ui,sans-serif; cursor:pointer; transition:all .15s ease; } .mm-tag:hover{ border-color:var(--accent); color:var(--accent-text); background:var(--accent-tint); } .mm-hero-tags{ display:inline-grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:8px; } .mm-about-tags{ justify-content:flex-start; } /* ---------- SECTIONS / CARDS ---------- */ .mm-wrap{ max-width:1080px; margin:0 auto; padding:0 28px; } .mm-section-pad{ padding-top:54px; } .mm-h2{ font:600 28px 'Newsreader',Georgia,serif; color:var(--ink); margin:0; letter-spacing:-.3px; } .mm-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .mm-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:24px; transition:box-shadow .18s ease, transform .18s ease; } .mm-card:hover{ box-shadow:0 10px 28px rgba(31,45,58,.09); transform:translateY(-2px); } .mm-eyebrow{ font:600 12px 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text); } .mm-card-h3{ font:600 22px 'Newsreader',Georgia,serif; color:var(--ink); margin:10px 0 8px; } .mm-card-p{ font:400 14.5px/1.55 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted); margin:0 0 14px; } .mm-card-link{ font:600 14px 'IBM Plex Sans',system-ui,sans-serif; color:var(--accent-text); cursor:pointer; text-decoration:none; } .mm-card-link:hover{ color:var(--accent); } /* ---------- PUBS + NEWS (home) ---------- */ .mm-two-col{ display:grid; grid-template-columns:1.55fr 1fr; gap:40px; } .mm-rowhead{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; } .mm-pub-card{ background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:12px; padding:20px 22px; } .mm-pub-card.review{ border-left-color:var(--gold); } .mm-pub-meta{ font:400 12.5px 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted2); margin-bottom:5px; } .mm-pub-title{ font:600 18px/1.3 'Newsreader',Georgia,serif; color:var(--ink); } .mm-pub-desc{ font:400 14px/1.55 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted); margin:8px 0 12px; } .mm-pillrow{ display:flex; gap:7px; flex-wrap:wrap; } .mm-pill{ background:var(--accent-tint); color:var(--accent-text); border-radius:999px; padding:3px 10px; font:600 11px 'IBM Plex Sans',system-ui,sans-serif; } .mm-news-item{ display:flex; gap:13px; } .mm-news-date{ flex:none; width:64px; font:700 12.5px 'IBM Plex Sans',system-ui,sans-serif; color:var(--accent-text); padding-top:1px; } .mm-news-text{ font:400 14.5px/1.5 'IBM Plex Sans',system-ui,sans-serif; color:var(--body); } .mm-news-text strong{ font-weight:600; color:var(--ink); } /* ---------- SECTION LABELS + ROWS (about, research, teaching, dispatches) ---------- */ .mm-seclabel{ font:600 12px 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text); margin:34px 0 12px; } .mm-seclabel.tight{ margin-bottom:4px; } .mm-rows{ display:flex; flex-direction:column; } .mm-row{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--hair); } .mm-row:last-child{ border-bottom:1px solid var(--hair); } .mm-row-main{ font:500 15px 'IBM Plex Sans',system-ui,sans-serif; color:var(--ink); } .mm-row-main strong{ font-weight:600; } .mm-row-main .det{ color:var(--muted2); font-weight:400; } .mm-row-date{ flex:none; font:400 13.5px 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted2); white-space:nowrap; } .mm-row-num{ flex:none; width:46px; font:700 13px 'IBM Plex Sans',system-ui,sans-serif; color:var(--accent-text); } /* ---------- THEMES (research) ---------- */ .mm-themes{ display:flex; flex-direction:column; gap:20px; } .mm-theme h3{ font:600 20px 'Newsreader',Georgia,serif; color:var(--ink); margin:0 0 5px; } .mm-theme p{ font:400 15px/1.6 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted); margin:0; } /* ---------- NOTE / EVAL / NEWSLETTER BOXES ---------- */ .mm-note{ background:var(--accent-tint); border-left:3px solid var(--accent); border-radius:10px; padding:16px 18px; margin-top:18px; } .mm-note-label{ font:600 11px 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text); margin-bottom:5px; } .mm-note-text{ font:400 15px/1.6 'IBM Plex Sans',system-ui,sans-serif; color:var(--body); } .mm-evalbox{ margin-top:20px; background:var(--accent-tint); border-radius:10px; padding:14px 18px; font:400 14px/1.5 'IBM Plex Sans',system-ui,sans-serif; color:var(--body); } .mm-evalbox strong{ font-weight:600; color:var(--ink); } /* ---------- PUBLICATIONS ---------- */ .mm-pubgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:4px 0 8px; } .mm-pubgrid .mm-card{ padding:20px; } a.mm-card{ text-decoration:none; color:inherit; display:block; } a.mm-card:hover .mm-pub-title{ color:var(--accent-text); } a.mm-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } a.mm-pub-card{ text-decoration:none; color:inherit; display:block; } a.mm-pub-card:hover .mm-pub-title{ color:var(--accent-text); } a.mm-pub-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } .mm-news-text a{ color:var(--accent-text); text-decoration:none; border-bottom:1px solid var(--accent-underline); } .mm-news-text a:hover{ color:var(--accent); } .mm-pubgrid .mm-pub-title{ font-size:17px; } .mm-pubgrid .mm-pub-desc{ font-size:13.5px; margin:8px 0 11px; } .mm-byyear{ display:flex; flex-direction:column; } .mm-byyear .yr{ display:flex; gap:22px; padding:18px 0; border-top:1px solid var(--border); } .mm-byyear .yr:last-child{ border-bottom:1px solid var(--border); } .mm-byyear .yr-num{ flex:none; width:46px; font:600 16px 'Newsreader',Georgia,serif; color:var(--accent-text); } .mm-byyear .yr-num.prior{ color:var(--muted2); } .mm-byyear .yr-body{ font:400 15px/1.55 'IBM Plex Sans',system-ui,sans-serif; color:var(--body); } .mm-byyear .yr-body strong{ color:var(--ink); font-weight:600; } .mm-doi{ color:var(--accent-text); text-decoration:none; border-bottom:1px solid var(--accent-underline); } .mm-doi:hover{ color:var(--accent); } .mm-wnote-link{ font:600 19px 'Newsreader',Georgia,serif; color:var(--ink); text-decoration:none; } .mm-wnote-link:hover{ color:var(--accent-text); } .mm-ur{ display:flex; flex-direction:column; gap:13px; margin-top:4px; } .mm-ur-item{ font:400 14.5px/1.5 'IBM Plex Sans',system-ui,sans-serif; color:var(--body); } .mm-ur-item strong{ color:var(--ink); font-weight:600; } .mm-ur-pill{ display:inline-block; background:var(--gold-tint); color:var(--gold-text); border-radius:999px; padding:2px 9px; font:600 11px 'IBM Plex Sans',system-ui,sans-serif; white-space:nowrap; } /* ---------- BUTTONS (cards) ---------- */ .mm-btnrow{ display:flex; gap:9px; flex-wrap:wrap; margin-top:4px; } .mm-btn{ flex:none; background:var(--accent); color:#fff; border-radius:8px; padding:10px 18px; font:600 14px 'IBM Plex Sans',system-ui,sans-serif; text-decoration:none; } .mm-btn:hover{ background:var(--accent-hover); color:#fff; } .mm-btn-sm{ display:inline-block; background:var(--accent); color:#fff; border-radius:7px; padding:7px 13px; font:600 13px 'IBM Plex Sans',system-ui,sans-serif; text-decoration:none; } .mm-btn-sm:hover{ background:var(--accent-hover); color:#fff; } .mm-btn-ghost{ display:inline-block; border:1px solid var(--btnborder); color:var(--body); border-radius:7px; padding:7px 13px; font:600 13px 'IBM Plex Sans',system-ui,sans-serif; text-decoration:none; } .mm-btn-ghost:hover{ border-color:var(--accent-text); color:var(--accent-text); } /* ---------- TALL CARDS (tools / courses / dispatches) ---------- */ .mm-tallgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .mm-tallcard{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:9px; transition:box-shadow .18s ease, transform .18s ease; } .mm-tallcard:hover{ box-shadow:0 10px 28px rgba(31,45,58,.09); transform:translateY(-2px); } .mm-tallcard .eyebrow{ font:600 11.5px 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text); } .mm-tallcard h3{ font:600 21px 'Newsreader',Georgia,serif; color:var(--ink); margin:0; } .mm-tallcard p{ font:400 14px/1.55 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted); margin:0; flex:1; } .mm-accentcard{ background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:12px; padding:22px; display:flex; flex-direction:column; gap:9px; } .mm-accentcard .eyebrow{ font:600 11.5px 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text); } .mm-accentcard h3{ font:600 21px 'Newsreader',Georgia,serif; color:var(--ink); margin:0; } .mm-accentcard p{ font:400 14px/1.55 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted); margin:0; } /* ---------- STUDIO ---------- */ .mm-filterbar{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:30px; } .mm-filter{ cursor:pointer; border-radius:999px; padding:7px 15px; font:600 13px 'IBM Plex Sans',system-ui,sans-serif; transition:all .15s ease; border:1px solid var(--border); background:var(--surface); color:var(--muted); } .mm-filter:hover{ border-color:var(--accent); color:var(--accent-text); } .mm-filter.active{ border-color:var(--accent); background:var(--accent); color:#fff; } .mm-vizgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .mm-viz-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .18s ease, transform .18s ease; } .mm-viz-card:hover{ box-shadow:0 10px 28px rgba(31,45,58,.09); transform:translateY(-2px); } .mm-viz-media{ width:100%; height:190px; display:block; background:var(--hair); object-fit:cover; } .mm-ph{ display:flex; align-items:center; justify-content:center; text-align:center; padding:0 16px; background:repeating-linear-gradient(45deg, var(--hair), var(--hair) 10px, var(--border) 10px, var(--border) 20px); font:500 12px ui-monospace,Menlo,Consolas,monospace; color:var(--muted2); border-bottom:1px solid var(--border); } .mm-viz-body{ padding:16px 18px; display:flex; flex-direction:column; gap:7px; } .mm-viz-body h3{ font:600 19px 'Newsreader',Georgia,serif; color:var(--ink); margin:0; } .mm-viz-body p{ font:400 13.5px/1.5 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted); margin:0; } .mm-viz-metarow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .mm-viz-tag{ display:inline-block; background:var(--accent-tint); color:var(--accent-text); border-radius:999px; padding:2px 9px; font:600 10px 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.05em; text-transform:uppercase; } .mm-viz-tag.animated{ background:var(--accent); color:#fff; } .mm-eyebrow-muted{ font:600 10.5px 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.07em; text-transform:uppercase; color:var(--muted2); } .mm-footnote{ font:400 13px/1.5 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted2); margin-top:12px; } .mm-tablewrap{ overflow-x:auto; margin:4px 0 0; } .mm-table{ width:100%; border-collapse:collapse; font:400 14px/1.5 'IBM Plex Sans',system-ui,sans-serif; } .mm-table th{ text-align:left; font:600 10.5px 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.07em; text-transform:uppercase; color:var(--muted2); padding:0 14px 10px; border-bottom:1px solid var(--border); white-space:nowrap; } .mm-table td{ padding:13px 14px; border-bottom:1px solid var(--hair); color:var(--body); vertical-align:top; } .mm-table tbody tr:last-child td{ border-bottom:1px solid var(--border); } .mm-table tbody tr:hover{ background:var(--accent-tint); } .mm-table .nm{ font-weight:600; color:var(--ink); white-space:nowrap; } .mm-table th:first-child, .mm-table td:first-child{ padding-left:2px; } .mm-table th:last-child, .mm-table td:last-child{ padding-right:2px; } /* ---------- BODY MAP (research) ---------- */ .mm-bm-drivers{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; } .mm-bm-driver-label{ font:600 11px 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted2); margin-right:2px; } .mm-bm-chip{ border:1px solid var(--border); color:var(--body); border-radius:999px; padding:4px 11px; font:600 12px 'IBM Plex Sans',system-ui,sans-serif; cursor:pointer; transition:all .15s ease; } .mm-bm-chip:hover{ border-color:var(--accent); color:var(--accent-text); } .mm-bm-chip.on:hover{ color:#fff; } .mm-bm-info{ display:none; margin:14px 0 4px; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px; padding:14px 16px; background:var(--surface); } .mm-bm-chip.on{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700; } .mm-bm-grid{ display:grid; grid-template-columns:340px 1fr; gap:26px; align-items:start; } .mm-bm-figure{ position:relative; width:340px; max-width:100%; aspect-ratio:1/1; margin:0 auto; background:#f3f7fb; border-radius:10px; } .quarto-dark .mm-bm-figure{ background:#241f30; } .quarto-dark .mm-bm-figure img{ filter:brightness(.85) saturate(.92); } .mm-bm-legend{ font:400 12px 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted2); margin-top:12px; } /* ---------- MAP (about) ---------- */ .mm-map{ height:340px; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); } .mm-maplegend{ display:flex; gap:18px; flex-wrap:wrap; margin-top:10px; } .mm-maplegend span{ display:inline-flex; align-items:center; gap:6px; font:500 12.5px 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted); } .mm-maplegend i{ width:10px; height:10px; border-radius:50%; display:inline-block; } .maplibregl-popup-content{ font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:13px; border-radius:8px; padding:9px 12px; } /* ---------- CALLOUT (site-wide CTA) ---------- */ .mm-callout{ background:var(--accent-tint); border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-top:44px; } .mm-callout-inner{ max-width:1000px; margin:0 auto; padding:30px 28px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; } .mm-callout-title{ font:600 21px 'Newsreader',Georgia,serif; color:var(--ink); } .mm-callout-text{ font:400 14.5px/1.55 'IBM Plex Sans',system-ui,sans-serif; color:var(--body); margin-top:4px; max-width:640px; } /* ---------- FOOTER ---------- */ .mm-footer{ border-top:1px solid var(--border); background:var(--surface); } .mm-footer-grid{ max-width:1080px; margin:0 auto; padding:40px 28px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; } .mm-foot-name{ font:600 19px 'Newsreader',Georgia,serif; color:var(--ink); } .mm-foot-bio{ font:400 14px/1.6 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted2); margin-top:8px; } .mm-foot-h{ font:600 12px 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; } .mm-foot-links{ display:flex; flex-direction:column; gap:8px; font:400 14px 'IBM Plex Sans',system-ui,sans-serif; } .mm-foot-links a{ color:var(--muted); text-decoration:none; } .mm-foot-links a:hover{ color:var(--accent-text); } .mm-foot-bottom{ border-top:1px solid var(--hair); } .mm-foot-bottom-inner{ max-width:1080px; margin:0 auto; padding:16px 28px; font:400 13px 'IBM Plex Sans',system-ui,sans-serif; color:var(--faint); } /* ---------- SEARCH / TOPIC OVERLAY ---------- */ .mm-ov{ position:fixed; inset:0; z-index:1080; background:rgba(15,12,20,.42); backdrop-filter:saturate(140%) blur(3px); -webkit-backdrop-filter:saturate(140%) blur(3px); display:flex; align-items:flex-start; justify-content:center; padding:11vh 20px 24px; } .mm-ov-panel{ width:min(640px,94vw); background:var(--surface); border:1px solid var(--border); border-radius:15px; box-shadow:0 26px 64px rgba(15,12,20,.34); overflow:hidden; display:flex; flex-direction:column; max-height:74vh; animation:mmFadeUp .15s ease both; } .mm-ov-head{ display:flex; align-items:center; gap:11px; padding:14px 18px; border-bottom:1px solid var(--border); } .mm-ov-pill{ display:inline-flex; align-items:center; background:var(--accent); color:#fff; border-radius:8px; padding:5px 12px; font:600 13px 'IBM Plex Sans',system-ui,sans-serif; white-space:nowrap; } .mm-ov-count{ font:600 10.5px 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted2); } .mm-ov-input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:400 17px 'IBM Plex Sans',system-ui,sans-serif; color:var(--ink); } .mm-ov-list{ overflow-y:auto; padding:8px; } .mm-ov-row{ display:block; padding:9px 12px; border-radius:9px; border-left:3px solid transparent; text-decoration:none; } .mm-ov-row:hover{ background:var(--accent-tint); border-left-color:var(--accent); } .mm-ov-label{ display:inline-block; font:700 9.5px 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.07em; text-transform:uppercase; color:var(--muted2); background:var(--bg); border:1px solid var(--border); border-radius:5px; padding:2px 6px; margin-right:8px; vertical-align:middle; } .mm-ov-title{ font:600 15.5px 'Newsreader',Georgia,serif; color:var(--ink); } .mm-ov-desc{ display:block; font:400 13px/1.5 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted); margin-top:3px; } .mm-ov-empty{ padding:28px 20px; text-align:center; color:var(--muted2); font:400 15px 'IBM Plex Sans',system-ui,sans-serif; } .mm-ov-foot{ padding:9px 16px; border-top:1px solid var(--border); background:var(--bg); font:500 11.5px 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted2); } .mm-ov-sec{ padding:10px 14px 4px; font:600 10.5px 'IBM Plex Sans',system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--muted2); } .mm-ov-row.is-active{ background:var(--accent-tint); border-left-color:var(--accent); } .mm-ov-foot .mm-kbd{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-right:2px; border:1px solid var(--btnborder); border-radius:5px; background:var(--surface); font:600 11px 'IBM Plex Sans',system-ui,sans-serif; color:var(--muted); } /* ---------- RESPONSIVE ---------- */ @media (max-width:820px){ .mm-grid3{ grid-template-columns:1fr; } .mm-two-col{ grid-template-columns:1fr; } .mm-tallgrid{ grid-template-columns:1fr; } .mm-vizgrid{ grid-template-columns:1fr; } .mm-pubgrid{ grid-template-columns:1fr; } .mm-bm-grid{ grid-template-columns:1fr; } .mm-bm-figure{ margin:0 auto; } .mm-footer-grid{ grid-template-columns:1fr; } .mm-name{ font-size:38px; } .mm-h1{ font-size:36px; } } /* ---------- MOBILE NAV (progressive enhancement; hamburger injected by site.js) ---------- */ .mm-hamburger{ display:none; align-items:center; justify-content:center; background:none; border:0; padding:6px; margin:-2px -6px; color:var(--ink); cursor:pointer; } @media (max-width:1050px){ .mm-js .mm-hamburger{ display:inline-flex; } .mm-js .mm-links{ display:none; order:10; margin-left:0; width:100%; flex-direction:column; align-items:stretch; gap:0; padding:4px 0 10px; } .mm-js .mm-nav.open .mm-links{ display:flex; } .mm-js .mm-links .mm-link, .mm-js .mm-links .mm-ai{ font-size:16px; padding:12px 2px; border-top:1px solid var(--hair); } .mm-js .mm-links .mm-link:first-child{ border-top:0; } .mm-js .mm-nav-tools{ margin-left:auto; } } /* ---------- SMALL SCREENS ---------- */ @media (max-width:640px){ .mm-about-tags{ flex-direction:column; align-items:flex-start; } .mm-nav-inner{ padding:11px 20px; gap:14px; } .mm-nav-tools{ gap:14px; } .mm-page{ padding:40px 20px 8px; } .mm-wrap{ padding:0 20px; } .mm-section-pad{ padding-top:40px; } .mm-hero{ padding:44px 20px 8px; gap:18px; } .mm-photo{ width:132px; height:132px; } .mm-name{ font-size:33px; } .mm-role{ font-size:16.5px; } .mm-intro{ font-size:16px; } .mm-h1{ font-size:31px; } .mm-h2{ font-size:24px; } .mm-lead{ font-size:15.5px; } .mm-prose{ font-size:15.5px; } .mm-stats{ gap:22px; } .mm-two-col{ gap:36px; } .mm-hero-tags{ display:flex; } .mm-byyear .yr{ flex-direction:column; gap:5px; padding:15px 0; } .mm-byyear .yr-num{ width:auto; } .mm-callout-inner{ padding:26px 20px; } .mm-footer-grid{ padding:32px 20px; gap:26px; } .mm-foot-bottom-inner{ padding:14px 20px; } .mm-map{ height:280px; } .mm-ov{ padding:6vh 12px 18px; } .mm-card{ padding:20px; } .mm-tallcard{ padding:19px; } .mm-accentcard{ padding:19px; } .mm-pub-card{ padding:17px 18px; } } @media (max-width:480px){ .mm-nav-inner{ padding:10px 16px; gap:12px; } .mm-nav-tools{ gap:12px; } .mm-cv{ padding:6px 10px; } .mm-page{ padding:36px 16px 8px; } .mm-wrap{ padding:0 16px; } .mm-hero{ padding-left:16px; padding-right:16px; } .mm-callout-inner{ padding:24px 16px; } .mm-footer-grid{ padding:28px 16px; } .mm-foot-bottom-inner{ padding:13px 16px; } }