@charset "UTF-8";
/* ==========================================================================
   Robotics and Semantic Systems

   Matches www.robotics.lth.se (RobotLab LTH), which runs Lund University's
   current web design:

   - Near-black text on white. The profile bronze carries the site name,
     card headings and the current menu item; the menu sits in a light grey
     band and the footer is a dark charcoal band.
   - Adobe Garamond Pro for headings, Frutiger LT Std for body text, per LU's
     graphic profile. Both are licensed, so the stacks fall back to EB Garamond
     and Source Sans 3.
   - The hero and image cards carry a white caption box with a small label
     tag; flat cards alternate a pale blue and a pale beige panel. Headlines
     end in a circled chevron and buttons are outlined pills.
   ========================================================================== */
:root {
  --ink: #1d1d1b; /* headings and body text */
  --ink-soft: #4d4c44; /* LU dark grey, secondary text */
  --bronze: #9c6114; /* profile colour: site name, headings, accents */
  --bronze-deep:#7d4e10; /* darker bronze for the site name */
  --navy: #000080; /* profile colour, logotype */
  --footer: #31302e; /* the dark footer band */
  --panel: #dbe7f1; /* pale blue: flat info cards */
  --panel-warm: #ece8dc; /* pale beige: image cards and label tags */
  --strip: #efefee; /* main menu band */
  --paper: #ffffff;
  --rule: #d8d5cc;
  --rule-soft: #e8e6df;
  --serif: "Adobe Garamond Pro", "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --sans: "Frutiger LT Std", Frutiger, "Source Sans 3", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1180px;
  --text: 42rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.22;
  margin: 0 0 0.5em;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--bronze);
}

img, video, iframe, embed, object {
  max-width: 100%;
}

img, video {
  height: auto;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--paper);
  padding: 10px 16px;
  z-index: 10;
}

.skip:focus {
  left: 12px;
  top: 12px;
}

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--bronze);
  outline-offset: 2px;
}

/* Circled chevron after a panel headline, as on robotics.lth.se */
.chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.4em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 0.68em;
  line-height: 1;
  vertical-align: 0.12em;
}

/* Outlined pill button */
.btn {
  display: inline-block;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 9px 26px;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
}

.btn:hover {
  background: var(--ink);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   Masthead, navigation
   -------------------------------------------------------------------------- */
.masthead .wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding-top: 10px;
  padding-bottom: 22px;
}

.masthead-id {
  flex: 1 1 auto;
  min-width: 0;
}

.masthead-title {
  font-size: 34px;
  margin: 0;
  color: var(--bronze-deep);
}

.masthead-title a {
  color: var(--bronze-deep);
  text-decoration: none;
}

.masthead-title a:hover {
  color: var(--bronze-deep);
}

.masthead-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 8px 0 7px;
  max-width: 460px;
}

.masthead-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--bronze);
}

.masthead-tools {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-top: 8px;
}

.masthead-logo img {
  width: 190px;
}

.searchbox {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}

.searchbox input {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 8px 8px 16px;
  width: 176px;
}

.searchbox input:focus {
  outline: none;
}

.searchbox button {
  border: 0;
  border-radius: 999px;
  background: var(--bronze);
  color: var(--paper);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 20px;
  margin: 2px;
  cursor: pointer;
}

.searchbox button:hover {
  background: var(--bronze-deep);
}

.searchbox:focus-within {
  outline: 3px solid var(--bronze);
  outline-offset: 2px;
}

.mainnav {
  background: var(--strip);
}

