/* Matt Marx — mattmarx.github.io */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#1c1e21;
  --ink-soft:#4b5158;
  --carnelian:#B31B1B;
  --carnelian-dark:#8f1414;
  --paper:#ffffff;
  --paper-dim:#f7f7f5;
  --rule:#e3e2de;
  --max:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--carnelian);text-decoration:none}
a:hover{color:var(--carnelian-dark);text-decoration:underline;text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--carnelian);outline-offset:2px;border-radius:2px}

/* Nav */
.nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:14px 24px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wordmark{font:600 20px 'IBM Plex Serif',serif;color:var(--ink);letter-spacing:.01em}
.wordmark:hover{text-decoration:none;color:var(--carnelian)}
.nav-links{display:flex;gap:22px;flex-wrap:wrap}
.nav-links a{color:var(--ink-soft);font-size:15px;font-weight:500;letter-spacing:.01em}
.nav-links a:hover{color:var(--carnelian);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--carnelian);border-bottom:2px solid var(--carnelian);padding-bottom:2px}

/* Layout */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.page-title{font:600 34px/1.2 'IBM Plex Serif',serif;margin:48px 0 6px}
.page-sub{color:var(--ink-soft);margin:0 0 36px;font-size:16px}

/* Hero (index) */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding:64px 0 48px}
.hero h1{font:600 52px/1.08 'IBM Plex Serif',serif;margin:0 0 14px;letter-spacing:-.01em}
.roles{margin:0 0 22px;padding:0;list-style:none;color:var(--ink-soft);font-size:16.5px;line-height:1.55}
.roles li{padding-left:16px;position:relative}
.roles li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--carnelian)}
.hero .lede{font-size:17.5px;max-width:56ch}
.hero-photo{width:100%;border-radius:6px;box-shadow:0 12px 40px rgba(28,30,33,.14)}
.cta-row{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 20px;border-radius:4px;font-weight:600;font-size:15px;letter-spacing:.01em}
.btn-primary{background:var(--carnelian);color:#fff}
.btn-primary:hover{background:var(--carnelian-dark);color:#fff;text-decoration:none}
.btn-ghost{border:1.5px solid var(--rule);color:var(--ink)}
.btn-ghost:hover{border-color:var(--carnelian);color:var(--carnelian);text-decoration:none}

/* Section labels */
.eyebrow{font:500 13px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--carnelian);margin:0 0 18px}
.section{padding:40px 0 8px;border-top:1px solid var(--rule)}

/* What's New ledger — signature element */
.ledger{list-style:none;margin:0;padding:0}
.ledger li{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:13px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.ledger .stamp{font:500 13px 'IBM Plex Mono',monospace;color:var(--carnelian);letter-spacing:.05em;white-space:nowrap}
.ledger .entry{font-size:16.5px}

/* Publication lists */
.pubs{list-style:none;margin:0 0 40px;padding:0}
.pubs li{padding:14px 0;border-bottom:1px solid var(--rule);max-width:78ch}
.pubs .venue{font-style:italic;color:var(--ink-soft)}
.pubs .co{color:var(--ink-soft);font-size:15.5px}
.year-head{font:600 22px 'IBM Plex Serif',serif;margin:36px 0 4px}

/* Prose pages */
.prose{max-width:72ch;font-size:17px}
.prose p{margin:0 0 1.15em}
.prose ol li{margin-bottom:.7em}
.bio-photo{float:right;width:280px;max-width:42%;margin:6px 0 18px 28px;border-radius:6px;box-shadow:0 10px 32px rgba(28,30,33,.14)}

footer{margin-top:72px;border-top:1px solid var(--rule);background:var(--paper-dim)}
.foot-inner{max-width:var(--max);margin:0 auto;padding:26px 24px;color:var(--ink-soft);font-size:14.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:32px;padding:40px 0 32px}
  .hero h1{font-size:38px}
  .hero-photo{order:-1;max-width:420px}
  .ledger li{grid-template-columns:84px 1fr;gap:12px}
  .bio-photo{float:none;display:block;margin:0 auto 20px;max-width:80%}
}