/* ===========================================================================
   anand-singh.com — Quiet Editorial
   One stylesheet. Tokens first, then layout, then components.
   =========================================================================== */

:root{
  /* colour */
  --paper:#eeefe9;
  --paper-2:#e5e7df;
  --paper-3:#dfe1d8;
  --ink:#191b18;
  --ink-2:#40443d;
  --mute:#5c6058;
  --rule:#c9ccc0;
  --acc:#2f5d4b;
  --acc-soft:#e2eae4;

  /* type */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Karla","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* spacing scale */
  --s1:6px; --s2:12px; --s3:20px; --s4:32px; --s5:52px; --s6:80px;

  --measure:66ch;
  color-scheme:light;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--acc); outline-offset:3px;}

.wrap{max-width:1080px; margin:0 auto; padding:0 40px;}
.lab{
  font-family:var(--sans); font-size:10.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mute);
}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--acc); color:var(--paper);
  padding:10px 16px; font-family:var(--sans); font-size:13px; z-index:99;
}
.skip:focus{left:0;}

/* --- masthead ------------------------------------------------------------ */
.masthead{
  display:flex; align-items:baseline; gap:28px; flex-wrap:wrap;
  padding:26px 0 22px; border-bottom:1px solid var(--rule);
}
.masthead .name{
  font-size:19px; font-weight:600; letter-spacing:-.01em;
  margin-right:auto; text-decoration:none;
}
.masthead nav{display:flex; gap:26px; flex-wrap:wrap;}
.masthead nav a{
  color:var(--mute); text-decoration:none;
  font-family:var(--sans); font-size:13.5px; font-weight:500;
  padding-bottom:3px; border-bottom:1px solid transparent;
}
.masthead nav a:hover{color:var(--acc);}
.masthead nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--acc);}

/* --- shared section furniture -------------------------------------------- */
.band{padding:var(--s6) 0; border-bottom:1px solid var(--rule);}
.band:last-of-type{border-bottom:none;}
.sec-head{display:flex; align-items:baseline; gap:16px; margin-bottom:var(--s4);}
.sec-head h2{
  margin:0; font-family:var(--sans); font-size:15px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
}
.sec-head .dash{flex:1; height:1px; background:var(--rule); min-width:24px;}
.sec-head a{
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--acc); text-decoration:none; white-space:nowrap;
}
.sec-head a:hover{text-decoration:underline;}

/* --- home hero ------------------------------------------------------------ */
.hero{
  display:grid; grid-template-columns:1.35fr .9fr; gap:56px; align-items:end;
  padding:76px 0 var(--s6); border-bottom:1px solid var(--rule);
}
.hero h1{
  margin:0 0 22px; font-size:clamp(38px,5.4vw,66px); font-weight:300;
  line-height:1.04; letter-spacing:-.02em; text-wrap:balance;
}
.hero h1 em{font-style:italic; color:var(--acc);}
.hero .std{margin:0; font-size:19px; color:var(--ink-2); max-width:46ch;}
.facts{display:flex; flex-direction:column; gap:14px; padding-bottom:6px;}
.fact{display:flex; gap:14px; align-items:baseline; border-top:1px solid var(--rule); padding-top:11px;}
.fact .k{flex:0 0 78px;}
.fact .v{font-size:16px; line-height:1.4;}
.fact .v a{color:var(--acc); text-decoration:none; border-bottom:1px solid var(--rule);}
.fact .v a:hover{border-bottom-color:currentColor;}

/* --- page header (non-home) ---------------------------------------------- */
.page-head{padding:64px 0 var(--s5); border-bottom:1px solid var(--rule);}
.page-head h1{
  margin:10px 0 18px; font-size:clamp(34px,4.6vw,54px); font-weight:300;
  letter-spacing:-.02em; line-height:1.06; text-wrap:balance; max-width:20ch;
}
.page-head .std{margin:0; font-size:19px; color:var(--ink-2); max-width:var(--measure);}

