/* ============================================================
   ankitsanjyal.github.io  ·  one stylesheet
   Faces: EB Garamond (voice) + Instrument Sans (information)
          + JetBrains Mono (labels on detail pages)

   Two environments live here:
     A. the shell   : body.shell, a fixed frame with an ambient
                      background, mood palettes and modals
     B. the reader  : every detail page, a quiet light document
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

:root{
  --ink:#22262e;
  --body:#3d434e;
  --mute:#767d8a;
  --card:rgba(255,255,255,.34);
  --hair:rgba(255,255,255,.42);
  --fall:#f7fbff;
  --g1:#cfd6e2; --g2:#dde4ef; --g3:#b9c4d6; --g4:#c7cede;

  /* reader tokens, always light */
  --paper:#fbfaf8;
  --sunk:#f4f2ee;
  --rule:#e6e4df;
  --line:#cfcdc7;

  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --ui:"Instrument Sans",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

[data-mood="warm"]{
  --ink:#26221d; --body:#463f36; --mute:#847a6d;
  --card:rgba(255,255,255,.38);
  --g1:#e6ddd3; --g2:#efe7dd; --g3:#d8cec2; --g4:#ded6ce;
}
[data-mood="ink"]{
  --ink:#eef0f3; --body:#c2c7d0; --mute:#7c838f;
  --card:rgba(255,255,255,.07); --hair:rgba(255,255,255,.14); --fall:#ffffff;
  --g1:#252a34; --g2:#2e3440; --g3:#171a21; --g4:#1f232b;
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ui);font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Figures are greyscale with the rest of the page and return to full
   colour on hover. Several figures encode their result in colour, so
   the hover is load-bearing rather than decoration. */
img{max-width:100%;height:auto}


/* ============================================================
   A ,  THE SHELL
   ============================================================ */

body.shell{
  background:var(--g3);color:var(--ink);
  overflow:hidden;
  transition:color 700ms ease,background 1200ms ease;
}

/* --- ambient background: four blurred blobs, no WebGL --- */
.bg{position:fixed;inset:0;z-index:-3;overflow:hidden;background:var(--g3);transition:background 1200ms ease}
.blob{position:absolute;border-radius:50%;filter:blur(80px);transition:background 1200ms ease}
.b1{width:66vw;height:66vw;left:-12vw;top:-18vw;background:var(--g1);animation:d1 36s ease-in-out infinite alternate}
.b2{width:56vw;height:56vw;right:-10vw;top:-4vw;background:var(--g2);animation:d2 44s ease-in-out infinite alternate}
.b3{width:70vw;height:70vw;left:8vw;bottom:-30vw;background:var(--g4);animation:d3 50s ease-in-out infinite alternate}
.b4{width:44vw;height:44vw;right:2vw;bottom:-12vw;background:var(--g1);animation:d4 41s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate3d(10vw,8vh,0) scale(1.18)}}
@keyframes d2{to{transform:translate3d(-12vw,11vh,0) scale(.84)}}
@keyframes d3{to{transform:translate3d(8vw,-10vh,0) scale(1.12)}}
@keyframes d4{to{transform:translate3d(-9vw,-7vh,0) scale(1.22)}}

/* the dither analogue: one inline SVG turbulence, about a kilobyte */
.grain{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.34;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
}
.rain{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.drop{position:absolute;width:1px;height:62px;background:linear-gradient(to bottom,transparent,var(--fall));opacity:.30}
@keyframes fall{0%{transform:translateY(-120px);opacity:0}12%{opacity:.30}88%{opacity:.30}100%{transform:translateY(102vh);opacity:0}}
@media (max-width:899px){.rain{display:none}}

/* --- persistent corner chrome --- */
.chrome{position:fixed;font-family:var(--serif);font-size:13px;color:var(--body);z-index:20}
.c-tl{top:28px;left:38px}
.c-tr{top:28px;right:38px}
.c-bl{bottom:26px;left:38px}
.c-br{bottom:26px;right:38px;text-align:right}
.chrome button{
  font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  border-bottom:1px solid transparent;transition:color 1200ms ease;
}
.chrome button:hover{border-bottom-color:currentColor}

.mark{position:fixed;top:98px;right:38px;text-align:right;z-index:20}
.mark h1{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.6vw,40px);line-height:1.08;margin:0}
.mark p{font-family:var(--serif);font-size:15px;color:var(--body);margin:5px 0 0}

