/* ========================================================================== Keshav Aggarwal: site stylesheet Palette, typeface and layout are set by attributes on : data-palette = prussian | graphite | heliosphere | moss | oxford | ink data-font = source | plex | newsreader | garamond data-layout = topbar | sidebar | centered data-theme = light | dark (absent = follow the operating system) ========================================================================== */ /* ---------- Palettes: light values on :root, dark values below ---------- */ :root, :root[data-palette="prussian"] { --bg: #f8f9fa; --surface: #ffffff; --ink: #16202c; --muted: #536072; --faint: #8792a2; --rule: #e1e5ea; --accent: #1f4f7a; --accent-ink: #ffffff; --accent-soft: #e7eef5; --d-bg: #0e131a; --d-surface: #151c25; --d-ink: #e3e8ee; --d-muted: #9ba7b6; --d-faint: #6c7788; --d-rule: #253142; --d-accent: #8fb9df; --d-accent-ink: #0e131a; --d-accent-soft: #182a3c; } :root[data-palette="graphite"] { --bg: #fafafa; --surface: #ffffff; --ink: #1b1c1e; --muted: #5d6064; --faint: #909398; --rule: #e4e5e7; --accent: #3d5263; --accent-ink: #ffffff; --accent-soft: #eceff1; --d-bg: #121314; --d-surface: #1a1b1d; --d-ink: #e8e9ea; --d-muted: #a2a5a9; --d-faint: #70747a; --d-rule: #2a2c2f; --d-accent: #aebfcc; --d-accent-ink: #121314; --d-accent-soft: #22282d; } :root[data-palette="heliosphere"] { --bg: #f9f8f6; --surface: #ffffff; --ink: #1d1a17; --muted: #5f5750; --faint: #968d85; --rule: #e7e2dc; --accent: #9a4c17; --accent-ink: #ffffff; --accent-soft: #f5ebe2; --d-bg: #13110f; --d-surface: #1c1916; --d-ink: #ece6df; --d-muted: #aca298; --d-faint: #776e65; --d-rule: #2f2a25; --d-accent: #e3a46c; --d-accent-ink: #13110f; --d-accent-soft: #2e2118; } :root[data-palette="moss"] { --bg: #f7f9f8; --surface: #ffffff; --ink: #16211d; --muted: #52625b; --faint: #879790; --rule: #dfe6e2; --accent: #2c5e50; --accent-ink: #ffffff; --accent-soft: #e5efeb; --d-bg: #0e1412; --d-surface: #151d1a; --d-ink: #e2eae6; --d-muted: #9cada5; --d-faint: #6a7b73; --d-rule: #24312c; --d-accent: #8cc5b2; --d-accent-ink: #0e1412; --d-accent-soft: #172923; } :root[data-palette="ink"] { --bg: #ffffff; --surface: #ffffff; --ink: #111418; --muted: #4f5660; --faint: #8a9099; --rule: #e3e5e8; --accent: #0b57d0; --accent-ink: #ffffff; --accent-soft: #e8f0fd; --d-bg: #0b0d10; --d-surface: #14171b; --d-ink: #eceef1; --d-muted: #a3a9b2; --d-faint: #6f7680; --d-rule: #262a30; --d-accent: #8ab4f8; --d-accent-ink: #0b0d10; --d-accent-soft: #172336; } :root[data-palette="oxford"] { --bg: #faf9f9; --surface: #ffffff; --ink: #1f1a1c; --muted: #625a5d; --faint: #978e91; --rule: #e8e2e4; --accent: #7a2334; --accent-ink: #ffffff; --accent-soft: #f4e8eb; --d-bg: #141112; --d-surface: #1d191a; --d-ink: #ede6e8; --d-muted: #b0a5a9; --d-faint: #7a7074; --d-rule: #322a2d; --d-accent: #e39aa8; --d-accent-ink: #141112; --d-accent-soft: #33201f; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--d-bg); --surface: var(--d-surface); --ink: var(--d-ink); --muted: var(--d-muted); --faint: var(--d-faint); --rule: var(--d-rule); --accent: var(--d-accent); --accent-ink: var(--d-accent-ink); --accent-soft: var(--d-accent-soft); color-scheme: dark; } } :root[data-theme="dark"] { --bg: var(--d-bg); --surface: var(--d-surface); --ink: var(--d-ink); --muted: var(--d-muted); --faint: var(--d-faint); --rule: var(--d-rule); --accent: var(--d-accent); --accent-ink: var(--d-accent-ink); --accent-soft: var(--d-accent-soft); color-scheme: dark; } /* ---------- Typefaces ---------- */ :root, :root[data-font="source"] { --f-display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --f-body: "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", Roboto, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --display-weight: 600; --body-size: 1.0625rem; } :root[data-font="plex"] { --f-display: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif; --f-body: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --display-weight: 500; --body-size: 1rem; } :root[data-font="newsreader"] { --f-display: "Newsreader", Georgia, "Times New Roman", serif; --f-body: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --display-weight: 500; --body-size: 1rem; } :root[data-font="garamond"] { --f-display: "EB Garamond", Garamond, Georgia, serif; --f-body: "EB Garamond", Garamond, Georgia, serif; --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --display-weight: 500; --body-size: 1.1875rem; } /* ---------- Base ---------- */ :root { --measure: 66ch; --wide: 1080px; --gutter: clamp(16px, 4vw, 40px); --radius: 4px; --t-xs: 0.8125rem; --t-sm: 0.9rem; --t-md: 1.125rem; --t-lg: 1.375rem; --t-xl: 1.75rem; --t-2xl: clamp(2rem, 4.2vw, 2.625rem); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: var(--body-size); line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } [hidden] { display: none !important; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: var(--display-weight); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; margin: 0; color: var(--ink); } h1 { font-size: var(--t-2xl); letter-spacing: -0.02em; } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-md); } p { margin: 0; } .prose > * + * { margin-top: 1em; } .prose { max-width: var(--measure); } .muted { color: var(--muted); } .mono { font-family: var(--f-mono); font-size: 0.875em; } .label { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .icon { width: 1.1em; height: 1.1em; flex: none; display: inline-block; vertical-align: -0.15em; } .skip-link { position: absolute; left: -999px; top: 0; } .skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--surface); padding: 0.5rem 0.75rem; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ---------- Header / navigation ---------- */ .site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--rule); } .header-inner { max-width: var(--wide); margin: 0 auto; padding-inline: var(--gutter); padding-block: 0.85rem; display: flex; align-items: center; gap: 1.5rem; } .brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); line-height: 1.2; margin-right: auto; } .brand-name { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 1.125rem; letter-spacing: -0.01em; } .brand-role { font-size: var(--t-xs); color: var(--muted); } .site-nav { display: flex; gap: 0.25rem 1.1rem; flex-wrap: wrap; } .site-nav a { color: var(--muted); text-decoration: none; font-size: var(--t-sm); padding-block: 0.3rem; border-bottom: 1.5px solid transparent; } .site-nav a:hover { color: var(--ink); } .site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); } .header-tools { display: flex; align-items: center; gap: 0.25rem; } .icon-btn { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--muted); cursor: pointer; padding: 0; } .icon-btn:hover { color: var(--ink); border-color: var(--rule); } .nav-toggle { display: none; } .header-profile { display: none; } @media (max-width: 1180px) { .nav-toggle { display: inline-grid; } .header-inner { flex-wrap: wrap; } .site-nav { display: none; order: 5; flex-basis: 100%; flex-direction: column; gap: 0; padding-block: 0.5rem; } .site-nav.open { display: flex; } .site-nav a { padding-block: 0.55rem; border-bottom: 1px solid var(--rule); } .site-nav a[aria-current="page"] { border-bottom-color: var(--rule); color: var(--accent); } } /* ---------- Page scaffold ---------- */ main { max-width: var(--wide); margin: 0 auto; padding-inline: var(--gutter); padding-block: 3rem 4rem; } .page-head { display: grid; gap: 0.6rem; padding-bottom: 2rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--rule); } .page-head p { color: var(--muted); max-width: var(--measure); font-size: var(--t-md); } .section { display: grid; gap: 1.25rem; } .section + .section, main > * + .section { margin-top: 3.5rem; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .section-head h2 { font-size: var(--t-lg); } .section-head a { font-size: var(--t-sm); text-decoration: none; } .section-head a:hover { text-decoration: underline; } /* ---------- Home ---------- */ .hero { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 2rem 3.5rem; align-items: start; padding-bottom: 2.75rem; margin-bottom: 3rem; border-bottom: 1px solid var(--rule); } .hero-text { display: grid; gap: 1.1rem; } .hero .position { font-size: var(--t-md); color: var(--muted); max-width: var(--measure); line-height: 1.5; } .hero .position strong { color: var(--ink); font-weight: 600; } .portrait { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--rule); } .portrait-caption { margin-top: 0.6rem; font-size: var(--t-xs); color: var(--faint); font-family: var(--f-mono); } @media (max-width: 720px) { .hero { grid-template-columns: 1fr; } .hero-media { order: -1; max-width: 160px; } } .profile-links { display: flex; flex-wrap: wrap; gap: 0.4rem; } .profile-links a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.7rem; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); text-decoration: none; font-size: var(--t-sm); background: var(--surface); } .profile-links a:hover { border-color: var(--accent); color: var(--accent); } .profile-links .icon { color: var(--muted); } .profile-links a:hover .icon { color: var(--accent); } .two-col { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem; align-items: start; } @media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } } .interest-list { list-style: none; margin: 0; padding: 0; display: grid; } .interest-list li { padding-block: 0.6rem; border-bottom: 1px solid var(--rule); display: grid; gap: 0.1rem; } .interest-list li:first-child { border-top: 1px solid var(--rule); } .interest-list strong { font-weight: 600; } .interest-list span { color: var(--muted); font-size: var(--t-sm); } .news { list-style: none; margin: 0; padding: 0; display: grid; } .news li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding-block: 0.65rem; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); } .news li:first-child { border-top: 1px solid var(--rule); } .news time { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); padding-top: 0.2rem; font-variant-numeric: tabular-nums; } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: 0.25rem 1.75rem; flex-wrap: wrap; border-bottom: 1px solid var(--rule); margin-bottom: 1.75rem; } .tab { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; font-size: var(--t-sm); color: var(--muted); padding: 0.6rem 0; margin-bottom: -1px; border-bottom: 2px solid transparent; display: inline-flex; gap: 0.45rem; align-items: baseline; } .tab:hover { color: var(--ink); } .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); } .tab .count { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--faint); font-variant-numeric: tabular-nums; } .tab-panel[hidden] { display: none; } .toolbar { display: flex; gap: 0.75rem 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; } .search { flex: 1 1 16rem; max-width: 26rem; font: inherit; font-size: var(--t-sm); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.5rem 0.75rem; } .search:focus { outline: none; border-color: var(--accent); } .toolbar .result-count { font-size: var(--t-xs); color: var(--muted); font-family: var(--f-mono); } /* ---------- Publications ---------- */ .stats { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; margin-bottom: 2rem; } .stat { display: grid; } .stat b { font-family: var(--f-display); font-weight: var(--display-weight); font-size: var(--t-xl); font-variant-numeric: tabular-nums; line-height: 1.1; } .stat span { font-size: var(--t-xs); color: var(--muted); } .year-group + .year-group { margin-top: 2rem; } .year-group > h3 { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 0.25rem; } .pub-list { list-style: none; margin: 0; padding: 0; } .pub { padding-block: 1rem; border-bottom: 1px solid var(--rule); display: grid; gap: 0.3rem; } .pub-list .pub:first-child { border-top: 1px solid var(--rule); } .pub-title { font-family: var(--f-display); font-weight: var(--display-weight); font-size: var(--t-md); line-height: 1.35; color: var(--ink); } .pub-title a { color: inherit; text-decoration: none; } .pub-title a:hover { color: var(--accent); text-decoration: underline; } .pub-authors { font-size: var(--t-sm); color: var(--muted); } .pub-authors .me { color: var(--ink); font-weight: 600; } .pub-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; font-size: var(--t-sm); } .pub-venue { font-style: italic; color: var(--ink); } .pub-links { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.02em; padding: 0.12rem 0.5rem; border: 1px solid var(--rule); border-radius: 3px; color: var(--muted); text-decoration: none; background: var(--surface); } a.chip:hover { color: var(--accent); border-color: var(--accent); } .chip.tag { background: var(--accent-soft); border-color: transparent; color: var(--accent); } .chip.status-tag { background: #fbf3e4; border-color: #e7cf9f; color: #7a5410; } .chip.kindtag { background: var(--surface); border-style: dashed; color: var(--ink); } .pub-note { font-size: var(--t-sm); color: var(--muted); } .empty { color: var(--muted); padding-block: 1.5rem; } /* ---------- Rows (CV, timeline) ---------- */ .rows { display: grid; } .row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.25rem 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--rule); } .rows .row:first-child { border-top: 1px solid var(--rule); } .row-date { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); padding-top: 0.2rem; font-variant-numeric: tabular-nums; } .row-body { display: grid; gap: 0.2rem; } .row-title { font-weight: 600; } .row-sub { color: var(--muted); font-size: var(--t-sm); } .row-body ul { margin: 0.25rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: var(--t-sm); } @media (max-width: 600px) { .row { grid-template-columns: 1fr; } } /* ---------- Cards (software, research) ---------- */ .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); } .card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem 1.25rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; } .card h3 { font-size: var(--t-lg); } .card p { color: var(--muted); font-size: var(--t-sm); } .card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; } .card-foot { margin-top: auto; padding-top: 0.5rem; display: flex; gap: 0.4rem; flex-wrap: wrap; } .status { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); white-space: nowrap; } .status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--faint); } .status.dev::before { background: #c9922e; } .status.live::before { background: #3f8a5c; } .card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.9rem; margin: 0.2rem 0 0; font-size: var(--t-sm); } .card dt { color: var(--faint); font-family: var(--f-mono); font-size: 0.75rem; padding-top: 0.15rem; } .card dd { margin: 0; color: var(--ink); } .feature-list { display: grid; } .feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1rem 3rem; padding-block: 2rem; border-bottom: 1px solid var(--rule); } .feature:first-child { border-top: 1px solid var(--rule); } .feature h3 { font-size: var(--t-lg); } .feature .label { margin-bottom: 0.4rem; display: block; } .feature-body { display: grid; gap: 0.8rem; align-content: start; } .feature-body p { max-width: var(--measure); } @media (max-width: 760px) { .feature { grid-template-columns: 1fr; } } .table-wrap { overflow-x: auto; } table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); } th, td { text-align: left; padding: 0.6rem 1rem 0.6rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; } th { font-family: var(--f-mono); font-weight: 500; font-size: var(--t-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } td.num { font-variant-numeric: tabular-nums; font-family: var(--f-mono); font-size: 0.8rem; white-space: nowrap; } /* ---------- Video grid ---------- */ .channel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 1.25rem; align-items: center; padding: 1.25rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 1.75rem; } .channel .icon { width: 2rem; height: 2rem; color: var(--accent); } .channel h3 { font-size: var(--t-md); } .channel p { color: var(--muted); font-size: var(--t-sm); } @media (max-width: 600px) { .channel { grid-template-columns: 1fr; } } .btn { display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; font-size: var(--t-sm); font-weight: 500; padding: 0.5rem 0.9rem; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); text-decoration: none; cursor: pointer; white-space: nowrap; } .btn:hover { filter: brightness(1.08); } .btn.ghost { background: transparent; color: var(--accent); } .video { display: grid; gap: 0.5rem; } .video-frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--rule); border-radius: var(--radius); overflow: hidden; } .video-frame iframe, .video-frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } .video-frame button { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; background: none; } .video-frame .play { position: absolute; left: 50%; top: 50%; width: 3.25rem; height: 3.25rem; transform: translate(-50%, -50%); color: #fff; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); } .video h3 { font-size: var(--t-md); } .video p { color: var(--muted); font-size: var(--t-sm); } /* ---------- Filters (shared) ---------- */ .filters { display: flex; flex-wrap: wrap; gap: 0.4rem; } .filter { font: inherit; font-size: var(--t-sm); cursor: pointer; padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--muted); display: inline-flex; gap: 0.4rem; align-items: baseline; } .filter:hover { color: var(--ink); border-color: var(--faint); } .filter .count { font-family: var(--f-mono); font-size: 0.72rem; color: var(--faint); } .filter[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } .filter[aria-pressed="true"] .count { color: color-mix(in srgb, var(--bg) 70%, transparent); } .select { font: inherit; font-size: var(--t-sm); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.35rem 0.6rem; } .placeholder { border: 1px dashed var(--rule); border-radius: var(--radius); padding: 1.75rem 1.5rem; color: var(--muted); font-size: var(--t-sm); display: grid; gap: 0.75rem; max-width: 46rem; } .placeholder strong { color: var(--ink); font-size: var(--t-md); font-family: var(--f-display); font-weight: var(--display-weight); } .placeholder code { font-family: var(--f-mono); font-size: 0.8rem; color: var(--ink); background: var(--accent-soft); padding: 0.05rem 0.3rem; border-radius: 3px; } .placeholder ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; } .note-bar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; padding: 0.6rem 0.9rem; border-radius: var(--radius); background: var(--accent-soft); color: var(--ink); font-size: var(--t-sm); margin-bottom: 1.5rem; } /* ---------- Photography ---------- */ .albums { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); } .album { display: grid; gap: 0.6rem; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink); font: inherit; } .album-cover { display: block; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; border-radius: var(--radius); background: var(--rule); } .album-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .album:hover .album-cover img { transform: scale(1.03); } .album[aria-pressed="true"] .album-cover { outline: 2px solid var(--accent); outline-offset: 2px; } .album-meta { display: grid; gap: 0.1rem; } .album-title { font-family: var(--f-display); font-weight: var(--display-weight); font-size: var(--t-md); } .album-sub { font-size: var(--t-xs); color: var(--muted); font-family: var(--f-mono); } .photo-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .photo-toolbar .right { display: flex; gap: 0.75rem; align-items: center; font-size: var(--t-xs); color: var(--muted); font-family: var(--f-mono); } .album-desc { color: var(--muted); max-width: var(--measure); margin-bottom: 1rem; } .jgrid { display: grid; gap: 8px; } .jrow { display: flex; gap: 8px; } .jitem { margin: 0; position: relative; flex: none; overflow: hidden; border-radius: 3px; background: var(--rule); } .jitem button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .jitem img { width: 100%; height: 100%; object-fit: cover; } .jitem figcaption { position: absolute; inset: auto 0 0 0; padding: 1.5rem 0.6rem 0.45rem; display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; color: #fff; pointer-events: none; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); opacity: 0; transition: opacity 0.2s ease; } .jitem figcaption span:last-child { font-family: var(--f-mono); font-size: 0.68rem; opacity: 0.85; white-space: nowrap; } .jitem:hover figcaption, .jitem:focus-within figcaption { opacity: 1; } @media (hover: none) { .jitem figcaption { opacity: 1; } } .page-head .kit { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); letter-spacing: 0.02em; } dialog.lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: #0b0d10; color: #e6e8eb; } dialog.lb::backdrop { background: #0b0d10; } .lb-inner { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; } .lb-top { display: flex; justify-content: space-between; align-items: center; padding: calc(0.6rem + env(safe-area-inset-top, 0px)) 0.8rem 0.6rem 1.1rem; font-family: var(--f-mono); font-size: var(--t-xs); color: #9aa1ab; } .lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 3.5rem; } .lb-img { max-width: 100%; max-height: 100%; object-fit: contain; } .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid #2a2f36; background: rgba(20, 23, 27, 0.7); color: #e6e8eb; cursor: pointer; display: grid; place-items: center; } .lb-nav:hover { background: #22272e; } .lb-nav.prev { left: 0.6rem; } .lb-nav.next { right: 0.6rem; } .lb-nav .icon { width: 1.25rem; height: 1.25rem; } .lb-cap { padding: 0.9rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px)); display: grid; gap: 0.25rem; max-width: 60rem; margin: 0 auto; width: 100%; text-align: center; } .lb-title { font-family: var(--f-display); font-size: var(--t-md); color: #fff; } .lb-place, .lb-place a { color: #aeb5bf; font-size: var(--t-sm); } .lb-desc { color: #c9ced5; font-size: var(--t-sm); } .lb-exif { font-family: var(--f-mono); font-size: 0.72rem; color: #7f8791; } .lb .icon-btn { color: #c9ced5; } .lb .icon-btn:hover { border-color: #2a2f36; color: #fff; } @media (max-width: 600px) { .lb-stage { padding: 0; } .lb-nav { display: none; } } /* ---------- Travel maps ---------- */ :root { --map-sea: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); --map-land: color-mix(in srgb, var(--rule) 60%, var(--surface)); --map-line: color-mix(in srgb, var(--ink) 14%, var(--surface)); --map-border: color-mix(in srgb, var(--ink) 45%, var(--surface)); --map-visit: color-mix(in srgb, var(--accent) 78%, var(--surface)); --map-visit-soft: color-mix(in srgb, var(--accent) 34%, var(--surface)); } .map-wrap { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .map-wrap svg { display: block; width: 100%; height: auto; max-height: 82vh; cursor: grab; touch-action: none; user-select: none; } .map-wrap svg:active { cursor: grabbing; } .is-editing .map-wrap svg { cursor: crosshair; } .map path { vector-effect: non-scaling-stroke; } .map .district { fill: var(--map-land); stroke: var(--map-line); stroke-width: 0.5; transition: fill 0.15s; } .map .district:hover { fill: color-mix(in srgb, var(--accent) 22%, var(--map-land)); } .map .district.visited { fill: var(--map-visit); stroke: color-mix(in srgb, var(--accent) 60%, var(--surface)); } .map .district.visited:hover { fill: var(--accent); } .map .district.extra, .map .district.extra:hover { fill: var(--map-land); stroke: none; cursor: default; } .map .state-border { fill: none; stroke: var(--map-border); stroke-width: 0.9; pointer-events: none; } .map .country-border { fill: none; stroke: var(--ink); stroke-width: 1.1; pointer-events: none; } .map .sphere { fill: var(--map-sea); stroke: var(--rule); } .map .graticule { fill: none; stroke: color-mix(in srgb, var(--ink) 7%, transparent); stroke-width: 0.5; pointer-events: none; } .map .country { fill: var(--map-land); stroke: var(--surface); stroke-width: 0.6; } .map .country:hover { fill: color-mix(in srgb, var(--ink) 16%, var(--map-land)); } .map .country.visited { fill: var(--map-visit-soft); } .map .country.visited:hover { fill: color-mix(in srgb, var(--accent) 50%, var(--surface)); } .map .pin { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: pointer; } .map .pin:hover, .map .pin:focus { fill: var(--ink); outline: none; } #india-map .pin { fill: var(--surface); stroke: var(--ink); } #india-map .pin:hover { fill: var(--ink); } .map-controls { position: absolute; right: 0.6rem; top: 0.6rem; display: grid; gap: 0.25rem; } .map-controls button { width: 2rem; height: 2rem; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; display: grid; place-items: center; } .map-controls button:hover { border-color: var(--faint); } .map-legend { position: absolute; left: 0.75rem; bottom: 0.6rem; display: flex; flex-direction: column; gap: 0.35rem 1rem; font-size: var(--t-xs); color: var(--muted); background: color-mix(in srgb, var(--surface) 85%, transparent); padding: 0.3rem 0.5rem; border-radius: var(--radius); } .map-legend i { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; margin-right: 0.35rem; vertical-align: -0.1rem; } .map-legend i.dot { border-radius: 50%; border: 1.5px solid var(--ink); background: var(--surface); } .map-tip { position: absolute; z-index: 5; pointer-events: none; max-width: 17rem; background: var(--ink); color: var(--bg); border-radius: var(--radius); padding: 0.45rem 0.65rem; font-size: var(--t-xs); line-height: 1.4; display: grid; gap: 0.1rem; box-shadow: 0 4px 16px rgba(0,0,0,.18); } .map-tip strong { font-size: var(--t-sm); } .map-tip span { color: color-mix(in srgb, var(--bg) 78%, transparent); } .map-tip .tip-flag { color: var(--bg); font-family: var(--f-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; } .map-tip .tip-hint { font-style: italic; } .map-note { font-size: var(--t-xs); color: var(--faint); margin-top: 0.6rem; max-width: 70ch; } .map-note a { color: var(--muted); } .map-note + .section { margin-top: 2.5rem; } .map-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2rem; align-items: start; } @media (max-width: 860px) { .map-layout { grid-template-columns: 1fr; } } .state-groups { display: grid; gap: 0.9rem; } .state-group h4 { font-family: var(--f-body); font-size: var(--t-sm); font-weight: 600; display: flex; gap: 0.5rem; align-items: baseline; } .state-group .count, .side-head .count { font-family: var(--f-mono); font-size: 0.72rem; color: var(--faint); font-weight: 400; } .state-group p { font-size: var(--t-sm); color: var(--muted); } .side-head { font-size: var(--t-md); margin-bottom: 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); } .place-table td:first-child { white-space: nowrap; } .place-table .visit { display: block; } .place-table .visit + .visit { margin-top: 0.2rem; } .place-table .mono { color: var(--muted); font-size: 0.75rem; margin-right: 0.35rem; } .linklike { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } .edit-panel { border: 1px solid var(--accent); border-radius: var(--radius); background: var(--surface); padding: 1.1rem 1.25rem; margin-bottom: 2rem; display: grid; gap: 0.8rem; } .edit-panel h2 { font-size: var(--t-md); } .edit-panel p { font-size: var(--t-sm); color: var(--muted); max-width: 80ch; } .edit-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .edit-panel textarea { width: 100%; min-height: 9rem; font-family: var(--f-mono); font-size: 0.75rem; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.6rem; resize: vertical; } .pin-form { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 6; width: min(20rem, calc(100% - 1.5rem)); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 0.9rem; display: grid; gap: 0.5rem; font-size: var(--t-sm); } .pin-form label { display: grid; gap: 0.15rem; color: var(--muted); font-size: var(--t-xs); } .pin-form input { font: inherit; font-size: var(--t-sm); color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.35rem 0.5rem; width: 100%; } .pin-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .pin-form .edit-row { margin-top: 0.25rem; } .btn.small { padding: 0.3rem 0.65rem; font-size: var(--t-xs); } .btn.danger { background: transparent; color: #b3261e; border-color: #b3261e; } /* ---------- Videos ---------- */ .channel-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .featured { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.5rem 2rem; align-items: start; margin-bottom: 3rem; } @media (max-width: 820px) { .featured { grid-template-columns: 1fr; } } .featured .video-frame { border-radius: var(--radius); } .featured-meta { display: grid; gap: 0.6rem; } .featured-meta h2 { font-size: var(--t-lg); } .featured-meta .desc { color: var(--muted); font-size: var(--t-sm); } .video-frame button .play, .vthumb .play { width: 3.5rem; height: 3.5rem; } .video-grid { display: grid; gap: 1.75rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); } .vcard { display: grid; gap: 0.5rem; align-content: start; } .vthumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--rule); cursor: pointer; } .vthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .vthumb:hover img { transform: scale(1.03); } .vthumb .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; opacity: 0.9; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); width: 2.75rem; height: 2.75rem; } .vdur { position: absolute; right: 0.4rem; bottom: 0.4rem; background: rgba(0,0,0,.78); color: #fff; font-family: var(--f-mono); font-size: 0.7rem; padding: 0.05rem 0.35rem; border-radius: 3px; } .vcard h3 { font-size: var(--t-md); line-height: 1.3; } .vcard h3 a { color: var(--ink); text-decoration: none; } .vcard h3 a:hover { color: var(--accent); text-decoration: underline; } .vmeta { font-family: var(--f-mono); font-size: 0.75rem; color: var(--muted); } dialog.vplayer { border: 0; padding: 0; background: transparent; width: min(92vw, 1200px); max-width: none; color: #e6e8eb; } dialog.vplayer::backdrop { background: rgba(8, 10, 14, 0.9); } .vp-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; } .vp-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .vp-bar { display: flex; justify-content: space-between; align-items: start; gap: 1rem; padding-top: 0.75rem; } .vp-title { font-family: var(--f-display); font-size: var(--t-md); color: #fff; } .vp-meta { font-family: var(--f-mono); font-size: 0.75rem; color: #9aa1ab; } .vp-bar a { color: #aeb5bf; font-size: var(--t-sm); white-space: nowrap; } .vplayer .icon-btn { color: #c9ced5; } /* ---------- Home: latest video / article ---------- */ .mini { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.9rem; align-items: start; padding-block: 0.9rem; border-bottom: 1px solid var(--rule); } .mini:first-child { border-top: 1px solid var(--rule); } .mini-media { display: block; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: 3px; background: var(--rule); } .mini-media img { width: 100%; height: 100%; object-fit: cover; } .mini .label { font-size: 0.7rem; } .mini-title { font-size: var(--t-sm); font-weight: 600; line-height: 1.35; margin-block: 0.15rem; } .mini-title a { color: var(--ink); text-decoration: none; } .mini-title a:hover { color: var(--accent); text-decoration: underline; } .mini .mono { font-size: 0.72rem; } /* ---------- Writing ---------- */ .articles { display: grid; } .article { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1rem 1.75rem; padding-block: 1.5rem; border-bottom: 1px solid var(--rule); } .article:first-child { border-top: 1px solid var(--rule); } .article-img { display: block; aspect-ratio: 3 / 2; max-width: 100%; overflow: hidden; border-radius: var(--radius); background: var(--rule); } .article-img img { width: 100%; height: 100%; object-fit: cover; } .article-body { display: grid; gap: 0.4rem; align-content: start; } .article-body h3 { font-size: var(--t-lg); line-height: 1.3; } .article-body h3 a { color: var(--ink); text-decoration: none; } .article-body h3 a:hover { color: var(--accent); text-decoration: underline; } .article-body .mono { font-size: 0.75rem; } .article-excerpt { color: var(--muted); font-size: var(--t-sm); max-width: var(--measure); } @media (max-width: 640px) { .article { grid-template-columns: 1fr; } } /* ---------- BibTeX ---------- */ button.chip { font: inherit; font-family: var(--f-mono); font-size: 0.75rem; cursor: pointer; } button.chip:hover, button.chip[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); } .chip .icon { width: 0.9em; height: 0.9em; } .bib { position: relative; margin-top: 0.4rem; } .bib pre { margin: 0; padding: 0.75rem 5rem 0.75rem 0.9rem; overflow-x: auto; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--f-mono); font-size: 0.75rem; line-height: 1.5; color: var(--ink); white-space: pre; } .bib .btn { position: absolute; top: 0.5rem; right: 0.5rem; } /* ---------- Research figure ---------- */ .figure { margin: 0 0 3rem; display: grid; gap: 0.75rem; } .figure-box { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem; overflow-x: auto; } .figure svg { display: block; width: 100%; min-width: 560px; height: auto; } .figure figcaption { font-size: var(--t-sm); color: var(--muted); max-width: 80ch; } .fig-line { stroke: var(--ink); fill: none; } .fig-faint { stroke: var(--faint); fill: none; } .fig-accent { stroke: var(--accent); fill: none; } .fig-sun { fill: color-mix(in srgb, #e3a13a 70%, var(--surface)); } .fig-corona { fill: color-mix(in srgb, #e3a13a 18%, var(--surface)); } .fig-body { fill: var(--surface); stroke: var(--ink); } .fig-text { fill: var(--ink); font-family: var(--f-body); font-size: 13px; } .fig-small { fill: var(--muted); font-family: var(--f-mono); font-size: 11px; } /* ---------- Talks and posters ---------- */ .kind { display: inline-block; font-family: var(--f-mono); font-style: normal; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.05rem 0.4rem; border-radius: 3px; vertical-align: 0.1em; margin-right: 0.3rem; } .kind-talk { background: var(--accent); color: var(--accent-ink); } .kind-poster { background: var(--accent-soft); color: var(--accent); } .award { font-size: var(--t-sm); color: var(--ink); display: flex; gap: 0.4rem; align-items: baseline; } .award::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #c9922e; transform: translateY(-0.05rem); } .home-talks { list-style: none; margin: 0; padding: 0; display: grid; } .home-talks li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding-block: 0.8rem; border-bottom: 1px solid var(--rule); } .home-talks li:first-child { border-top: 1px solid var(--rule); } .home-talks time { font-size: var(--t-xs); color: var(--muted); padding-top: 0.2rem; font-variant-numeric: tabular-nums; } .home-talks div { display: grid; gap: 0.15rem; } .ht-event { font-weight: 600; font-size: var(--t-sm); } .ht-title { font-family: var(--f-display); font-size: 1rem; line-height: 1.35; } .ht-place { font-size: var(--t-xs); color: var(--muted); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--rule); } .footer-inner { max-width: var(--wide); margin: 0 auto; padding-inline: var(--gutter); padding-block: 2rem 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; font-size: var(--t-sm); color: var(--muted); } .footer-links { display: flex; gap: 0.2rem; } .footer-links a { color: var(--muted); display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius); } .footer-links a:hover { color: var(--accent); background: var(--accent-soft); } .footer-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; } .footer-meta a { color: var(--muted); } /* ---------- Preview banner (design samples) ---------- */ .preview-bar { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; justify-content: center; background: var(--ink); color: var(--bg); padding: 0.5rem 0.6rem 0.5rem 1rem; border-radius: 999px; font-size: var(--t-xs); font-family: var(--f-mono); max-width: calc(100% - 32px); box-shadow: 0 6px 24px rgba(0,0,0,.18); } .preview-bar a, .preview-bar button { color: var(--bg); font: inherit; background: none; border: 1px solid color-mix(in srgb, var(--bg) 40%, transparent); border-radius: 999px; padding: 0.2rem 0.7rem; cursor: pointer; text-decoration: none; } /* ========================================================================== Layout variants ========================================================================== */ /* Centered: single narrow column, name and navigation centred */ :root[data-layout="centered"] { --wide: 820px; } :root[data-layout="centered"] .header-inner { flex-direction: column; gap: 0.6rem; padding-block: 1.25rem 0.75rem; } :root[data-layout="centered"] .brand { margin: 0; align-items: center; text-align: center; } :root[data-layout="centered"] .brand-name { font-size: 1.5rem; } :root[data-layout="centered"] .header-tools { position: absolute; right: var(--gutter); top: 1rem; } :root[data-layout="centered"] .site-header { position: relative; } :root[data-layout="centered"] .site-nav { justify-content: center; } :root[data-layout="centered"] .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } :root[data-layout="centered"] .hero .hero-media { order: -1; width: 150px; } :root[data-layout="centered"] .hero .profile-links { justify-content: center; } :root[data-layout="centered"] .hero .prose { margin-inline: auto; text-align: left; } @media (max-width: 1180px) { :root[data-layout="centered"] .header-inner { flex-direction: row; flex-wrap: wrap; } :root[data-layout="centered"] .brand { margin-right: auto; align-items: flex-start; text-align: left; } :root[data-layout="centered"] .header-tools { position: static; } } /* Sidebar: fixed profile column on the left */ @media (min-width: 1181px) { :root[data-layout="sidebar"] body { display: grid; grid-template-columns: 17rem minmax(0, 1fr); grid-template-rows: 1fr auto; } :root[data-layout="sidebar"] .site-header { grid-row: 1 / span 2; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-bottom: 0; border-right: 1px solid var(--rule); background: var(--surface); backdrop-filter: none; } :root[data-layout="sidebar"] .header-inner { flex-direction: column; align-items: stretch; gap: 1.75rem; padding: 2.5rem 1.75rem; height: 100%; } :root[data-layout="sidebar"] .header-profile { display: contents; } :root[data-layout="sidebar"] .header-profile img { order: -2; width: 7.5rem; aspect-ratio: 1; object-fit: cover; border-radius: 50%; } :root[data-layout="sidebar"] .brand { margin: 0; order: -1; } :root[data-layout="sidebar"] .profile-icons { margin-top: -1rem; } :root[data-layout="sidebar"] .brand-name { font-size: 1.35rem; } :root[data-layout="sidebar"] .site-nav { flex-direction: column; gap: 0; } :root[data-layout="sidebar"] .site-nav a { padding-block: 0.45rem; border-bottom: 0; border-left: 2px solid transparent; padding-left: 0.75rem; margin-left: -0.75rem; } :root[data-layout="sidebar"] .site-nav a[aria-current="page"] { border-left-color: var(--accent); } :root[data-layout="sidebar"] .header-tools { margin-top: auto; } :root[data-layout="sidebar"] main { margin: 0; max-width: 880px; padding-inline: 3.5rem; } :root[data-layout="sidebar"] .site-footer { grid-column: 2; } :root[data-layout="sidebar"] .footer-inner { margin: 0; max-width: 880px; padding-inline: 3.5rem; } :root[data-layout="sidebar"] .hero { grid-template-columns: 1fr; } :root[data-layout="sidebar"] .hero-media { display: none; } } .header-profile .profile-icons { display: flex; flex-wrap: wrap; gap: 0.1rem; margin-left: -0.4rem; } .header-profile .profile-icons a { color: var(--muted); display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius); } .header-profile .profile-icons a:hover { color: var(--accent); background: var(--accent-soft); } .print-only { display: none; } .cv-pubs { display: grid; gap: 0.5rem; } .cv-pubs-head { font-family: var(--f-body); font-size: var(--t-sm); font-weight: 600; margin-top: 0.6rem; } .cv-pub-list { margin: 0; padding-left: 1.6rem; display: grid; gap: 0.45rem; font-size: var(--t-sm); color: var(--muted); } .cv-pub-list li::marker { font-family: var(--f-mono); font-size: 0.75rem; color: var(--faint); } .cv-pub-list b { color: var(--ink); } /* ---------- Print (CV and any page) ---------- */ @media print { :root { --bg: #fff; --surface: #fff; --ink: #000; --muted: #333; --faint: #555; --rule: #ccc; --accent: #000; color-scheme: light; } @page { margin: 16mm 15mm; } html { font-size: 10.5px; } body { background: #fff; } .print-only { display: block; color: #222; font-size: 1rem; line-height: 1.5; } .page-head p:not(.print-only) { display: none; } .cv-pub-list { color: #222; gap: 0.25rem; } .cv-pub-list li { break-inside: avoid; } .section-head, h2, h3 { break-after: avoid; } .row .pub-links { display: none; } .site-header { position: static; border: 0; backdrop-filter: none; background: none; } .site-nav, .header-tools, .header-profile, .skip-link, .site-footer, .preview-bar, .no-print { display: none !important; } .header-inner, main { padding: 0; max-width: none; } .brand-name { font-size: 18pt; } main { padding-block: 0.5rem 0; } .page-head { padding-bottom: 0.6rem; margin-bottom: 1rem; } .page-head .label, .page-head h1 { display: none; } .section + .section, main > * + .section { margin-top: 1.1rem; } .section { gap: 0.4rem; } .section-head h2 { font-size: 12pt; } .section-head a { display: none; } .row { padding-block: 0.35rem; grid-template-columns: 8.5rem 1fr; break-inside: avoid; } .row-date { font-size: 8pt; } a { color: inherit; text-decoration: none; } .chip { border-color: #999; } } .map-credit { position: absolute; right: 0.5rem; bottom: 0.35rem; margin: 0; font-size: 0.65rem; color: var(--faint); } .map-credit a { color: inherit; text-decoration: none; } .rfig { display: block; width: 100%; max-width: 20rem; height: auto; margin-top: 1.1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); } /* ---------- Photography albums ---------- */ .section-desc { color: var(--muted); max-width: var(--measure); margin-bottom: 1.5rem; } .albums { gap: 1.75rem 1.25rem; } .album.is-empty { cursor: default; } .album-cover svg { display: block; width: 100%; height: 100%; } .album-place { font-size: var(--t-sm); color: var(--muted); } .album-sub { margin-top: 0.1rem; } .album-view { display: grid; gap: 1rem; } .album-back { justify-self: start; font-size: var(--t-sm); } .album-head { display: grid; gap: 0.35rem; margin-bottom: 0.5rem; } .album-head h2 { font-size: var(--t-xl); } .cv-sea { fill: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); } .cv-land { fill: var(--map-land); } .cv-district { fill: none; stroke: var(--map-line); stroke-width: 0.6; } .cv-visit { fill: var(--map-visit); stroke: var(--surface); stroke-width: 0.6; } .cv-visit-other { fill: var(--map-visit-soft); stroke: var(--surface); stroke-width: 0.6; } .cv-visit-soft { fill: var(--map-visit-soft); stroke: var(--map-border); stroke-width: 0.8; } .cv-outline { fill: none; stroke: var(--map-border); stroke-width: 1.1; } .cv-pin { fill: var(--accent); stroke: var(--surface); stroke-width: 2; } .cv-event { fill: var(--accent); } .cv-year { font-family: var(--f-display); font-size: 120px; font-weight: 600; fill: var(--accent-ink); opacity: 0.9; letter-spacing: -0.02em; } .cv-place { font-family: var(--f-mono); font-size: 17px; fill: var(--accent-ink); opacity: 0.75; letter-spacing: 0.04em; text-transform: uppercase; } /* ---------- Home: honours strip ---------- */ .honours { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-bottom: 3rem; } .honour { background: var(--surface); padding: 1rem 1.2rem; display: grid; gap: 0.2rem; align-content: start; } .honour strong { font-family: var(--f-display); font-weight: var(--display-weight); font-size: var(--t-md); line-height: 1.3; } .honour span:last-child { font-size: var(--t-sm); color: var(--muted); } .kit-list { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: var(--t-sm); display: grid; gap: 0.2rem; } .kit-grid { margin-top: 0.5rem; } .media-block + .media-block { margin-top: 2.25rem; } .media-head { font-size: var(--t-lg); margin-bottom: 1rem; display: flex; gap: 0.6rem; align-items: baseline; } .media-head .count { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--faint); font-weight: 400; } .lang-row { display: flex; gap: 0.35rem; flex-wrap: wrap; } .doc-list { margin: 1rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; font-size: var(--t-sm); } .vp-frame video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; } .ophotos { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); } .ophoto { padding: 0; border: 0; background: var(--rule); aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; border-radius: 3px; cursor: zoom-in; } .ophoto img { width: 100%; height: 100%; object-fit: cover; } dialog.photo-dialog { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; } dialog.photo-dialog::backdrop { background: rgba(8, 10, 14, 0.9); } dialog.photo-dialog img { max-height: 88vh; width: auto; } /* ---------- Home: recent list, at a glance ---------- */ .recent { list-style: none; margin: 0; padding: 0; display: grid; } .recent li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding-block: 0.8rem; border-bottom: 1px solid var(--rule); } .recent li:first-child { border-top: 1px solid var(--rule); } .recent time { font-size: var(--t-xs); color: var(--muted); padding-top: 0.2rem; font-variant-numeric: tabular-nums; } .rc-title { font-size: var(--t-sm); line-height: 1.45; } .rc-title a { color: var(--ink); text-decoration: none; } .rc-title a:hover { color: var(--accent); text-decoration: underline; } .rc-where { font-size: var(--t-xs); color: var(--muted); margin-top: 0.15rem; } .kind-video { background: var(--ink); color: var(--bg); } .kind-paper { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .kind-milestone { background: #c9922e; color: #fff; } .glance { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .glance-cell { background: var(--surface); padding: 0.9rem 1rem; display: grid; gap: 0.1rem; text-decoration: none; color: var(--ink); } .glance-cell:hover { background: var(--accent-soft); } .glance-cell b { font-family: var(--f-display); font-weight: var(--display-weight); font-size: var(--t-xl); line-height: 1.1; font-variant-numeric: tabular-nums; } .glance-cell span { font-size: var(--t-xs); color: var(--muted); } .glance-cell:last-child:nth-child(odd) { grid-column: 1 / -1; } .ch-mark { width: 3.5rem; height: 3.5rem; border-radius: 50%; } .panel-intro { color: var(--muted); max-width: var(--measure); margin-bottom: 1.5rem; } .lab-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } #lab-count { margin-bottom: 1rem; } .lang-row .chip.on { color: var(--accent); border-color: var(--accent); } .vcard .label { font-size: 0.68rem; } .res-groups { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; } .res-group h3 { font-size: var(--t-md); margin-bottom: 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); } .res-list { list-style: none; margin: 0; padding: 0; display: grid; } .res-list li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); } .res-list a { display: inline-flex; gap: 0.45rem; align-items: center; color: var(--ink); text-decoration: none; } .res-list a:hover { color: var(--accent); text-decoration: underline; } .res-list .mono { font-size: 0.72rem; white-space: nowrap; }