/* Tej Shah: one stylesheet for every page.
   Warm paper, ink, one vermilion signal. Inter for everything you read,
   Inter for interface and figures, JetBrains Mono for anything that is metadata.

   One frame (960px) holds the header, the content and the footer on every page, so the name and the nav
   never move between pages. Reading text keeps a 680px measure on the frame's left edge; lists, cards and
   post figures may use the full frame. Every text colour clears WCAG AA (4.5:1) on paper, raised and paper-2. */

@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/Inter-Regular.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/Inter-Italic.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/Inter-Medium.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/Inter-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/Inter-Bold.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:100 800;font-style:normal;font-display:swap;src:url(../fonts/JetBrainsMono-VF.woff2) format('woff2')}

:root{
  --paper:#f5f3ec; --paper-2:#ece8de; --paper-3:#e4dfd2; --raised:#fbfaf6;
  /* contrast on paper / raised / paper-2: ink 16.6 / 17.6 / 15.0, ink-2 7.8 / 8.3 / 7.1, ink-3 5.2 / 5.5 / 4.7, accent-ink 5.5 / 5.8 / 5.0.
     --accent (3.9:1) is for marks, rules and focus rings only, never for text. */
  --ink:#16140f; --ink-2:#4f4b42; --ink-3:#6b6559; --rule:#dcd6c8; --rule-2:#c9c2b2;
  --accent:#d9461b; --accent-ink:#b23812; --accent-wash:#f6e2d6;
  --display:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --col:680px; --frame:960px; --wide:var(--frame); --gutter:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:16.5px/1.65 var(--body);font-kerning:normal;
  font-feature-settings:'kern' 1,'liga' 1,'cv11' 1,'ss03' 1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-wash);color:var(--ink)}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule-2);text-decoration-thickness:1px;text-underline-offset:.18em;
  transition:text-decoration-color .15s ease,color .15s ease,border-color .15s ease}
a:hover{text-decoration-color:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;font:13px var(--mono);z-index:99;text-decoration:none}
.skip:focus{left:8px}

/* ---- frame ---- */
.wrap,.wrap.wide{max-width:calc(var(--frame) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.site-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:36px 0 0}
.brand{font:600 16px/1 var(--display);letter-spacing:-.01em;text-decoration:none;display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap}
.brand::before{content:"";width:8px;height:8px;background:var(--accent);display:inline-block;transform:translateY(-1px)}
.brand:hover{color:var(--ink)}
.site-nav{display:flex;gap:24px;font:400 13px/1 var(--mono);letter-spacing:.01em}
.site-nav a{text-decoration:none;color:var(--ink-2);padding:5px 0;border-bottom:1px solid transparent}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--rule-2)}
.site-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.site-foot{width:calc(100% - 2 * var(--gutter));max-width:var(--frame);margin:144px auto 0;padding:22px 0 56px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 24px;font:400 12px/1.6 var(--mono);color:var(--ink-3)}
.site-foot a{color:var(--ink-2);text-decoration-color:var(--rule-2)}
.site-foot a:hover{color:var(--ink);text-decoration-color:var(--accent)}
.site-foot .links{display:flex;flex-wrap:wrap;gap:6px 20px}

