a {
  color: #003087; }
a:hover {
  color: #001a5e; }
h4 {
  letter-spacing: .1rem; }
.container {
  max-width: 800px; }
.header {
  margin-top: 60px;
  margin-bottom: 60px; 
  text-align: left; }
.main-description h1 {
  margin-bottom: 0px; }
.main-description p {
  margin-bottom: 0px; }
.main-description .fa {
  font-size: 22px;
  margin-top: 5px; }
/*  ================ Publications  ================ */
.paper {
  margin-bottom: 28px;
  padding-left: 14px;
  border-left: 3px solid #eee;
  transition: border-color 0.2s ease; }
.paper:hover {
  border-left-color: #003087; }
.paper p {
  margin-bottom: 2px }
.paper .title {
  font-size: 1.6rem;
  line-height: 1.45;
  margin-bottom: 4px; }
.paper .title a {
  text-decoration: none; }
.paper .title a:hover {
  text-decoration: underline; }
.paper .authors {
  font-size: 1.35rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.65); }
.paper .venue {
  font-size: 1.35rem;
  color: rgba(0, 0, 0, 0.55); }
.paper-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 3px;
  background: #f0f2f7;
  color: #003087;
  font-size: 1.0rem;
  font-weight: 600;
  letter-spacing: .05rem;
  text-transform: uppercase;
  vertical-align: 1px; }
.paper-tag-accent {
  background: #003087;
  color: #fff; }
.paper-buttons {
  margin-top: 8px }
.paper .button {
  display: inline-block;
  height: 26px;
  padding: 0 14px;
  margin-right: 6px;
  margin-bottom: 6px;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .05rem;
  line-height: 26px;
  text-transform: none;
  color: #003087;
  border: 1px solid #d4dae8;
  border-radius: 3px;
  transition: all 0.15s ease; }
.paper .button:hover,
.paper .button:focus {
  color: #fff;
  background: #003087;
  border-color: #003087; }
.scholar-note {
  margin-top: 22px;
  font-size: 1.35rem;
  color: rgba(0, 0, 0, 0.55); }

/*  ================ Awards  ================ */
.award {
  display: table;
  width: 100%;
  margin-bottom: 20px; }
.award-year {
  display: table-cell;
  width: 105px;
  padding-top: 1px;
  vertical-align: top;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .05rem;
  color: #003087;
  white-space: nowrap; }
.award-body {
  display: table-cell;
  vertical-align: top;
  text-wrap: pretty; }
.award-body p {
  margin-bottom: 2px; }
.award-title {
  font-size: 1.5rem;
  line-height: 1.45; }
.award-amount {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 3px;
  background: #f0f2f7;
  color: #003087;
  font-size: 1.1rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: 1px; }
.award-org {
  font-size: 1.35rem;
  color: rgba(0, 0, 0, 0.65); }
.award-note {
  font-size: 1.3rem;
  color: rgba(0, 0, 0, 0.5); }

/* Stack the year above the entry on narrow screens */
@media screen and (max-width: 550px) {
  .award, .award-year, .award-body {
    display: block;
    width: auto; }
  .award-year {
    margin-bottom: 2px; }
}

/*  ================ Experience timeline  ================ */
/* timeline.css sets a fixed 800px width; keep it inside the container */
.timeline {
  max-width: 100%; }
.timeline .desc b {
  font-weight: 600; }

/* timeline.css leaves .flag as `display: inline`, so on a flag long enough to
   wrap, the ::before dot anchors to the first line box and lands in the middle
   of the text. inline-block gives it a single box to hang off. */
.timeline .flag {
  display: inline-block;
  /* long institution names otherwise push the date onto its own line */
  font-size: 0.9em;
  padding: 6px 8px; }

/* Several activities under one entry: separate the title/subtitle groups */
.timeline .desc-item + .desc-item {
  margin-top: 0.9em; }

/* Avoid orphans — a lone trailing word such as "PhD" on its own last line.
   Pulls an extra word down instead. Ignored by browsers that don't support it. */
.timeline .desc,
.timeline .flag,
.paper .title,
.paper .authors,
.paper .venue {
  text-wrap: pretty; }

/* timeline.css ships a purple dot/label; align them with the site's blue */
.timeline .flag:before {
  border-color: #003087; }
.timeline .time-wrapper {
  color: #003087; }

/* University programmes get a filled tile like the degree-span parent, in blue
   rather than the accent colour used for the medical degree. Opt in per entry
   with `filled: y` so e.g. secondary school keeps the plain grey treatment. */
.timeline .flag-filled {
  background: #003087;
  color: #fff; }
.timeline .direction-r .flag-filled:after {
  border-right-color: #003087; }
.timeline .direction-l .flag-filled:after {
  border-left-color: #003087; }

/*  Spanning entry: a degree that contains several stages.
    Parent sits on the right; its constituent stages stack on the left.
    Accent colour distinguishes it from the standard Oxford-blue entries.   */
.timeline-span {
  position: relative; }

/* Bracket drawn over the grey centre line: the vertical sits on the line and
   the arms reach left, so the whole group of stays reads as belonging to the
   degree labelled opposite. */
/* Accent segment of the timeline itself, marking the degree's span. A literal
   bracket was tried here but reads as a second parallel line over ~800px. */
.timeline-span:before {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: 1.2em;
  bottom: 1.2em;
  width: 6px;
  background: #8c2f39;
  border-radius: 3px;
  z-index: 6; }

/* Soft panel behind the stays, so they read as one group belonging to the
   degree labelled opposite. Deliberately NOT a :after pseudo-element —
   timeline.css uses li:after as the float clearfix. */
.timeline-span .span-panel {
  position: absolute;
  left: -14px;
  right: 50%;
  margin-right: 20px;
  top: 0.5em;
  bottom: 0.5em;
  background: rgba(140, 47, 57, 0.05);
  border-radius: 10px;
  pointer-events: none;
  z-index: 0; }
/* Keep the content above BOTH the panel and the accent rail. These create a
   stacking context, so the dots' own z-index is resolved inside it — the value
   here must therefore beat the rail's (6), or the rail paints over the dots.
   (span-parent is already positioned absolutely for the vertical centring.) */
.timeline-span .span-parent {
  z-index: 7; }
.timeline-span .span-children {
  position: relative;
  z-index: 7; }

/* Parent degree is lifted out of the float flow and centred vertically against
   the stack of stages on the left, so it reads as labelling the whole period. */
.timeline-span .span-parent {
  position: absolute;
  float: none;
  top: 50%;
  right: 0;
  width: 370px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%); }

/* The rail already marks the span, so the parent needs no dot of its own
   (a centred one would collide with whichever stage sits at mid-height). */
.timeline-span .span-parent .flag:before {
  display: none; }

/* Stack the nested stages instead of letting them float side by side */
.timeline-span .span-children .direction-l {
  clear: left;
  margin-bottom: 1.5em; }
.timeline-span .span-children .direction-l:last-child {
  margin-bottom: 0; }

/* Parent degree: filled accent flag */
.timeline-span .span-parent .flag {
  background: #8c2f39;
  color: #fff; }
.timeline-span .span-parent .flag:after {
  border-right-color: #8c2f39; }
.timeline-span .span-parent .time-wrapper {
  color: #8c2f39; }

/* Dots on the rail, in the accent colour and above it */
.timeline-span .flag:before {
  border-color: #8c2f39 !important;
  z-index: 11; }

/* Nested stages: lighter, visually subordinate to the parent */
.timeline-span .span-child .flag {
  background: #faf6f7;
  font-weight: 400; }
.timeline-span .span-child .flag:after {
  border-left-color: #faf6f7; }
.timeline-span .span-child .time-wrapper {
  color: #8c2f39; }
.timeline-span .span-child .time {
  background: #faf6f7; }
.timeline-span .span-child .desc {
  font-size: 0.72em;
  color: rgba(0, 0, 0, 0.68); }

/* On phones timeline.css stacks everything full-width and centred, so the
   absolutely-positioned parent must return to the normal flow. */
@media screen and (max-width: 660px) {
  .timeline-span .span-parent {
    position: static;
    width: 100%;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none; }
  .timeline-span .span-parent .flag:before {
    display: block; }
  .timeline-span .span-children {
    padding-top: 2em; }
  /* stacked layout points the flag's arrow downwards instead of sideways */
  .timeline .flag-filled:after {
    border-bottom-color: #003087; }
  .timeline-span .span-parent .flag:after {
    border-bottom-color: #8c2f39; }
  .timeline-span .span-child .flag:after {
    border-bottom-color: #faf6f7; }
}
.section-header {
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: .2rem;
  font-weight: 600; }
.docs-section {
  border-top: 1px solid #eee;
  padding: 4rem 0;
  margin-bottom: 0;}
.footer {
  text-align: center;
  color: rgba(0, 0, 0, 0.4);
  border-top: 1px solid #eee;
  padding: 15px 0 40px 0;
  margin-bottom: 0;}
.navbar {
  display: none; }
.title-subtitle h3 {
  margin-bottom: 0px; }
.title-subtitle h5 {
  color: rgba(0, 0, 0, 0.60); }
.image {
  text-align: center; }

/*  ================ Project styling  ================ */
.project-container {
  margin-bottom: 30px;
}
.project-image-container {
  border: 1px solid rgba(0,0,0,0.2);
  padding: 3px;
  transition: 0.3s;
}
.project-image-container:hover {
  transition: 0.3s;
}
.project-image-container:hover img {
  opacity: 0.4;
}
.project-caption {
  padding: 3px;
}

/* Larger than phone */
@media (min-width: 550px) {
  .header {
    margin-top: 5rem; }
}

/* Larger than tablet */
@media (min-width: 750px) {
  /* Navbar */
  .navbar + .docs-section {
    border-top-width: 0; }
  .navbar,
  .navbar-spacer {
    display: block;
    width: 100%;
    height: 6.5rem;
    background: #fff;
    z-index: 99;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee; }
  .navbar-spacer {
    display: none; }
  .navbar > .container {
    width: 100%; }
  .navbar-list {
    list-style: none;
    margin-bottom: 0; }
  .navbar-item {
    position: relative;
    float: left;
    margin-bottom: 0; }
  .navbar-link {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2rem;
    margin-right: 35px;
    text-decoration: none;
    line-height: 6.5rem;
    color: #222; }
  .navbar-link.active {
    color: #33C3F0; }
  .has-docked-nav .navbar {
    position: fixed;
    top: 0;
    left: 0; }
  .has-docked-nav .navbar-spacer {
    display: block; }
  /* Re-overiding the width 100% declaration to match size of % based container */
  .has-docked-nav .navbar > .container {
    width: 80%; }

  /* Popover */
  .popover.open {
    display: block;
  }
  .popover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    top: 92%;
    left: -50%;
    -webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
       -moz-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
            filter: drop-shadow(0 0 6px rgba(0,0,0,.1)); }
  .popover-item:first-child .popover-link:after, 
  .popover-item:first-child .popover-link:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none; }
  .popover-item:first-child .popover-link:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 10px;
    margin-left: -10px; }
  .popover-item:first-child .popover-link:before {
    border-color: rgba(238, 238, 238, 0);
    border-bottom-color: #eee;
    border-width: 11px;
    margin-left: -11px; }
  .popover-list {
    padding: 0;
    margin: 0;
    list-style: none; }
  .popover-item {
    padding: 0;
    margin: 0; }
  .popover-link {
    position: relative;
    color: #222;
    display: block;
    padding: 8px 20px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.0rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: .1rem; }
  .popover-item:first-child .popover-link {
    border-radius: 4px 4px 0 0; }
  .popover-item:last-child .popover-link {
    border-radius: 0 0 4px 4px;
    border-bottom-width: 0; }
  .popover-link:hover {
    color: #fff;
    background: #33C3F0; }
  .popover-link:hover,
  .popover-item:first-child .popover-link:hover:after {
    border-bottom-color: #33C3F0; }
}