.mainnav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mainnav-list > li > a {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.mainnav-list > li > a:hover {
  color: var(--bronze);
}

.submenu {
  margin: 0;
  list-style: none;
}

.submenu a {
  display: block;
  text-decoration: none;
}

.submenu a:hover {
  color: var(--bronze);
  text-decoration: underline;
}

/* Small-screen controls; shown only in the max-width: 900px block below. */
.nav-toggle,
.submenu-toggle,
.searchbox--nav {
  display: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Wide screens: one row of items with drop-down submenus. The breakpoint
   must match the one in assets/js/nav.js. */
@media (min-width: 901px) {
  .mainnav-list {
    display: flex;
    flex-wrap: wrap;
  }
  .mainnav-list > li {
    position: relative;
    margin-right: 34px;
  }
  .mainnav-list > li > a {
    padding: 13px 0;
    font-size: 13.5px;
    border-bottom: 3px solid transparent;
  }
  .mainnav-list > li.is-current > a {
    border-bottom-color: var(--bronze);
  }
  .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: -14px;
    z-index: 20;
    min-width: 270px;
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-top: 2px solid var(--bronze);
    padding: 8px 0;
    flex-direction: column;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  }
  .mainnav li:hover > .submenu,
  .mainnav li.is-open > .submenu {
    display: flex;
  }
  .submenu a {
    padding: 7px 18px;
    font-size: 14px;
  }
}
/* --------------------------------------------------------------------------
   Front page
   -------------------------------------------------------------------------- */
.home {
  padding-top: 24px;
}

/* Slideshow. Slides share one grid cell and crossfade, and the caption fades in
   after the photo. Arrows sit on the photo, and the bronze line along its
   bottom fills until the next slide. All motion is dropped under reduced
   motion. */
.hero {
  position: relative;
}

.hero-track {
  position: relative;
  display: grid;
  overflow: hidden;
  background: var(--panel-warm);
}

.slide {
  grid-area: 1/1;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s ease;
  z-index: 1;
}

.hero-media {
  overflow: hidden;
}

.hero-media img {
  display: block;
  width: 100%;
  height: 480px;
  object-fit: cover;
}

/* White caption box with a bronze edge, after robotics.lth.se */
.hero-caption {
  position: absolute;
  left: 0;
  bottom: 32px;
  max-width: min(34rem, 72%);
  background: rgba(255, 255, 255, 0.96);
  border-left: 4px solid var(--bronze);
  padding: 16px 28px 17px 22px;
  opacity: 0;
  transition: opacity 0.6s ease 0.3s;
}

.slide.is-active .hero-caption {
  opacity: 1;
}

.hero-caption h2 {
  font-size: 26px;
  line-height: 1.2;
  margin: 0;
}

.hero-caption a {
  color: var(--ink);
  text-decoration: none;
}

.hero-caption a:hover {
  text-decoration: underline;
}

.hero-tag {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background-color 0.2s ease;
}

.hero-arrow--prev {
  left: 18px;
}

.hero-arrow--next {
  right: 18px;
}

.hero-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-arrow:hover {
  background: var(--paper);
}

.hero-track:hover .hero-arrow,
.hero-arrow:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .hero-arrow {
    opacity: 1;
  }
}
.hero-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 3px;
}

.hero-progress span {
  display: block;
  height: 100%;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
}

.hero-progress.is-running span {
  animation: hero-progress var(--slide-time, 7s) linear forwards;
}

.hero.is-holding .hero-progress span {
  animation-play-state: paused;
}

@keyframes hero-progress {
  to {
    transform: scaleX(1);
  }
}
/* Card mosaic: image cards over a beige panel */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin: 52px 0 64px;
}

/* A card alone on its row (an odd card out) spans both columns. */
.card:last-child:nth-child(odd) {
  grid-column: 1/-1;
}

.card {
  background: var(--panel-warm);
}

.card-media {
  position: relative;
}

.card-media img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.card-body {
  padding: 20px 24px 24px;
}

.card h2 {
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--bronze);
}

.card h2 a {
  color: var(--bronze);
  text-decoration: none;
}

.card h2 a:hover {
  color: var(--bronze-deep);
  text-decoration: underline;
}

.card p {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--ink);
}

.card-body > :last-child {
  margin-bottom: 0;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--rule-soft);
  margin: 64px 0 4px;
  padding-bottom: 10px;
}

.section-head h2 {
  font-size: 24px;
  margin: 0;
}

.section-head a {
  font-size: 14px;
  text-decoration: none;
}

.section-head a:hover {
  text-decoration: underline;
}

.newsfeed {
  padding-bottom: 10px;
}