/* ---- type primitives ---- */
.kicker,.meta,.label{font:400 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.kicker{color:var(--accent-ink)}
.label{display:flex;align-items:baseline;gap:14px;margin:0 0 24px}
.label .n{color:var(--accent-ink)}
.label::after{content:"";flex:1;height:1px;background:var(--rule);transform:translateY(-3px)}
.display{font:600 clamp(44px,7vw,72px)/1.02 var(--display);letter-spacing:-.04em;margin:0;text-wrap:balance}
.display em{font-style:italic;color:var(--accent-ink)}
.page-title{font:600 clamp(32px,4.6vw,44px)/1.1 var(--display);letter-spacing:-.03em;margin:0 0 14px;text-wrap:balance}
.dek{font:400 18px/1.5 var(--body);color:var(--ink-2);margin:0;text-wrap:pretty}
.fine{font:400 12.5px/1.6 var(--mono);color:var(--ink-3)}
.more{display:inline-block;margin-top:20px;font:400 12.5px/1 var(--mono);color:var(--ink-2);text-decoration:none}
.more:hover{color:var(--ink)}
.more span,.card .go span{display:inline-block;transition:transform .2s ease}
.more:hover span,.card:hover .go span{transform:translateX(3px)}

/* ---- page heads (index pages, about, posts) ---- */
.page-head{padding:88px 0 0}
.page-head>*{max-width:var(--col)}
.page-head .meta{margin-top:20px;display:flex;gap:6px 16px;flex-wrap:wrap}
article .page-title{font-size:clamp(30px,4.4vw,42px)}
section.block{margin:112px 0 0}
section.block.first{margin-top:64px}

/* ---- home ---- */
.hero .role{font:400 19px/1.5 var(--body);color:var(--ink);margin:22px 0 0;max-width:var(--col)}
.hero .interests{font:400 19px/1.5 var(--body);color:var(--ink-2);margin:2px 0 0;max-width:var(--col)}
.hero .links{display:flex;flex-wrap:wrap;gap:6px 22px;font:400 13px/1.6 var(--mono);margin:26px 0 0}
.hero .links a{color:var(--ink-2)}
.hero .links a:hover{color:var(--ink)}
.hero{padding:96px 0 0}
.hero .display{max-width:19ch}
.hero .intro{margin:32px 0 0;max-width:var(--col)}
.hero .intro p{margin:0 0 .9em}
.hero .now{font:400 12.5px/1.6 var(--mono);color:var(--ink-3);margin:20px 0 0}
.hero .now a{color:var(--ink-2)}
.sig{margin:64px 0 0}
.sig svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.sig svg:focus-visible{outline-offset:8px}
.sig figcaption{font:400 12.5px/1.6 var(--mono);color:var(--ink-3);margin-top:12px;max-width:72ch;text-align:justify}
.sig figcaption b{font-weight:500;color:var(--ink-2)}

/* explainer cards: big, quiet, typographic; a thumbnail plate on top when the explainer has one */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--raised);border:1px solid var(--rule);
  transition:border-color .2s ease,box-shadow .2s ease}
