/* --------------------------------------------------------------------------- SITE-PARITY v3 — typography and spacing read from the reference site's own compiled CSS (www.neelsomani.com, fetched 2026-08-27, HTTP 200, 80,186 bytes), not measured from screenshots. Reference is Next.js + Tailwind v4. Its spacing scale is calc(--spacing * N) with --spacing = .25rem, so every length below is a clean multiple of 4px and the multiple is named in a comment where it is not obvious. Deliberate identity divergence from the reference, unchanged from v2: serif display face, warm-neutral palette, KL initials instead of a wordmark. --------------------------------------------------------------------------- */ /* --- self-hosted faces. The reference self-hosts Inter 100-900 and Newsreader 200-800 (roman and italic) as per-subset woff2 and adds two metric-override fallback faces. Its own /_next/static/media/*.woff2 URLs answered 404 when fetched on 2026-08-27, so the identical upstream binaries came from Google Fonts (Inter v20, Newsreader v26) -- the same source its build step uses. Subset ranges below are byte-for-byte the reference's. Both families are SIL OFL 1.1; see fonts/OFL-Inter.txt and fonts/OFL-Newsreader.txt. --- */ @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F} @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-greek-ext.woff2) format('woff2');unicode-range:U+1F00-1FFF} @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF} @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB} @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader-italic-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB} @font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB} @font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* Metric-override fallbacks, copied verbatim from the reference's compiled CSS. These make Arial and Times New Roman occupy the web font's exact space before it loads, so nothing reflows on swap. */ @font-face{font-family:'Inter Fallback';src:local(Arial);ascent-override:90.44%;descent-override:22.52%;line-gap-override:0.0%;size-adjust:107.12%} @font-face{font-family:'Newsreader Fallback';src:local(Times New Roman);ascent-override:69.68%;descent-override:25.12%;line-gap-override:0.0%;size-adjust:105.48%} :root{ --bg:#fcfcfc; /* ref --background */ --fg:#222; /* ref --foreground */ --muted:#636363; /* ref --muted-foreground */ --border:#dedede; /* ref --border */ --mark:#fff6d9; /* gap highlight, light */ --radius:8px; /* ref --radius .5rem */ --prose:color-mix(in oklab,var(--fg) 90%,transparent); /* ref text-foreground/90 */ --sans:Inter,'Inter Fallback',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif; --serif:Newsreader,'Newsreader Fallback',Georgia,serif; color-scheme:light dark; } /* --- dark palette. The reference ships a full second theme and this is it, read from its compiled CSS rather than darkened by eye: --background #060606, --foreground #e4e4e4, --border #292929. The muted foreground is the reference's own dark value. Only the highlight is this site's, since the reference has no counterpart for it -- a paper-yellow mark on a black page is a lamp, so it becomes a low-luminance amber with the text held at the foreground colour. --- */ @media (prefers-color-scheme: dark){ :root{ --bg:#060606; /* ref --background, dark */ --fg:#e4e4e4; /* ref --foreground, dark */ --muted:#8a8a8a; /* ref --muted-foreground, dark */ --border:#292929; /* ref --border, dark */ --mark:#3a2f10; } } *{margin:0;padding:0;box-sizing:border-box} html,body{background:var(--bg)} body{color:var(--fg);font-family:var(--sans); font-size:16px;line-height:24px; /* ref text-base 1rem/1.5rem */ -webkit-font-smoothing:antialiased; font-feature-settings:"kern" 1,"liga" 1;text-rendering:optimizeLegibility} .layout{display:flex;min-height:100vh} /* --- sidebar: ref lg:w-48 lg:px-8 lg:py-12, sticky top-12 --- */ aside{width:192px;flex:none;padding:48px 32px;border-right:1px solid var(--border)} .side{position:sticky;top:48px} .initials{display:block;font-size:20px;line-height:28px;font-weight:600; /* ref text-xl */ letter-spacing:-.025em;color:var(--fg);margin-bottom:32px; /* ref mb-8 */ text-decoration:none} /* it is a link on subpages, a plain div on the index */ nav{display:flex;flex-direction:column;gap:4px} /* ref gap-1 */ nav a{font-size:14px;line-height:20px;font-weight:400;color:var(--muted); /* ref text-sm */ text-decoration:none;transition:color .2s} /* ref duration-200 */ nav a:hover{color:var(--fg)} nav a.on{color:var(--fg);font-weight:500} /* --- main column: ref px-6 py-8 lg:px-16 lg:py-12, max-w-3xl 48rem --- */ main{flex:1;padding:48px 64px;max-width:768px} /* ref
-- 32px between the header block, the prose, and the link row. Expressed as a sibling rule so no wrapper carries a margin. */ .blk+.blk{margin-top:32px} /* --- name header block, rebuilt to the reference's own structure:

Name

Role

h1 is text-3xl on mobile and text-4xl from lg up, weight 500, tracking-tight. Letter-spacing is left in em so it stays -0.025em at both sizes -- the previous build hardcoded -.9px, which was correct at 36px and 20% too tight at the 30px mobile size. --- */ h1{font-family:var(--serif);font-size:36px;line-height:40px;font-weight:500; letter-spacing:-.025em;color:var(--fg);text-wrap:balance} .role{font-size:16px;line-height:24px;color:var(--muted);margin-top:8px} /* ref mt-2 */ /* --- prose: ref text-foreground/90 leading-relaxed, space-y-6. Applied to every paragraph in the main column, not only to the About block: the CV's paragraphs were previously the browser's defaults, which is why they ran together and their one link rendered in default blue. --- */ main p{color:var(--prose);line-height:1.625} /* ref --leading-relaxed */ main p+p,main p+.row{margin-top:24px} /* ref space-y-6 */ main a{color:inherit;text-decoration:underline;text-underline-offset:4px; text-decoration-color:var(--border);transition:color .2s,text-decoration-color .2s} /* ref prose links hover LIGHTER, to muted-foreground, and darken the underline. The previous build had this inverted. */ main a:hover{color:var(--muted);text-decoration-color:var(--fg)} /* --- link row: ref pt-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm. Separators are spaced by the flex gap, never by whitespace in the markup -- the previous build mixed both, so some slashes sat 8px from their links and others 12px, depending on where a newline happened to fall. --- */ .links{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;row-gap:8px; padding-top:16px;font-size:14px;line-height:20px} .links a{color:var(--muted);text-decoration:underline;text-underline-offset:4px; text-decoration-color:var(--border);transition:color .2s,text-decoration-color .2s} .links a:hover{color:var(--fg);text-decoration-color:var(--fg)} .links .s{color:var(--border)} /* ref // */ /* --- inner headings and list rows. The reference has no counterpart page for the CV, so these follow its scale rather than a specific element: text-xl for the heading, text-sm/leading-relaxed for the annotation line. --- */ h2{font-family:var(--serif);font-size:20px;line-height:28px;font-weight:500; letter-spacing:-.025em;color:var(--fg);margin:48px 0 16px} .row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:4px} .row .yr{font-size:14px;line-height:20px;color:var(--muted);flex:none;font-variant-numeric:tabular-nums} .row .t{font-size:16px;line-height:24px;color:var(--fg)} .row .t.soon{color:var(--muted)} .sub{font-size:14px;line-height:22.75px;color:var(--muted);margin-bottom:24px} /* 14 x 1.625 */ .gap{background:var(--mark);color:var(--fg);padding:1px 4px;border-radius:var(--radius)} /* --- page footer, to the reference's own shape: a top border, py-6, and the sidebar's width as a left offset from lg up so the rule starts where the content does. --- */ footer{border-top:1px solid var(--border);padding:24px 64px;margin-left:192px; font-size:14px;line-height:20px;color:var(--muted)} section{display:none}section.live{display:block} /* --- ref lg breakpoint = 64rem. Below it the reference swaps the sidebar for a one-row header: emblem left, nav right, on the same baseline. --- */ @media(max-width:1023px){ .layout{flex-direction:column} aside{width:auto;padding:16px 24px;border-right:none;border-bottom:1px solid var(--border)} .side{position:static;display:flex;align-items:center;justify-content:space-between} .initials{font-size:18px;line-height:28px;margin-bottom:0} /* ref text-lg */ nav{flex-direction:row;gap:24px} /* ref gap-6 */ main{padding:32px 24px;max-width:none} h1{font-size:30px;line-height:36px} /* ref text-3xl */ footer{margin-left:0;padding:24px} /* ref px-6 py-6 */ }