/* ---------------------------------------------------------
   yuvrajshiv.com — shared stylesheet
   Structure modeled on the jshen13.github.io layout system:
   fixed dark top nav, 1100px column, sans-serif, single blue
   accent for links, <hr> rules under section headings,
   two-column flex rows for experience/education entries.
   --------------------------------------------------------- */

:root{
  --accent:#4278ed;
  --nav-bg:#000000;
  --nav-fg:#d4d4d4;
  --rule:#e2e2e2;
  --muted:#5f5f5f;
  --btn-border:#555555;
  --btn-hover:#292929;
}

*{box-sizing:border-box;}

html{
  font-family:'Signika','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  scroll-behavior:smooth;
}

body{
  margin:0;
  padding:0;
  font-size:18px;
  line-height:28px;
  color:#111;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

a{color:var(--accent);text-decoration:none;}
a:visited{color:var(--accent);}
a:hover{font-weight:bold;}

/* ---------------- nav ---------------- */
.navBar{
  background-color:var(--nav-bg);
  opacity:.9;
  position:fixed;
  top:0;left:0;
  width:100%;
  overflow:hidden;
  z-index:5;
}
.navInner{
  max-width:1100px;margin:0 auto;
  padding:0 1.0875rem;
  display:flex;align-items:center;justify-content:space-between;
  min-height:58px;
}
.navBar ul{
  display:flex;flex-direction:row-reverse;align-items:center;
  list-style-type:none;margin:0;padding:0;
}
.navBar li{display:flex;align-items:center;}
.navBar li::after{content:"/";color:var(--nav-fg);opacity:.6;}
.navBar li:first-child::after{content:"";}
.navBar a{padding:8px 14px;color:var(--nav-fg);display:inline-block;}
.navBar a:hover{font-weight:bolder;color:#fff;}
.navBar .activeTab{font-weight:bolder;color:#fff;}
.navBar .brand{
  color:#fff;font-size:1.05rem;font-weight:600;
  padding:0;margin:0;white-space:nowrap;
}
.navBar .brand a{color:#fff;padding:0;}
.navBar .brand a:hover{font-weight:600;}

.spacer{height:58px;}

/* ---------------- container ---------------- */
.container{
  margin:0 auto;
  max-width:1100px;
  padding:0 1.0875rem 1.45rem;
}

h1{font-size:2em;margin:.67em 0;}
h2{font-size:1.5em;margin:.83em 0;}
h3{font-size:1.17em;margin:1em 0;}
h4{font-size:1em;margin:1.33em 0;}
p{margin:1em 0;}

section h1{margin-bottom:.2em;}
section hr{border:none;border-top:1px solid var(--rule);margin:0 0 1.2em;}

/* ---------------- hero ---------------- */
.hero{
  padding:70px 0 40px;
  border-bottom:1px solid var(--rule);
  margin-bottom:10px;
}
.hero h1{font-size:2.6em;margin:0 0 .15em;letter-spacing:-.01em;}
.hero .tagline{font-size:1.15em;color:#222;margin:0 0 1.2em;}
.hero p{max-width:52em;}

/* ---------------- buttons ---------------- */
.buttons{margin-top:1.4em;}
.buttons a{display:inline-block;margin:4px 14px 4px 0;}
.buttons button{
  background-color:#fff;border-radius:6px;color:#000;
  padding:10px 20px;text-align:center;font-size:16px;
  cursor:pointer;border:2px solid var(--btn-border);
  transition-duration:.4s;
  font-family:inherit;
}
.buttons button:hover{background-color:var(--btn-hover);color:#fff;}
.buttons .liBtn button:hover{background-color:#003891;color:#fff;}
.buttons .ghBtn button:hover{background-color:#24292f;color:#fff;}

/* ---------------- position / entry rows ---------------- */
.entry{display:flex;flex-wrap:wrap;margin:0 0 30px;padding:0;}
.entry .body{flex:1 1 72%;padding-right:20px;min-width:280px;}
.entry .side{flex:0 0 22%;text-align:right;color:var(--muted);min-width:150px;}
.entryHead{display:flex;flex-wrap:wrap;align-items:baseline;}
.entryHead .title{flex:1 1 60%;}
.entryHead .title h2{margin:0 0 .1em;font-size:1.25em;}
.entryHead .date{flex:0 0 auto;text-align:right;color:var(--muted);font-size:.95em;}
.entry .sub{color:var(--muted);margin:0 0 .5em;font-size:.98em;}
.entry ul{margin:.4em 0 0;padding-left:1.15em;}
.entry li{margin-bottom:.35em;}
.stack{color:var(--muted);font-size:.92em;margin-top:.5em;}

.tag{
  display:inline-block;font-size:.78em;line-height:1.5;
  border:1px solid var(--rule);border-radius:4px;
  padding:1px 8px;margin:2px 6px 2px 0;color:var(--muted);
}

.note{
  background:#fbfaf6;border-left:3px solid #e0d9c3;
  padding:.8em 1.1em;margin:1.2em 0;font-size:.95em;color:#4a4a4a;
}

/* ---------------- coursework grid ---------------- */
.semester{margin-bottom:2.2em;}
.semester h1{padding-top:10px;margin:0;font-size:1.5em;}
.semester hr{margin:.4em 0 1em;}
.courseRow{display:flex;flex-wrap:wrap;}
.course{flex:1 1 33%;min-width:280px;padding:6px 20px 18px 0;}
.course h3{margin:0 0 .15em;font-size:1.05em;}
.course .prof{font-weight:normal;color:var(--muted);}
.course p{margin:.3em 0 0;font-size:.95em;color:#333;}

dl{margin:.4em 0;}
dd{display:list-item;list-style-type:"\1F4BB";list-style-position:inside;
   margin-left:0;line-height:1.5em;padding-inline-start:1ch;}

/* ---------------- footer ---------------- */
footer{
  margin-top:3rem;padding:1.2rem 0 2rem;
  border-top:1px solid var(--rule);
  text-align:center;color:var(--muted);font-size:.9em;
}

/* ---------------- responsive ---------------- */
@media screen and (max-width:820px){
  body{font-size:17px;line-height:26px;}
  .navInner{flex-direction:column;align-items:flex-start;padding:8px 1rem;min-height:0;}
  .navBar ul{flex-wrap:wrap;justify-content:flex-end;}
  .navBar a{padding:6px 10px;font-size:.95rem;}
  .navBar .brand{font-size:1em;margin-bottom:2px;}
  .spacer{height:96px;}
  .entry .body{flex:1 1 100%;padding-right:0;}
  .entry .side{flex:1 1 100%;text-align:left;margin-top:.4em;}
  .course{flex:1 1 100%;padding-right:0;}
  .hero{padding:40px 0 24px;}
  .hero h1{font-size:2em;}
}

/* ---- project figures ---- */
.fig { margin: 14px 0 6px; }
.fig img { width: 100%; max-width: 720px; display: block; border: 1px solid #e2e2e2; border-radius: 3px; }
.fig figcaption { font-size: 12.5px; color: #777; margin-top: 6px; line-height: 1.45; }
.figRow { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.figRow img { flex: 1 1 200px; min-width: 0; border: 1px solid #e2e2e2; border-radius: 3px; }
.plinks { font-size: 13.5px; margin-top: 8px; }
.plinks a { margin-right: 14px; }
.moreList { list-style: none; padding-left: 0; }
.moreList li { padding: 7px 0; border-bottom: 1px solid #eee; font-size: 14.5px; line-height: 1.5; }
.moreList li b { font-weight: 600; }
.moreList .mCourse { color: #999; font-size: 13px; }