/* The wooden desk (page background) and the dotted notebook sheet laid on it. */

/* min-height: the gradient tiles at the body's size, so a short body would show a seam.
   flow-root keeps the sheet's top margin inside the body, which would otherwise be 100vh + 40px.
   isolation: what sits under the sheet (z-index -1) stays above the body, so the tag tabs take clicks. */
body {
  display: flow-root;
  isolation: isolate;
  min-height: 100vh;
  background: repeating-linear-gradient(91deg, var(--wood) 0 14px, var(--wood-2) 14px 18px, var(--wood-3) 18px 40px, var(--wood) 40px 53px);
}

/* A column, so the footer sits at the foot of the sheet however short the page. */
.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 1040px;
  min-height: calc(100vh - 110px);
  margin: 40px auto 70px;
  padding: 44px 40px 64px 56px;
  box-sizing: border-box;
  border-radius: 6px;
  background-color: var(--paper);
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.4px);
  background-size: 20px 20px;
  box-shadow: 0 8px 26px var(--shadow);
  font-family: var(--f-body);
  font-size: 19px;
  line-height: 1.65;
}

main { flex: 1; }

/* Older sheets underneath: one turned slightly (::before), a third one drawn by its shadow.
   z-index -1 behind the sheet; first in the DOM, so the desk objects and the tag tabs stay above. */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  rotate: -.8deg;
  translate: -3px 5px;
  background: var(--paper-2);
  box-shadow: 9px 5px 0 -1px var(--paper-2), 9px 7px 12px -2px var(--shadow), 0 4px 10px var(--shadow);
}

@media (max-width: 1072px) {
  .sheet { margin-inline: 16px; }
}

@media (max-width: 980px) {
  .sheet { margin-inline: 12px; padding: 32px 20px 48px; }
}

/* Phones: the desk shrinks to a strip of wood above a full-width sheet. */
@media (max-width: 640px) {
  .sheet {
    min-height: calc(100vh - 54px);
    margin: 54px 0 0;
    padding: 26px 18px 30px;
    border-radius: 14px 14px 0 0;
    font-size: 18px;
  }
  .sheet::before { content: none; }
}