/* --- capability spread ------------------------------------------------------ */
.caps{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5) var(--s6);}
.cap h3{
  margin:0 0 var(--s2); font-size:21px; font-weight:400; letter-spacing:-.01em;
  line-height:1.25; padding-top:var(--s2); border-top:2px solid var(--acc);
}
.cap p{margin:0; font-size:17px; color:var(--ink-2); line-height:1.65;}

/* --- employment strip ------------------------------------------------------- */
.postings{list-style:none; margin:0; padding:0;}
.postings li{
  display:grid; grid-template-columns:120px 1.1fr 2fr auto; gap:var(--s3);
  align-items:baseline; padding:16px 0; border-top:1px solid var(--rule);
}
.postings li:last-child{border-bottom:1px solid var(--rule);}
.p-co{font-size:20px; letter-spacing:-.01em;}
.p-role{font-family:var(--sans); font-size:13.5px; color:var(--ink-2); line-height:1.45;}
.p-where{font-family:var(--sans); font-size:12px; color:var(--mute); text-align:right; white-space:nowrap;}

/* --- experience ------------------------------------------------------------ */
.role{
  display:grid; grid-template-columns:132px 1fr; gap:34px; align-items:start;
  padding:30px 0; border-top:1px solid var(--rule);
}
.role:first-of-type{border-top:none; padding-top:0;}
.role-when{padding-top:9px;}
.role-when .lab{white-space:nowrap;}
.role h3{margin:0 0 4px; font-size:27px; font-weight:400; letter-spacing:-.015em; line-height:1.15;}
.role-title{
  margin:0 0 14px; font-family:var(--sans); font-size:13px; font-weight:600;
  color:var(--acc); letter-spacing:.01em; line-height:1.45;
}
.role-lede{margin:0 0 var(--s3); font-size:18.5px; color:var(--ink-2); max-width:58ch;}
.role-points{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px;}
.role-points li{
  position:relative; padding-left:20px; font-size:16.5px; color:var(--ink-2); max-width:62ch;
}
.role-points li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:9px; height:1px; background:var(--acc);
}
.role.quiet h3{font-size:21px;}
.role.quiet .role-lede{font-size:16.5px; color:var(--mute);}
.specs.skills{grid-template-columns:1fr;}
.specs.skills dt{flex:0 0 230px;}
.specs.skills dd{font-size:16px;}
.role-metrics{
  margin:var(--s3) 0 0; padding:16px 20px; list-style:none;
  background:var(--paper-2); border-left:2px solid var(--acc);
  display:flex; flex-direction:column; gap:9px; max-width:62ch;
}
.role-metrics li{font-family:var(--sans); font-size:14.5px; color:var(--ink-2); line-height:1.5;}
.chips.wide{gap:9px;}
.chips.wide span{font-size:12.5px; padding:6px 12px;}
.era{display:block; margin:0 0 8px;}
.kicker.wide{max-width:64ch; font-size:17.5px;}
.kicker a{color:var(--acc); text-decoration:none; border-bottom:1px solid var(--rule);}
.kicker a:hover{border-bottom-color:currentColor;}
.page-head .std a{color:var(--acc); text-decoration:none; border-bottom:1px solid var(--rule);}

/* --- project rows (index) ------------------------------------------------- */
.proj{
  display:grid; grid-template-columns:132px 1fr 210px; gap:34px; align-items:start;
  padding:26px 0; border-top:1px solid var(--rule);
  text-decoration:none; color:inherit;
}
.proj:first-of-type{border-top:none; padding-top:0;}
.proj figure{
  margin:0; background:var(--paper-2); border:1px solid var(--rule);
  padding:10px; color:var(--acc); transition:background .18s, border-color .18s;
}
.proj h3{margin:0 0 8px; font-size:25px; font-weight:400; letter-spacing:-.01em; line-height:1.15;}
.proj p{margin:0; color:var(--ink-2); font-size:16.5px; max-width:52ch;}
.proj:hover h3{color:var(--acc);}
.proj:hover figure{background:var(--acc-soft); border-color:var(--acc);}
.proj .more{
  display:inline-block; margin-top:10px; font-family:var(--sans);
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--acc);
}
.meta{display:flex; flex-direction:column; gap:7px; padding-top:5px;}
.meta span{font-family:var(--sans); font-size:12px; color:var(--mute); letter-spacing:.02em;}
.meta span b{color:var(--ink); font-weight:600;}

