/* =========================================================
   MAGAZINE THEME — BASE
========================================================= */

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

html,body{margin:0;padding:0}

html{
  min-height:100%;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  background:
    linear-gradient(rgba(17,17,17,.022) 1px,transparent 1px),
    var(--bg);
  background-size:100% 32px;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
  margin-top:0;
  color:inherit;
  font-family:var(--font-title);
  line-height:1.05;
  letter-spacing:-.045em;
}

a{color:var(--link);text-decoration:none}
a:hover{text-decoration:none}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid rgba(215,25,32,.28);
  outline-offset:3px;
}

img,picture,video,canvas,svg,iframe{max-width:100%}
picture{display:block}
img,video{height:auto}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
table{border-spacing:0}
::selection{color:#fff;background:var(--mag-red)}
[hidden]{display:none!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}