.news-item {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  border-bottom: 1px solid var(--rule-soft);
  padding: 22px 0;
  max-width: 54rem;
}

.news-thumb {
  flex: 0 0 190px;
}

.news-thumb img {
  display: block;
  width: 190px;
  height: 128px;
  object-fit: cover;
  background: var(--panel-warm);
}

.news-text {
  flex: 1 1 auto;
  min-width: 0;
}

.news-item h2 {
  font-size: 21px;
  margin-bottom: 3px;
}

.news-item h2 a {
  text-decoration: none;
}

.news-item h2 a:hover {
  text-decoration: underline;
}

.news-date {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

.news-item p {
  margin: 0;
  font-size: 15px;
}

.news-item .more {
  text-decoration: none;
  white-space: nowrap;
}

.news-item .more:hover {
  text-decoration: underline;
}

.pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 0 64px;
  font-size: 14px;
}

.pagination .count {
  margin-right: auto;
  color: var(--ink-soft);
}

.pagination a {
  text-decoration: none;
}

.pagination a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Inner pages
   -------------------------------------------------------------------------- */
.breadcrumb {
  font-size: 13px;
  padding: 16px 0 8px;
  color: var(--ink-soft);
}

.breadcrumb a {
  color: var(--ink-soft);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--bronze);
  text-decoration: underline;
}

.columns {
  display: flex;
  gap: 52px;
  align-items: flex-start;
  padding-bottom: 64px;
}

.sidebar {
  flex: 0 0 244px;
  padding-top: 10px;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar > ul > li {
  border-bottom: 1px solid var(--rule-soft);
}

.sidebar > ul > li > a {
  display: block;
  padding: 10px 0 10px 13px;
  border-left: 3px solid transparent;
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}

.sidebar > ul > li > a:hover {
  color: var(--bronze);
  border-left-color: var(--rule);
}

.sidebar > ul > li.is-current > a {
  border-left-color: var(--bronze);
  font-weight: 600;
}

.sidebar > ul > li.is-open > a {
  border-left-color: var(--bronze);
  font-weight: 600;
}

.sidebar .sub {
  padding: 0 0 8px 16px;
}

.sidebar .sub a {
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 1px solid var(--rule-soft);
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
}

.sidebar .sub a:hover {
  color: var(--bronze);
}

.sidebar .sub li.is-current > a {
  color: var(--ink);
  font-weight: 600;
}

.content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--text);
  overflow-wrap: break-word;
}

.page-title {
  font-size: 38px;
  margin: 6px 0 22px;
}

.post-image {
  margin: 0 0 22px;
}

.post-image img {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  background: var(--panel-warm);
}

.content h2 {
  font-size: 25px;
  margin-top: 38px;
}

.content h3 {
  font-size: 20px;
  margin-top: 30px;
}

.content h4 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  margin-top: 24px;
}

.content p {
  margin: 0 0 16px;
}

.content ul, .content ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.content li {
  margin-bottom: 7px;
}

.content .linklist {
  list-style: none;
  padding-left: 0;
}

.content .linklist li {
  margin-bottom: 12px;
}

.content .linklist a {
  font-family: var(--serif);
  font-size: 20px;
  text-decoration: none;
}

.content .linklist a:hover {
  text-decoration: underline;
}

.content--wide {
  max-width: none;
}

/* Robotlab banner */
.robotlab-banner {
  margin: 0 0 28px;
  background: #f8f6ef;
  border-bottom: 3px solid var(--bronze);
}

.robotlab-banner a {
  display: block;
}

.robotlab-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.robotlab-banner figcaption {
  padding: 14px 18px;
  color: var(--bronze-deep);
  font-size: 13px;
  letter-spacing: 0.035em;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: center;
}

.robotlab-banner figcaption span + span::before {
  content: "·";
  margin-right: 14px;
  color: #a9997e;
}

/* --------------------------------------------------------------------------
   People
   -------------------------------------------------------------------------- */
