/* THE SLEEPER ARCHIVE — FINAL RECORD LAYOUT v9
   One authoritative presentation layer for all 50 Record essays.
*/

.sa-r-editorial{
  display:grid !important;
  grid-template-columns:minmax(0,720px) 250px !important;
  grid-template-areas:
    "hero art"
    "prose prose" !important;
  column-gap:46px !important;
  row-gap:38px !important;
  align-items:start !important;
  width:100% !important;
}

.sa-r-reading-column{
  display:contents !important;
}

.sa-r-editorial .sa-r-hero{
  grid-area:hero !important;
  display:block !important;
  width:100% !important;
  max-width:720px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 0 30px !important;
  border-bottom:1px solid #4e412d !important;
}

.sa-r-art-column{
  grid-area:art !important;
  position:static !important;
  width:250px !important;
  max-width:250px !important;
  height:auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  align-self:start !important;
  justify-self:end !important;
}

.sa-r-art-column .sa-r-figure{
  position:static !important;
  display:block !important;
  width:250px !important;
  max-width:250px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
}

.sa-r-art-column .sa-r-figure > a{
  display:block !important;
  width:250px !important;
  height:350px !important;
  overflow:hidden !important;
  background:#080806 !important;
  border:1px solid #675536 !important;
  border-radius:2px !important;
  box-shadow:0 14px 34px rgba(0,0,0,.40) !important;
}

.sa-r-art-column .sa-r-figure img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:scale(1.012) !important;
  transform-origin:center center !important;
  clip-path:none !important;
}

.sa-r-art-column .sa-r-figure figcaption{
  margin:10px 0 0 !important;
  padding:0 !important;
  color:#8f7a57 !important;
  font:10px/1.4 Arial,sans-serif !important;
  letter-spacing:.03em !important;
}

.sa-r-editorial .sa-r-prose{
  grid-area:prose !important;
  width:100% !important;
  max-width:760px !important;
  min-width:0 !important;
  margin:0 auto !important;
  padding:0 !important;
  justify-self:center !important;
}

.sa-r-source,
.sa-r-related,
.sa-r-pagination{
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(min-width:781px) and (max-width:1100px){
  .sa-r-editorial{
    grid-template-columns:minmax(0,1fr) 220px !important;
    column-gap:32px !important;
  }

  .sa-r-art-column,
  .sa-r-art-column .sa-r-figure{
    width:220px !important;
    max-width:220px !important;
  }

  .sa-r-art-column .sa-r-figure > a{
    width:220px !important;
    height:310px !important;
  }
}

@media(max-width:780px){
  .sa-r-editorial{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "hero"
      "art"
      "prose" !important;
    row-gap:30px !important;
  }

  .sa-r-reading-column{
    display:contents !important;
  }

  .sa-r-editorial .sa-r-hero{
    grid-area:hero !important;
    max-width:none !important;
  }

  .sa-r-art-column{
    grid-area:art !important;
    width:100% !important;
    max-width:none !important;
    justify-self:stretch !important;
    position:static !important;
  }

  .sa-r-art-column .sa-r-figure{
    width:min(70vw,280px) !important;
    max-width:280px !important;
    margin:0 auto !important;
    position:static !important;
  }

  .sa-r-art-column .sa-r-figure > a{
    width:100% !important;
    height:auto !important;
    aspect-ratio:5/7 !important;
    overflow:hidden !important;
  }

  .sa-r-art-column .sa-r-figure img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  .sa-r-editorial .sa-r-prose{
    grid-area:prose !important;
    width:100% !important;
    max-width:700px !important;
    margin:0 auto !important;
  }
}