.card:hover{color:var(--ink);border-color:var(--ink-2);box-shadow:0 22px 44px -32px rgba(22,20,15,.5)}
.card .thumb,.cards:has(.thumb) .card:not(:has(.thumb))::before{display:block;aspect-ratio:16/10;background:var(--paper);border-bottom:1px solid var(--rule);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* a card without a thumbnail, next to one with: an empty plate with the mark, so the pair stays level */
.cards:has(.thumb) .card:not(:has(.thumb))::before{content:"";
  background:linear-gradient(var(--accent),var(--accent)) center/12px 12px no-repeat,
    repeating-linear-gradient(0deg,transparent 0 23px,rgba(22,20,15,.055) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,rgba(22,20,15,.055) 23px 24px),var(--paper)}
.card .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .meta{display:flex;gap:4px 14px;flex-wrap:wrap}
.card h3{font:600 21px/1.25 var(--display);margin:2px 0 0;letter-spacing:-.02em;text-wrap:balance}
.card p{font:400 14.5px/1.55 var(--body);color:var(--ink-2);margin:0;flex:1;text-wrap:pretty}
.card .go{font:400 12px/1 var(--mono);color:var(--accent-ink);letter-spacing:.04em;margin-top:6px}

/* lists: writing and work. Title and date share a baseline; the date column lines up with the nav. */
.list{list-style:none;margin:0;padding:0}
.list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 32px;padding:20px 0 22px;border-top:1px solid var(--rule)}
.list li:last-child{border-bottom:1px solid var(--rule)}
.list .t{font:500 16.5px/1.4 var(--body);letter-spacing:-.01em;margin:0;text-wrap:pretty}
.list .t a{text-decoration-color:transparent}
.list .t a:hover{text-decoration-color:var(--accent)}
.list .d{font:400 12px/1.4 var(--mono);color:var(--ink-3);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.list .s{grid-column:1;font:400 14.5px/1.5 var(--body);color:var(--ink-2);margin:0;max-width:64ch;text-wrap:pretty}
.list .tag{grid-column:1;font:400 11.5px/1.4 var(--mono);color:var(--ink-3);letter-spacing:.03em;margin-top:2px}

/* work page */
.group{margin:64px 0 0}
.group-head{display:grid;gap:6px;margin-bottom:20px}
.group-head h2{font:600 13px/1.4 var(--mono);margin:0;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.group-head p{margin:0;font:400 12.5px/1.5 var(--mono);color:var(--ink-3)}
.work .t{font-size:16.5px}
.edu{margin-top:80px}

/* experience, publications, education */
.xp{list-style:none;margin:0;padding:0}
.xp>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 32px;padding:18px 0 20px;border-top:1px solid var(--rule)}
.xp>li:last-child{border-bottom:1px solid var(--rule)}
.xp .org{font:600 16.5px/1.4 var(--body);letter-spacing:-.01em;margin:0}
.xp .org a{text-decoration-color:var(--rule-2)}.xp .org a:hover{text-decoration-color:var(--accent)}
.xp .role{grid-column:1;font:400 15px/1.5 var(--body);color:var(--ink-2);margin:0}
.xp .d{grid-row:1 / span 2;grid-column:2;font:400 12px/1.9 var(--mono);color:var(--ink-3);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.xp ul{grid-column:1;margin:8px 0 0;padding-left:1.1em;font:400 14.5px/1.55 var(--body);color:var(--ink-2)}
.xp ul li{margin:0 0 3px;max-width:68ch}.xp ul li::marker{color:var(--ink-3)}
.subscribe{margin:28px 0 0;font:400 13px/1.6 var(--mono);color:var(--ink-3)}
.subscribe a{color:var(--accent-ink)}

/* 404 */
.lost .page-title{margin-top:18px}
.lost .list{margin-top:56px}

/* ---- prose (about, posts) ---- */
.prose{margin-top:48px}
.prose>*{max-width:var(--col)}
.prose p,.prose li{text-wrap:pretty}
.prose p{margin:0 0 1.05em}
.prose h2{font:600 25px/1.25 var(--display);letter-spacing:-.025em;margin:2.1em 0 .5em;scroll-margin-top:24px;text-wrap:balance}
.prose h3{font:600 18px/1.35 var(--ui);margin:1.9em 0 .5em}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.1em}
.prose li{margin:0 0 .4em}
.prose li::marker{color:var(--ink-3)}
.prose blockquote{margin:1.4em 0;padding:2px 0 2px 20px;border-left:2px solid var(--accent);color:var(--ink-2)}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}
.prose strong{font-weight:700}
.prose code{font:400 .84em/1.4 var(--mono);background:var(--paper-2);padding:.06em .2em;border-radius:2px;font-variant-ligatures:none}
.prose pre{width:fit-content;min-width:min(100%,var(--col));max-width:100%;background:var(--paper-2);border:1px solid var(--rule);padding:16px 18px;overflow-x:auto;
  font:400 13px/1.6 var(--mono);margin:1.4em 0;border-radius:2px;font-variant-ligatures:none}
