/* Marko Medvedev — academic homepage Restrained editorial layout: one column, hairline rules, one accent. */ /* Light is the default and does not follow the OS. Dark is opt-in via the toggle, which sets data-theme="dark" on . Light palette carries over the old jemdoc site: white ground, #527bbd headings, #224b8d links, #dddddd hairlines. */ :root { --bg: #ffffff; --panel: #f4f6fa; --ink: #1b1f24; --ink-soft: #333a42; --muted: #6d7885; --rule: #dddddd; --accent: #224b8d; /* links */ --accent-2: #527bbd; /* headings, rules, marks */ --accent-bg: #eaf0f8; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --measure: 42rem; /* text column */ --page: 50rem; /* full page width incl. gutters */ } :root[data-theme="dark"] { --bg: #10141a; --panel: #182029; --ink: #e8eaee; --ink-soft: #c5cad2; --muted: #8d97a4; --rule: #29313b; --accent: #8fb6e8; --accent-2: #a9c6ea; --accent-bg: #1a2634; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; padding: .5rem .75rem; background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; z-index: 10; } a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease, color .15s ease; } a:hover { border-bottom-color: currentColor; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ---------- theme toggle ---------- */ .theme-toggle { position: fixed; top: 1.15rem; right: 1.15rem; z-index: 20; display: inline-flex; align-items: center; gap: .42rem; padding: .42rem .68rem; font: inherit; font-size: .8rem; line-height: 1; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .theme-toggle svg { display: block; } /* Show the icon for the theme you would switch TO. */ .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } .page { max-width: var(--page); margin: 0 auto; padding: 5.5rem 1.75rem 4rem; } /* ---------- masthead ---------- */ .masthead { display: grid; grid-template-columns: 156px 1fr; gap: 2.25rem; align-items: start; padding-bottom: 2.75rem; border-bottom: 1px solid var(--rule); } .portrait { position: relative; width: 156px; height: 182px; overflow: hidden; border-radius: 4px; background: var(--panel); } /* Source is 654x760 with the subject right of centre. Show the 380x444 window at x=240, y=0, which puts the face on the frame's vertical axis. Widths are percentages of the frame, so the crop holds at every breakpoint. */ .portrait img { position: absolute; top: 0; left: -63.2%; width: 172.1%; height: auto; display: block; filter: saturate(.96); } .identity h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 5.4vw, 2.7rem); line-height: 1.1; letter-spacing: -0.015em; margin: -0.35rem 0 0.7rem; } .affiliation { margin: 0 0 .55rem; color: var(--ink-soft); line-height: 1.55; } .contact { margin: 0 0 1.35rem; color: var(--ink-soft); font-size: .95rem; } .contact .label { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-right: .5rem; } .contact .email i { font-style: italic; } .links { display: flex; flex-wrap: wrap; gap: .5rem .5rem; } .links a { font-size: .875rem; line-height: 1; padding: .48rem .72rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-soft); background: transparent; transition: background .15s ease, border-color .15s ease, color .15s ease; } .links a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); } /* ---------- sections ---------- */ .section { padding-top: 2.9rem; } .section-title { font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 1.35rem; padding-bottom: .55rem; border-bottom: 1px solid var(--rule); } .lede { max-width: var(--measure); margin: 0; color: var(--ink-soft); font-size: 1.03rem; line-height: 1.72; } /* One full blank line between paragraphs: 1.72em is exactly the .lede line-height, so the gap reads as a skipped line, not a line break. */ .lede + .lede { margin-top: 1.72em; } /* ---------- publications & talks ---------- */ .pubs { list-style: none; margin: 0; padding: 0; } .pub { position: relative; padding: .85rem 0 .95rem 1.15rem; border-top: 1px solid transparent; } .pub + .pub { border-top-color: var(--rule); } .pub::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: 3px; height: 0; background: var(--accent); border-radius: 2px; transition: height .18s ease; } .pub:hover::before { height: calc(100% - 2.1rem); } .pub-title { font-family: var(--serif); font-size: 1.115rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; margin: 0 0 .3rem; max-width: var(--measure); } .pub-title a { color: var(--ink); } .pub-title a:hover { color: var(--accent); border-bottom-color: transparent; } .pub-authors { margin: 0 0 .45rem; font-size: .935rem; color: var(--muted); max-width: var(--measure); } .pub-authors b { font-weight: 600; color: var(--ink-soft); } .pub-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; } .venue { font-size: .77rem; font-weight: 600; letter-spacing: .04em; line-height: 1; padding: .34rem .55rem; border-radius: 4px; color: var(--accent); background: var(--accent-bg); } .venue-quiet { color: var(--muted); background: var(--panel); font-weight: 500; } .pill { font-size: .77rem; letter-spacing: .04em; line-height: 1; padding: .33rem .55rem; border: 1px solid var(--rule); border-radius: 4px; color: var(--muted); } .pill:hover { color: var(--accent); border-color: var(--accent); border-bottom-color: var(--accent); } .bb { font-family: var(--serif); font-style: normal; font-weight: 600; /* blackboard-bold stand-in for the integers */ text-shadow: -0.5px 0 currentColor; } /* ---------- footer ---------- */ .footer { margin-top: 3.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .84rem; } .footer p { margin: 0; } /* ---------- responsive ---------- */ @media (max-width: 640px) { body { font-size: 16.5px; } .page { padding: 3rem 1.25rem 3rem; } .masthead { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 2rem; } .portrait { width: 136px; height: 159px; } .identity h1 { margin-top: 0; } .theme-toggle { top: .75rem; right: .75rem; } .theme-toggle-text { display: none; } } /* ---------- print ---------- */ @media print { :root { --bg: #fff; --ink: #000; --ink-soft: #222; --muted: #444; --rule: #ccc; --accent: #000; --accent-2: #000; --accent-bg: #f2f2f2; } .page { max-width: none; padding: 0; } .links, .skip, .theme-toggle { display: none; } a { color: #000; } .pub { break-inside: avoid; } }