Something went wrong. Try again.
my website at https://anirudh.fi
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773@import "tailwindcss";
/* * Swiss / International Typographic Style. * * Every value below comes from a token in :root. If a component needs a * size, colour, spacing, line-height or tracking value that isn't a token, * the token set is wrong — fix it there, not locally. * * Faces ABC Areal (text), ABC Areal Mono (data). Weights 400 + 500. * Type scale ratio 1.25 from a 17px base: --step--1 … --step-9. * Spacing 4 8 16 24 32 48 64 96 128 (--s-1 … --s-9). * Colour ink on paper, --muted for secondary, cyan for meaning: * --accent for marks (underlines, selection, logo hover), * --accent-text where cyan sets small text (≥ 4.5:1). * Rules 1px; --ink for structure, --rule for separation. * Grid 12 columns (4 below 768px). Meta 1–3, main 4–12, text 4–10. * * Text roles (use these classes; don't restyle ad hoc): * .label sans 500, step--1, ink — names a thing * .meta mono 400, step--1, muted — data: dates, specs, statuses * .note sans 400, step--1, muted — small secondary sentences * .lede sans 400, step-1, muted — a page's one-line introduction */
@font-face { font-family: "ABC Areal"; src: url("https://cdn.anirudh.fi/fonts/areal/ABCAreal-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;}@font-face { font-family: "ABC Areal"; src: url("https://cdn.anirudh.fi/fonts/areal/ABCAreal-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap;}/* Medium covers 500–700 so nothing ever renders a faux or real bold. */@font-face { font-family: "ABC Areal"; src: url("https://cdn.anirudh.fi/fonts/areal/ABCAreal-Medium.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap;}@font-face { font-family: "ABC Areal"; src: url("https://cdn.anirudh.fi/fonts/areal/ABCAreal-MediumItalic.woff2") format("woff2"); font-weight: 500 700; font-style: italic; font-display: swap;}@font-face { font-family: "ABC Areal Mono"; src: url("https://cdn.anirudh.fi/fonts/areal/ABCArealMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;}@font-face { font-family: "ABC Areal Mono"; src: url("https://cdn.anirudh.fi/fonts/areal/ABCArealMono-Medium.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap;}
@theme { --font-sans: "ABC Areal", ui-sans-serif, system-ui, sans-serif; --font-mono: "ABC Areal Mono", ui-monospace, "SF Mono", monospace;}
:root { /* Colour */ --paper: #ffffff; --ink: #0f0f0f; --muted: #5f5f5f; --rule: #d6d6d6; --wash: #f2f2f2; --accent: #509c93; --accent-text: #367169;
/* Type scale: ratio 1.25, base 17px. */ --step--1: 0.85rem; --step-0: 1.0625rem; --step-1: 1.328rem; --step-2: 1.66rem; --step-3: 2.075rem; --step-4: 2.594rem; --step-5: 3.242rem; --step-6: 4.053rem; --step-7: 5.066rem; --step-8: 6.333rem; --step-9: 7.916rem;
/* Inline elements sized relative to their parent: one step down. */ --step-down: 0.8em;
/* Weights */ --regular: 400; --medium: 500;
/* Line height: display, heading, body. */ --lh-display: 1; --lh-heading: 1.25; --lh-body: 1.55;
/* Tracking tightens as size grows. */ --track-display: -0.04em; --track-title: -0.025em; --track-heading: -0.01em; --track-label: 0.01em;
/* Spacing scale; nothing else is used. */ --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px;
/* Rules */ --hairline: 1px;
/* Grid */ --gutter: var(--s-3); --margin: var(--s-4); --measure: 1040px;
--ease: 120ms;
color-scheme: light dark;}
@media (prefers-color-scheme: dark) { :root { --paper: #0f0f0f; --ink: #f2f1ed; --muted: #9d9c97; --rule: #2f2f2d; --wash: #1c1c1b; --accent: #509c93; --accent-text: #509c93; }}
@media (min-width: 768px) { :root { --gutter: var(--s-4); --margin: var(--s-6); }}
@layer base { html { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 100%; -webkit-text-size-adjust: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-feature-settings: "kern"; }
body { font-size: var(--step-0); font-weight: var(--regular); line-height: var(--lh-body); }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; }
:focus-visible { outline: calc(2 * var(--hairline)) solid var(--accent-text); outline-offset: var(--s-1); }
a { color: inherit; text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 0.2em; text-decoration-color: var(--accent); transition: color var(--ease), text-decoration-color var(--ease); }
a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
strong, b, th { font-weight: var(--medium); }
img { display: block; max-width: 100%; height: auto; }
code, kbd, pre, samp { font-family: var(--font-mono); }}
@layer components { /* ---- Text roles -------------------------------------------------- */
.label { font-family: var(--font-sans); font-size: var(--step--1); font-weight: var(--medium); letter-spacing: var(--track-label); color: var(--ink); }
.meta { font-family: var(--font-mono); font-size: var(--step--1); font-weight: var(--regular); font-variant-numeric: tabular-nums; color: var(--muted); }
.note { font-size: var(--step--1); color: var(--muted); }
.lede { font-size: var(--step-1); line-height: var(--lh-heading); color: var(--muted); text-wrap: pretty; }
.lede > * + * { margin-top: var(--s-3); }
.page-title { font-size: var(--step-4); font-weight: var(--medium); line-height: var(--lh-display); letter-spacing: var(--track-title); text-wrap: balance; }
@media (min-width: 1024px) { .page-title { font-size: var(--step-5); } }
.draft-flag { font-family: var(--font-mono); font-size: var(--step--1); font-weight: var(--regular); letter-spacing: 0; color: var(--accent-text); vertical-align: middle; }
/* ---- Grid -------------------------------------------------------- */
.page { max-width: calc(var(--measure) + 2 * var(--margin)); margin: 0 auto; padding: 0 var(--margin); container-type: inline-size; }
.grid-12 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); }
/* Every direct child spans the full width on small screens. */ .grid-12 > * { grid-column: 1 / -1; }
@media (min-width: 768px) { .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .col-meta { grid-column: 1 / 4; } .col-main, .col-text { grid-column: 4 / -1; } }
@media (min-width: 1024px) { /* Running text stops at column 10 to keep a readable measure. */ .col-text { grid-column: 4 / 11; } }
/* ---- Header ------------------------------------------------------ */
.site-header { padding: var(--s-5) 0 var(--s-4); align-items: center; row-gap: var(--s-4); border-bottom: var(--hairline) solid var(--ink); }
.site-header .logo { display: block; width: var(--s-5); height: var(--s-5); text-decoration: none; }
.site-header .logo svg { width: 100%; height: 100%; fill: var(--ink); transition: fill var(--ease); }
.site-header .logo:hover svg { fill: var(--accent); }
.site-header nav ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; margin: 0; padding: 0; }
.site-header nav a { font-weight: var(--medium); text-decoration: none; }
/* ---- Footer ------------------------------------------------------ */
.site-footer { margin-top: var(--s-9); padding: var(--s-4) 0 var(--s-8); row-gap: var(--s-2); border-top: var(--hairline) solid var(--ink); }
.site-footer a { color: var(--ink); }
/* ---- Page structure ---------------------------------------------- */
/* * Vertical rhythm: header → page-head (s-8 above, s-7 below) → sections, * each further section s-7 apart → footer s-9 below. */
.page-head { padding: var(--s-8) 0 var(--s-7); row-gap: var(--s-4); }
@media (min-width: 768px) { .page-head { align-items: baseline; } }
@media (max-width: 767px) { /* On one column the title leads; specs follow. */ .page-head .photo-spec { order: 1; } }
.section { row-gap: var(--s-4); }
.section + .section { padding-top: var(--s-7); }
.section-title { padding-top: var(--s-3); align-self: start; }
@media (min-width: 768px) { .section-title { border-top: var(--hairline) solid var(--ink); } }
/* Oversized numerals for year groupings — a deliberate break. */ .section-title.numeral { font-size: var(--step-4); line-height: var(--lh-display); letter-spacing: var(--track-title); }
.section-foot a { font-weight: var(--medium); text-decoration: none; }
/* ---- Home hero: the name, set large, flush left ------------------- */
.hero { padding: var(--s-8) 0 var(--s-7); }
.hero > h1 { font-size: var(--step-5); font-weight: var(--medium); line-height: var(--lh-display); letter-spacing: var(--track-display); margin-bottom: var(--s-7); text-wrap: balance; }
@media (min-width: 768px) { /* * One line, edge to edge: the name's width is set by the grid, not * the type scale. "Anirudh Oppiliappan" in Areal Medium at this * tracking renders 8.72× its font size wide, so 11.45% of the page * fills it. Re-measure if the name or tracking changes. */ .hero > h1 { font-size: 11.45cqi; white-space: nowrap; } }
.hero > p { font-size: var(--step-1); line-height: var(--lh-heading); text-wrap: pretty; }
.hero > p + p { margin-top: var(--s-3); }
@media (min-width: 768px) { .hero > p { grid-column: 4 / -1; } }
@media (min-width: 1024px) { .hero > p { grid-column: 4 / 11; } }
/* ---- Entry lists (writing, reading, photos) ---------------------- */
.entries { list-style: none; margin: 0; padding: 0; border-bottom: var(--hairline) solid var(--rule); }
.entry { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-1); padding: var(--s-3) 0; border-top: var(--hairline) solid var(--rule); }
.entry:first-child { border-top-color: var(--ink); }
.entry-title { font-weight: var(--medium); text-decoration: none; }
.entry-sub { color: var(--muted); }
@media (min-width: 768px) { .entries { display: grid; grid-template-columns: subgrid; }
.entry { grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; }
.entry > .entry-body { grid-column: 1 / 7; }
.entry > .entry-aside { grid-column: 7 / -1; text-align: right; } }
/* ---- Photos ------------------------------------------------------ */
.photo-grid { columns: 1; column-gap: var(--gutter); }
.photo-grid a { display: block; margin-bottom: var(--gutter); break-inside: avoid; }
@media (min-width: 768px) { .photo-grid { columns: 2; } }
@media (min-width: 1280px) { .photo-grid { columns: 3; } }
.photo-spec { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-3); align-content: start; margin: 0; }
.photo-spec dd { margin: 0; }
.portrait { width: 50%; margin-bottom: var(--s-5); }
@media (min-width: 768px) { .portrait { width: 100%; padding-right: var(--s-4); margin-bottom: 0; } }
/* ---- Running text ------------------------------------------------ */
.prose { text-wrap: pretty; }
.prose > * + * { margin-top: var(--s-3); }
.prose h1, .prose h2 { font-size: var(--step-2); font-weight: var(--medium); line-height: var(--lh-heading); letter-spacing: var(--track-heading); margin-top: var(--s-7); }
.prose h3 { font-size: var(--step-1); font-weight: var(--medium); line-height: var(--lh-heading); margin-top: var(--s-6); }
.prose h4, .prose h5, .prose h6 { font-size: var(--step-0); font-weight: var(--medium); margin-top: var(--s-5); }
.prose h1 + *, .prose h2 + *, .prose h3 + *, .prose h4 + *, .prose h5 + *, .prose h6 + * { margin-top: var(--s-2); }
.prose ul, .prose ol { padding-left: var(--s-4); }
.prose ul { list-style-type: "–\2002"; }
.prose ol { list-style-type: decimal; }
.prose li + li, .prose li > ul, .prose li > ol, .prose li > p + p { margin-top: var(--s-2); }
.prose li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.prose blockquote { border-left: var(--hairline) solid var(--ink); padding-left: var(--s-4); }
.prose blockquote > * + * { margin-top: var(--s-3); }
.prose code { font-size: var(--step-down); background: var(--wash); padding: 0.1em 0.3em; }
.prose pre { font-size: var(--step--1); line-height: var(--lh-body); background: var(--wash); padding: var(--s-3) var(--s-4); overflow-x: auto; }
.prose pre code { font-size: inherit; background: none; padding: 0; }
.prose hr { border: 0; border-top: var(--hairline) solid var(--rule); margin: var(--s-6) 0; }
.prose img, .prose figure { margin-top: var(--s-5); margin-bottom: var(--s-5); }
.prose img { width: 100%; }
.prose figure img { margin: 0; }
.prose figcaption { margin-top: var(--s-2); font-size: var(--step--1); color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.prose th { text-align: left; border-bottom: var(--hairline) solid var(--ink); }
.prose th, .prose td { padding: var(--s-2) var(--s-3) var(--s-2) 0; vertical-align: top; }
.prose td { border-bottom: var(--hairline) solid var(--rule); }
.prose del { text-decoration: line-through; }
/* Footnotes: numbered in the accent colour, set in mono. */ .prose sup { font-size: var(--step-down); line-height: 0; }
.prose .footnote-ref a { font-family: var(--font-mono); color: var(--accent-text); text-decoration: none; padding: 0 0.1em; }
.prose .footnotes { margin-top: var(--s-7); font-size: var(--step--1); color: var(--muted); }
.prose .footnotes hr { border-top-color: var(--ink); margin: 0 0 var(--s-4); }
.prose .footnotes li::marker { font-family: var(--font-mono); color: var(--accent-text); }
.prose .footnotes li + li { margin-top: var(--s-3); }
.prose .footnotes p { display: inline; }
.prose .footnote-return { text-decoration: none; color: var(--accent-text); margin-left: var(--s-1); }}