/* --- project detail ------------------------------------------------------- */
.detail{display:grid; grid-template-columns:1fr 300px; gap:var(--s6); padding:var(--s5) 0 var(--s6);}
.prose{max-width:var(--measure);}
.prose h2{
  margin:var(--s5) 0 var(--s2); font-family:var(--sans); font-size:13px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mute);
}
.prose h2:first-child{margin-top:0;}
.prose p{margin:0 0 var(--s3); font-size:18px;}
.prose p:last-child{margin-bottom:0;}
.aside{position:sticky; top:24px; align-self:start;}
.aside figure{
  margin:0 0 var(--s3); background:var(--paper-2); border:1px solid var(--rule);
  padding:22px; color:var(--acc);
}
.spec{border-top:1px solid var(--rule);}
.spec div{display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--rule); align-items:baseline;}
.spec .k{flex:0 0 74px;}
.spec .v{font-size:15px; line-height:1.4; color:var(--ink-2);}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:var(--s3);}
.chips span{
  font-family:var(--sans); font-size:11.5px; letter-spacing:.04em; color:var(--mute);
  border:1px solid var(--rule); padding:4px 9px; border-radius:2px;
}

/* --- pager --------------------------------------------------------------- */
.pager{
  display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
  padding:var(--s4) 0 var(--s6); border-top:1px solid var(--rule);
}
.pager a{
  text-decoration:none; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--acc);
}
.pager a span{display:block; font-weight:400; color:var(--mute); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px;}
.pager .nx{text-align:right; margin-left:auto;}

/* --- tables --------------------------------------------------------------- */
.tablewrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums;}
.prs td{padding:9px 0; border-bottom:1px solid var(--rule); font-size:17px;}
.prs td:last-child{text-align:right; font-family:var(--sans); font-weight:600; font-size:16px;}
.races{font-size:16px; min-width:520px;}
.races th{
  text-align:left; font-family:var(--sans); font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
  padding:0 var(--s3) 10px 0; border-bottom:1px solid var(--rule); white-space:nowrap;
}
.races th:last-child,.races td:last-child{text-align:right; padding-right:0;}
.races td{padding:11px var(--s3) 11px 0; border-bottom:1px solid var(--rule); color:var(--ink-2);}
.races td:first-child{color:var(--ink);}
.races td:last-child{font-family:var(--sans); font-weight:600; color:var(--ink);}

/* --- lists ---------------------------------------------------------------- */
.posts{list-style:none; margin:0; padding:0;}
.posts li{border-bottom:1px solid var(--rule); padding:18px 0;}
.posts li:first-child{border-top:1px solid var(--rule);}
.posts a{color:var(--ink); text-decoration:none; font-size:23px; display:block; margin-bottom:6px; letter-spacing:-.01em;}
.posts a:hover{color:var(--acc);}
.posts p{margin:6px 0 0; color:var(--ink-2); font-size:16px; max-width:60ch;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
.kicker{margin:0 0 var(--s3); color:var(--ink-2); font-size:16.5px; max-width:44ch;}

/* --- tools ---------------------------------------------------------------- */
.tools{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5);}
.tool figure{margin:0 0 var(--s3); background:var(--paper-2); border:1px solid var(--rule); padding:22px 28px; color:var(--acc);}
.tool h3{margin:0 0 6px; font-size:26px; font-weight:400; letter-spacing:-.01em;}
.tool p{margin:0 0 var(--s2); color:var(--ink-2); font-size:16.5px; max-width:50ch;}
.status{
  font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--acc); border:1px solid var(--rule);
  padding:3px 8px; display:inline-block; margin-bottom:12px;
}
.status.soon{color:var(--mute);}

