/*
 * Static chrome and layout for Unequal Scenes. Loaded before behavior.css
 * (base.njk), which owns runtime states (page fade, lightbox, back-to-top
 * visibility toggling, grid spacer). This file never duplicates those rules.
 * Breakpoints: 932px (tablet) and 540px (phone), both max-width, matching
 * the measured live site (work/layout-values.txt).
 */

/* ---------------------------------------------------------------------- *
 * Custom properties
 * ---------------------------------------------------------------------- */
:root {
  --font-head: "futura-pt", "ftnk", "Futura PT", Futura, "Century Gothic", sans-serif;
  --font-body: "proxima-nova", "vcsm", "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  --c-dark: #222222;
  --c-mid: #999999;
  --c-hover: #666666;
  --c-btn: #2a9d8f;
  --c-btn-hover: rgba(33, 134, 122, 0.75);
  --max-content: 1400px;
  --max-text: 800px;
  /* Site styles (content/site/styles.yml) arrive as --s-bg, --s-text,
     --s-heading, --s-menu and --s-menu-active, and as new values of
     --c-btn, --c-btn-hover, --font-head, --font-body, --max-content and
     --max-text. Where a style is not set, the value written in this file
     applies. */
}

/* ---------------------------------------------------------------------- *
 * Reset / base
 * ---------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}
html {
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  background: var(--s-bg, #fff);
  font-family: var(--font-body);
  color: var(--s-text, #000);
}
/* Texts taken over from the old site name their fonts by Adobe Portfolio's
   internal names: "vcsm" is Proxima Nova, "ftnk" is Futura PT. No other font
   service knows those names, and without this rule such text falls back to
   the browser's serif font. */
[style*="font-family:vcsm"],
[style*="font-family: vcsm"] {
  font-family: var(--font-body) !important;
}
[style*="font-family:ftnk"],
[style*="font-family: ftnk"] {
  font-family: var(--font-head) !important;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  vertical-align: top;
  border: 0;
  max-width: 100%;
}
p {
  margin: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
h1, h2 {
  margin: 0;
  font-weight: 400;
}

/* ---------------------------------------------------------------------- *
 * Accessibility: skip link and focus rings
 * ---------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: var(--s-bg, #fff);
  color: var(--c-dark);
  padding: 14px 20px;
  font: 14px/1.4 var(--font-body);
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-btn);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------- *
 * Frame / layout
 * ---------------------------------------------------------------------- */
.frame {
  max-width: var(--max-content);
  margin: 0 auto;
}
.inner {
  width: 97%;
  margin: 0 1.5%;
}
.inner::after {
  content: "";
  display: table;
  clear: both;
}
.side {
  float: right;
  width: 25.5%;
  margin-left: 1.5%;
}
.main {
  float: right;
  width: 73%;
  position: relative;
}

@media (max-width: 932px) {
  /* The live site drops the 1.5% side gutter here (.site-content: margin 0,
     width 100%), so blocks run edge to edge on tablet and phone. */
  .inner {
    width: 100%;
    margin: 0;
  }
  .side {
    float: none;
    width: 100%;
    margin-left: 0;
  }
  .main {
    float: none;
    width: 100%;
  }
}

/* ---------------------------------------------------------------------- *
 * Masthead: logo + burger
 * ---------------------------------------------------------------------- */
.masthead {
  text-align: center;
}
.logo-wrap {
  width: 80%;
  margin: 0 auto;
  padding: 50px 0;
}
.logo {
  display: inline-block;
  /* Top alignment leaves no gap for descenders under the logo image. */
  vertical-align: top;
  font: 700 30px/35px var(--font-head);
  text-transform: uppercase;
  color: #333333;
  padding-right: 1.5%;
}
.logo:hover {
  color: var(--c-mid);
}
.logo img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.burger {
  display: none;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #000;
}
.burger span + span {
  margin-top: 4px;
}

@media (max-width: 932px) {
  /* As on the live site: the logo is centered in the full width with 39px
     kept free on both sides, and the burger sits on top at the right edge
     without taking space in the row. Live header height: 130px at an 800px
     screen, 90.4px at 390px. */
  .masthead {
    position: relative;
    padding: 40px 5%;
  }
  .logo-wrap {
    width: 100%;
    padding: 0;
  }
  .logo {
    display: block;
    padding: 0 39px;
    margin: -5px 0;
  }
  .logo img {
    max-height: 60px;
    width: auto;
  }
  .burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: content-box;
    width: 24px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    /* Tap area reaches the screen edge (63px wide at a 390px screen). */
    padding: 30px 5%;
  }
}
@media (max-width: 540px) {
  .masthead {
    padding: 30px 5%;
  }
}

