/* Identidad compartida por la portada, el blog y la administración. */
:root {
  --brand-background: #e5e9df;
  --brand-paper: #f1eee5;
  --brand-ink: #3f473d;
  --brand-muted: #687066;
  --brand-olive: #596b59;
}
.site-logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  text-decoration: none;
}
.site-logo__frame {
  position: relative;
  display: block;
  width: 196px;
  height: 102px;
  overflow: hidden;
}
.site-logo__image {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 340px;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  mix-blend-mode: darken;
}
.site-logo:focus-visible { outline: 2px solid var(--brand-olive); outline-offset: 4px; }
@media (max-width: 620px) {
  .site-logo__frame { width: 190px; height: 90px; }
  .site-logo__image { width: 300px; }
}
@media (max-width: 380px) {
  .site-logo__frame { width: 154px; height: 78px; }
  .site-logo__image { width: 260px; }
}