.prose pre code{background:none;padding:0;font-size:inherit}
.prose table{border-collapse:collapse;width:100%;font:14px/1.45 var(--ui);font-variant-numeric:tabular-nums;margin:1.4em 0}
.prose thead th{text-align:left;font-weight:600;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--ink);padding:7px 10px;vertical-align:bottom}
.prose tbody td{padding:6px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
.prose tbody tr:last-child td{border-bottom:1.5px solid var(--ink)}
.prose .tablewrap{max-width:calc(var(--col) + 120px);overflow-x:auto}
/* post figures are 1920px charts with small labels: give them the whole frame */
.prose figure{margin:2.2em 0 2.4em;max-width:var(--frame)}
.prose figure img{display:block;width:100%;mix-blend-mode:multiply}
.prose figcaption{font:400 13.5px/1.55 var(--ui);color:var(--ink-2);margin-top:12px;max-width:var(--col)}
.prose figcaption b{color:var(--ink);font-weight:600;margin-right:.25em}
.prose .footnote{font:400 14px/1.55 var(--ui);color:var(--ink-2);margin-top:3em;border-top:1px solid var(--rule);padding-top:1em}
.prose .footnote hr{display:none}
.prose sup{line-height:0}
.prose .sources{font:400 14px/1.55 var(--ui);color:var(--ink-2)}
.prose .sources li{margin-bottom:6px;overflow-wrap:anywhere}
.prose .disclosure{font:italic 400 14.5px/1.6 var(--body);color:var(--ink-2)}
.post-foot{max-width:var(--col);margin-top:80px;padding-top:22px;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;
  font:400 12.5px/1.6 var(--mono);color:var(--ink-3)}
.post-foot a{color:var(--ink-2);text-decoration:none;text-wrap:balance}
.post-foot a:hover{color:var(--ink)}
.post-foot a:nth-child(2){grid-column:2;text-align:right}

@media(max-width:760px){
  :root{--gutter:24px}
  body{font-size:16px}
  .site-head{padding-top:24px;flex-direction:column;gap:14px;align-items:flex-start}
  .site-nav{gap:20px}
  .hero{padding-top:56px}
  .sig{margin-top:48px}
  .cards{grid-template-columns:1fr}
  .card h3{font-size:20px}
  .list li{grid-template-columns:1fr;gap:4px;padding:18px 0 20px}
  .list .d{text-align:left;order:-1}
  .xp>li{grid-template-columns:1fr}
  .xp .d{grid-row:auto;grid-column:1;text-align:left;order:-1}
  .hero .role,.hero .interests{font-size:17px}
  section.block{margin-top:88px}
  section.block.first{margin-top:48px}
  .group{margin-top:52px}
  .page-head{padding-top:56px}
  .dek{font-size:17px}
  .prose h2{font-size:22px}
  .site-foot{margin-top:112px;flex-direction:column;gap:8px}
  .post-foot{grid-template-columns:1fr;gap:14px}
  .post-foot a:nth-child(2){grid-column:1;text-align:left}
}
@media print{
  @page{margin:18mm 16mm}
  html,body{background:#fff}
  body{font-size:10.5pt;line-height:1.5;color:#000}
  .site-nav,.site-foot,.skip,.sig,.more,.post-foot{display:none!important}
  .wrap,.wrap.wide{max-width:none;padding:0}
  .site-head{padding:0 0 8mm}
  .hero,.page-head{padding-top:0}
  .display{font-size:30pt}.page-title{font-size:22pt}.dek{font-size:12pt}
  section.block{margin-top:12mm}
  .card{border-color:#999;box-shadow:none;break-inside:avoid}
  .list li,.prose figure,.prose pre,.prose table{break-inside:avoid}
  .prose h2,.prose h3{break-after:avoid}
  .prose figure img{mix-blend-mode:normal}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font:8pt var(--mono);color:#444;overflow-wrap:anywhere}
  a{text-decoration-color:#999}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- writing placeholder, email signup, work paragraphs, consent ---- */
.soon{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:26px 0 28px}
.soon-t{font:600 20px/1.3 var(--display);letter-spacing:-.02em;margin:0}
.subscribe-form{margin:22px 0 0;max-width:var(--col)}
.soon .subscribe-form{margin-top:18px}
.sf-h{display:block;font:400 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.sf-row{display:flex;gap:10px;max-width:520px}
.sf-row input[type=email]{flex:1;min-width:0;font:400 15.5px/1.2 var(--body);color:var(--ink);background:var(--raised);border:1px solid var(--rule-2);
  border-radius:0;padding:11px 12px;transition:border-color .15s ease;border-color:#8a8374}
.sf-row input[type=email]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--ink)}
.sf-row button{font:500 13px/1 var(--mono);letter-spacing:.02em;color:var(--paper);background:var(--ink);border:1px solid var(--ink);border-radius:0;
  padding:0 18px;cursor:pointer;transition:background .15s ease}
.sf-row button:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.sf-row button:disabled{opacity:.6;cursor:progress}
.sf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.sf-note{font:400 12.5px/1.5 var(--mono);color:var(--ink-3);margin:10px 0 0}
.subscribe-form[data-state=done] .sf-note{color:var(--ink)}
.subscribe-form[data-state=error] .sf-note{color:var(--accent-ink)}
.xp-body{grid-column:1;margin-top:10px;max-width:72ch}
.xp-body p{font:400 14.5px/1.6 var(--body);color:var(--ink-2);margin:0 0 .7em}
.xp-body p:last-child{margin-bottom:0}
.xp-body p.ln{font-size:13.5px;color:var(--ink-3);margin:0 0 .2em}
.xp-body p+p.ln{margin-top:.6em}.xp-body p.ln+p.ln{margin-top:0}
.xp-body a,.xp .org a{text-decoration-color:var(--ink-3)}
.xp-body a:hover,.xp .org a:hover{text-decoration-color:var(--accent)}
.xp .d .w{color:var(--ink-3);font-size:11.5px}
.draft-pill{display:inline-block;margin-left:10px;padding:1px 7px;border:1px solid var(--accent);color:var(--accent-ink);font-size:11px}
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:560px;margin:0 auto;background:var(--raised);border:1px solid var(--rule-2);
  box-shadow:0 18px 40px -24px rgba(22,20,15,.5);padding:14px 16px;display:flex;gap:14px;align-items:center;justify-content:space-between;font:400 13px/1.5 var(--body)}
.consent p{margin:0;color:var(--ink-2)}
.consent div{display:flex;gap:8px;flex:none}
.consent button{font:500 12px/1 var(--mono);padding:9px 12px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer}
.consent button[data-v=denied]{background:transparent;color:var(--ink)}
@media(max-width:760px){.sf-row{flex-direction:column}.sf-row button{padding:12px 18px}.consent{flex-direction:column;align-items:flex-start}}

body:not(.explainer){min-height:100vh;display:flex;flex-direction:column}
body:not(.explainer)>.wrap{flex:1 0 auto;width:100%}

.prose.about{margin-top:28px}
.contact-form{max-width:640px;margin:32px 0 0}
.contact-form fieldset{border:0;padding:0;margin:0;min-width:0}
.contact-form label:not(.sf-hp){display:block;margin:22px 0 8px;font:500 14px/1.4 var(--body)}
.contact-form input:not([type=hidden]),.contact-form textarea{width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--rule-2);background:var(--raised);color:var(--ink);font:400 16px/1.5 var(--body);border-radius:0}
.contact-form textarea{resize:vertical}
.contact-form input:focus-visible,.contact-form textarea:focus-visible,.contact-form button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.contact-form button{margin-top:20px;padding:14px 22px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:500 14px/1 var(--mono);cursor:pointer}
.contact-form button:disabled,.contact-form fieldset:disabled{opacity:.55}
.contact-form[data-state=error] .contact-status{color:var(--accent-ink)}
.sr-contact{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.prose.about p{font-size:17px;line-height:1.65;color:var(--ink);text-align:justify;hyphens:manual;-webkit-hyphens:manual}
.prose.about a{text-decoration-color:var(--ink-3)}
@media(max-width:760px){.prose.about p,.sig figcaption{text-align:left}}