.shell-nav{position:fixed;top:116px;left:38px;display:flex;flex-direction:column;gap:10px;z-index:20}
.shell-nav button,.shell-nav a{
  font:inherit;font-size:13.5px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--body);text-align:left;width:max-content;text-decoration:none;
}
.shell-nav button:hover,.shell-nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.shell-nav button[aria-current="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.stage{
  position:fixed;left:26px;right:26px;top:236px;bottom:74px;
  overflow-y:auto;scrollbar-width:none;z-index:10;
}
.stage::-webkit-scrollbar{display:none}
@media (min-width:900px){.stage{left:190px;right:130px;top:246px}}

.view{display:none}
.view.on{display:block;animation:pix 700ms steps(12) both}
@keyframes pix{from{opacity:0}to{opacity:1}}

/* --- about --- */
.about{display:flex;gap:52px;align-items:flex-start}
.portrait{flex-shrink:0;display:none;margin:0}
@media (min-width:900px){.portrait{display:block}}
.portrait .frame{width:250px;height:250px;border-radius:16px;overflow:hidden;background:rgba(80,100,140,.35)}
.portrait canvas,.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.portrait img{filter:grayscale(1) contrast(1.25)}
.portrait figcaption{
  font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--body);
  text-align:center;margin-top:10px;max-width:250px;
}

.card{
  background:var(--card);border-radius:16px;padding:34px 38px;max-width:600px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.card.prose{font-family:var(--serif);font-size:17px;line-height:1.64}
.card.prose p{margin:0 0 16px}
.card.prose p:last-child{margin-bottom:0}
.card.prose b{font-weight:600}
.card.prose a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.links{display:flex;flex-wrap:wrap;gap:24px;margin:16px 0 0 8px;font-size:12.5px}
.links a,.links button{
  color:var(--body);text-decoration:underline;text-underline-offset:3px;
  background:none;border:0;padding:0;font:inherit;cursor:pointer;
}
.links a:hover,.links button:hover{opacity:.65}

/* --- entry rows --- */
.rows{max-width:800px;padding-bottom:12px}
.row{margin-bottom:32px}
.rhead{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.rhead h3{font-family:var(--serif);font-weight:500;font-size:19px;margin:0;line-height:1.28}
.rhead h3 a{color:inherit;text-decoration:none}
.rhead h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.rhead .when{font-family:var(--serif);font-size:12.5px;color:var(--mute);white-space:nowrap}

/* the summary is itself the link to the write-up */
.sum{margin:6px 0 9px;max-width:70ch}
.sum a{
  font-size:13.5px;color:var(--body);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,currentColor 32%,transparent);
  text-underline-offset:3px;
}
.sum a:hover{color:var(--ink);text-decoration-color:currentColor}
.sum.plain{font-size:13.5px;color:var(--body)}

.acts{display:flex;flex-wrap:wrap;align-items:center;gap:18px;font-size:12.5px;color:var(--body)}
.acts button,.acts a{
  font:inherit;background:none;border:0;padding:0;cursor:pointer;color:inherit;
  text-decoration:underline;text-underline-offset:3px;
}
.acts button:hover,.acts a:hover{opacity:.65}
.acts .venue{margin-left:auto;font-family:var(--serif);font-style:italic;color:var(--mute);text-decoration:none}

/* --- keyword filter, one per list view --- */
.filter{
  display:flex;align-items:center;gap:11px;max-width:800px;margin:0 0 13px;
  border-bottom:1px solid var(--hair);padding-bottom:8px;
}
.filter .fq{font-family:var(--serif);font-size:16px;color:var(--mute);line-height:1}
.filter input{
  flex:1;min-width:0;font:inherit;font-size:13.5px;color:var(--ink);
  background:none;border:0;outline:none;padding:3px 0;
}
.filter input::placeholder{color:var(--mute)}
.filter input::-webkit-search-cancel-button{-webkit-appearance:none}
.filter:focus-within{border-bottom-color:var(--ink)}
.filter .fn{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--mute);white-space:nowrap}

.chips{display:flex;flex-wrap:wrap;gap:15px;margin:0 0 28px;font-size:12.5px}
.chips button{
  font:inherit;background:none;border:0;padding:0;cursor:pointer;color:var(--mute);
  text-decoration:underline;text-underline-offset:3px;
}
.chips button:hover{color:var(--ink)}
.chips button[aria-pressed="true"]{color:var(--ink)}

.row.hide{display:none}
.void{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--mute);margin:0 0 12px}
.void[hidden]{display:none}

