/* ---------- Diary paper: a slightly crumpled sheet with a dot grid, behind the whole site ---------- */
:root {
  --paper-image: url("../images/paper/paper-dark.jpg");
  --paper-color: #101010;
  --dot: rgba(210, 197, 175, .11);
  --dot-gap: 22px;
}
html[data-theme="light"] {
  --paper-image: none;              /* plain white, like the old site */
  --paper-color: #FFFFFF;
  --dot: rgba(19, 21, 22, .14);
}

html, body, body.body {
  background-color: var(--paper-color) !important;
  background-image: none !important;     /* plain background: no dots, no texture */
}

/* the full-width layers that used to paint solid colours now let the paper through */
.page-wrapper, .page-wrapper.padding-none, section.page-wrapper.project-padding,
.main-wrapper, .bg-dark-blk, .footer-section { background-color: transparent !important; }

/* sections still read as separate parts of the page */
.footer-section { border-top: 1px solid color-mix(in srgb, var(--dot) 120%, transparent); }

/* case studies: the fixed Back bar becomes frosted paper so text scrolling underneath stays out of the way */
.header-m {
  background-color: color-mix(in srgb, var(--paper-color) 78%, transparent) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}