.people-count {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

/* Faculty section heading + its US/SE title toggle. */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.section-heading h2 {
  margin-bottom: 0;
}

.title-toggle {
  flex: 0 0 auto;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 11.5px;
  padding: 3px 12px;
  cursor: pointer;
}

.title-toggle:hover {
  border-color: var(--bronze);
  color: var(--bronze);
}

/* Faculty roles render both a US and an SE form (see
   _includes/faculty-role.html); title-convention.js toggles which one
   shows via a `.title-se` class on <body>. US is the default so no JS
   means no visible difference. */
.role-se {
  display: none;
}

.title-se .role-us {
  display: none;
}

.title-se .role-se {
  display: inline;
}

.content .people-grid {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
}

.content .person-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  background: var(--paper);
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.content .person-card:hover {
  border-color: var(--rule);
  box-shadow: 0 2px 10px rgba(29, 29, 27, 0.06);
}

.person-card-photo {
  display: block;
  align-self: flex-start;
}

.person-card-photo img {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--rule-soft);
}

.person-card-text {
  flex: 1 1 auto;
  min-width: 0;
}

.person-card h2 {
  font-size: 18px;
  margin: 0 0 2px;
  line-height: 1.3;
  color: var(--bronze);
}

.person-card h2 a {
  color: var(--bronze);
  text-decoration: none;
}

.person-card h2 a:hover {
  color: var(--bronze-deep);
  text-decoration: underline;
}

.person-card p {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.45;
}

.person-card-email a {
  color: var(--bronze);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.person-card-email a:hover {
  text-decoration: underline;
}

.person-card-role {
  color: var(--ink-soft);
  margin-bottom: 8px;
}

/* Group chips: the themes a person belongs to, linking to each theme page. */
.content .person-card-groups {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 8px;
  padding: 0;
}

.person-card-groups a {
  display: inline-block;
  font-size: 11.5px;
  color: var(--bronze-deep);
  background: var(--panel-warm);
  border-radius: 999px;
  padding: 2px 10px;
  text-decoration: none;
}

.person-card-groups a:hover {
  text-decoration: underline;
}

.person-card-desc {
  color: var(--ink-soft);
}

/* Opt-in personal page (_layouts/person.html): the photo beside role,
   groups and contact details. */
.person-head {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  margin-bottom: 26px;
}

.person-portrait {
  flex: 0 0 140px;
  width: 140px;
  height: 140px;
  object-fit: cover;
  background: var(--rule-soft);
}

.person-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.person-head .page-title {
  margin: 0 0 4px;
}

.person-role {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--ink-soft);
}

.content .person-groups {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
}

.person-groups a {
  display: inline-block;
  font-size: 12.5px;
  color: var(--bronze-deep);
  background: var(--panel-warm);
  border-radius: 999px;
  padding: 4px 13px;
  text-decoration: none;
}

.person-groups a:hover {
  text-decoration: underline;
}

.content .person-contact {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  font-size: 14px;
}

.person-contact li {
  margin-bottom: 2px;
}

.person-contact a {
  color: var(--bronze);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.person-contact a:hover {
  text-decoration: underline;
}

.content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 22px;
}

.content th, .content td {
  text-align: left;
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  font-size: 15px;
}

.content th {
  font-weight: 700;
  border-bottom-color: var(--rule);
}

/* Course tables on /education/courses/: fixed column widths so the tables
   under each heading line up, and the links in the Kurser and Canvas
   columns drawn as icons (the link text stays for screen readers). Tag a
   markdown table with {: .course-table}. */
.content table.course-table {
  table-layout: fixed;
}

.course-table th:nth-child(1) {
  width: 15%;
}

.course-table th:nth-child(2) {
  width: 61%;
}

.course-table th:nth-child(3),
.course-table th:nth-child(4) {
  width: 12%;
}

.content .course-table th:nth-child(n+3),
.content .course-table td:nth-child(n+3) {
  text-align: center;
  padding-left: 7px;
  padding-right: 7px;
}

.course-table td:nth-child(3) a,
.course-table td:nth-child(4) a {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  background-color: currentColor;
  -webkit-mask: var(--course-icon) center/contain no-repeat;
  mask: var(--course-icon) center/contain no-repeat;
}