/* --- tiles --- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:18px;max-width:900px;padding-bottom:12px}
.tile{background:var(--card);border-radius:16px;padding:24px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.tile .when{display:block;font-family:var(--serif);font-size:12.5px;color:var(--body);text-align:right;margin-bottom:16px}
.tile h3{font-family:var(--serif);font-weight:500;font-size:17px;margin:0}
.tile .org{font-family:var(--serif);font-size:15px;color:var(--body);margin:0 0 10px}
.tile .org a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.tile p.x{font-size:12.5px;color:var(--body);margin:0;line-height:1.55}
.tile.quiet{background:rgba(255,255,255,.16)}
[data-mood="ink"] .tile.quiet{background:rgba(255,255,255,.04)}

.grouphead{font-family:var(--serif);font-size:22px;font-weight:500;margin:0 0 18px}
.grouphead:not(:first-child){margin-top:42px}

/* shown only to a signed-in author, never to a visitor */
.editslot{margin:0 0 22px;font-size:12.5px}
.editslot:empty{display:none}
.editslot a{color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.editslot a:hover{color:var(--ink)}

/* --- thoughts: a table of contents, not a feed --- */
.tlist{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:5px 34px;max-width:880px;margin:0 0 14px;
}
.tnote button.tt{
  font:inherit;font-size:13.5px;background:none;border:0;padding:5px 0;
  text-align:left;cursor:pointer;color:var(--ink);display:block;width:100%;
}
.tnote button.tt .d{font-family:var(--serif);font-size:12px;color:var(--mute);margin-right:9px}
.tnote button.tt .tl{text-decoration:underline;text-underline-offset:3px}
.tnote button.tt:hover{opacity:.65}
.tnote.hide{display:none}
.seed{
  font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--mute);
  max-width:60ch;margin:0 0 30px;
}