/* --- article -------------------------------------------------------------- */
.article{max-width:var(--measure); margin:0 auto; padding:var(--s5) 0 var(--s6);}
.article .dateline{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:var(--s3);}
.article h1{margin:0 0 var(--s3); font-size:clamp(34px,4.4vw,50px); font-weight:300; letter-spacing:-.02em; line-height:1.08; text-wrap:balance;}
.article .standfirst{font-size:21px; color:var(--ink-2); margin:0 0 var(--s5); line-height:1.55;}
.article p{font-size:18.5px; margin:0 0 var(--s3);}
.article h2{
  margin:var(--s5) 0 var(--s3); font-family:var(--sans); font-size:13px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mute);
}
.article blockquote{
  margin:0 0 var(--s5); padding:0 0 0 var(--s3); border-left:2px solid var(--acc);
  font-size:21px; line-height:1.55; color:var(--ink-2); font-style:italic;
}
.article .post-fig{margin:var(--s5) 0; }
.article .post-fig img{
  display:block; width:100%; height:auto; background:var(--paper-2);
  border:1px solid var(--rule);
}
.article .post-fig figcaption{
  font-family:var(--sans); font-size:12.5px; color:var(--mute);
  margin-top:9px; line-height:1.5;
}
.article .post-gallery{margin:var(--s5) 0;}
.article hr{border:none; border-top:1px solid var(--rule); margin:var(--s5) 0;}
.note{
  background:var(--paper-2); border-left:2px solid var(--acc); padding:16px 20px;
  font-family:var(--sans); font-size:14px; color:var(--mute); line-height:1.55;
}
.note b{color:var(--ink);}

/* --- contact -------------------------------------------------------------- */
.contact{display:grid; grid-template-columns:1.2fr .8fr; gap:var(--s6); padding:var(--s5) 0 var(--s6);}
.contact h1{margin:0 0 var(--s3); font-size:clamp(34px,4.6vw,52px); font-weight:300; letter-spacing:-.02em; line-height:1.06;}
.contact .std{font-size:19px; color:var(--ink-2); max-width:44ch; margin:0 0 var(--s4);}
.mailto{
  display:inline-block; font-family:var(--sans); font-size:15px; font-weight:600;
  color:var(--paper); background:var(--acc); padding:13px 22px; text-decoration:none;
}
.mailto:hover{background:#26493c;}
.elsewhere{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule);}
.elsewhere li{border-bottom:1px solid var(--rule);}
.elsewhere a{display:flex; justify-content:space-between; gap:14px; padding:13px 0; text-decoration:none; font-size:17px;}
.elsewhere a span{font-family:var(--sans); font-size:12px; color:var(--mute); letter-spacing:.04em;}
.elsewhere a:hover{color:var(--acc);}

/* --- closing + footer ------------------------------------------------------ */
.closing{padding:var(--s5) 0; display:flex; flex-wrap:wrap; gap:20px; align-items:baseline; border-top:1px solid var(--rule);}
.closing .big{font-size:30px; font-weight:300; letter-spacing:-.01em; margin-right:auto; max-width:22ch;}
.closing a{
  color:var(--acc); font-family:var(--sans); font-size:13.5px; font-weight:600;
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px;
}
.site-foot{
  border-top:1px solid var(--rule); padding:24px 0 56px;
  display:flex; gap:22px; flex-wrap:wrap; align-items:baseline;
  font-family:var(--sans); font-size:12.5px; color:var(--mute);
}
.site-foot .c{margin-right:auto;}
.site-foot a{color:var(--mute); text-decoration:none;}
.site-foot a:hover{color:var(--acc);}