/* ---------------------------------------------------------------------- *
 * Sidebar nav (desktop)
 * ---------------------------------------------------------------------- */
.nav {
  width: 80%;
  margin: 0 auto;
}
.nav .group {
  padding-bottom: 40px;
}
.group-title > a,
.item > a,
.nav-link > a {
  display: block;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.group-title > a {
  font: 700 14px/14px var(--font-head);
  text-transform: uppercase;
  color: var(--s-menu-active, var(--c-dark));
  padding-bottom: 20px;
}
.group-title > a:hover,
.group-title > a.active {
  color: var(--s-menu, var(--c-mid));
}
.item > a {
  font: 400 16px/20px var(--font-body);
  color: var(--s-menu, var(--c-mid));
  padding-bottom: 10px;
}
.item > a:hover,
.item > a.active {
  color: var(--s-menu-active, var(--c-dark));
}
.nav-link > a {
  font: 400 16px/16px var(--font-body);
  color: var(--s-menu, var(--c-mid));
  padding-bottom: 20px;
}
.nav-link > a:hover {
  color: var(--s-menu-active, var(--c-dark));
}

@media (max-width: 932px) {
  .side .nav {
    display: none;
  }
}

/* ---------------------------------------------------------------------- *
 * Social icons (shared by sidebar nav and the mobile overlay menu)
 * ---------------------------------------------------------------------- */
.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.social li {
  padding-bottom: 15px;
  padding-right: 15px;
}
.social li:first-child {
  padding-left: 0;
}
.social li:last-child {
  padding-right: 0;
}
.social svg,
.social .icon {
  width: 30px;
  height: 30px;
  fill: var(--s-menu, var(--c-mid));
  transition: fill 0.2s ease;
}
.social a:hover svg,
.social a:hover .icon {
  fill: var(--s-menu-active, var(--c-dark));
}

@media (max-width: 932px) {
  .social li {
    padding-right: 12px;
  }
}
@media (max-width: 540px) {
  .social li {
    padding-right: 10px;
  }
}

/* ---------------------------------------------------------------------- *
 * Mobile overlay menu
 * ---------------------------------------------------------------------- */
.menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--s-bg, #fff);
  flex-direction: column;
  padding: 50px 5% 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
html.menu-open {
  overflow: hidden;
}
html.menu-open body {
  overflow: hidden;
}
html.menu-open .menu {
  display: flex;
  opacity: 1;
}
html.menu-open .site {
  visibility: hidden;
}

.menu-close {
  position: fixed;
  top: 40px;
  right: 5%;
  width: 20px;
  height: 20px;
  padding: 30px 6%;
  margin: -30px -6% 0 0;
}
.menu-close::before,
.menu-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #000;
}
.menu-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.menu-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: 80px;
}
.menu-nav .group {
  padding-bottom: 0;
}
.menu-nav .group-title > a,
.menu-nav .item > a,
.menu-nav .nav-link > a {
  text-align: left;
  font: 400 22px/32px var(--font-body);
  color: var(--s-menu-active, var(--c-dark));
  padding-bottom: 30px;
}
.menu-nav .group-title > a {
  font-weight: 700;
  text-transform: uppercase;
}
.menu-nav .social {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  min-height: 80px;
  padding: 5%;
  background: var(--s-bg, #fff);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.menu-nav .social li {
  flex: 0 0 auto;
  padding-bottom: 0;
  padding-right: 20px;
}
.menu-nav .social li:last-child {
  padding-right: 0;
}
.menu-nav .social svg,
.menu-nav .social .icon {
  width: 42px;
  height: 30px;
}

@media (max-width: 540px) {
  .menu-close {
    top: 30px;
    padding: 40px 10%;
    margin: -40px -10% 0 0;
  }
}

/* ---------------------------------------------------------------------- *
 * Page header
 * ---------------------------------------------------------------------- */
.page-head {
  max-width: var(--max-text);
  margin: 0 auto;
  padding: 52px 0 12px;
  text-align: center;
}
.page-title {
  font: 400 50px/50px var(--font-head);
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
  padding-bottom: 20px;
  white-space: pre-wrap;
}
.page.narrow .page-head {
  max-width: none;
  width: 61%;
  padding-top: 65px;
  padding-bottom: 9px;
}

@media (max-width: 932px) {
  .page-head {
    padding: 24px 5% 10px;
  }
  .page-title {
    font-size: 31px;
    line-height: 31px;
    padding-bottom: 14px;
  }
  .page.narrow .page-head {
    width: 100%;
    padding: 29px 5% 8px;
  }
}
@media (max-width: 540px) {
  .page-head {
    padding-top: 21px;
  }
  .page-title {
    font-size: 25px;
    line-height: 25px;
    padding-bottom: 13px;
  }
  .page.narrow .page-head {
    padding-top: 25px;
    padding-bottom: 7px;
  }
}

/* ---------------------------------------------------------------------- *
 * Rich text (BUILD-SPEC 2.4: legacy vs clean default color)
 * ---------------------------------------------------------------------- */
.rich {
  font: 400 18px/26px var(--font-body);
  text-align: var(--align, center);
}
.rich.legacy {
  color: var(--c-mid);
}
.rich.clean {
  color: var(--s-text, #000000);
}
/* Every paragraph keeps the space below it, the last one too, as on the
   live site. Each line also carries the full body style itself. The old
   editor often put body lines inside a heading block, and there they must
   not take over its capitals, weight and font. Styles set on a single line
   or word in the editor still win. */
.rich p,
.rich div {
  margin: 0;
  padding: 0 0 20px;
  font: normal 400 18px/26px var(--font-body);
  letter-spacing: normal;
  text-transform: none;
  text-align: var(--align, center);
}
/* :where keeps these two rules weaker than the heading styles below. */
.rich:where(.legacy) p,
.rich:where(.legacy) div {
  color: var(--c-mid);
}
.rich:where(.clean) p,
.rich:where(.clean) div {
  color: var(--s-text, #000000);
}
/* Links in page text and captions are always underlined. */
.rich a {
  color: inherit;
  text-transform: none;
}
.rich a[href],
.caption a[href] {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rich a[href]:hover,
.caption a[href]:hover {
  filter: brightness(70%) saturate(120%) hue-rotate(5deg);
}
.rich .title {
  display: block;
  font: 400 70px/70px var(--font-head);
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
  padding: 5px 0;
}
.rich .sub-title {
  display: block;
  font: 500 20px/20px var(--font-head);
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
  padding: 20px 0 10px;
}
.rich .italic {
  font-style: italic;
}
.rich .underline {
  text-decoration: underline;
}
.rich .strikethrough {
  text-decoration: line-through;
}
.rich .bold {
  font-weight: 700;
}

.caption {
  font: 400 14px/18px var(--font-body);
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 15px;
}
/* As on the live site, each paragraph of a caption has the space above it
   and none below. The first one takes it from the caption box, so a caption
   typed as plain text has the same space. */
.caption.rich p,
.caption.rich div {
  padding: 15px 0 0;
  font-size: 14px;
  line-height: 18px;
}
.caption.rich > p:first-child,
.caption.rich > div:first-child {
  padding-top: 0;
}
.caption.legacy,
.caption.clean,
.caption.rich p,
.caption.rich div {
  color: var(--c-mid);
}

@media (max-width: 932px) {
  .rich,
  .rich p,
  .rich div {
    font-size: 14px;
    line-height: 20px;
  }
  .rich p,
  .rich div {
    padding-bottom: 14px;
  }
  .rich .title {
    font-size: 39px;
    line-height: 39px;
  }
  .rich .sub-title {
    font-size: 17px;
    line-height: 17px;
    padding-top: 14px;
    padding-bottom: 8px;
  }
  .caption {
    font-size: 14px;
    line-height: 20px;
    padding-top: 11px;
  }
  .caption.rich p,
  .caption.rich div {
    padding: 11px 0 0;
    font-size: 14px;
    line-height: 20px;
  }
  .caption.rich > p:first-child,
  .caption.rich > div:first-child {
    padding-top: 0;
  }
}
@media (max-width: 540px) {
  .rich,
  .rich p,
  .rich div,
  .rich span {
    font-size: 14px !important;
    line-height: 20px !important;
  }
  .rich p,
  .rich div {
    padding-bottom: 13px;
  }
  .rich .title,
  .rich .title span {
    font-size: 32px !important;
    line-height: 32px !important;
  }
  .rich .sub-title {
    padding-top: 13px;
    padding-bottom: 7px;
  }
  /* As on the live site, a heading and the words inside it share one size
     on phones, whatever was set on single words in the editor. */
  .rich .sub-title,
  .rich .sub-title span {
    font-size: 14px !important;
    line-height: 14px !important;
  }
  /* Body lines that sit inside a heading block keep the body spacing. */
  .rich .main-text span {
    line-height: 20px !important;
  }
  .caption {
    padding-top: 10px;
  }
  .caption.rich p,
  .caption.rich div {
    padding: 10px 0 0;
  }
  .caption.rich > p:first-child,
  .caption.rich > div:first-child {
    padding-top: 0;
  }
}

/* Narrow-header pages (about, exhibitions, honors, press, research):
   the "Title" rich-text style is re-tuned to a short, wide banner. */
.page.narrow .rich .title {
  font-size: 18px;
  line-height: 70px;
}
@media (max-width: 932px) {
  .page.narrow .rich .title {
    font-size: 14px;
    line-height: 54px;
  }
}
@media (max-width: 540px) {
  .page.narrow .rich .title,
  .page.narrow .rich .title span {
    font-size: 14px !important;
    line-height: 20px !important;
  }
}

/* ---------------------------------------------------------------------- *
 * Blocks
 * ---------------------------------------------------------------------- */
.blocks {
  overflow: hidden;
}

/* Photo */
figure {
  margin: 0;
}
.block.photo {
  margin: 0 auto;
  padding-bottom: 40px;
  max-width: 100%;
}
.photo img {
  display: block;
  width: 100%;
  height: auto;
  background: rgba(0, 0, 0, 0.03);
}
.photo .shot {
  display: block;
  position: relative;
}
.photo .js-zoom {
  cursor: zoom-in;
}

@media (max-width: 932px) {
  .block.photo {
    padding-bottom: 20px;
  }
}
@media (max-width: 540px) {
  .block.photo {
    padding-bottom: 18px;
  }
}

/* Text */
.block.text {
  max-width: var(--max-text);
  margin: 0 auto;
  padding: 20px 0 40px;
}
@media (max-width: 932px) {
  .block.text {
    max-width: none;
    padding: 14px 5% 20px;
  }
}
@media (max-width: 540px) {
  .block.text {
    padding: 13px 5% 18px;
  }
}

/* Button */
.block.button {
  text-align: center;
  padding: 20px 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  color: #ffffff;
  background-color: var(--c-btn);
  font: 700 18px var(--font-body);
  line-height: 40px;
  padding: 0 30px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  transition: background 0.2s ease;
}
.btn:hover {
  background: var(--c-btn-hover) !important;
}
@media (max-width: 932px) {
  .block.button {
    padding: 14px 5%;
  }
  .btn {
    font-size: 14px;
    line-height: 38px;
    padding: 0 29px;
  }
}
@media (max-width: 540px) {
  .btn {
    line-height: 35px;
    padding: 0 26px;
  }
}

/* Embed */
.block.embed {
  margin: 0 auto;
  padding-bottom: 40px;
  max-width: 100%;
}
.embed-size {
  margin: 0 auto;
}
.embed-box {
  position: relative;
}
.embed-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 932px) {
  .block.embed {
    padding-bottom: 20px;
  }
}
@media (max-width: 540px) {
  .block.embed {
    padding-bottom: 18px;
  }
}

/* Row (flex "tree"). All cells are as tall as the tallest one and their
   content starts at the top, as on the live site. */
.block.row {
  display: flex;
}
.cell {
  flex-basis: 0;
  flex-shrink: 1;
  min-width: 1px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  /* Same space below as a photo or video outside a row. */
  padding-bottom: 40px;
}
.cell:first-child {
  border-left: 0;
}
.cell:last-child {
  border-right: 0;
}
.cell img {
  display: block;
  width: 100%;
  height: auto;
}
.cell .rich {
  padding-bottom: 0;
}

@media (max-width: 932px) {
  .cell {
    padding-bottom: 20px;
  }
}
@media (max-width: 540px) {
  .block.row {
    display: block;
  }
  .cell {
    flex: none !important;
    border: 0;
    padding-bottom: 18px;
  }
}

/* Grid (justified gallery) */
.block.grid {
  padding-bottom: 40px;
  overflow: hidden;
}
.grid-main {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px;
}
.tile {
  /* The width set on a tile is the width of the photo; borders come on top. */
  box-sizing: content-box;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  border-bottom: 8px solid transparent;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.tile img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.filler {
  display: block;
  width: 100%;
}
.tile-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px 15px 10px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) 20px, rgba(0, 0, 0, 0.5));
  color: #fff;
  font: 400 14px/17px var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.tile:hover .tile-caption {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------- *
 * News strip (top of the home page and /projects)
 * ---------------------------------------------------------------------- */
.news {
  display: flex;
  align-items: baseline;
  margin: 0 0 3%;
  padding: 16px 0 14px;
  border-bottom: 1px solid #dddddd;
}
.news [hidden],
.news[hidden] {
  display: none;
}
.news-title {
  flex: none;
  width: 110px;
  margin: 0;
  font: 500 17px/24px var(--font-head);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
}
.news-body {
  flex: 1;
  min-width: 0;
}
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-item {
  display: flex;
  align-items: baseline;
  padding: 0 0 6px;
  font: 400 16px/24px var(--font-body);
  color: var(--c-dark);
}
.news-label {
  flex: none;
  width: 96px;
  font: 500 13px/24px var(--font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666666;
}
.news-text {
  color: inherit;
}
a.news-text,
.news-more {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a.news-text:hover,
.news-more:hover {
  color: var(--c-hover);
}
.news-more {
  position: relative;
  margin: 0 0 0 96px;
  padding: 0;
  border: 0;
  background: none;
  font: 400 14px/24px var(--font-body);
  color: #666666;
  cursor: pointer;
}
/* A finger needs more room than the 24px line. The area that reacts to a
   tap is 44px tall, the layout stays as it is. */
.news-more::after {
  content: "";
  position: absolute;
  top: -10px;
  right: 0;
  bottom: -10px;
  left: 0;
}
/* Below the desktop width the photos run to the edge of the screen, text
   does not. The line above separates the strip from the logo. */
@media (max-width: 932px) {
  .news {
    margin: 0 0 5%;
    padding-left: 20px;
    padding-right: 20px;
    border-top: 1px solid #dddddd;
  }
}
@media (max-width: 540px) {
  .news {
    display: block;
    margin: 0 0 6%;
    padding: 14px 16px 8px;
  }
  .news-title {
    width: auto;
    padding-bottom: 6px;
  }
  .news-item {
    display: block;
    padding-bottom: 8px;
    font-size: 15px;
    line-height: 21px;
  }
  .news-label {
    display: inline;
    width: auto;
    margin-right: 8px;
    line-height: 21px;
  }
  .news-more {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------- *
 * Gallery covers (home, /projects, and "related")
 * ---------------------------------------------------------------------- */
.covers {
  display: flex;
  flex-wrap: wrap;
  padding: 3px 0 14px;
}
.cover {
  display: block;
  position: relative;
  width: 49.25%;
  margin-right: 1.5%;
  margin-bottom: 3%;
  overflow: hidden;
}
.cover:nth-child(2n) {
  margin-right: 0;
}
.cover-box {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.cover-img {
  position: absolute;
  inset: 0;
}
.cover-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  transform: translate(-50%, -50%);
}
.cover-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cover:hover .cover-img::after {
  opacity: 0.3;
}
.cover-info {
  position: absolute;
  inset: 0;
  width: 91%;
  left: 50%;
  transform: translateX(-50%);
  padding: 5% 0;
  display: flex;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cover:hover .cover-info {
  opacity: 1;
}
.cover-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
}
.cover-text {
  width: 90%;
  text-align: center;
}
.cover-date {
  font: 400 20px/20px var(--font-head);
  text-transform: uppercase;
  color: var(--c-mid);
  padding-bottom: 20px;
}
.cover-title {
  font: 400 50px/50px var(--font-head);
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
}

@media (max-width: 932px) {
  .covers {
    padding: 5px 0 11px;
  }
  .cover {
    margin-bottom: 5%;
  }
  .cover-date {
    font-size: 17px;
    line-height: 17px;
    padding-bottom: 14px;
  }
  .cover-title {
    font-size: 31px;
    line-height: 31px;
  }
}
@media (max-width: 540px) {
  .covers {
    padding: 4px 0 10px;
  }
  .cover,
  .cover:nth-child(2n) {
    width: 100%;
    margin-right: 0;
    margin-bottom: 4%;
  }
  .cover-date {
    font-size: 14px;
    line-height: 14px;
    padding-bottom: 13px;
  }
  .cover-title {
    font-size: 25px;
    line-height: 25px;
  }
}

/* ---------------------------------------------------------------------- *
 * Related ("You may also like")
 * ---------------------------------------------------------------------- */
.related {
  padding-top: 40px;
}
.related-title {
  max-width: var(--max-text);
  margin: 0 auto 40px;
  font: 700 24px/24px var(--font-head);
  text-transform: uppercase;
  color: var(--s-heading, var(--c-dark));
  text-align: center;
}
.related-covers {
  display: flex;
  flex-wrap: wrap;
}
.related-covers .cover {
  width: 50%;
  margin-right: 0;
  margin-bottom: 0;
}
.related-covers .cover:nth-child(n+3) {
  display: none;
}
.related-covers .cover-info {
  width: 90%;
}
.related-covers .cover:hover .cover-img::after {
  opacity: 0;
}

@media (max-width: 932px) {
  .related {
    padding-top: 20px;
  }
  .related-title {
    font-size: 18px;
    line-height: 18px;
    margin-bottom: 20px;
    padding: 0 5%;
  }
}
@media (max-width: 540px) {
  .related {
    padding-top: 18px;
  }
  .related-title {
    font-size: 15px;
    line-height: 15px;
    min-height: 17px;
    margin-bottom: 18px;
  }
  /* One cover, as wide as the screen. */
  .related-covers .cover {
    width: 100%;
  }
  .related-covers .cover:nth-child(n+2) {
    display: none;
  }
}

/* ---------------------------------------------------------------------- *
 * Back to top (in-page link)
 * ---------------------------------------------------------------------- */
.to-top {
  padding: 60px 0;
  text-align: center;
}
.to-top .js-top {
  display: inline-block;
  font: 400 18px/18px var(--font-body);
  color: var(--c-mid);
}
.to-top .js-top:hover {
  color: var(--c-hover);
}
.to-top .arrow {
  margin-right: 10px;
}
@media (max-width: 932px) {
  .to-top {
    padding: 28px 0;
  }
  .to-top .js-top {
    font-size: 14px;
    line-height: 14px;
  }
}
@media (max-width: 540px) {
  .to-top {
    padding: 25px 0;
  }
  .to-top .js-top {
    font-size: 14px;
    line-height: 20px;
  }
}