.course-table td:nth-child(3) a {
  --course-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8M8 17h8'/%3E%3C/svg%3E");
}

.course-table td:nth-child(4) a {
  --course-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5 10-5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E");
}

.content blockquote {
  margin: 0 0 18px;
  padding-left: 18px;
  border-left: 3px solid var(--panel);
  font-family: var(--serif);
  font-size: 19px;
}

.content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--strip);
  padding: 2px 5px;
}

.content pre {
  background: var(--strip);
  border: 1px solid var(--rule-soft);
  padding: 15px;
  overflow-x: auto;
}

.content pre code {
  background: none;
  padding: 0;
}

.content hr {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  margin: 30px 0;
}

.page-manager {
  margin-top: 44px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
  font-size: 13px;
  color: var(--ink-soft);
}

.page-manager .sep {
  color: var(--rule);
  margin: 0 8px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--footer);
  color: var(--paper);
  padding: 44px 0 46px;
  font-size: 13px;
}

.site-footer a {
  color: var(--paper);
  text-decoration: underline;
}

.site-footer a:hover {
  color: var(--paper);
  text-decoration: none;
}

.site-footer h2 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--paper);
  margin: 0 0 8px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1.2fr 1fr;
  gap: 34px;
}

.footer-logo img {
  width: 170px;
}

.footer-block p {
  margin: 0 0 2px;
}

.footer-block ul {
  list-style: disc;
  margin: 0;
  padding-left: 18px;
}

.footer-block li {
  margin-bottom: 4px;
}

.footer-block .spaced {
  margin-top: 18px;
}

.to-top {
  display: inline-block;
  margin-top: 30px;
  font-size: 13px;
  text-decoration: none;
}

.to-top:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Masthead: site name, logotype and the Menu button on one row. The
     search box moves into the menu panel. */
  .masthead .wrap {
    align-items: center;
    gap: 14px;
    padding-top: 6px;
    padding-bottom: 14px;
  }
  .masthead-title {
    font-size: 27px;
    line-height: 1.15;
  }
  .masthead-rule {
    margin: 6px 0 5px;
  }
  .masthead-tools {
    padding-top: 0;
    gap: 0;
    flex: 0 0 auto;
  }
  .masthead-tools .searchbox {
    display: none;
  }
  .masthead-logo img {
    display: block;
    width: 130px;
  }
  .nav-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
  }
  .nav-toggle:hover {
    border-color: var(--bronze);
    color: var(--bronze-deep);
  }
  .nav-toggle svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
  .nav-toggle__close {
    display: none;
  }
  .nav-toggle[aria-expanded=true] {
    background: var(--strip);
    border-color: var(--bronze);
    color: var(--bronze-deep);
  }
  .nav-toggle[aria-expanded=true] .nav-toggle__open {
    display: none;
  }
  .nav-toggle[aria-expanded=true] .nav-toggle__close {
    display: inline;
  }
  /* Without JavaScript the button can't do anything and the menu stays open. */
  html:not(.js) .nav-toggle {
    display: none;
  }
  /* Menu panel: collapsed until the Menu button opens it. */
  .mainnav {
    border-top: 3px solid var(--bronze);
  }
  .js .mainnav {
    display: none;
  }
  .js .mainnav.is-expanded {
    display: block;
  }
  .mainnav > .wrap {
    padding-top: 2px;
    padding-bottom: 18px;
  }
  .mainnav-list > li {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--rule);
  }
  .mainnav-list > li > a {
    flex: 1 1 0;
    min-width: 0;
    padding: 13px 0 13px 12px;
    border-left: 3px solid transparent;
    font-size: 16px;
  }
  .mainnav-list > li.is-current > a {
    border-left-color: var(--bronze);
    font-weight: 600;
  }
  .submenu-toggle {
    display: inline-flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--rule-soft);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .submenu-toggle:hover {
    color: var(--bronze);
  }
  .submenu-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
  }
  .submenu-toggle[aria-expanded=true] svg {
    transform: rotate(180deg);
  }
  html:not(.js) .submenu-toggle {
    display: none;
  }
  .submenu {
    display: none;
    flex: 0 0 100%;
    flex-direction: column;
    padding: 0 0 10px 27px;
  }
  html:not(.js) .submenu,
  .mainnav li.is-expanded > .submenu {
    display: flex;
  }
  .submenu a {
    padding: 9px 0;
    font-size: 15px;
  }
  .submenu a[aria-current=page] {
    color: var(--bronze-deep);
    font-weight: 600;
  }
  .searchbox--nav {
    display: flex;
    margin-top: 18px;
  }
  .searchbox--nav input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-size: 16px;
    padding: 10px 8px 10px 16px;
  }
  .searchbox--nav button {
    font-size: 15px;
    padding: 8px 22px;
  }
  .hero-media img {
    height: 260px;
  }
  .hero-track {
    background: var(--paper);
  }
  .hero-caption {
    position: static;
    max-width: none;
    background: var(--paper);
    border-left: 0;
    border-bottom: 1px solid var(--rule-soft);
    padding: 14px 2px 14px;
  }
  .hero-caption h2 {
    font-size: 21px;
  }
  .hero-progress {
    bottom: auto;
    top: 257px;
  }
  .hero-arrow {
    width: 40px;
    height: 40px;
    top: 130px;
    margin-top: -20px;
  }
  .cards {
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 36px 0 48px;
  }
  .card-media img {
    height: 240px;
  }
  .content .people-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 28px;
  }
  .person-head {
    gap: 18px;
  }
  .person-portrait {
    flex-basis: 110px;
    width: 110px;
    height: 110px;
  }
  .news-item {
    flex-direction: column;
    gap: 12px;
  }
  .news-thumb, .news-thumb img {
    width: 100%;
    flex-basis: auto;
  }
  .news-thumb img {
    height: 180px;
  }
  /* Inner pages: the content comes first and the section menu follows it,
     so a phone opens on the page itself rather than a list of links. */
  .columns {
    flex-direction: column;
    gap: 28px;
  }
  .content {
    max-width: none;
    width: 100%;
  }
  .sidebar {
    order: 2;
    flex: 1 1 auto;
    width: 100%;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
  }
  .page-title {
    font-size: 30px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}
