@font-face {
  font-family: Inter;
  src: url("../fonts/inter-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; }

html { background: #fff; color-scheme: light; }

body {
  margin: 0;
  padding: 60px 40px;
  background: #fff;
  color: #171717;
  font: 400 .875rem/23px Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 580px; margin-inline: auto; outline: none; }
h1, p { margin: 0; font: inherit; }
h1 { text-transform: lowercase; }
.occupation { margin-top: 2px; color: #808080; }

.avatar {
  display: block;
  position: relative;
  width: 96px;
  height: 78px;
  margin: 0 0 24px -12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.avatar-sprite {
  position: absolute;
  left: 12px;
  bottom: -14px;
  width: 72px;
  height: 108px;
  background: url("../images/saurabh-avatar.webp") no-repeat -72px 0 / 216px 216px;
  pointer-events: none;
  transform-origin: 50% 60%;
}

.timeline {
  display: grid;
  gap: 12px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.timeline li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 32px; }
.place-link { border: 0; background: none; color: #00f; font: inherit; cursor: pointer; padding: 0; }
.place-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.expanded-details { grid-column: 2; width: min(320px, 100%); margin: 12px 0 4px; border: 1px solid #eee; border-radius: 12px; overflow: hidden; }
.expanded-details[hidden] { display: none; }
.expanded-details .preview-cover { width: 100%; height: auto; aspect-ratio: 1243 / 936; min-height: 230px; }
.details-story { padding: 18px 20px; font-size: 12px; line-height: 20px; color: #666; }
.details-website { display: block; width: fit-content; margin: 0 20px 18px; font-size: 12px; }
.city-route { display: flex; justify-content: space-between; list-style: none; margin: 0 20px 20px; padding: 14px 0 0; border-top: 1px dashed #ccd0dd; }
.city-route li { display: block; position: relative; font-size: 10px; line-height: 16px; }
.city-route li::before { content: ''; position: absolute; top: -18px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #52629c; }
.route-year { color: #888; }
.route-city { color: #28355d; }
.year { white-space: nowrap; }
a { color: #00f; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgb(0 0 255 / 20%); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 1px solid #00f; outline-offset: 4px; border-radius: 2px; }
.avatar:focus-visible { border-radius: 12px; }
hr { width: 48px; margin: 40px 0; border: 0; border-top: 1px solid #eee; }
footer { color: #808080; font-size: .75rem; line-height: 20px; }
footer a { overflow-wrap: anywhere; }
.colophon { margin-top: 16px; }

.skip-link { position: fixed; top: 12px; left: 16px; padding: 8px 12px; background: #fff; z-index: 20; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

.project-preview {
  position: fixed;
  z-index: 10;
  width: min(320px, calc(100vw - 32px));
  aspect-ratio: 1243 / 936;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgb(0 0 0 / 8%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px) scale(.98);
  transition: opacity 180ms ease, transform 220ms ease, visibility 180ms;
}

.project-preview.is-visible { opacity: 1; visibility: visible; transform: none; }
.preview-cover { height: 100%; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.preview-caption { font-size: 9px; line-height: 14px; letter-spacing: .4px; opacity: .65; }
.preview-detail { margin-top: 5px; font-size: 10px; line-height: 15px; opacity: .75; }
.preview-title { font-size: 22px; line-height: 1.2; letter-spacing: -.7px; }
.preview-scene { display: grid; place-items: center; min-height: 0; flex: 1; position: relative; margin: 8px -22px; }
.city-art { display: block; width: 100%; height: 100%; position: absolute; object-fit: cover; }
.has-city:not(.city-postcard) .city-art { opacity: .25; }
.logo-plaque { position: relative; display: grid; place-items: center; background: #fff; border-radius: 10px; padding: 14px 18px; max-width: calc(100% - 44px); box-shadow: 0 3px 12px rgb(0 0 0 / 4%); }
.preview-logo { display: block; object-fit: contain; width: 144px; max-width: 100%; height: 42px; }
.preview-gropyus .logo-plaque { background: #4848b2; }
.preview-sigmoid .logo-plaque { background: #132d4f; }
.preview-scholarship .logo-plaque { background: #282b33; }
.preview-education .preview-logo, .preview-kwoc .preview-logo { width: 66px; height: 66px; }
.preview-kwoc .preview-logo { width: 56px; height: 66px; object-fit: cover; object-position: left; }
.preview-education .logo-plaque, .preview-kwoc .logo-plaque { padding: 8px; background: transparent; box-shadow: none; }
.preview-regulation .preview-logo { width: 64px; height: 64px; }
.preview-regulation .logo-plaque { padding: 0; }
.preview-engineering .preview-logo { width: 56px; height: 56px; }
.preview-regulation .logo-plaque, .preview-engineering .logo-plaque { background: none; box-shadow: none; }
.preview-finnov .preview-logo { width: 96px; height: 48px; }
.preview-schooglink .preview-logo { width: 148px; height: 54px; }
.preview-regulation { background: #f4f1fc; color: #332a55; }
.preview-engineering { background: #eff2ff; color: #15214d; }
.preview-gropyus { background: #eeedf7; color: #393864; }
.preview-sigmoid { background: #eff4fb; color: #174793; }
.preview-amdocs { background: #fff0f1; color: #932645; }
.preview-education { background: #f7f3ed; color: #463527; }
.preview-finnov { background: #f0f2fb; color: #384669; }
.preview-scholarship { background: #fff2e9; color: #953e2a; }
.preview-hasura { background: #eff5fa; color: #1a4967; }
.preview-kwoc { background: #f8f5e9; color: #5e522a; }
.preview-acm { background: #edf5fc; color: #154b68; }
.preview-acm .preview-logo { width: 66px; height: 66px; }
.preview-ieee { background: #edf5fa; color: #00629b; }
.preview-ieee .logo-plaque { background: #00629b; }
.preview-schooglink { background: #edf6ef; color: #29595c; }
.preview-berlin { background: #17275d; color: #f5e8d1; }
.preview-pune { background: #fff0df; color: #713f38; }
.preview-bengaluru { background: #f3edf5; color: #40334f; }

.city-postcard .preview-scene { margin-top: 12px; margin-bottom: 14px; }

@media (max-width: 1199px) {
  body { font-size: .9375rem; line-height: 24px; }
}

@media (max-width: 359px) {
  body { padding-inline: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .project-preview { transition: none; transform: none; }
}