/* --- modal, cream paper on every mood --- */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%}
dialog::backdrop{background:rgba(14,16,20,.30);backdrop-filter:blur(2px)}
.sheet{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(700px,calc(100vw - 36px));max-height:84vh;overflow-y:auto;color:#1a1c20;
  background:#fffdf6;border-radius:16px;box-shadow:0 24px 60px rgba(10,12,16,.28);padding:32px 36px;
}
.sheet h2{font-family:var(--serif);font-weight:500;font-size:23px;margin:0 40px 4px 0;line-height:1.25}
.sheet .date{font-family:var(--serif);font-style:italic;font-size:12.5px;color:#7a7a72;margin:0 0 20px}
.sheet .close{
  position:absolute;top:32px;right:36px;font-family:var(--serif);font-size:13px;
  background:none;border:0;cursor:pointer;color:#5c5c55;
}
.sheet .close:hover{text-decoration:underline}
.sheet .txt{font-size:13.5px;line-height:1.72;color:#33342f}
.sheet .txt p{margin:0 0 13px}
.sheet .txt p:last-child{margin-bottom:0}
.sheet ul{list-style:none;margin:0;padding:0}
.sheet li{
  display:grid;grid-template-columns:1fr auto;gap:14px;padding:7px 0;
  border-bottom:1px solid rgba(0,0,0,.07);font-size:13.5px;
}
.sheet li:last-child{border-bottom:0}
.sheet .sig{font-family:var(--serif);font-style:italic;font-size:13px;color:#7a7a72;text-align:right;margin-top:22px}
.sheet .go{margin-top:20px;font-size:12.5px}
.sheet .go a{color:#33342f;text-decoration:underline;text-underline-offset:3px;margin-right:18px}

.abs{display:none}

@media (max-width:899px){
  body.shell{overflow:auto}
  .mark{position:static;text-align:left;padding:70px 24px 0}
  .shell-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:18px;padding:18px 24px 0}
  .stage{position:static;padding:24px 24px 90px;overflow:visible}
  .c-tl,.c-bl{display:none}
  .card{padding:26px 24px}
  .about{gap:0}
}
@media (prefers-reduced-motion:reduce){
  .blob{animation:none}
  .drop{display:none}
  .view.on{animation:none}
}


/* ============================================================
   B ,  THE READER  (every detail page)
   Light, quiet, and deliberately outside the ambient system,
   the way a long piece of writing should be.
   ============================================================ */

body:not(.shell){background:var(--paper);color:#101216}
body:not(.shell) img{filter:grayscale(1) contrast(1.03);transition:filter .25s}
body:not(.shell) img:hover{filter:none}
body:not(.shell) a{color:#101216;text-decoration:none;border-bottom:1px solid var(--line)}
body:not(.shell) a:hover{border-bottom-color:#101216}
body:not(.shell) p{margin:0 0 16px;color:#3c4048}
body:not(.shell) p:last-child{margin-bottom:0}
body:not(.shell) strong{color:#101216;font-weight:600}
body:not(.shell) hr{border:0;border-top:1px solid var(--rule);margin:34px 0}
body:not(.shell) em{font-style:italic}

#site-nav{
  position:sticky;top:0;z-index:30;background:rgba(251,250,248,.88);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
#nav-inner{
  max-width:820px;margin:0 auto;padding:15px 30px;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
}
.nav-name{font-family:var(--serif);font-size:18px;font-weight:500;border:0 !important}
.nav-name:hover{text-decoration:underline;text-underline-offset:3px}
#nav-links{display:flex;gap:22px;font-size:13px}
#nav-links a{color:#5a5f68;border:0 !important}
#nav-links a:hover{color:#101216;text-decoration:underline;text-underline-offset:3px}

#page-wrap{max-width:820px;margin:0 auto;padding:44px 30px 90px}

.back-link{
  display:inline-block;font-family:var(--serif);font-size:14px;color:#5a5f68;
  border:0 !important;margin-bottom:30px;
}
.back-link:hover{color:#101216;text-decoration:underline;text-underline-offset:3px}

.section-title{font-family:var(--serif);font-weight:500;font-size:34px;margin:0 0 8px;letter-spacing:-.005em}
.section-note{font-size:14px;color:#5a5f68;margin-bottom:38px}
.section-heading{
  font-family:var(--serif);font-weight:500;font-size:24px;color:#101216;
  margin:44px 0 14px;padding-bottom:7px;border-bottom:1px solid var(--rule);
}
.section-sub{font-family:var(--serif);font-weight:500;font-size:19px;color:#101216;margin:28px 0 10px}

.mono{font-family:var(--mono)}
.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#7c818a}

/* CV tables */
.exp-table,.edu-table{width:100%;border-collapse:collapse;margin-bottom:10px}
.exp-table td,.edu-table td{vertical-align:top;padding:0 0 24px;border:0}
.exp-date,.edu-date{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:#7c818a;width:180px;padding-top:6px !important;white-space:nowrap;
}
.exp-role,.edu-degree{font-family:var(--serif);font-size:19px;font-weight:500;color:#101216}
.exp-org,.edu-institution{font-family:var(--serif);font-size:15px;color:#3c4048}
.exp-desc{font-size:13.5px;color:#3c4048;margin-top:5px;max-width:64ch}
@media (max-width:620px){
  .exp-table td,.edu-table td,.exp-date,.edu-date{display:block;width:auto;padding-bottom:6px !important}
  .exp-table tr td:last-child,.edu-table tr td:last-child{padding-bottom:26px}
}

#footer{
  max-width:820px;margin:0 auto;padding:22px 30px 60px;border-top:1px solid #101216;
  display:flex;flex-wrap:wrap;gap:24px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7c818a;
}
#footer a{color:#7c818a;border:0 !important}
#footer a:hover{color:#101216}

/* a small continuity thread with the shell */
.reader-clock{
  position:fixed;top:auto;bottom:20px;left:22px;z-index:5;
  font-family:var(--serif);font-size:12px;color:#9aa0a8;
}
@media (max-width:899px){.reader-clock{display:none}}


/* ============================================================
   C ,  components that must look identical everywhere.
   Detail pages load this file before their own <style>, so these
   are written with body-level specificity to win it back.
   ============================================================ */
body .tag-pill{
  display:inline-block;background:var(--sunk);color:#3c4048;border:1px solid var(--rule);
  border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  padding:3px 11px;margin:2px 3px 2px 0;
}
body .paper-links a,body .proj-links a,body .post-links a{
  display:inline-block;margin:0 8px 6px 0;padding:6px 15px;
  border:1px solid #101216 !important;border-radius:999px;
  font-size:12.5px;color:#101216;background:none;
}
body .paper-links a:hover,body .proj-links a:hover,body .post-links a:hover{background:#101216;color:var(--paper)}
body .paper-hero,body .proj-hero,body .post-hero{
  background:var(--sunk);border:1px solid var(--rule);border-radius:16px;
  padding:28px 32px;margin-bottom:32px;
}
body .paper-title,body .proj-title,body .post-title{
  font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.2;
  color:#101216;margin-bottom:10px;
}
body .paper-tagline,body .proj-tagline,body .post-tagline{
  font-family:var(--serif);font-size:17px;line-height:1.55;color:#3c4048;
}
body .abstract-box{
  background:#fff;border:0;border-left:2px solid #101216;border-radius:0;
  padding:16px 22px;margin:24px 0;font-size:14px;color:#3c4048;line-height:1.72;
}