/* Wide tables scroll sideways inside the text column instead of pushing the
   whole page wider than the screen. */
@media (max-width: 700px) {
  .content table:not(.course-table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .content th, .content td {
    font-size: 14px;
  }
}
@media (max-width: 540px) {
  .wrap {
    padding: 0 16px;
  }
  .masthead .wrap {
    gap: 10px;
  }
  .masthead-title {
    font-size: 21px;
  }
  .masthead-sub {
    font-size: 11.5px;
  }
  .masthead-logo img {
    width: 92px;
  }
  .nav-toggle {
    width: 50px;
    height: 50px;
  }
  .hero-media img {
    height: 210px;
  }
  .hero-progress {
    top: 207px;
  }
  .hero-arrow {
    top: 105px;
  }
  .hero-caption h2 {
    font-size: 19px;
  }
  .card-media img {
    height: 200px;
  }
  .card-body {
    padding: 16px 18px 20px;
  }
  .section-head {
    flex-wrap: wrap;
    margin-top: 44px;
  }
  .news-thumb img {
    height: 160px;
  }
  .page-title {
    font-size: 27px;
  }
  .content h2 {
    font-size: 22px;
  }
  .content blockquote {
    font-size: 17px;
  }
  .robotlab-banner figcaption {
    font-size: 12px;
    padding: 12px 10px;
    gap: 5px 10px;
  }
  .robotlab-banner figcaption span + span::before {
    margin-right: 10px;
  }
  .content .people-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .person-head {
    flex-direction: column;
  }
  .person-portrait {
    width: 120px;
    height: 120px;
    flex-basis: auto;
  }
  .footer-top {
    grid-template-columns: 1fr;
  }
  .content table.course-table {
    table-layout: auto;
  }
  .course-table th:nth-child(n) {
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/*# sourceMappingURL=rss-theme.css.map */