/* Containers, grids, page scaffolding. */

.smt-site{display:flex;flex-direction:column;min-height:100vh}
.smt-main{flex:1 0 auto}
.smt-main:focus{outline:none}

.smt-container{
  width:100%;
  max-width:var(--w-default);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.smt-container--narrow{max-width:var(--w-narrow)}
.smt-container--wide{max-width:var(--w-wide)}

.smt-section{padding-block:var(--section-y)}

.smt-grid{display:grid;gap:var(--s-6)}
@media (min-width:640px){
  .smt-grid--2,.smt-grid--3,.smt-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .smt-grid--3{grid-template-columns:repeat(3,1fr)}
  .smt-grid--4{grid-template-columns:repeat(4,1fr)}
}

.smt-with-sidebar{display:grid;gap:var(--s-8)}
@media (min-width:1024px){
  .smt-with-sidebar{grid-template-columns:minmax(0,1fr) 320px}
}

.smt-prose{max-width:68ch}
.smt-prose > *{margin-inline:auto}
.smt-prose h2{margin-top:var(--s-8)}
.smt-prose h3{margin-top:var(--s-6)}
.smt-prose ul,.smt-prose ol{padding-left:var(--s-5)}
.smt-prose li{margin-bottom:var(--s-2)}

.smt-page-hero{
  background:var(--grad-brand-soft);
  padding-block:var(--s-9) var(--s-8);
  border-bottom:1px solid var(--c-border);
}
.smt-page-hero__title{margin:var(--s-4) 0 0}

.smt-archive-head{margin-bottom:var(--s-8);max-width:68ch}
.smt-archive-head__count{color:var(--c-text-muted);font-size:var(--t-sm)}

.smt-single__body{
  display:grid;
  gap:var(--s-8);
  padding-block:var(--s-8);
}
@media (min-width:1024px){
  .smt-single__body{grid-template-columns:260px minmax(0,1fr)}
  .smt-single__toc{position:sticky;top:calc(var(--header-h) + var(--s-5));align-self:start;max-height:calc(100vh - var(--header-h) - var(--s-8));overflow-y:auto}
}
.smt-single__head{padding-block:var(--s-8) var(--s-5)}
.smt-single__media{margin:0 0 var(--s-6)}
.smt-single__updated{font-size:var(--t-sm);color:var(--c-text-muted)}

.smt-404{text-align:center}
.smt-404__actions{margin-top:var(--s-6)}