/* --- figures -------------------------------------------------------------- */
.fig{display:block; width:100%; height:auto;}
.fig [stroke]{vector-effect:non-scaling-stroke;}


/* --- specification list ---------------------------------------------------- */
.specs{margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s5);}
.specs > div{display:flex; gap:16px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--rule);}
.specs dt{flex:0 0 108px; margin:0;}
.specs dd{margin:0; font-size:16.5px; color:var(--ink-2); line-height:1.45;}

/* --- media ---------------------------------------------------------------- */
.mediaflow{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4);}
.mediaflow figure{margin:0;}
.mediaflow figure.m-video{grid-column:1 / -1;}
.mediaflow video,.mediaflow img{
  display:block; width:100%; height:auto; background:var(--paper-2);
  border:1px solid var(--rule);
}
.mediaflow figure.m-video{align-items:center;}
.mediaflow video{
  max-height:min(640px,78vh); width:auto; max-width:100%; margin:0 auto;
  background:#191b18;
}
.mediaflow figure.m-video figcaption{align-self:flex-start;}
.mediaflow figure.m-img img{aspect-ratio:4/3; object-fit:contain; padding:10px;}
.mediaflow figure{display:flex; flex-direction:column;}
.mediaflow figcaption{
  font-family:var(--sans); font-size:12.5px; color:var(--mute);
  margin-top:9px; line-height:1.5; max-width:60ch;
}

/* --- photo grids ----------------------------------------------------------- */
.grid-photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--s2);}
.grid-photos.wide{grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--s3);}
.grid-photos .ph{display:block; margin:0; text-decoration:none;}
.grid-photos img{
  display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
  background:var(--paper-2); border:1px solid var(--rule);
  filter:saturate(.92); transition:filter .2s, border-color .2s;
}
.grid-photos a.ph:hover img{filter:saturate(1.05); border-color:var(--acc);}
.grid-photos figcaption{
  font-family:var(--sans); font-size:11.5px; color:var(--mute);
  margin-top:7px; line-height:1.45;
}

.outlink{margin:var(--s3) 0 0;}
.outlink a{
  font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--acc);
  text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:2px;
}
.outlink a:hover{border-bottom-color:currentColor;}

/* --- responsive ------------------------------------------------------------ */
@media (max-width:920px){
  .wrap{padding:0 24px;}
  .hero,.detail,.split,.tools,.contact{grid-template-columns:1fr; gap:var(--s5);}
  .hero{padding:48px 0 var(--s5);}
  .band{padding:var(--s5) 0;}
  .proj{grid-template-columns:96px 1fr; gap:22px;}
  .role{grid-template-columns:1fr; gap:10px;}
  .caps{grid-template-columns:1fr; gap:var(--s4);}
  .postings li{grid-template-columns:1fr; gap:4px; padding:14px 0;}
  .p-where{text-align:left;}
  .role-when{padding-top:0;}
  .meta{grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; gap:6px 18px; padding-top:0;}
  .aside{position:static;}
  .aside figure{max-width:340px;}
  .page-head{padding:44px 0 var(--s4);}
  .tool figure{max-width:380px;}
  .specs{grid-template-columns:1fr;}
  .specs.skills dt{flex:0 0 auto;}
  .specs.skills > div{flex-direction:column; gap:4px;}
  .mediaflow{grid-template-columns:1fr;}
  .grid-photos{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
  .closing .big{font-size:25px;}
}
@media (max-width:560px){
  body{font-size:16.5px;}
  .proj{grid-template-columns:1fr;}
  .proj figure{max-width:180px;}
  .masthead{gap:14px;}
  .masthead nav{gap:18px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}
@media print{
  .masthead nav,.closing,.skip{display:none;}
  body{background:#fff;}
}